/* landing.css — HearThaiSchool marketing landing + onboarding.
   Cupertino-leaning, with a deliberate dark/light section cadence. */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --l-ink:#0a1422; --l-ink2:#41506a; --l-mut:#6b7b92; --l-line:#e6ecf3;
  --l-bg:#ffffff; --l-bg2:#f5f8fc; --l-cream:#faf6ef;     /* warm "true light" neutral */
  --l-blue:#1f70df; --l-blue2:#4a90ff; --l-warm:#ff8a6b;  /* warm accent for dark scenes */
  --l-dark:#070f20; --l-dark2:#0b1626;
  --l-ease:cubic-bezier(.2,.7,.3,1);
  --l-rad:22px; --l-max:1120px;
  --l-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
}
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{ margin:0; font-family:var(--l-font); color:var(--l-ink); background:var(--l-bg); -webkit-font-smoothing:antialiased; line-height:1.5; }
.thai{ font-family:"HTSThai","Noto Sans Thai",var(--l-font); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--l-max); margin:0 auto; padding:0 24px; }
.container--narrow{ max-width:760px; }
.sec-h{ font-size:clamp(30px,4.6vw,48px); font-weight:800; letter-spacing:-.022em; text-align:center; margin:0 0 12px; }
.sec-sub{ text-align:center; color:var(--l-mut); font-size:var(--fs-lg,19px); max-width:620px; margin:0 auto 40px; }

/* ============ NAV ============ */
.lnav{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
.lnav.is-scrolled{ background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom-color:var(--l-line); }
.lnav__in{ position:relative; max-width:var(--l-max); margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px; }
.lnav__brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:17px; color:#fff; transition:color .3s; }
.lnav.is-scrolled .lnav__brand{ color:var(--l-ink); }
.lnav__brand b{ font-weight:800; }
.lnav__logo{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-family:"HTSThai",sans-serif; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--l-blue),var(--l-blue2)); box-shadow:0 4px 12px rgba(10,108,255,.4); }
.lnav__links{ display:flex; gap:26px; margin-left:8px; font-size:15px; font-weight:500; color:rgba(255,255,255,.82); }
.lnav.is-scrolled .lnav__links{ color:var(--l-ink2); }
.lnav__links a:hover{ color:#fff; } .lnav.is-scrolled .lnav__links a:hover{ color:var(--l-ink); }
.lnav__cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ============ buttons ============ */
.lbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:15px;
  padding:10px 18px; border-radius:99px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s; }
.lbtn--lg{ font-size:17px; padding:15px 28px; }
.lbtn--block{ width:100%; }
.lbtn--primary{ color:#fff; background:linear-gradient(135deg,var(--l-blue),var(--l-blue2)); box-shadow:0 10px 26px -8px rgba(10,108,255,.6); }
.lbtn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(10,108,255,.7); }
.lbtn--ghost{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
.lnav.is-scrolled .lbtn--ghost{ color:var(--l-ink); background:var(--l-bg2); border-color:var(--l-line); }
.lbtn--ghost:hover{ background:rgba(255,255,255,.24); }
.lbtn--clear{ color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.26); }
.lbtn--clear:hover{ background:rgba(255,255,255,.18); }
.lbtn__play{ font-size:11px; }

/* ============ HERO ============ */
.lhero{ position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  background:#0c1f3d; color:#fff; }
/* full-bleed constellation hero image (baked on #0C1F3D); effects layer on top */
.lhero__cons{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; z-index:0;
  transition:filter .35s var(--l-ease), transform .6s var(--l-ease); }
body.is-playing .lhero__cons{ filter:brightness(1.07) saturate(1.05); }
@media (max-width:880px){ .lhero__cons{ object-position:68% 22%; } }
.lhero__bg{ position:absolute; inset:-10%; background:
  radial-gradient(45% 55% at 78% 26%, rgba(31,112,223,.55), transparent 60%),
  radial-gradient(40% 60% at 18% 82%, rgba(122,92,240,.42), transparent 62%),
  radial-gradient(55% 70% at 55% 48%, rgba(20,58,110,.65), transparent 72%),
  #070f20; filter:saturate(1.15); animation:meshDrift 22s ease-in-out infinite alternate; }
@keyframes meshDrift{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.12) translate(-3%,-3%);} }
.lhero__thaiart{ position:absolute; right:-3%; top:50%; transform:translateY(-50%); font-family:"HTSThai",sans-serif; font-weight:700;
  font-size:min(58vh,640px); line-height:.8; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.07); pointer-events:none; user-select:none; }
/* live Web-Audio reactive waveform — fills the empty right of the hero */
.lhero__viz{ position:absolute; right:0; top:0; width:56%; height:100%; z-index:1; opacity:.9; pointer-events:none; }
.lhero__wave{ position:absolute; left:0; right:0; bottom:16%; width:100%; height:150px; opacity:.55; pointer-events:none; }
.lhero__wave path{ fill:none; stroke:rgba(143,192,255,.6); stroke-width:2; stroke-linecap:round; stroke-dasharray:7 16; animation:czDash 2.4s linear infinite;
  filter:drop-shadow(0 0 8px rgba(143,192,255,.45)); }
.lhero__grain{ position:absolute; inset:0; opacity:.2; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:170px; }
/* fade: dissolve the image into the #0C1F3D base near the top, under the text (left), and bottom.
   tune each gradient's middle % (where it reaches 0) to grow/shrink the faded zone. */
.lhero__scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg,  rgba(12,31,61,1) 0%, rgba(12,31,61,.96) 30%, rgba(12,31,61,.68) 52%, rgba(12,31,61,.3) 64%, rgba(12,31,61,0) 78%),   /* left / under headline */
  linear-gradient(180deg, rgba(12,31,61,.92) 0%, rgba(12,31,61,0) 30%),                            /* top edge */
  linear-gradient(0deg,   rgba(12,31,61,.85) 0%, rgba(12,31,61,0) 22%);                            /* bottom, into next section */
}
/* real soft-blur of the image itself near the top + left edges (masked so the center/hub stays crisp).
   left band fully blurred to 32%, ramps off by 70%. */
.lhero__blur{ position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,0) 24%), linear-gradient(90deg,#000 0%, #000 32%, rgba(0,0,0,0) 70%);
  mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,0) 24%), linear-gradient(90deg,#000 0%, #000 32%, rgba(0,0,0,0) 70%); }

/* tap-to-hear */
.hear{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 30px; }
.hear__lbl{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.hear__w{ font-family:"HTSThai",sans-serif; font-size:21px; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22); border-radius:99px; padding:6px 16px; cursor:pointer; transition:transform .14s ease, background .14s ease, border-color .14s; }
.hear__w:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.hear__w.is-playing{ background:rgba(143,192,255,.32); border-color:#8fc0ff; animation:hearPop .4s ease; }
@keyframes hearPop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
.lhero__grid{ position:relative; z-index:2; max-width:var(--l-max); margin:0 auto; width:100%; padding:120px 24px 90px; display:block; }
.lhero__text{ max-width:600px; }
.lhero__eyebrow{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8fc0ff; margin-bottom:18px; }
.lhero__h1{ font-size:clamp(38px,6vw,68px); font-weight:800; letter-spacing:-.03em; line-height:1.04; margin:0 0 20px; }
.lhero__h1 em{ font-style:italic; color:#8fc0ff; }
.lhero__sub{ font-size:clamp(17px,2.1vw,21px); color:rgba(255,255,255,.82); max-width:30em; margin:0 0 32px; }
.lhero__sub i{ color:#fff; font-style:italic; }
.lhero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.lhero__fine{ margin-top:22px; font-size:14px; color:rgba(255,255,255,.82); }
.lhero__fine b{ color:#fff; }
.lhero__proof{ margin-top:24px; font-size:14px; color:rgba(255,255,255,.75); }
.lhero__proof b{ color:#fff; }
.stars{ color:#f5a623; letter-spacing:1px; }
.lhero__scroll{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:3; font-size:26px; color:rgba(255,255,255,.5);
  animation:czBob 2s ease-in-out infinite; }
@keyframes czBob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }
@keyframes czDash{ to{ stroke-dashoffset:-42; } }
@media (max-width:880px){
  .lhero__grid{ padding-top:130px; } .lhero__text{ max-width:100%; }
  /* text stacks over the image on mobile → fade vertically instead of from the left */
  .lhero__scrim{ background:linear-gradient(180deg, rgba(12,31,61,.55) 0%, rgba(12,31,61,.35) 45%, rgba(12,31,61,.92) 100%); }
  .lhero__blur{ -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,0) 26%); mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,0) 26%); }
}

/* ============ THE ACHE (dark, photographic) ============ */
.ache{ position:relative; overflow:hidden; color:#fff; padding:clamp(90px,14vw,180px) 0;
  background:radial-gradient(120% 110% at 28% 18%, #16263f 0%, #070d18 68%); }
.ache__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.ache__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,13,24,.94) 0%, rgba(7,13,24,.6) 55%, rgba(7,13,24,.28) 100%); }
.ache__in{ position:relative; z-index:2; max-width:760px; }
.ache__eyebrow{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8fc0ff; margin-bottom:18px; }
.ache__h{ font-size:clamp(32px,5.6vw,62px); font-weight:800; letter-spacing:-.028em; line-height:1.04; margin:0 0 20px; }
.ache__h em{ font-style:italic; color:var(--l-warm); }
.ache__p{ font-size:clamp(17px,2.1vw,22px); color:rgba(255,255,255,.82); max-width:52ch; margin:0; }
.ache__p i{ font-style:italic; color:#fff; }

/* ============ OUTCOMES (light cream, oversized) ============ */
.outcomes{ background:var(--l-cream); padding:clamp(70px,11vw,130px) 0; }
.outcomes__in{ max-width:var(--l-max); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,5vw,64px); }
.oc{ position:relative; padding-top:22px; border-top:2px solid var(--l-line); }
.oc b{ display:block; font-size:clamp(42px,6.6vw,84px); font-weight:800; letter-spacing:-.035em; line-height:.94; margin-bottom:18px;
  min-height:1.88em;   /* reserve two lines so single-line "Forever" aligns with the others */
  background:linear-gradient(135deg,#0a1422 10%,#1f70df); -webkit-background-clip:text; background-clip:text; color:transparent; }
.oc span{ display:block; font-size:clamp(16px,1.6vw,19px); color:var(--l-ink2); max-width:26ch; }
@media (max-width:760px){ .outcomes__in{ grid-template-columns:1fr; gap:34px; } .oc b{ min-height:0; } }

/* ============ HOW IT WORKS / PROMISE (dark stage) ============ */
.lband{ padding:clamp(70px,11vw,130px) 0; color:#fff; background:linear-gradient(180deg,var(--l-dark2),#0a1320); }
.lband__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center; }
.lband__h{ font-size:clamp(26px,3.6vw,40px); font-weight:800; letter-spacing:-.02em; line-height:1.18; max-width:18ch; margin:0 0 22px; color:#fff; }
.lband__h em{ font-style:italic; color:#8fc0ff; }
.lband__p{ font-size:clamp(17px,2vw,20px); color:rgba(255,255,255,.78); max-width:54ch; margin:0; }
.lband__p b{ color:#fff; } .lband__p .thai{ color:#8fc0ff; }
.lband .manifesto__eyebrow{ color:#8fc0ff; }
.lband__demo{ display:flex; justify-content:center; }
.t5stack{ display:flex; flex-direction:column; gap:14px; }
.t5row{ display:flex; gap:14px; justify-content:center; }
.t5stack .t5{ width:132px; }
@media (max-width:880px){ .lband__grid{ grid-template-columns:1fr; } }

/* five-tone chips — dark-stage glass */
.t5{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:24px 14px 22px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-top:3px solid var(--tc); border-radius:18px;
  cursor:pointer; font-family:inherit; color:#fff; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.t5:hover{ transform:translateY(-4px); background:rgba(255,255,255,.12); box-shadow:0 20px 40px -22px rgba(0,0,0,.6); }
.t5.is-playing{ box-shadow:0 0 0 3px var(--tc); }
.t5__curve{ width:66px; height:30px; }
.t5__tone{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--tc); }
.t5__thai{ font-family:var(--font-thai,"HTSThai"); font-size:30px; font-weight:700; line-height:1.4; padding-top:2px; }
.t5__rom{ font-size:13px; color:rgba(255,255,255,.6); }

/* ============ MANIFESTO (full-bleed colour block, billboard) ============ */
.manifesto{ position:relative; overflow:hidden; text-align:center; color:#fff; padding:clamp(90px,13vw,165px) 0;
  background:linear-gradient(135deg,#1652bd 0%, var(--l-blue) 52%, #2f86f0 100%); }
.manifesto__art{ position:absolute; right:-3%; bottom:-26%; font-weight:800; font-size:min(72vh,760px); line-height:.7;
  color:rgba(255,255,255,.08); pointer-events:none; user-select:none; }
.manifesto__in{ position:relative; z-index:2; }
.manifesto__eyebrow{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--l-blue); margin-bottom:18px; }
.manifesto .manifesto__eyebrow{ color:rgba(255,255,255,.85); }
.manifesto__h{ font-size:clamp(34px,6.6vw,82px); font-weight:800; letter-spacing:-.03em; line-height:1.04; margin:0 0 26px; }
.manifesto__h em{ font-style:italic; color:#d7e7ff; }
.mani-price{ display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 28px; flex-wrap:wrap; }
.mani-price__old{ font-size:clamp(22px,3vw,34px); font-weight:700; color:rgba(255,255,255,.6); text-decoration:line-through; text-decoration-thickness:2px; }
.mani-price__arrow{ font-size:clamp(20px,2.4vw,28px); color:rgba(255,255,255,.7); }
.mani-price__new{ font-size:clamp(40px,6vw,76px); font-weight:800; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,#fff,#cfe2ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.manifesto__p{ font-size:clamp(17px,2vw,21px); color:rgba(255,255,255,.88); max-width:62ch; margin:0 auto; }

/* ============ FEATURES / CONSTELLATION (light cream) ============ */
.features{ padding:20px 0 40px; background:var(--l-cream); }
.feat{ max-width:var(--l-max); margin:0 auto; padding:clamp(50px,8vw,96px) 24px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.feat--rev .feat__txt{ order:2; }
.feat__tag{ display:inline-block; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--fc,#1f70df); margin-bottom:14px; }
.feat__txt h3{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.022em; line-height:1.1; margin:0 0 16px; }
.feat__txt p{ font-size:clamp(16px,1.9vw,19px); color:var(--l-ink2); margin:0; max-width:46ch; }
.feat__txt p b{ color:var(--l-ink); }
.feat__media{ position:relative; aspect-ratio:4/3; border-radius:var(--l-rad); overflow:hidden; box-shadow:0 30px 60px -28px rgba(13,27,42,.4); }
.feat__media--dark{ box-shadow:0 30px 70px -24px rgba(10,40,90,.6); }
.feat__media img, .feat__media video{ width:100%; height:100%; object-fit:cover; display:block; }

/* mini live constellation */
.minicon{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(circle at 50% 46%, #16294a 0%, #0b1626 72%); }
.minicon__lines{ position:absolute; inset:0; width:100%; height:100%; }
.minicon__lines line{ stroke:rgba(143,180,255,.28); stroke-width:1.4; vector-effect:non-scaling-stroke; }
.mc-node{ position:absolute; transform:translate(-50%,-50%); z-index:2; white-space:nowrap; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.06;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:8px 15px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); transition:background .14s ease, box-shadow .14s ease, transform .14s ease; }
.mc-node:hover{ background:rgba(255,255,255,.18); transform:translate(-50%,-50%) scale(1.06); }
.mc-node.is-playing{ background:rgba(143,180,255,.38); border-color:#8fb4ff; box-shadow:0 0 0 3px rgba(143,180,255,.32); }
.mc-node__th{ font-family:"HTSThai",sans-serif; font-weight:600; font-size:17px; color:#eaf1ff; }
.mc-node__en{ font-size:11px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.6); }
.mc-node--hub{ z-index:3; padding:15px 25px; background:rgba(31,112,223,.34); border-color:rgba(143,180,255,.6); box-shadow:0 10px 34px -6px rgba(31,112,223,.65); }
.mc-node--hub .mc-node__th{ font-size:30px; font-weight:700; color:#fff; }
.mc-node--hub .mc-node__en{ font-size:13px; color:rgba(255,255,255,.78); }
.minicon__hint{ position:absolute; left:14px; bottom:12px; z-index:4; font-size:12px; font-weight:600; letter-spacing:.02em;
  color:rgba(255,255,255,.6); background:rgba(0,0,0,.25); padding:5px 11px; border-radius:99px; }
@media (max-width:820px){ .feat{ grid-template-columns:1fr; } .feat--rev .feat__txt{ order:0; } .feat__media{ order:-1; } }

/* ============ HEAR THE DIFFERENCE (dark stage) ============ */
.hd{ padding:clamp(60px,9vw,110px) 0; color:#fff; background:linear-gradient(180deg,#0a1320,var(--l-dark2)); }
.hd-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hd-txt h2, .hd-txt p{ text-align:left; }
.hd-h{ color:#fff; } .hd-sub{ color:rgba(255,255,255,.74); margin:0; max-width:46ch; }
.hd-eyebrow{ color:#8fc0ff !important; }
.hd-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:30px; box-shadow:0 34px 80px -34px rgba(0,0,0,.7); }
.hd-pair{ display:flex; gap:16px; margin-bottom:22px; }
.hd-one{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; padding:18px 12px; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:16px; color:#fff; transition:transform .14s ease, background .14s ease, box-shadow .14s ease; }
.hd-one:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.hd-one.is-playing{ box-shadow:0 0 0 3px var(--l-blue2); }
.hd-one .t5__curve{ width:96px; height:34px; }
.hd-one .thai{ font-family:var(--font-thai); font-size:30px; font-weight:700; line-height:1.4; }
.hd-one i{ font-style:normal; font-size:12px; color:rgba(255,255,255,.62); }
.hd-play{ width:100%; }
@media (max-width:880px){ .hd-wrap{ grid-template-columns:1fr; } .hd-card{ order:-1; } }

/* ============ VERSUS (dark) ============ */
.versus{ padding:clamp(80px,11vw,130px) 0; color:#fff; background:linear-gradient(180deg,#0a142b,#0b1830); }
.versus__h{ color:#fff; font-size:clamp(32px,5.4vw,58px); line-height:1.04; }
.versus__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:920px; margin:44px auto 0; align-items:stretch; }
.vs{ border-radius:var(--l-rad); padding:32px 30px; }
.vs__h{ font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.vs ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.vs li{ position:relative; padding-left:32px; font-size:16px; line-height:1.4; }
.vs li i{ font-style:italic; }
.vs li::before{ position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.vs--old{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.66); }
.vs--old .vs__h{ color:rgba(255,255,255,.5); }
.vs--old li::before{ content:"✕"; background:rgba(255,255,255,.12); color:rgba(255,255,255,.6); }
.vs--new{ background:linear-gradient(160deg,#2f86f0,#1652bd); color:#fff; box-shadow:0 34px 80px -28px rgba(31,112,223,.7); }
.vs--new .vs__h{ color:#dceaff; }
.vs--new li{ color:#fff; }
.vs--new li::before{ content:"✓"; background:rgba(255,255,255,.26); color:#fff; }
@media (max-width:680px){ .versus__grid{ grid-template-columns:1fr; } }

/* ============ PRICING (dark) ============ */
.pricing{ padding:clamp(70px,10vw,120px) 0; background:radial-gradient(120% 90% at 50% -10%, #16263f, #070f20 70%); color:#fff; }
.pricing .sec-h{ color:#fff; } .pricing .sec-sub{ color:rgba(255,255,255,.66); }
.price-card{ position:relative; max-width:480px; margin:48px auto 0; border-radius:28px; overflow:hidden;
  background:linear-gradient(180deg,#0e1c39,#0a142b); color:#fff; box-shadow:0 40px 90px -30px rgba(10,30,70,.7); border:1px solid rgba(255,255,255,.08); }
.price-card__glow{ position:absolute; inset:0; background:radial-gradient(90% 60% at 80% -10%, rgba(58,139,255,.55), transparent 60%); pointer-events:none; }
.price-card__body{ position:relative; padding:40px 36px; }
.price-card__tag{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#8fc0ff; }
.price-card__amt{ font-size:64px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:10px 0 4px; }
.price-card__cur{ font-size:34px; vertical-align:super; margin-right:2px; }
.price-card__per{ font-size:18px; font-weight:600; color:rgba(255,255,255,.6); }
.price-card__trial{ color:rgba(255,255,255,.8); font-size:15px; margin-bottom:22px; }
.price-card__trial b{ color:#fff; }
.price-card__list{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.price-card__list li{ position:relative; padding-left:30px; font-size:15px; color:rgba(255,255,255,.9); }
.price-card__list li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:50%;
  background:rgba(58,139,255,.25); color:#9fc2ff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.price-card__fine{ text-align:center; font-size:13px; color:rgba(255,255,255,.55); margin-top:14px; }

/* ============ QUOTES (light cream, faces) ============ */
.quotes{ padding:clamp(70px,10vw,120px) 0; background:var(--l-cream); }
.quotes__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{ background:#fff; border:1px solid var(--l-line); border-radius:var(--l-rad); padding:30px; margin:0; box-shadow:0 16px 40px -28px rgba(13,27,42,.5); }
.quote__ic{ display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px; margin-bottom:18px; font-size:28px;
  background:linear-gradient(135deg,#eaf1ff,#f1ecff); box-shadow:0 8px 18px -10px rgba(13,27,42,.4); }
.quote blockquote{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.45; }
.quote blockquote i{ color:var(--l-blue); font-style:italic; }
@media (max-width:820px){ .quotes__grid{ grid-template-columns:1fr; } }

/* ============ TOOLKIT (light) ============ */
.toolkit{ padding:clamp(70px,10vw,120px) 0; background:var(--l-bg2); }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:48px; grid-auto-rows:1fr; }
.bento .tool{ grid-column:span 2; }
.tool--lg{ grid-column:span 3; }
.tool--wide{ grid-column:span 6; }
.tool{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px;
  background:#fff; border:1px solid var(--l-line); border-radius:22px; padding:30px 28px;
  box-shadow:0 16px 40px -28px rgba(13,27,42,.5); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tool::after{ content:""; position:absolute; left:var(--mx,82%); top:var(--my,6%); width:62%; height:90%; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; transition:left .25s ease, top .25s ease, opacity .25s ease; opacity:.85;
  background:radial-gradient(circle, color-mix(in srgb,var(--tc) 24%, transparent), transparent 70%); }
.tool:hover::after{ opacity:1; }
.tool:hover{ transform:translateY(-5px); box-shadow:0 28px 56px -26px rgba(13,27,42,.42); border-color:color-mix(in srgb,var(--tc) 42%, var(--l-line)); }
.tool > *{ position:relative; z-index:1; }
.tool__ic{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; flex:0 0 auto; border-radius:16px; color:#fff;
  background:linear-gradient(150deg, color-mix(in srgb,var(--tc) 78%, #fff), var(--tc)); box-shadow:0 10px 22px -8px var(--tc); }
.tool__ic svg{ width:27px; height:27px; }
.tool h4{ font-size:21px; font-weight:800; letter-spacing:-.01em; margin:0 0 9px; }
.tool p{ color:var(--l-ink2); margin:0; font-size:15px; line-height:1.5; }
.tool p b{ color:var(--l-ink); font-weight:700; }
.tool--lg{ padding:34px 32px; }
.tool--lg h4{ font-size:25px; }
.tool--lg p, .tool--wide p{ font-size:16.5px; max-width:48ch; }
.tool--wide{ flex-direction:row; align-items:center; gap:22px; }
.tool--wide .tool__bd{ flex:1; }
@media (max-width:880px){ .bento{ grid-template-columns:repeat(2,1fr); }
  .bento .tool, .tool--lg{ grid-column:span 1; } .tool--wide{ grid-column:span 2; flex-direction:column; align-items:flex-start; } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } .bento .tool, .tool--lg, .tool--wide{ grid-column:span 1; } }

/* ============ FAQ ============ */
.faq{ padding:clamp(60px,9vw,110px) 0; background:var(--l-bg); }
.faq__list{ margin-top:36px; border-top:1px solid var(--l-line); }
.faq__item{ border-bottom:1px solid var(--l-line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__chev{ color:var(--l-mut); font-size:20px; transition:transform .25s ease; flex:0 0 auto; }
.faq__item[open] .faq__chev{ transform:rotate(180deg); }
.faq__item p{ margin:0; padding:0 4px 24px; color:var(--l-ink2); font-size:16px; max-width:60ch; }

/* ============ FINAL ============ */
.lfinal{ padding:clamp(80px,12vw,140px) 0; text-align:center; color:#fff;
  background:radial-gradient(120% 100% at 50% 0%, #143a6e, #0a152c 70%); }
.lfinal__in h2{ font-size:clamp(30px,5vw,52px); font-weight:800; letter-spacing:-.025em; line-height:1.08; margin:0 0 28px; }
.lfinal__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.lfinal__fine{ margin-top:18px; color:rgba(255,255,255,.6); font-size:14px; }

/* ============ FOOTER ============ */
.lfoot{ background:#070f20; color:rgba(255,255,255,.7); padding:48px 0; }
.lfoot__in{ display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center; }
.lfoot__brand{ display:flex; align-items:center; gap:9px; color:#fff; font-weight:600; }
.lfoot__cols{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-size:14px; }
.lfoot__cols a:hover{ color:#fff; }
.lfoot__fine{ font-size:13px; color:rgba(255,255,255,.45); max-width:60ch; }

/* ============ AMBIENT TOGGLE ============ */
.ambient{ position:fixed; right:18px; bottom:18px; z-index:60; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--l-line); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--l-ink2); box-shadow:0 8px 24px -10px rgba(13,27,42,.45); transition:transform .15s ease, background .2s ease, color .2s ease; }
.ambient[hidden]{ display:none; }
.ambient:hover{ transform:translateY(-2px); }
.ambient.is-on{ background:linear-gradient(135deg,var(--l-blue),var(--l-blue2)); color:#fff; border-color:transparent; }
.ambient__ic{ font-size:18px; line-height:1; }
.ambient.is-on .ambient__ic{ animation:ambSpin 6s linear infinite; }
@keyframes ambSpin{ to{ transform:rotate(360deg); } }

/* ============ ONBOARDING ============ */
.onb[hidden]{ display:none; }
.onb{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(7,15,32,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:onbFade .25s ease; }
@keyframes onbFade{ from{ opacity:0; } to{ opacity:1; } }
.onb__sheet{ position:relative; width:min(560px,100%); background:#fff; border-radius:28px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  padding:30px 34px 34px; animation:onbUp .3s cubic-bezier(.2,.7,.3,1); }
@keyframes onbUp{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }
.onb__close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--l-bg2); color:var(--l-mut); font-size:15px; }
.onb__close:hover{ background:#e7eef7; color:var(--l-ink); }
.onb__bar{ height:8px; border-radius:99px; background:var(--l-bg2); overflow:hidden; margin:6px 0 26px; }
.onb__bar i{ display:block; height:100%; width:20%; border-radius:99px; background:linear-gradient(90deg,var(--l-blue),var(--l-blue2)); transition:width .35s cubic-bezier(.4,0,.2,1); }
.onb-step{ animation:onbStep .28s ease both; }
@keyframes onbStep{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.onb-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--l-blue); }
.onb-h{ font-size:27px; font-weight:800; letter-spacing:-.02em; margin:6px 0 6px; }
.onb-p{ color:var(--l-ink2); font-size:16px; margin:0 0 22px; }
.onb-opts{ display:flex; flex-direction:column; gap:11px; }
.onb-opt{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; border:2px solid var(--l-line);
  border-radius:16px; background:#fff; cursor:pointer; font-family:inherit; font-size:16px; font-weight:600; color:var(--l-ink); transition:.14s; }
.onb-opt:hover{ border-color:var(--l-blue); background:#f3f8ff; transform:translateY(-1px); }
.onb-opt__e{ font-size:22px; }
.onb-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.onb-back{ background:none; border:0; cursor:pointer; color:var(--l-mut); font-family:inherit; font-weight:600; font-size:15px; }
.onb-back:hover{ color:var(--l-ink); }
.onb-summary{ background:var(--l-bg2); border-radius:18px; padding:20px 22px; margin:4px 0 8px; }
.onb-summary .row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:15px; }
.onb-summary .row b{ font-weight:700; }
.onb-summary .row--total{ border-top:1px solid var(--l-line); margin-top:6px; padding-top:13px; font-size:17px; }

/* trial onboarding — value checklist */
.onb-list{ list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:13px; }
.onb-list li{ position:relative; padding-left:34px; font-size:15.5px; color:var(--l-ink2); line-height:1.4; }
.onb-list li b{ color:var(--l-ink); font-weight:700; }
.onb-list li::before{ content:"✓"; position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%; font-size:12px; font-weight:800;
  background:#e7f0ff; color:var(--l-blue); display:flex; align-items:center; justify-content:center; }

/* trial onboarding — timeline */
.onb-tl{ position:relative; margin:6px 0 2px; }
.onb-tl::before{ content:""; position:absolute; left:18px; top:22px; bottom:22px; width:2px; z-index:0;
  background:linear-gradient(180deg,var(--l-blue),var(--l-blue2)); opacity:.3; }
.onb-tl-step{ position:relative; display:flex; gap:15px; padding:11px 0; }
.onb-tl-ic{ position:relative; z-index:1; flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:19px; background:#eef4ff; box-shadow:0 0 0 4px #fff; }
.onb-tl-bd{ padding-top:1px; }
.onb-tl-when{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--l-blue); }
.onb-tl-bd h5{ margin:2px 0 3px; font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--l-ink); }
.onb-tl-bd p{ margin:0; font-size:14px; color:var(--l-ink2); line-height:1.45; }
.onb-tl-bd p b{ color:var(--l-ink); font-weight:700; }

/* trial onboarding — email capture */
.onb-field{ margin:2px 0 0; }
.onb-field input{ width:100%; font-family:inherit; font-size:16px; padding:15px 16px; border:2px solid var(--l-line); border-radius:14px;
  color:var(--l-ink); background:#fff; transition:border-color .15s ease; }
.onb-field input::placeholder{ color:var(--l-mut); }
.onb-field input:focus{ outline:none; border-color:var(--l-blue); }
.onb-field input.is-err{ border-color:#e0506b; }
.onb-msg{ min-height:18px; margin-top:8px; font-size:13px; font-weight:600; color:#d6435e; }
.onb-note{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:13px; color:var(--l-mut); line-height:1.45; }

/* =================== a11y, motion, mobile, signatures =================== */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* visible keyboard focus */
.lbtn:focus-visible, .t5:focus-visible, .mc-node:focus-visible, .onb-opt:focus-visible, .hear__w:focus-visible, .hd-one:focus-visible,
.faq__item summary:focus-visible, .lnav__links a:focus-visible, .navtoggle:focus-visible, .onb__close:focus-visible,
.ambient:focus-visible{
  outline:3px solid var(--l-blue2); outline-offset:3px; border-radius:12px; }

/* tactile press */
.lbtn:active{ transform:translateY(0) scale(.98); }
.t5:active, .hd-one:active{ transform:scale(.97); }
.mc-node:active, .hear__w:active{ transform:translate(-50%,-50%) scale(.96); }

/* display font (Poppins) on headings */
.lhero__h1, .sec-h, .manifesto__h, .lband__h, .feat__txt h3, .lfinal__in h2, .tool h4, .price-card__amt,
.ache__h, .oc b, .versus__h, .mani-price__new{ font-family:var(--font-display), var(--l-font); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s var(--l-ease), transform .6s var(--l-ease); will-change:opacity, transform; }
.reveal.in-view{ opacity:1; transform:none; }

/* kinetic: tone curves (scroll-scrubbed by JS via stroke-dashoffset) */
.lband__demo .t5__curve path{ stroke-dasharray:1; stroke-dashoffset:1; }
.lband__demo.drawn .t5__curve path{ stroke-dashoffset:0; transition:stroke-dashoffset .9s var(--l-ease); }

/* kinetic: constellation lines assemble */
.minicon__lines line{ stroke-dasharray:1; stroke-dashoffset:1; }
.minicon.drawn line{ stroke-dashoffset:0; transition:stroke-dashoffset .75s var(--l-ease); }
.minicon.drawn line:nth-child(n+3){ transition-delay:.12s; }
.minicon.drawn line:nth-child(n+6){ transition-delay:.24s; }

/* pause perpetual hero animation off-screen */
.lhero.is-out .lhero__bg, .lhero.is-out .lhero__wave path{ animation-play-state:paused; }

/* page-wide sound-reactive: the hero "listens" when any audio plays anywhere */
.lhero__wave path{ transition:stroke .25s ease; }
body.is-playing .lhero__wave path{ stroke:rgba(143,192,255,.95); }

/* audio error nudge */
@keyframes errShake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-4px);} 75%{ transform:translateX(4px);} }
.is-err{ animation:errShake .4s ease; }

/* mobile nav */
.navtoggle{ display:none; width:42px; height:42px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; }
.lnav.is-scrolled .navtoggle{ color:var(--l-ink); border-color:var(--l-line); background:var(--l-bg2); }
.navtoggle span, .navtoggle span::before, .navtoggle span::after{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.2s; }
.navtoggle span{ position:relative; } .navtoggle span::before{ content:""; position:absolute; top:-6px; } .navtoggle span::after{ content:""; position:absolute; top:6px; }
.lnav.is-open .navtoggle span{ background:transparent; }
.lnav.is-open .navtoggle span::before{ top:0; transform:rotate(45deg); } .lnav.is-open .navtoggle span::after{ top:0; transform:rotate(-45deg); }
@media (max-width:760px){
  .lnav__links{ display:none; }
  .navtoggle{ display:flex; }
  .lnav__cta .lbtn--ghost{ display:none; }
  .lnav__links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:6px 0 12px;
    background:rgba(255,255,255,.97); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--l-line); box-shadow:0 14px 26px -16px rgba(13,27,42,.3); }
  .lnav.is-open .lnav__links{ display:flex; }
  .lnav__links a{ color:var(--l-ink2); padding:13px 24px; }
  .lnav__links a:hover{ background:var(--l-bg2); color:var(--l-ink); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; } html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .lband__demo .t5__curve path, .minicon__lines line{ stroke-dashoffset:0; }
}