/* ============================================================
   02 · LAYOUT
   Page furniture: progress bar, sticky nav, hero, section shells.
   ------------------------------------------------------------
   Index:  #tick progress · nav + mobile menu · hero + glow
           buttons · section shells · reveal base
   ============================================================ */

/* progress bar: the 3s countdown, then it becomes scroll progress */
#tick{position:fixed;top:0;left:0;height:3px;width:0;background:var(--flame);z-index:120;}
#tick.run{animation:tickfill 3s linear forwards;}
@keyframes tickfill{to{width:100%;}}

/* ---------------- STICKY NAV ---------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:110;padding:20px 0;
  transition:background .3s ease,padding .3s ease,box-shadow .3s ease,backdrop-filter .3s;}
nav.stuck{background:rgba(10,10,12,.86);backdrop-filter:blur(14px);padding:12px 0;
  box-shadow:0 1px 0 rgba(246,243,237,.12);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{font-weight:800;letter-spacing:-.02em;font-size:19px;text-decoration:none;
  color:var(--paper);display:flex;align-items:center;gap:11px;line-height:1.1;}
.brand b{font-weight:800;}
.brand-mark{width:38px;height:38px;flex:0 0 38px;border-radius:9px;display:block;}
.brand em{display:block;font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin-top:3px;}
.brand span{color:var(--flame);}
.navlinks{display:flex;gap:26px;font-size:15px;font-weight:600;align-items:center;}
.navlinks a{text-decoration:none;color:var(--paper);opacity:.74;transition:opacity .2s;padding:4px 0;}
.navlinks a:hover,.navlinks a.active{opacity:1;}
.navlinks a.active{box-shadow:inset 0 -2px 0 var(--flame);}
.navcta{background:var(--flame);color:#fff !important;opacity:1 !important;padding:10px 18px !important;
  border-radius:2px;box-shadow:none !important;}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.burger span{display:block;width:24px;height:2px;background:var(--paper);margin:5px 0;transition:transform .25s,opacity .25s;}
nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
nav.open .burger span:nth-child(2){opacity:0;}
nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:900px){
  .burger{display:block;}
  .navlinks{position:fixed;inset:0 0 auto 0;top:0;padding:88px 28px 28px;background:rgba(10,10,12,.97);
    backdrop-filter:blur(14px);flex-direction:column;align-items:flex-start;gap:4px;
    transform:translateY(-102%);transition:transform .32s cubic-bezier(.2,.7,.2,1);}
  nav.open .navlinks{transform:none;}
  .navlinks a{font-size:22px;padding:12px 0;width:100%;}
}

/* ---------------- HERO ---------------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--ink);}
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(620px 620px at var(--mx,72%) var(--my,18%), rgba(255,59,31,.20), transparent 65%),
             radial-gradient(760px 520px at 4% 96%, rgba(255,176,32,.09), transparent 62%);
  transition:background .18s ease-out;}
.hero .wrap{width:100%;position:relative;z-index:3;padding-top:92px;
  padding-bottom:clamp(110px,16vh,200px);}
.count{display:flex;align-items:baseline;gap:18px;margin-bottom:22px;height:92px;}
.count .num{font-size:100px;line-height:.8;font-weight:800;letter-spacing:-.06em;color:var(--flame);
  font-variant-numeric:tabular-nums;}
.count .lbl{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);font-weight:700;}
h1{font-size:clamp(42px,8.4vw,102px);line-height:.93;font-weight:800;letter-spacing:-.045em;
  margin-bottom:22px;max-width:16ch;}
h1 .hit{color:var(--flame);}
.resolve{filter:blur(15px);opacity:.22;transition:filter .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease;}
.resolved .resolve{filter:blur(0);opacity:1;}
.hero .sub{font-size:clamp(18px,2.1vw,23px);color:#c9c7c1;max-width:46ch;margin-bottom:32px;
  opacity:0;transform:translateY(14px);transition:opacity .6s ease .15s,transform .6s ease .15s;}
.resolved .hero .sub{opacity:1;transform:none;}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero .cta-row{opacity:0;transform:translateY(14px);transition:opacity .6s ease .3s,transform .6s ease .3s;}
.resolved .hero .cta-row{opacity:1;transform:none;}
.scrollcue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;
  color:var(--mute);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  opacity:0;transition:opacity .6s ease .8s;}
.resolved .scrollcue{opacity:1;animation:bob 2.4s ease-in-out infinite 1.4s;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,7px);}}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:16px;
  padding:16px 26px;border-radius:2px;border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .18s ease,background .18s ease,border-color .18s,color .18s;}
.btn-primary{background:var(--flame);color:var(--ink);}   /* ink on flame = 5.6:1; white was only 3.6:1 */
.btn-primary:hover{transform:translateY(-2px);background:#ff5537;color:var(--ink);}
.btn-ghost{border-color:rgba(246,243,237,.32);color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper);transform:translateY(-2px);}
section.band .btn-ghost{border-color:rgba(10,10,12,.32);color:var(--ink);}
section.band .btn-ghost:hover{border-color:var(--ink);}
.replay{background:none;border:0;color:var(--mute);font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 4px;}
.replay:hover{color:var(--paper);}

/* ---------------- SECTIONS ---------------- */
section.band{background:var(--paper);color:var(--ink);padding:100px 0;}
section.band.alt{background:var(--paper-2);}
section.dark{background:var(--ink-2);color:var(--paper);padding:100px 0;}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;
  color:var(--flame);margin-bottom:16px;}
h2{font-size:clamp(31px,5.2vw,58px);line-height:1.03;font-weight:800;letter-spacing:-.035em;
  margin-bottom:18px;max-width:19ch;}
.lead{font-size:clamp(18px,2.1vw,23px);line-height:1.42;max-width:46ch;color:var(--mute-dark);}
section.dark .lead,.close .lead{color:#bcbab4;}
.stand{opacity:0;transform:translateY(26px);}
.stand.in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);}

/* ---------------- INNER PAGE HERO ----------------
   Smaller than the homepage hero, and without the dragon — that
   animation is the front door and loses its force if it is on
   every page. */
.page-hero{
  position:relative; overflow:hidden; background:var(--ink);
  padding:clamp(130px,17vh,180px) 0 clamp(64px,9vh,92px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 520px at 82% 4%, rgba(255,59,31,.20), transparent 62%),
             radial-gradient(700px 460px at 2% 96%, rgba(255,176,32,.09), transparent 62%);
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{
  font-size:clamp(34px,6.2vw,72px); line-height:.98; font-weight:800;
  letter-spacing:-.04em; margin-bottom:20px; max-width:18ch;
}
.page-hero h1 .hit{color:var(--flame);}
.page-hero .lead{color:#c9c7c1; max-width:52ch;}
.backlink{
  display:inline-block; font-size:14px; font-weight:700; color:var(--mute);
  text-decoration:none; margin-bottom:22px; letter-spacing:.02em;
}
.backlink:hover{color:var(--paper);}
.page-hero .cta-row{margin-top:32px;}
.page-hero .chips{margin-top:20px;}