/* ── Ambient atmosphere ─────────────────────────────────────── */
.ambient-blob {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  z-index: var(--z-ambient);
}
.ambient-blob--accent {
  width: 640px; height: 640px;
  background: rgba(61, 220, 151, 0.05);
  top: -220px; left: -120px;
  animation: drift-accent 38s var(--ease-out) infinite alternate;
}
.ambient-blob--info {
  width: 540px; height: 540px;
  background: rgba(79, 163, 227, 0.045);
  bottom: -180px; right: -80px;
  animation: drift-info 46s var(--ease-out) infinite alternate;
}
/* Dot-grid texture, fades out below the hero */
.ambient-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-ambient);
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 68%);
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 68%);
}

/* ── Glass panel (base) ─────────────────────────────────────── */
.glass-panel {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel { background: rgba(17, 21, 29, 0.95); }
}

/* ── Gradient-hairline card (signature surface) ─────────────── */
.g-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.028) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.g-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.05) 38%,
    rgba(255,255,255,0.03) 62%,
    rgba(61,220,151,0.14) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.g-card--accent::before {
  background: linear-gradient(165deg,
    rgba(61,220,151,0.55) 0%,
    rgba(61,220,151,0.12) 40%,
    rgba(255,255,255,0.05) 70%,
    rgba(79,163,227,0.3) 100%);
}
.g-card--interactive {
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.g-card--interactive:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%);
  box-shadow: var(--shadow-2);
}
.g-card--interactive:active { transform: translateY(-1px) scale(0.985); }
.g-card--interactive:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }

/* ── Icon chips ─────────────────────────────────────────────── */
.icon-chip {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.icon-chip--accent { background: rgba(61,220,151,0.1);  border-color: rgba(61,220,151,0.22);  color: var(--accent); }
.icon-chip--info   { background: rgba(79,163,227,0.1);  border-color: rgba(79,163,227,0.22);  color: var(--info); }
.icon-chip--warn   { background: rgba(239,161,59,0.1);  border-color: rgba(239,161,59,0.22);  color: var(--warn); }
.icon-chip--danger { background: rgba(226,75,74,0.1);   border-color: rgba(226,75,74,0.22);   color: var(--danger); }
.icon-chip--muted  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--tx-2); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: #0B0E13;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 13px 26px;
  border-radius: 12px;
  border: none;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(61,220,151,0.25);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:hover { background: #52E3A4; box-shadow: 0 6px 28px rgba(61,220,151,0.35); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--tx-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { background: var(--glass-hover); color: var(--tx-1); }
.btn-ghost:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font-body);
}
.badge--success { background: rgba(61,220,151,0.12); color: var(--accent); border: 1px solid rgba(61,220,151,0.25); }
.badge--warn    { background: rgba(239,161,59,0.12); color: var(--warn);   border: 1px solid rgba(239,161,59,0.25); }
.badge--info    { background: rgba(79,163,227,0.12); color: var(--info);   border: 1px solid rgba(79,163,227,0.25); }

/* ── Diagnostic dots ────────────────────────────────────────── */
.diag-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.diag-dot--green  { background: var(--accent); box-shadow: 0 0 6px rgba(61,220,151,0.6); }
.diag-dot--red    { background: var(--danger); }
.diag-dot--yellow { background: var(--warn); }

/* ── Device frame (shared with hero) ────────────────────────── */
.device-shell {
  position: relative;
  border-radius: 34px;
  background: #05070A;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    var(--shadow-3),
    var(--glow-accent);
  padding: 10px;
}
.device-shell::after {
  content: '';
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.09);
}
.device-shell img {
  display: block;
  width: 100%; height: auto;
  border-radius: 24px;
}

/* ── Legacy feature card (kept for compat) ──────────────────── */
.feature-card {
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-out);
}
.feature-card:hover { background: var(--glass-hover); transform: translateY(-3px); }
.feature-card:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }