/* ==========================================================================
   Subtitl — HERO (index.html only)
   --------------------------------------------------------------------------
   The owner's pick (2026-09-25, after trying a light hero): the original
   deep-navy field + blue bloom wash + ASCII glyph canvas filling the whole
   hero (app.js AsciiBloom, #heroBloom), the original headline typography and
   the default dark CTA — with the reel beside the copy, no badge, no panel.

   THE FEATHER. The dark field lives in its own layer (.hero-bg) and is
   dissolved into the page's white by a MASK, so the glyphs fade with it:
     · a radial "hole" — an ellipse centred below the hero — clears the
       middle first and the flanks last, so the dark ends in an ARC (higher
       in the middle, lower at the sides), over a long, eased ramp;
     · intersected with a long eased linear fade over the last ~34%, so the
       two bottom corners also reach full white by the hero's edge (no seam
       with the white section below) without ending on a flat edge.
   Earlier attempts painted a white dome ON TOP of a base gradient that
   itself whitened edge to edge — that base band is what read as a flat
   line. The hero's tall bottom padding is the feather's room.

   Tried and dropped the same day (owner): a light hero, floating chips, a
   "works inside" row, a ghost CTA, a pay-once note, an animated caption
   sticker, a blue then a white panel behind the reel, a trust badge.
   ========================================================================== */
.hero{
  position:relative;
  /* full-bleed: break out of the framed shell so the field spans the whole
     viewport; clip sideways only, so the reel's glow can bleed vertically */
  width:100vw;margin-inline:calc(50% - 50vw);
  overflow-x:clip;overflow-y:visible;
  z-index:3;
  color:#fff;
  padding-top:clamp(120px,15vh,160px);
  padding-bottom:clamp(300px,30vw,460px);   /* the feather's room */
}
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(80,130,230,.40) 0%, transparent 58%),
    radial-gradient(ellipse 62% 46% at 80% 26%, rgba(50,100,210,.34) 0%, transparent 62%),
    radial-gradient(ellipse 50% 32% at 16% 58%, rgba(30,70,160,.18) 0%, transparent 70%),
    linear-gradient(180deg,#03060f 0%,#050c22 16%,#0a1a45 38%,#103470 58%,#1b4690 76%,#2657a3 100%);
  /* hole: ellipse 63% × 56% of the box, centred 12% below the bottom edge.
     Solved so the dark starts to go at ~56% down in the middle and is gone
     by ~87%, while at the sides it only starts at ~78% — the arc. */
  --hole:radial-gradient(ellipse 63% 56.4% at 50% 112.4%,
    transparent 0%, transparent 45%, rgba(0,0,0,.06) 53%, rgba(0,0,0,.2) 61%, rgba(0,0,0,.42) 70%,
    rgba(0,0,0,.66) 79%, rgba(0,0,0,.86) 88%, rgba(0,0,0,.96) 95%, #000 100%);
  /* long eased floor: a short one ends the flanks on a flat edge */
  --floor:linear-gradient(180deg,#000 0%,#000 66%,rgba(0,0,0,.88) 74%,rgba(0,0,0,.64) 82%,rgba(0,0,0,.36) 89%,rgba(0,0,0,.13) 95%,transparent 100%);
  -webkit-mask-image:var(--hole),var(--floor);
  -webkit-mask-composite:source-in;
          mask-image:var(--hole),var(--floor);
          mask-composite:intersect;
}
/* the glyph field + the soft blue wash under it, both exactly layer-sized */
.bloom--hero{inset:0;width:100%;height:100%}
.bloom-wash{
  position:absolute;inset:0;pointer-events:none;
  /* mirrored 1:1 by the glyph luminance mask (app.js AsciiBloom
     luminanceMap default blobs) — keep the two in step */
  background:
    radial-gradient(ellipse 56% 46% at 74% 28%, rgba(120,180,255,.85) 0%, rgba(70,140,250,.5) 30%, rgba(45,105,220,.24) 55%, transparent 74%),
    radial-gradient(ellipse 38% 30% at 50% 42%, rgba(110,180,255,.38) 0%, transparent 70%),
    radial-gradient(ellipse 36% 30% at 24% 24%, rgba(80,150,240,.34) 0%, transparent 68%);
}

.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px;margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
}
.hero-copy{min-width:0}

/* ---- headline: the original hero typography (body face, 500, tight),
   white with a contact shadow so it keeps a crisp edge over the glyphs --- */
.hero-title{
  margin:0;font-family:var(--body);font-weight:500;
  font-size:clamp(2.4rem,5vw,3.85rem);line-height:1.05;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 4px rgba(2,10,34,.55),0 1px 22px rgba(2,14,44,.5);
}
.hero-title .reveal-line{padding-bottom:.02em}
.hero-title .h1-line{white-space:nowrap}

.hero .sub{margin-top:22px;max-width:44ch;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.55;
  color:rgba(238,244,255,.92);text-shadow:0 1px 16px rgba(2,12,38,.5)}

/* ---- CTA: styles.css .btn-cta, as it always was (phones re-skin it as
   chrome — see the PHONE block at the end) ------------------------------ */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}

/* ---- the stage: the reel + the note ------------------------------------ */
.hero-stage{position:relative;min-width:0;padding-top:12px}
.hero .hero-card-wrap{position:relative;z-index:2;margin-inline:auto;width:clamp(250px,21vw,310px)}
.hero .tilt-card{box-shadow:0 0 0 7px rgba(255,255,255,.18),0 0 0 8px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,6,24,.85)}

/* handwritten note + scribbled arrow. Both hang off .hero-card-wrap (the
   reel), not the stage, so the geometry is in the reel's own frame and the
   tip lands on the "previous" button at every width: that button is 40px,
   centred at (-8px, 50%) of the wrap (styles.css .tilt-arrow.prev). The
   SVG is 136px wide (viewBox 120 → ×1.133); its arrowhead vertex (107,158
   in viewBox units) is placed just up-left of the button, with a 6px gap:
   left = -26 - 107×1.133 = -147px, top = 50% - 18 - 158×1.133 = 50% - 197px.
   The note sits above the curve's start (22,6 → about -122px, 50% - 190px). */
.hero-hand{position:absolute;right:calc(100% + 58px);bottom:calc(50% + 196px);z-index:3;
  transform:rotate(-6deg);transform-origin:100% 100%;white-space:nowrap;text-align:right;pointer-events:none;
  font:700 1.55rem/1.05 "Caveat",cursive;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(2,12,38,.6)}
.hero-scribble{position:absolute;left:-147px;top:calc(50% - 197px);width:136px;height:193px;z-index:3;overflow:visible;pointer-events:none;
  fill:none;stroke:rgba(255,255,255,.85);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 6px rgba(2,12,38,.45))}
/* draw-on after load: the curve, then the arrowhead flicks in; the note
   fades up just before (pathLength="1" on both paths in the markup) */
.hero-scribble path{stroke-dasharray:1;stroke-dashoffset:1;animation:scribDraw 1.1s cubic-bezier(.55,.05,.25,1) 1.5s forwards}
.hero-scribble path + path{animation-duration:.35s;animation-delay:2.55s}
.hero-hand{opacity:0;animation:handIn .7s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
@keyframes scribDraw{to{stroke-dashoffset:0}}
@keyframes handIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){
  .hero-scribble path{stroke-dasharray:none;animation:none}
  .hero-hand{opacity:1;animation:none}
}

/* ---- responsive ---------------------------------------------------------- */
@media (min-width:1600px){
  .hero-grid{max-width:1280px}
  .hero-title{font-size:clamp(2.4rem,5vw,4.4rem)}
  .hero .hero-card-wrap{width:340px}
}
@media (max-width:1100px){
  .hero-hand{font-size:1.35rem}
}
@media (max-width:900px){
  .hero{padding-top:clamp(104px,15vw,130px);padding-bottom:clamp(220px,42vw,320px)}
  /* stacked, the hero is tall and narrow: a steeper arc whose ramp sits
     under the reel (solved the same way — see the note at the top) */
  .hero-bg{
    --hole:radial-gradient(ellipse 62% 30% at 50% 102%,
      transparent 0%, transparent 40%, rgba(0,0,0,.06) 49%, rgba(0,0,0,.2) 58%, rgba(0,0,0,.42) 68%,
      rgba(0,0,0,.66) 78%, rgba(0,0,0,.86) 88%, rgba(0,0,0,.96) 95%, #000 100%);
    --floor:linear-gradient(180deg,#000 0%,#000 88%,rgba(0,0,0,.5) 95%,transparent 100%);
  }
  .hero-grid{grid-template-columns:1fr;gap:clamp(36px,7vw,56px)}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero-title{font-size:clamp(2.35rem,9.2vw,3.25rem)}
  .hero-title .h1-line{white-space:normal}
  .hero .sub{margin-inline:auto;text-shadow:0 1px 3px rgba(2,10,34,.6),0 1px 18px rgba(2,12,38,.7)}
  /* stacked, the copy sits right on the densest glyphs — dim the field */
  .bloom--hero{opacity:.55}
  .hero-cta{justify-content:center}
  .hero-stage{width:min(100%,560px);margin-inline:auto}
  .hero .hero-card-wrap{width:clamp(230px,56vw,290px)}
}
@media (max-width:700px){
  .hero-hand,.hero-scribble{visibility:hidden}   /* no room left of the centred reel */
  .hero-title{font-size:clamp(2.4rem,11.3vw,3.7rem);
    text-shadow:0 2px 12px rgba(2,10,34,.34),0 3px 30px rgba(2,14,44,.28)}
}
@media (max-width:600px){
  .hero{padding-bottom:clamp(170px,40vw,240px)}
  .hero .sub{font-size:1rem}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .hero-cta > a{justify-content:center}
}

/* ==========================================================================
   PHONE HERO (≤700px) = the LIVE site's phone hero, exactly (owner
   2026-09-25: "keep the hero exactly like the live website, just with a
   chrome Get Subtitl button"). Ported from main's styles.css phone block:
   no reel, no note, the smaller sub (its own live copy, .sub-m), a compact
   centred CTA, and the SVG wave waterline instead of the arc mask.
   ========================================================================== */
.hero-wave,.hero .sub-m{display:none}
@media (max-width:700px){
  .hero{padding-top:clamp(112px,13vh,148px);padding-bottom:460px}
  .hero-bg{
    -webkit-mask-image:none;mask-image:none;
    background:
      radial-gradient(ellipse 90% 55% at 50% -8%, rgba(80,130,230,.40) 0%, transparent 58%),
      radial-gradient(ellipse 62% 46% at 80% 26%, rgba(50,100,210,.34) 0%, transparent 62%),
      radial-gradient(ellipse 50% 32% at 16% 58%, rgba(30,70,160,.18) 0%, transparent 70%),
      linear-gradient(180deg,#03060f 0%,#050c22 20%,#0a1a45 46%,#10346f 68%,#1a4a94 84%,#24579f 94%,#2b62ac 100%);
  }
  .bloom--hero{opacity:.95}
  .hero-wave{display:block;position:absolute;left:-20%;bottom:-170px;width:140%;   /* low, so the dark lasts behind the platforms heading (mobile.css) */
    max-width:none;height:640px;
    z-index:1;pointer-events:none;filter:blur(57px)}
  .hero-wave path{fill:#fff}
  .hero-grid{gap:0}
  .hero-stage{display:none}
  .hero-title{margin-top:0;font-size:clamp(2.4rem,11.3vw,3.7rem);line-height:1.05;
    text-shadow:0 2px 12px rgba(2,10,34,.34),0 3px 30px rgba(2,14,44,.28)}
  .hero .sub-d{display:none}
  .hero .sub-m{display:inline}
  .hero .sub{margin:12px auto 0;font-size:.84rem;max-width:32ch;line-height:1.5;color:rgba(238,244,255,.95);text-shadow:0 1px 16px rgba(2,12,38,.5)}
  .hero-cta{flex-direction:row;justify-content:center;align-items:center;width:auto;max-width:none;margin-top:20px}
  .hero-cta > a{justify-content:center}
  .hero .btn-cta{padding:13px 26px;font-size:.98rem}

  /* CHROME. A polished white-metal pill: bright crown, cooler base, a crisp
     white lip on top and a thin steel line underneath; the running edge
     light turns blue — the navy field reflected in the metal. */
  .hero .btn-cta{color:#0a1430;font-weight:650;letter-spacing:-.005em;text-shadow:0 1px 0 rgba(255,255,255,.8);
    box-shadow:0 12px 28px -10px rgba(0,6,28,.85),0 0 0 1px rgba(255,255,255,.14),0 0 24px -4px rgba(150,190,255,.45)}
  .hero .btn-cta::after{
    background:
      radial-gradient(120% 95% at 50% -35%,#fff 0%,rgba(255,255,255,.9) 38%,rgba(255,255,255,0) 64%),
      linear-gradient(180deg,#fdfdfe 0%,#eef1f6 46%,#dfe4ec 72%,#cfd6e2 100%);
    box-shadow:inset 0 1.2px 0 #fff,inset 0 -1px 0 rgba(70,85,120,.45),inset 0 -7px 12px rgba(110,130,170,.2)}
  .hero .btn-cta .cta-grain{display:none}
  .hero .btn-cta .cta-stroke{filter:drop-shadow(0 0 3px rgba(140,185,255,.9)) drop-shadow(0 0 9px rgba(110,160,255,.5))}
  .hero .btn-cta .cta-ring i{background:conic-gradient(from 0deg,
    rgba(255,255,255,.95) 0deg,rgba(255,255,255,.95) 250deg,#6fa8ff 292deg,#b9d6ff 305deg,#6fa8ff 318deg,rgba(255,255,255,.95) 350deg,rgba(255,255,255,.95) 360deg)}
  .hero .btn-cta .si-ic .ic-circle{background:#0a1430;color:#fff}
}

/* ==========================================================================
   FIRST PAINT. The hero's entrance used to wait for app.js (initReveals adds
   .in), so on a slow phone the headline and sub stayed invisible until the
   script arrived — the sub was the LCP element at ~2.8s. The same motion now
   runs as CSS keyframes from the first frame (delays mirror data-delay); when
   app.js later adds .in it lands on the identical end state, so nothing moves.
   ========================================================================== */
.hero .reveal-line > *{animation:heroLine .85s var(--ease) both}
.hero .reveal-line:nth-of-type(2) > *{animation-delay:.09s}
.hero .reveal-line:nth-of-type(3) > *{animation-delay:.16s}
/* TEXT only. The reel (.hero-stage) keeps the JS reveal: a keyframe transform
   on its container stopped the 3D tilt card (preserve-3d + backface-visibility)
   from painting at all in Chrome — it was laid out, opacity 1, and invisible.
   It isn't the LCP element, so nothing is lost by leaving it to app.js. */
.hero .hero-copy [data-reveal]{animation:heroRise .7s var(--ease) both}
.hero .sub[data-reveal]{animation-delay:.14s}
.hero .hero-cta[data-reveal]{animation-delay:.22s}
@keyframes heroLine{from{transform:translateY(116%)}to{transform:none}}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero .reveal-line > *,.hero .hero-copy [data-reveal]{animation:none}
  .hero .reveal-line > *{transform:none}
}