/* ═══════════════════════════════════════════════════════════════
   Likehart Labs — styles
   bg #050505 · azure #4DA3FF · Space Grotesk + Inter
   seam: #07162c (sampled from frame_0301 bottom strip — the film rests on deep navy)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg: #050505;
  --seam: #07162c;            /* sampled — section 1 background start */
  --azure: #4DA3FF;
  --azure-dim: rgba(77,163,255,.55);
  --ink-hi: rgba(255,255,255,.92);
  --ink: rgba(255,255,255,.6);
  --ink-lo: rgba(255,255,255,.38);
  --hairline: rgba(255,255,255,.09);
  --display: "Clash Display", system-ui, sans-serif;
  --body: "Satoshi", system-ui, sans-serif;
  --wrap: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scrollbar-width:thin;
  scrollbar-color:#26262b var(--bg);
}
html,body{ overflow-x:clip }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* minimal dark scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#222228; border-radius:99px; border:2px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#39415a }

::selection{ background:rgba(77,163,255,.28); color:#fff }

h1,h2,h3{ font-family:var(--display); color:var(--ink-hi); font-weight:600; letter-spacing:-0.02em }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }

:focus-visible{ outline:2px solid var(--azure); outline-offset:3px; border-radius:4px }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:500; letter-spacing:.01em;
  border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:box-shadow .35s var(--ease), background-color .35s var(--ease),
             color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{
  background:var(--azure); color:#04101f; border:1px solid var(--azure);
  padding:.9em 1.9em; font-size:1rem;
}
.btn--solid:hover{
  box-shadow:0 0 44px rgba(77,163,255,.4), 0 0 12px rgba(77,163,255,.25);
  transform:translateY(-1px);
}
.btn--ghost{
  background:transparent; color:currentColor;
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding:.62em 1.35em; font-size:.86rem;
}
.btn--ghost:hover{
  border-color:var(--azure);
  box-shadow:0 0 26px rgba(77,163,255,.28);
  color:var(--azure);
  background:rgba(77,163,255,.06);
}

/* ── Liquid CTA (vanilla port of the sniped liquid-gradient button) ── */
@property --liq-a { syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes liq-spin { to { --liq-a:360deg } }

.btn--liquid{
  position:relative; isolation:isolate; overflow:visible;
  padding:.95em 2.1em; font-size:1rem; font-weight:600;
  color:#f4f8ff; background:#081120;
  border:1px solid rgba(77,163,255,.4);
  text-shadow:0 1px 8px rgba(4,10,20,.8);
}
.btn--liquid > span{ position:relative; z-index:2 }
.btn--liquid::before,
.btn--liquid::after{
  content:""; position:absolute; border-radius:inherit; pointer-events:none;
  background:
    conic-gradient(from var(--liq-a),
      #4DA3FF, #0B4FD8, #F4F8FF, #1E10C5, #7DB9FF,
      #0017E9, #B2D4FF, #2B1BD6, #4DA3FF);
  animation:liq-spin 7s linear infinite;
}
.btn--liquid::before{             /* outer halo */
  inset:-7px; z-index:-2;
  filter:blur(16px) saturate(1.5);
  opacity:.5;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.btn--liquid::after{              /* liquid rim under the dark core */
  inset:0; z-index:0;
  filter:blur(6px) saturate(1.25);
  opacity:.9;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding:3px;                    /* rim thickness the mask reveals */
}
.btn--liquid:hover{
  transform:translateY(-1px) scale(1.02);
  border-color:rgba(178,212,255,.75);
  box-shadow:0 0 46px rgba(77,163,255,.35), inset 0 0 22px rgba(77,163,255,.18);
}
.btn--liquid:hover::before{ opacity:.95; filter:blur(20px) saturate(1.7) }
.btn--liquid:hover::before,
.btn--liquid:hover::after{ animation-duration:2.4s }
@media (prefers-reduced-motion: reduce){
  .btn--liquid::before, .btn--liquid::after{ animation:none }
}

/* ── Loader ──────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none }
.loader__mark{ width:44px; height:44px }
.loader__bar{
  width:min(240px, 56vw); height:1px; background:rgba(255,255,255,.12);
  overflow:hidden; border-radius:99px;
}
.loader__bar span{
  display:block; height:100%; width:100%;
  background:var(--azure);
  box-shadow:0 0 12px rgba(77,163,255,.8);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .2s linear;
}
.loader__pct{
  font-family:var(--display); font-size:.72rem; letter-spacing:.32em;
  color:var(--ink-lo); font-variant-numeric:tabular-nums;
}

/* ── Header ──────────────────────────────────────────────── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.1rem clamp(1.25rem, 4vw, 2.75rem);
  color:#fff;
  transition:color .45s var(--ease);
  pointer-events:none;
}
.header > *{ pointer-events:auto }
.header.on-light{ color:#0a0a0a }

.header__mark{
  font-family:var(--display); font-weight:700; font-size:.95rem;
  letter-spacing:.22em; text-transform:uppercase; color:currentColor;
}
.header__chapter{
  display:flex; align-items:center; gap:.8rem;
  transition:opacity .5s var(--ease);
}
.header__chapter-label{
  font-family:var(--display); font-size:.66rem; letter-spacing:.26em;
  text-transform:uppercase; color:currentColor; opacity:.55;
  min-width:12ch; text-align:right;
}
.header__chapter-bar{
  width:72px; height:1px; background:color-mix(in srgb, currentColor 18%, transparent);
  border-radius:99px; overflow:hidden; display:block;
}
.header__chapter-bar i{
  display:block; height:100%; background:var(--azure);
  transform:scaleX(0); transform-origin:left center;
}
.header__mark{ margin-right:auto }
.header__cta{ flex-shrink:0 }
.header__chapter[data-hidden="1"]{ opacity:0 }

/* ── The film ────────────────────────────────────────────── */
.film-scroll{ height:500vh; position:relative }
.film-stage{
  position:sticky; top:0;
  height:100vh; height:100svh;
  overflow:hidden;
  background:var(--bg);
}
#filmCanvas{ position:absolute; inset:0; width:100%; height:100% }

/* stage-only texture */
.fx{ position:absolute; pointer-events:none }
.fx--vignette{
  inset:0; z-index:2;
  background:radial-gradient(ellipse 78% 68% at 50% 48%, transparent 52%, rgba(0,0,0,.52) 100%);
}
.fx--grain{
  inset:-60px; z-index:3; opacity:.05;
  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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx--bottomfade{
  left:0; right:0; bottom:0; height:36vh; z-index:4; opacity:0;
  background:linear-gradient(to bottom, transparent, var(--seam) 82%);
}

/* beats */
.beats{ position:absolute; inset:0; z-index:5; pointer-events:none }
.beat{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.5rem, 6vw, 6rem);
  opacity:0; visibility:hidden;
  will-change:transform, opacity;
  pointer-events:none;
}
.beat a, .beat button{ pointer-events:auto }

.beat--hero{ align-items:center; text-align:center }
.beat__wordmark{
  font-size:clamp(3.4rem, 11.5vw, 9rem);
  line-height:.92; letter-spacing:-0.045em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 0 90px rgba(77,163,255,.16), 0 2px 34px rgba(0,0,0,.65);
}
.beat__tag{
  margin-top:1.6rem;
  font-family:var(--display); font-weight:500;
  font-size:clamp(.95rem, 1.8vw, 1.2rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.8);
  text-shadow:0 1px 22px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.55);
}

.beat--left{ align-items:flex-start; text-align:left }
.beat--right{ align-items:flex-end; text-align:right }
.beat__title{
  font-size:clamp(2.1rem, 5.4vw, 4.4rem);
  line-height:1.02; letter-spacing:-0.035em; color:var(--ink-hi);
}
.beat__body{
  margin-top:1.15rem; max-width:34ch;
  font-size:clamp(.98rem, 1.6vw, 1.15rem);
  color:rgba(255,255,255,.72);
  text-shadow:0 1px 18px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
}

.beat--finale{ align-items:flex-start; text-align:left }  /* anchored left — subject stays hero */
.beat--finale .beat__title{ font-size:clamp(2.3rem, 6vw, 5rem) }
.beat__cta{ margin-top:2.1rem; font-size:1.05rem }
.beat__note{
  margin-top:1rem; font-size:.82rem; letter-spacing:.06em; color:var(--ink-lo);
}

/* scroll hint */
.scroll-hint{
  position:absolute; left:50%; bottom:2.2rem; z-index:6;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  pointer-events:none;
}
.scroll-hint span{
  font-family:var(--display); font-size:.62rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-lo);
}
.scroll-hint i{
  width:1px; height:44px;
  background:linear-gradient(to bottom, var(--azure-dim), transparent);
  animation:hintdrip 2.2s var(--ease) infinite;
}
@keyframes hintdrip{
  0%{ transform:scaleY(0); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:top }
  56%{ transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* static hero (reduced-motion / no-JS) */
.static-hero{
  display:none;
  position:relative; inset:auto;
  min-height:100svh;
  align-items:center; justify-content:center;
  padding:clamp(1.5rem, 6vw, 6rem);
}
.static-hero__bg{ position:absolute; inset:0 }
.static-hero__img{
  width:100%; height:100%; object-fit:cover; opacity:.62;
}
.static-hero__copy{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.static-hero__title{
  font-size:clamp(3rem, 11vw, 8rem); line-height:.92;
  letter-spacing:-0.045em; text-transform:uppercase; color:#fff;
}
.static-hero__tag{
  margin:1.4rem 0 2rem;
  font-family:var(--display); letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(.9rem, 1.8vw, 1.15rem);
}

/* ── Content sections ────────────────────────────────────── */
.section{ position:relative; padding:clamp(6rem, 14vh, 10rem) clamp(1.25rem, 5vw, 3rem) }
.section--seam{
  /* landing zone: starts at the sampled seam colour, melts to bg */
  background:linear-gradient(to bottom, var(--seam), var(--bg) 42%);
  padding-top:clamp(7rem, 18vh, 12rem);
}
.wrap{ max-width:var(--wrap); margin:0 auto }
.wrap--narrow{ max-width:760px }

.kicker{
  font-family:var(--display); font-weight:500;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--azure);
  margin-bottom:1.4rem;
}
.kicker::after{
  content:""; display:block; width:44px; height:1px;
  background:linear-gradient(to right, var(--azure-dim), transparent);
  margin-top:.9rem;
}
.section__title{
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  line-height:1.04; letter-spacing:-0.035em;
  max-width:18ch;
}
.section__lede{
  margin-top:1.3rem; max-width:52ch; color:var(--ink);
  font-size:clamp(1rem, 1.5vw, 1.15rem);
}

/* recent build card */
.build-card{
  display:block; margin-top:3.5rem;
  max-width:880px;
  border:1px solid var(--hairline); border-radius:18px;
  background:#0a0a0c;
  overflow:clip;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.build-card:hover{
  border-color:rgba(77,163,255,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(77,163,255,.09);
  transform:translateY(-3px);
}
.build-card__chrome{
  display:flex; align-items:center; gap:1rem;
  padding:.8rem 1.2rem;
  border-bottom:1px solid var(--hairline);
}
.build-card__dots{ display:flex; gap:6px }
.build-card__dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14) }
.build-card__url{
  font-family:var(--display); font-size:.74rem; letter-spacing:.06em;
  color:var(--ink-lo);
}
.build-card__screen{
  position:relative; display:block; aspect-ratio:16/7.5;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(196,112,64,.14), transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(77,163,255,.05), transparent 60%),
    #0d0d10;
  overflow:hidden;
}
.bcs{ position:absolute; display:block; border-radius:4px; background:rgba(255,255,255,.08) }
.bcs--nav{ top:7%; left:6%; right:6%; height:4.5% ; background:rgba(255,255,255,.06)}
.bcs--h1{ top:24%; left:6%; width:44%; height:8%; background:rgba(255,255,255,.16) }
.bcs--h2{ top:37%; left:6%; width:30%; height:5%; background:rgba(255,255,255,.08) }
.bcs--cta{ top:52%; left:6%; width:17%; height:8%; border-radius:99px; background:rgba(196,112,64,.55) }
.bcs--col{ bottom:8%; height:18%; width:26%; background:rgba(255,255,255,.05) }
.bcs--c1{ left:6% } .bcs--c2{ left:37% } .bcs--c3{ left:68% }
.build-card__meta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.4rem;
}
.build-card__label{ font-size:.92rem; color:var(--ink) }
.build-card__open{
  font-family:var(--display); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azure); white-space:nowrap;
}

/* offer steps */
.section--grid{
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size:72px 72px;
}
.steps{
  list-style:none; counter-reset:none;
  margin-top:4rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 3rem);
}
.step{ position:relative; padding-top:1rem; border-top:1px solid var(--hairline) }
.step__num{
  position:absolute; top:-1.1rem; right:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.4rem, 6vw, 5.2rem); line-height:1;
  color:rgba(255,255,255,.055);
  letter-spacing:-0.04em;
}
.step__title{ font-size:1.28rem; letter-spacing:-0.015em; margin-top:1.1rem }
.step__body{ margin-top:.8rem; font-size:.98rem; color:var(--ink) }

/* why different */
.diff{
  margin-top:4rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 3rem);
}
.diff__item{
  padding:2rem 1.9rem;
  border:1px solid var(--hairline); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 60%);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.diff__item:hover{
  border-color:rgba(77,163,255,.28);
  box-shadow:0 0 46px rgba(77,163,255,.07);
}
.diff__title{ font-size:1.22rem; letter-spacing:-0.015em }
.diff__body{ margin-top:.75rem; font-size:.98rem }

/* about */
.about__body{ margin-top:1.8rem; display:grid; gap:1.1rem; font-size:1.08rem }
.about__body p:first-child{ color:var(--ink-hi); font-size:1.16rem }

.about-card{ margin-top:2.1rem; display:flex; align-items:center; gap:1.05rem }
.about-card__mark{
  width:72px; height:72px; flex:none;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:.04em;
  color:var(--azure);
  background:rgba(77,163,255,.08);
  border:1px solid rgba(77,163,255,.32);
  border-radius:14px;
}
.about-card__mark--photo{ display:block; object-fit:cover }
.about-card__id{ display:grid; gap:.2rem }
.about-card__name{ color:var(--ink-hi); font-weight:700; letter-spacing:-0.01em }
.about-card__meta{ color:var(--ink-lo); font-size:.92rem }
.about-card__meta a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline) }
.about-card__meta a:hover{ color:var(--azure) }

/* contact */
.section--contact{
  background:
    radial-gradient(52% 38% at 50% 0%, rgba(77,163,255,.06), transparent 70%),
    var(--bg);
  border-top:1px solid var(--hairline);
}
.form{ margin-top:3rem; display:grid; gap:1.5rem }
.hp{ position:absolute; left:-9999px; opacity:0 }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.field{ display:grid; gap:.55rem }
.field label{
  font-family:var(--display); font-size:.74rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-lo);
}
.field input, .field textarea{
  width:100%;
  background:#0b0b0e;
  border:1px solid var(--hairline); border-radius:10px;
  padding:.95rem 1.1rem;
  color:var(--ink-hi); font-family:var(--body); font-size:1rem;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder{ color:rgba(255,255,255,.22) }
.field textarea{ resize:vertical; min-height:120px }
.field input:focus-visible, .field textarea:focus-visible{
  outline:none; border-color:var(--azure-dim);
  box-shadow:0 0 0 3px rgba(77,163,255,.14);
}
.form__submit{ justify-self:start; margin-top:.4rem }
.contact__alt{ margin-top:2.4rem; font-size:.95rem; color:var(--ink-lo) }
.contact__alt a{ color:var(--ink); border-bottom:1px solid var(--hairline); transition:color .3s, border-color .3s }
.contact__alt a:hover{ color:var(--azure); border-color:var(--azure-dim) }

/* footer */
.footer{ border-top:1px solid var(--hairline); padding:2.6rem clamp(1.25rem,5vw,3rem) 2.2rem }
.footer__row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 2.5rem;
}
.footer__mark{
  font-family:var(--display); font-weight:700; font-size:.85rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-hi);
}
.footer__loc{ font-size:.88rem; color:var(--ink-lo) }
.footer__contact{ font-size:.88rem; color:var(--ink-lo); margin-left:auto }
.footer__contact a:hover{ color:var(--azure) }
.footer__legal{ margin-top:1.6rem }
.footer__legal p{ font-size:.78rem; color:rgba(255,255,255,.26) }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px){
  .steps, .diff{ grid-template-columns:1fr; gap:2.2rem }
  .step__num{ right:auto; left:0; top:-1.4rem }
  .step{ padding-top:2.6rem }
  .step__title{ margin-top:0 }
}
@media (max-width: 640px){
  .header__chapter{ display:none }
  .header__cta{ font-size:.78rem; padding:.55em 1.1em }
  .form__row{ grid-template-columns:1fr }
  .beat--right{ align-items:flex-start; text-align:left }
  .beat__body{ max-width:28ch }
  .build-card__meta{ flex-direction:column; align-items:flex-start; gap:.5rem }
}

/* ── Proof grid (lab) ────────────────────────────────────── */
.proof-grid{
  margin-top:3.5rem;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 3vw, 2.5rem);
}
.proof-grid .build-card{ margin-top:0; max-width:none }
.proof-note{
  margin-top:2.2rem; font-size:.92rem; color:var(--ink-lo);
  font-style:italic;
}

/* splat card screen — soft gaussian point-cloud motif */
.build-card__screen--splat{
  background:
    radial-gradient(90% 80% at 50% 110%, rgba(77,163,255,.08), transparent 60%),
    #0b0d12;
}
.splat-dot{
  position:absolute; left:var(--x); top:var(--y);
  width:calc(26px * var(--s)); height:calc(26px * var(--s));
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,163,255,.5), rgba(77,163,255,0) 70%);
  filter:blur(1px);
}
.splat-grid{
  position:absolute; inset:auto 0 0 0; height:52%;
  background:
    linear-gradient(rgba(77,163,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,163,255,.07) 1px, transparent 1px);
  background-size:34px 26px;
  transform:perspective(320px) rotateX(58deg) scale(1.4);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 30%, transparent);
  -webkit-mask-image:linear-gradient(to top, #000 30%, transparent);
}
.splat-tag{
  position:absolute; left:50%; top:38%; transform:translateX(-50%);
  font-family:var(--display); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
  border:1px solid var(--hairline); border-radius:999px;
  padding:.5em 1.1em; background:rgba(5,5,5,.5); backdrop-filter:blur(4px);
}

/* ── Pricing tiers ───────────────────────────────────────── */
.tiers{
  margin-top:4rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 2.5rem);
  align-items:stretch;
}
.tier{
  position:relative;
  padding:2.2rem 2rem;
  border:1px solid var(--hairline); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.022), transparent 60%);
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.tier:hover{ border-color:rgba(77,163,255,.28); box-shadow:0 0 46px rgba(77,163,255,.07) }
.tier--featured{
  border-color:rgba(77,163,255,.42);
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(77,163,255,.09), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%);
  box-shadow:0 0 60px rgba(77,163,255,.08);
}
.tier__flag{
  position:absolute; top:-0.85em; left:1.6rem;
  font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:#04101f; background:var(--azure);
  border-radius:999px; padding:.45em 1em;
}
.tier__title{ font-size:1.18rem; letter-spacing:-0.015em }
.tier__price{
  margin-top:.9rem;
  font-family:var(--display); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(1.7rem, 2.6vw, 2.2rem); color:var(--ink-hi);
}
.tier__body{ margin-top:1rem; font-size:.96rem; color:var(--ink); flex:1 }
.tier__note{
  margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--hairline);
  font-size:.86rem; color:var(--ink-lo);
}
.tiers__cap{
  margin-top:2.6rem; font-size:.95rem; color:var(--ink-lo);
  max-width:56ch;
}

/* ── Promise strip ───────────────────────────────────────── */
.section--promise{
  padding-top:clamp(4rem, 9vh, 6.5rem);
  padding-bottom:clamp(4.5rem, 10vh, 7rem);
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(77,163,255,.05), transparent 70%),
    var(--bg);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.promise{
  margin-top:2.6rem;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1.5rem, 3vw, 3rem);
}
.promise__item{ padding-top:1.2rem; border-top:1px solid rgba(77,163,255,.3) }
.promise__title{ font-size:1.22rem; letter-spacing:-0.015em; color:var(--ink-hi) }
.promise__body{ margin-top:.7rem; font-size:.95rem; color:var(--ink) }

/* ── Assistant widget ────────────────────────────────────── */
.asst-btn{
  position:fixed; right:clamp(1rem, 3vw, 1.8rem); bottom:clamp(1rem, 3vw, 1.8rem);
  z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#081120; color:var(--azure);
  border:1px solid rgba(77,163,255,.45);
  cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 24px rgba(77,163,255,.15);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.asst-btn:hover{ transform:translateY(-2px); border-color:var(--azure); box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 34px rgba(77,163,255,.3) }
.asst-btn svg{ width:24px; height:24px }
.asst-btn__dot{
  position:absolute; top:3px; right:3px; width:10px; height:10px; border-radius:50%;
  background:var(--azure); border:2px solid #050505;
}

.asst{
  position:fixed; right:clamp(.6rem, 2.5vw, 1.8rem); bottom:calc(clamp(1rem,3vw,1.8rem) + 68px);
  z-index:61;
  width:min(370px, calc(100vw - 1.2rem));
  max-height:min(560px, 74vh);
  display:none; flex-direction:column;
  background:#0a0b0f;
  border:1px solid rgba(77,163,255,.28); border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.65), 0 0 60px rgba(77,163,255,.08);
  overflow:clip;
}
.asst.open{ display:flex }
.asst__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem;
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg, rgba(77,163,255,.06), transparent);
}
.asst__id{ display:grid; gap:.1rem }
.asst__name{ font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--ink-hi) }
.asst__sub{ font-size:.72rem; color:var(--ink-lo); letter-spacing:.04em }
.asst__close{
  background:none; border:none; cursor:pointer; color:var(--ink-lo);
  font-size:1.2rem; line-height:1; padding:.3rem .5rem; border-radius:8px;
}
.asst__close:hover{ color:var(--ink-hi); background:rgba(255,255,255,.06) }
.asst__log{
  flex:1; overflow-y:auto; padding:1.1rem;
  display:flex; flex-direction:column; gap:.7rem;
  scrollbar-width:thin;
}
.asst__msg{
  max-width:88%;
  padding:.7rem .95rem; border-radius:14px;
  font-size:.92rem; line-height:1.5;
}
.asst__msg--bot{
  align-self:flex-start;
  background:rgba(255,255,255,.045); color:var(--ink);
  border:1px solid var(--hairline);
  border-bottom-left-radius:4px;
}
.asst__msg--bot a{ color:var(--azure); border-bottom:1px solid rgba(77,163,255,.35) }
.asst__msg--me{
  align-self:flex-end;
  background:rgba(77,163,255,.14); color:var(--ink-hi);
  border:1px solid rgba(77,163,255,.3);
  border-bottom-right-radius:4px;
}
.asst__chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding:.35rem 1.1rem .8rem;
}
.asst__chip{
  font-family:var(--display); font-size:.72rem; letter-spacing:.05em;
  color:var(--ink); background:transparent;
  border:1px solid var(--hairline); border-radius:999px;
  padding:.45em 1em; cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
.asst__chip:hover{ color:var(--azure); border-color:rgba(77,163,255,.4); background:rgba(77,163,255,.06) }
.asst__form{
  display:flex; gap:.5rem;
  padding:.8rem; border-top:1px solid var(--hairline);
}
.asst__input{
  flex:1; background:#0e0f14;
  border:1px solid var(--hairline); border-radius:999px;
  padding:.65rem 1.05rem;
  color:var(--ink-hi); font-family:var(--body); font-size:.92rem;
}
.asst__input:focus-visible{ outline:none; border-color:var(--azure-dim); box-shadow:0 0 0 3px rgba(77,163,255,.12) }
.asst__send{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--azure); color:#04101f; border:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.asst__send:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(77,163,255,.4) }
.asst__send svg{ width:17px; height:17px }

/* ── Responsive: new sections ────────────────────────────── */
@media (max-width: 900px){
  .proof-grid, .tiers, .promise{ grid-template-columns:1fr }
  .tier--featured{ order:-1 }
}

/* ── Reduced motion: static hero, no film scrub ──────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
  .film-scroll{ height:auto }
  #filmCanvas, .fx, .beats, .loader, .scroll-hint, .header__chapter{ display:none }
  .static-hero{ display:flex }
}