/* ─────────────────────────────────────────────────────────────────
   ClipCatch · design tokens + shared utilities
   Deep-space background, glass cards, electric cyan accents.
   Matches the new in-app aesthetic — Hello-style sphere energy with
   ClipCatch's blue palette, restrained but intensely saturated where
   color appears.
   ───────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* ── Surfaces ───────────────────────────────────────── */
  /* Deep saturated navy, identical to the app's D1AmbientBackground
     base. Reads as a glowing blue space, not near-black. */
  --bg:         oklch(0.110 0.050 263);
  --bg-deep:    oklch(0.100 0.045 268);
  --bg-inset:   oklch(0.085 0.040 263);
  /* Translucent floating surfaces — the ambient glow behind them
     bleeds through subtly, so they read as "lit from within". */
  --bg-card:    oklch(0.135 0.055 258 / 0.72);
  --bg-elev:    oklch(0.165 0.060 258 / 0.85);

  /* ── Text ───────────────────────────────────────────── */
  --fg:         oklch(0.978 0.006 258);
  --fg-mute:    oklch(0.730 0.015 258);
  --fg-faint:   oklch(0.510 0.018 258);
  --fg-dim:     oklch(0.360 0.018 258);

  /* ── Lines / hairline borders ───────────────────────── */
  --line:       oklch(1 0 0 / 0.07);
  --line-soft:  oklch(1 0 0 / 0.04);
  --line-glow:  oklch(0.78 0.18 245 / 0.22);

  /* ── Accent — electric cyan (matches the M3-2 logo dot) ─ */
  --cyan:       oklch(0.78 0.18 245);
  --cyan-soft:  oklch(0.78 0.18 245 / 0.16);
  --cyan-glow:  oklch(0.78 0.18 245 / 0.55);

  /* ── Primary CTA — deep electric blue ─────────────────── */
  --rec:        oklch(0.62 0.22 258);
  --rec-soft:   oklch(0.62 0.22 258 / 0.16);
  --rec-glow:   oklch(0.62 0.22 258 / 0.65);

  /* ── Acid green — live / matching ─────────────────────── */
  --match:      oklch(0.84 0.20 145);
  --match-soft: oklch(0.84 0.20 145 / 0.16);
  --match-glow: oklch(0.84 0.20 145 / 0.45);

  /* ── Coral red — alert / divergent ────────────────────── */
  --alert:      oklch(0.70 0.22 22);
  --alert-soft: oklch(0.70 0.22 22 / 0.16);

  /* ── Deep purple — secondary accent ───────────────────── */
  --purple:     oklch(0.55 0.22 290);
  --purple-soft:oklch(0.55 0.22 290 / 0.16);

  /* ── Type ───────────────────────────────────────────── */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
}

/* ── Base document ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-deep);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
}
body {
  min-height: 100vh;
  /* Three layered radial glows — same values as the app's
     D1AmbientBackground.  Top-right blue, bottom-left blue, soft
     center accent. Page never goes near-black; it stays a deep
     saturated blue all the way to the edges, the way the recorder
     screen does. */
  background:
    radial-gradient(ellipse 1200px 900px at 92% -5%,
      oklch(0.40 0.20 263 / 0.55), transparent 60%),
    radial-gradient(ellipse 1100px 1000px at -5% 105%,
      oklch(0.28 0.16 263 / 0.55), transparent 60%),
    radial-gradient(ellipse 900px 700px at 50% 40%,
      oklch(0.60 0.20 258 / 0.42), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
}

::selection { background: var(--rec); color: #fff; }
a { color: inherit; }

.mono { font-family: var(--mono); font-feature-settings: "tnum", "zero"; }

/* ── Inline SVG icon baseline ──────────────────────────── */
.i {
  display: inline-block;
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────
   Buttons — cinematic glow, glass surface
   ───────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; white-space: nowrap;
  cursor: pointer; user-select: none;

  height: 38px; padding: 0 16px;
  border-radius: 10px;

  font: inherit;
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);

  background: var(--bg-card);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 0 0 0.5px var(--line),
    inset 0 1px 0 oklch(1 0 0 / 0.05),
    0 1px 0 rgba(0,0,0,0.25);

  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease,
    filter 0.18s ease;
}
.btn:hover {
  background: var(--bg-elev);
  box-shadow:
    inset 0 0 0 0.5px oklch(1 0 0 / 0.18),
    inset 0 1px 0 oklch(1 0 0 / 0.06),
    0 8px 24px -10px oklch(0.65 0.18 245 / 0.45);
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 0.5px oklch(1 0 0 / 0.16),
    0 0 0 3px var(--cyan-soft);
}

.btn-xl {
  height: 56px; padding: 0 26px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
}

/* .btn-rec — primary CTA, electric blue with deep glow */
.btn-rec {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; white-space: nowrap;
  cursor: pointer; user-select: none;

  height: 38px; padding: 0 18px;
  border-radius: 10px;

  font: inherit;
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;

  background: linear-gradient(180deg,
    oklch(0.72 0.20 250) 0%,
    oklch(0.50 0.24 258) 100%);

  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.32),
    inset 0 0 0 0.5px oklch(0.45 0.22 258),
    0 10px 32px -6px var(--rec-glow),
    0 0 0 1px oklch(0.30 0.18 258 / 0.3),
    0 1px 0 rgba(0,0,0,0.20);

  transition:
    filter 0.18s ease,
    transform 0.1s ease,
    box-shadow 0.18s ease;
}
.btn-rec:hover  {
  filter: brightness(1.10) saturate(1.05);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.32),
    inset 0 0 0 0.5px oklch(0.45 0.22 258),
    0 14px 38px -6px var(--rec-glow),
    0 0 0 1px oklch(0.30 0.18 258 / 0.35),
    0 1px 0 rgba(0,0,0,0.20);
}
.btn-rec:active { transform: translateY(0.5px); }
.btn-rec:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.32),
    inset 0 0 0 0.5px oklch(0.45 0.22 258),
    0 0 0 3px oklch(0.65 0.20 258 / 0.45);
}

.btn-rec.live {
  background: linear-gradient(180deg,
    oklch(0.78 0.18 245) 0%,
    oklch(0.55 0.22 258) 100%);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.34),
    inset 0 0 0 0.5px oklch(0.45 0.22 258),
    0 12px 36px -4px var(--cyan-glow),
    0 0 0 1px oklch(0.30 0.18 258 / 0.35),
    0 1px 0 rgba(0,0,0,0.20);
}
.btn-rec.live:focus-visible {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.34),
    inset 0 0 0 0.5px oklch(0.45 0.22 258),
    0 0 0 3px oklch(0.78 0.18 245 / 0.45);
}

/* Timer slug */
.btn-rec .timer {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 0.5px solid oklch(1 0 0 / 0.35);
  color: oklch(1 0 0 / 0.92);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   Pulse indicator
   ───────────────────────────────────────────────────────── */
.pulse {
  position: relative;
  display: inline-grid; place-items: center;
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.pulse .circ,
.pulse .sq {
  display: block;
  width: 8px; height: 8px;
  background: #fff;
  box-shadow: 0 0 0 0 oklch(1 0 0 / 0.55);
}
.pulse .circ {
  border-radius: 50%;
  animation: pulseRing 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
.pulse .sq {
  border-radius: 2px;
  animation: pulseFlash 1.2s ease-in-out infinite;
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0   oklch(1 0 0 / 0.55); }
  70%  { box-shadow: 0 0 0 10px oklch(1 0 0 / 0);   }
  100% { box-shadow: 0 0 0 0   oklch(1 0 0 / 0);    }
}
@keyframes pulseFlash {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.55; transform: scale(0.92); }
}

/* ─────────────────────────────────────────────────────────
   Signature orb — the centerpiece visual.
   A glassy, multi-layered 3D sphere with cyan-blue gradients,
   specular highlight, soft halo. Slow rotation for breath.

   Markup:
     <div class="orb">
       <div class="orb-halo"></div>
       <div class="orb-core">
         <div class="orb-spec"></div>
         <div class="orb-rim"></div>
       </div>
       <div class="orb-ring"></div>
     </div>
   ───────────────────────────────────────────────────────── */

.orb {
  position: relative;
  width: 280px; height: 280px;
  display: grid; place-items: center;
  transform: translateZ(0);  /* enable subpixel filter rendering */
}

.orb-halo {
  position: absolute; inset: -14%;
  background:
    radial-gradient(circle, var(--cyan-glow) 0%, transparent 55%);
  filter: blur(28px);
  opacity: 0.85;
  animation: orb-breathe 5.5s ease-in-out infinite;
  pointer-events: none;
}

.orb-core {
  position: relative;
  width: 76%; height: 76%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      oklch(1 0 0 / 0.92) 0%,
      oklch(0.92 0.10 220) 8%,
      oklch(0.72 0.18 240) 22%,
      oklch(0.45 0.22 248) 48%,
      oklch(0.18 0.16 258) 78%,
      oklch(0.04 0.06 260) 100%);
  box-shadow:
    inset 0 0 60px oklch(0 0 0 / 0.55),
    inset 0 -22px 36px oklch(0.05 0.10 260 / 0.6),
    0 18px 60px -10px oklch(0.40 0.22 258 / 0.55),
    0 0 0 0.5px oklch(0.78 0.18 245 / 0.18);
  animation: orb-spin 28s linear infinite;
}

.orb-spec {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%,
      oklch(1 0 0 / 0.55) 0%,
      transparent 25%),
    radial-gradient(ellipse at 70% 88%,
      oklch(0.78 0.18 245 / 0.45) 0%,
      transparent 35%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.orb-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 0.5px oklch(1 0 0 / 0.22),
    inset 0 0 24px oklch(0.78 0.18 245 / 0.18);
  pointer-events: none;
}

.orb-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid oklch(0.78 0.18 245 / 0.30);
  box-shadow:
    0 0 24px oklch(0.78 0.18 245 / 0.20),
    inset 0 0 18px oklch(0.78 0.18 245 / 0.10);
  animation: orb-rotate 16s linear infinite;
  pointer-events: none;
}

@keyframes orb-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1.0); }
  50%      { opacity: 1.00; transform: scale(1.04); }
}
@keyframes orb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orb-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ─────────────────────────────────────────────────────────
   Glass card — a generic translucent surface for
   hovering / floating elements (pricing, FAQ, etc.)
   ───────────────────────────────────────────────────────── */

.glass {
  background: var(--bg-card);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 0.5px var(--line),
    inset 0 1px 0 oklch(1 0 0 / 0.06),
    0 24px 48px -24px rgba(0,0,0,0.5);
}

.glass-glow {
  background: var(--bg-card);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 0.5px var(--line-glow),
    inset 0 1px 0 oklch(1 0 0 / 0.08),
    0 30px 60px -30px var(--rec-glow);
}

/* ─────────────────────────────────────────────────────────
   Stat number — clinical dashboard typography
   ───────────────────────────────────────────────────────── */

.stat-num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-shadow: 0 0 24px oklch(0.78 0.18 245 / 0.25);
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pulse .circ,
  .pulse .sq,
  .orb-core, .orb-ring, .orb-halo,
  * { animation: none !important; transition-duration: 0.01ms !important; }
}