/* MeaUnda: custom layer on top of Tailwind
   Only things Tailwind utilities cannot express live here. */

:root {
  --ink: #05070e;
  --drop: #38bdf8;
  --mint: #2dd4bf;
  --bug: #fb7185;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #05070e; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#1e293b, #0f172a);
  border-radius: 99px;
  border: 3px solid #05070e;
}
::-webkit-scrollbar-thumb:hover { background: #334155; }

::selection { background: rgba(56, 189, 248, .3); color: #fff; }

/* ---------- Scroll reveal ----------
   Everything is gated on .js on <html>: the class is set by an inline script and
   removed again if site.js has not reported in. Without working JS the content
   is simply visible; it is never hidden by CSS alone. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.7,.24,1), transform .75s cubic-bezier(.22,.7,.24,1);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-34px); }
.js [data-reveal="right"] { transform: translateX(34px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="blur"]  { filter: blur(10px); transform: translateY(18px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
}

/* ---------- Aurora background blobs ---------- */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none !important; }
}

/* ---------- Fine grain / noise overlay ---------- */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Glass card ---------- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.glass-hover { transition: border-color .35s, transform .35s, background .35s; }
.glass-hover:hover {
  border-color: rgba(56,189,248,.4);
  transform: translateY(-3px);
}

/* Gradient hairline border via mask */
.ring-gradient { position: relative; }
.ring-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(56,189,248,.55), rgba(45,212,191,.16) 40%, rgba(255,255,255,.04) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Gradient text ---------- */
.text-grad {
  background: linear-gradient(100deg, #ffffff 0%, #bae6fd 42%, #38bdf8 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-mint { background: linear-gradient(100deg, #ffffff, #99f6e4 45%, #2dd4bf 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-grad-bug  { background: linear-gradient(100deg, #ffffff, #fecdd3 45%, #fb7185 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* A background-clip:text shimmer used to live here, on the pre-release badge.
   It was invisible (an opaque glyph fill paints over the clipped gradient), and
   making it visible would need a transparent text fill, which would drop that
   12px label to ~2.3:1 at its brightest and to nothing at its dimmest. The
   badge keeps a solid drop-200 fill (10:1) and its pulsing dot instead. */

/* ---------- Word-by-word headline reveal ---------- */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.7em) rotate(3deg);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.word.is-in { opacity: 1; transform: none; }
html:not(.js) .word { opacity: 1; transform: none; }

/* ---------- Sound rings behind the hero phone ---------- */
.sound-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,.35);
  animation: ripple 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}

/* ---------- Phone frame ---------- */
.phone-shell {
  position: relative;
  transition: transform .8s cubic-bezier(.16,.9,.2,1);
  transform-style: preserve-3d;
}
.phone-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(56,189,248,.34), transparent 72%);
  filter: blur(38px);
  z-index: -1;
}
.phone-glow-mint::before { background: radial-gradient(closest-side, rgba(45,212,191,.34), transparent 72%); }
.phone-glow-bug::before  { background: radial-gradient(closest-side, rgba(251,113,133,.34), transparent 72%); }

/* ---------- Progressive feature list ---------- */
.js .feat-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.js .feat-item.is-in { opacity: 1; transform: none; }
.feat-item .feat-bar {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .7s cubic-bezier(.2,.8,.2,1) .1s;
}
.feat-item.is-in .feat-bar { transform: scaleY(1); }

/* ---------- Vertical timeline drawing line ---------- */
.timeline-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(.3,.7,.3,1);
}
.timeline-line.is-in { transform: scaleY(1); }

/* ---------- Buttons ---------- */
/* Dark label, not white: white text on this gradient only reaches 2.1–4.1:1,
   near-black clears 5.0–9.5:1 across the whole ramp (and matches the app). */
.btn-primary {
  position: relative;
  overflow: hidden;
  color: #03050b;
  background: linear-gradient(100deg, #38bdf8, #0ea5e9 55%, #0284c7);
  box-shadow: 0 10px 34px -10px rgba(14,165,233,.75), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, filter .22s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px -10px rgba(14,165,233,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.35) 50%, transparent 75%);
  background-size: 250% 100%;
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:disabled { filter: grayscale(.4) brightness(.8); transform: none; cursor: not-allowed; }

.btn-ghost { transition: background .25s, border-color .25s, transform .25s; }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); transform: translateY(-2px); }

/* ---------- Segmented control (mirrors the app) ---------- */
.seg { position: relative; display: grid; gap: 2px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 3px; }
.seg-thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 9px;
  background: rgba(255,255,255,.16);
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .38s cubic-bezier(.24,.9,.2,1), width .38s cubic-bezier(.24,.9,.2,1);
  pointer-events: none;
}
.seg button { position: relative; z-index: 1; transition: color .3s; }

/* ---------- iOS switch ---------- */
.ios-switch {
  width: 52px; height: 32px; border-radius: 99px;
  background: rgba(255,255,255,.16);
  transition: background .3s cubic-bezier(.2,.8,.2,1);
  position: relative; flex: none;
}
.ios-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.ios-switch[aria-checked="true"] { background: linear-gradient(100deg, #f43f5e, #fb7185); }
.ios-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- FAQ accordion ---------- */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.3,.8,.3,1), opacity .35s ease;
  opacity: 0;
}
.faq-item[data-open="true"] .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body > div { overflow: hidden; }
.faq-item[data-open="true"] .faq-chevron { transform: rotate(45deg); }
.faq-chevron { transition: transform .4s cubic-bezier(.3,.8,.3,1); }

/* ---------- Counter digits ---------- */
.tabnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Progress bars start empty so JS can grow them; without JS they show the
   real value straight away (carried in --bar-w). */
html:not(.js) [data-bar-to] { width: var(--bar-w) !important; }

/* ---------- dB gauge ---------- */
.gauge-fill { transition: width .12s linear; }
.needle { transition: transform .12s linear; }

/* ---------- Marquee ---------- */
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-mask {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---------- Scroll progress ---------- */
#progress {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .12s linear;
}

/* ---------- Legal pages typography ---------- */
.legal h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 650;
  color: #fff;
  margin: 2.75rem 0 .9rem;
  scroll-margin-top: 6rem;
}
.legal h3 {
  font-size: 1.03rem;
  font-weight: 650;
  color: #e6edfa;
  margin: 1.7rem 0 .55rem;
}
.legal p, .legal li { color: #a6b3c9; line-height: 1.75; }
.legal p { margin: .8rem 0; }
.legal ul, .legal ol { margin: .9rem 0 .9rem 1.15rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin: .45rem 0; padding-left: .2rem; }
.legal li::marker { color: #38bdf8; }
.legal strong { color: #dce6f7; font-weight: 620; }
.legal a { color: #7dd3fc; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: #bae6fd; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; }
.legal th, .legal td { border: 1px solid rgba(255,255,255,.1); padding: .7rem .85rem; text-align: left; vertical-align: top; color: #a6b3c9; }
.legal th { background: rgba(255,255,255,.04); color: #dce6f7; font-weight: 620; }
.legal .box {
  border: 1px solid rgba(56,189,248,.28);
  background: rgba(56,189,248,.06);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 1.4rem 0;
}
.legal .box p:first-child { margin-top: 0; }
.legal .box p:last-child { margin-bottom: 0; }

/* Table wrapper so wide tables never break the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }