/* ==========================================================================
   SpeechPath AI — shared stylesheet
   Dark-first. Same class API as before, restyled — all pages inherit.
   Demo content. See the comments in each HTML file before publishing.
   ========================================================================== */

:root{
  /* dark is the base */
  --bg:#07080c;
  --bg-2:#0d0f16;
  --surface:rgba(255,255,255,.035);
  --surface-hi:rgba(255,255,255,.06);
  --fg:#eef1f6;
  --fg-dim:#98a1b5;
  --fg-faint:#6b7488;
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.16);

  --brand:#2dd4bf;
  --brand-2:#818cf8;
  --brand-3:#f0abfc;
  --warn:#fbbf24;
  --grad:linear-gradient(115deg,var(--brand) 0%,var(--brand-2) 55%,var(--brand-3) 100%);
  --grad-soft:linear-gradient(115deg,rgba(45,212,191,.15),rgba(129,140,248,.15));

  --radius:18px;
  --radius-sm:11px;
  --maxw:min(1180px,92vw);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --glow:0 0 0 1px rgba(255,255,255,.05), 0 18px 50px -20px rgba(45,212,191,.28);
}

@media (prefers-color-scheme:light){
  :root{
    --bg:#fafbfd;
    --bg-2:#fff;
    --surface:rgba(12,16,28,.025);
    --surface-hi:rgba(12,16,28,.05);
    --fg:#0d1220;
    --fg-dim:#535e75;
    --fg-faint:#7c869b;
    --line:rgba(12,16,28,.1);
    --line-hi:rgba(12,16,28,.18);
    --brand:#0d9488;
    --brand-2:#5b5ce0;
    --brand-3:#b845cc;
    --glow:0 0 0 1px rgba(12,16,28,.04), 0 18px 50px -24px rgba(13,148,136,.25);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ambient background: soft orbs + faint grid */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38rem 38rem at 12% -8%, rgba(45,212,191,.16), transparent 70%),
    radial-gradient(32rem 32rem at 88% 4%, rgba(129,140,248,.15), transparent 70%),
    radial-gradient(30rem 30rem at 50% 108%, rgba(240,171,252,.09), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 85%);
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%, #000 0%, transparent 85%);
}

img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:var(--maxw); margin-inline:auto; position:relative}
.center{text-align:center}
.narrow{max-width:66ch}
.center.narrow{margin-inline:auto}

h1,h2,h3,h4{line-height:1.14; margin:0; letter-spacing:-.028em}
h1{font-size:clamp(2.15rem,5.6vw,4rem); font-weight:700}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem); font-weight:670}
h3{font-size:1.09rem; font-weight:620; letter-spacing:-.012em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.05rem,2.1vw,1.24rem); color:var(--fg-dim)}
.sub{color:var(--fg-dim); margin:.7rem 0 2.5rem}

/* gradient headline text */
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text;
      background-clip:text; -webkit-text-fill-color:transparent}

/* mono eyebrow label */
.mono{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-faint);
}

/* ---------- demo notice ---------- */
.demo-banner{
  background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(240,171,252,.12));
  border-bottom:1px solid rgba(251,191,36,.35);
  color:var(--fg); text-align:center; padding:.55rem 1rem;
  font-size:.82rem; line-height:1.5; position:relative; z-index:40;
}
.demo-banner b{color:var(--warn); font-weight:650}

.skip{position:absolute; inset-inline-start:-9999px; top:0; background:var(--brand); color:#04120f;
      padding:.6rem 1rem; border-radius:0 0 var(--radius-sm) var(--radius-sm); z-index:100; font-weight:600}
.skip:focus{inset-inline-start:1rem}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex; align-items:center; gap:1rem; height:70px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:680; font-size:1.1rem;
       color:var(--fg); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-glyph{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--grad); color:#06100e; font-size:1rem; font-weight:800; flex:0 0 auto;
  box-shadow:0 6px 20px -8px rgba(45,212,191,.6);
}
nav{margin-inline-start:auto; display:flex; align-items:center; gap:.25rem}
nav a{color:var(--fg-dim); font-size:.94rem; padding:.5rem .8rem; border-radius:9px;
      transition:color .15s ease, background .15s ease}
nav a:hover{color:var(--fg); background:var(--surface-hi); text-decoration:none}
nav a[aria-current="page"]{color:var(--fg); background:var(--surface-hi)}
nav a.cta{
  background:var(--grad); color:#06100e; font-weight:650; padding-inline:1.1rem;
  box-shadow:0 8px 24px -10px rgba(45,212,191,.55);
}
nav a.cta:hover{opacity:.92; background:var(--grad)}
.menu-toggle{display:none; margin-inline-start:auto; background:var(--surface); border:1px solid var(--line);
             color:var(--fg); border-radius:9px; padding:.4rem .65rem; font:inherit; font-size:1.1rem; cursor:pointer}
@media (max-width:880px){
  .menu-toggle{display:block}
  nav{
    position:absolute; inset-inline:0; top:70px; flex-direction:column; align-items:stretch;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:.6rem;
    gap:.2rem; margin:0; display:none;
  }
  nav.open{display:flex}
  nav a{padding:.75rem .85rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; padding:.8rem 1.5rem; border-radius:var(--radius-sm);
  font:inherit; font-size:.97rem; font-weight:620; cursor:pointer; border:1px solid transparent;
  transition:transform .14s ease, opacity .14s ease, box-shadow .14s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none}
.btn:disabled{opacity:.5; transform:none; cursor:default}
.btn-primary{background:var(--grad); color:#06100e; box-shadow:0 12px 32px -12px rgba(45,212,191,.6)}
.btn-primary:hover{box-shadow:0 18px 40px -14px rgba(45,212,191,.7)}
.btn-ghost{background:var(--surface); border-color:var(--line-hi); color:var(--fg); backdrop-filter:blur(8px)}
.btn-ghost:hover{background:var(--surface-hi)}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.1rem}

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); position:relative}
.hero-split{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center}
@media (max-width:900px){ .hero-split{grid-template-columns:1fr} }
.pill{
  display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:560;
  color:var(--fg); background:var(--surface); border:1px solid var(--line-hi);
  border-radius:999px; padding:.42rem .9rem; margin-bottom:1.2rem; backdrop-filter:blur(10px);
}
.pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(45,212,191,.7); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(45,212,191,.65)}
  70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}
  100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}
}

/* ---------- glass surfaces ---------- */
.card, .callout, form, .stat, .step, details, .band, .demo{
  backdrop-filter:blur(14px);
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; transition:border-color .18s ease, transform .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi),transparent);
}
.card:hover{border-color:var(--line-hi); background:var(--surface-hi); transform:translateY(-3px)}
.card h3{margin:.9rem 0 .5rem}
.card p{color:var(--fg-dim); font-size:.955rem}
.ico{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-soft); border:1px solid var(--line); font-size:1.25rem;
}
.ico.warm{background:linear-gradient(115deg,rgba(251,191,36,.18),rgba(240,171,252,.14))}

/* ---------- sections ---------- */
section{padding:clamp(2.8rem,6.5vw,5rem) 0; position:relative}
section.alt{border-block:1px solid var(--line); background:linear-gradient(180deg,var(--surface),transparent)}
.grid{display:grid; gap:1.15rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(244px,1fr))}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
      padding:1.6rem; position:relative}
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:var(--mono); font-size:.8rem; letter-spacing:.06em;
  display:inline-grid; place-items:center; padding:.3rem .6rem; border-radius:8px;
  background:var(--grad); color:#06100e; font-weight:700; margin-bottom:1rem;
}
.step h3{margin-bottom:.45rem}
.step p{color:var(--fg-dim); font-size:.955rem}

/* ---------- stat strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat{background:color-mix(in srgb,var(--bg) 60%,transparent); padding:1.5rem 1.6rem}
.stat b{display:block; font-size:1.16rem; font-weight:680; letter-spacing:-.02em;
        background:var(--grad); -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent}
.stat small{color:var(--fg-dim); font-size:.87rem; line-height:1.55; display:block; margin-top:.35rem}

/* ---------- lists ---------- */
.ticks{list-style:none; padding:0; margin:1.5rem 0 0}
.ticks li{position:relative; padding-inline-start:1.9rem; margin-bottom:.8rem; color:var(--fg-dim)}
.ticks li::before{
  content:""; position:absolute; inset-inline-start:0; top:.62rem;
  width:9px; height:9px; border-radius:50%; background:var(--grad);
}
.ticks strong{color:var(--fg); font-weight:600}

/* ---------- timeline ---------- */
.timeline{list-style:none; padding:0; margin:0; position:relative}
.timeline::before{
  content:""; position:absolute; inset-block:.7rem 1rem; inset-inline-start:8px; width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2),transparent);
}
.timeline li{position:relative; padding-inline-start:2.4rem; padding-bottom:2rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; inset-inline-start:0; top:.6rem;
  width:18px; height:18px; border-radius:50%; background:var(--bg);
  border:2px solid var(--brand); box-shadow:0 0 14px -2px rgba(45,212,191,.7);
}
.timeline .when{font-family:var(--mono); font-size:.72rem; letter-spacing:.13em;
                text-transform:uppercase; color:var(--brand); display:block}
.timeline h3{margin:.3rem 0 .35rem}
.timeline p{color:var(--fg-dim); font-size:.955rem}

/* ---------- faq ---------- */
details{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1.05rem 1.3rem; margin-bottom:.75rem; transition:border-color .15s ease;
}
details[open]{border-color:var(--line-hi)}
summary{cursor:pointer; font-weight:590; list-style:none; display:flex; gap:1rem; align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; margin-inline-start:auto; color:var(--brand); font-weight:700;
               font-size:1.25rem; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--fg-dim); margin-top:.85rem; font-size:.955rem}

/* ---------- callout ---------- */
.callout{
  background:var(--grad-soft); border:1px solid var(--line-hi); border-radius:var(--radius); padding:1.6rem;
}
.callout.warm{background:linear-gradient(115deg,rgba(251,191,36,.13),rgba(240,171,252,.1))}
.callout h3{margin-bottom:.5rem}
.callout p{color:var(--fg-dim); font-size:.955rem}

/* ---------- cta band ---------- */
.band{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line-hi); padding:clamp(2rem,4.5vw,3rem); text-align:center;
  background:var(--grad-soft);
}
.band::before{
  content:""; position:absolute; inset:-60% 20% auto; height:120%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(45,212,191,.22),transparent);
}
.band p{color:var(--fg-dim); max-width:54ch; margin-inline:auto}

/* ==========================================================================
   waveform — animated "listening" bars
   ========================================================================== */
.waveform{
  display:flex; align-items:center; justify-content:center; gap:3px; height:76px;
}
.waveform span{
  display:block; width:4px; border-radius:99px; background:var(--grad);
  height:12%; opacity:.85; animation:wav 1.25s ease-in-out infinite;
  transform-origin:center;
}
@keyframes wav{
  0%,100%{height:12%; opacity:.5}
  50%{height:96%; opacity:1}
}
.waveform.paused span{animation-play-state:paused}

/* ==========================================================================
   phoneme demo widget
   ========================================================================== */
.demo{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,1.9rem); overflow:hidden;
}
.demo-head{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between;
           margin-bottom:1.2rem}
.demo-words{display:flex; flex-wrap:wrap; gap:.45rem}
.demo-words button{
  font:inherit; font-size:.9rem; cursor:pointer; padding:.42rem .85rem; border-radius:99px;
  background:var(--surface); border:1px solid var(--line); color:var(--fg-dim);
  transition:all .15s ease;
}
.demo-words button:hover{color:var(--fg); border-color:var(--line-hi)}
.demo-words button[aria-pressed="true"]{
  background:var(--grad); color:#06100e; border-color:transparent; font-weight:620;
}
.demo-stage{
  display:flex; align-items:flex-end; gap:.5rem; min-height:132px; flex-wrap:wrap;
  padding:1.1rem; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--line);
}
.ph{
  flex:1 1 64px; min-width:64px; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; transform:translateY(10px); animation:phin .42s ease forwards;
}
@keyframes phin{to{opacity:1; transform:none}}
.ph-bar{
  width:100%; height:74px; border-radius:8px; position:relative; overflow:hidden;
  background:var(--surface-hi); display:flex; align-items:flex-end;
}
.ph-fill{
  width:100%; border-radius:8px; height:0; animation:fill .7s .12s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fill{to{height:var(--h)}}
.ph-fill.ok{background:linear-gradient(180deg,var(--brand),rgba(45,212,191,.45))}
.ph-fill.mid{background:linear-gradient(180deg,var(--warn),rgba(251,191,36,.4))}
.ph-fill.bad{background:linear-gradient(180deg,#fb7185,rgba(251,113,133,.4))}
.ph-label{font-family:var(--mono); font-size:.85rem; color:var(--fg)}
.ph-score{font-family:var(--mono); font-size:.72rem; color:var(--fg-faint)}
.demo-verdict{
  margin-top:1.1rem; padding:.85rem 1.1rem; border-radius:var(--radius-sm); font-size:.93rem;
  background:var(--surface-hi); border:1px solid var(--line); color:var(--fg-dim);
}
.demo-verdict b{color:var(--fg)}
.demo-note{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
           color:var(--fg-faint); margin-top:.9rem}

/* ---------- form ---------- */
.form-split{display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(1.6rem,4vw,3rem); align-items:start}
@media (max-width:860px){ .form-split{grid-template-columns:1fr} }
form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
     padding:clamp(1.4rem,3vw,2rem)}
.field{margin-bottom:1.1rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:520px){ .field-row{grid-template-columns:1fr} }
label{display:block; font-size:.88rem; font-weight:570; margin-bottom:.45rem}
label .opt{color:var(--fg-faint); font-weight:400}
input,textarea,select{
  width:100%; padding:.76rem .95rem; font:inherit; font-size:.96rem; color:var(--fg);
  background:color-mix(in srgb,var(--bg) 55%,transparent); border:1px solid var(--line);
  border-radius:var(--radius-sm); transition:border-color .14s ease, box-shadow .14s ease;
}
input::placeholder,textarea::placeholder{color:var(--fg-faint)}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(45,212,191,.18);
}
textarea{resize:vertical; min-height:122px}
.hp{position:absolute; inset-inline-start:-9999px}
.form-note{font-size:.83rem; color:var(--fg-faint); margin-top:.95rem}
.msg{margin-top:1rem; padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-size:.93rem; display:none}
.msg.ok{display:block; background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.4)}
.msg.err{display:block; background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.4)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:3rem 0 2rem; margin-top:2rem;
       color:var(--fg-dim); font-size:.92rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
              color:var(--fg-faint); margin-bottom:.9rem; font-weight:500}
.foot-grid ul{list-style:none; padding:0; margin:0}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{color:var(--fg-dim)}
.foot-grid a:hover{color:var(--brand)}
.foot-bottom{border-top:1px solid var(--line); margin-top:2.2rem; padding-top:1.4rem;
             display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
             font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:var(--fg-faint)}
.disclaimer{font-size:.84rem; color:var(--fg-dim); background:var(--surface); border:1px solid var(--line);
            border-radius:var(--radius-sm); padding:1rem 1.2rem; margin-top:1.5rem}

/* ---------- scroll reveal (applied by main.js) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .btn:hover,.card:hover{transform:none}
  .reveal{opacity:1; transform:none}
  .ph{opacity:1; transform:none}
  .ph-fill{height:var(--h)}
  .waveform span{height:50%}
}