/* hero.css — HOME page hero. Mobile-first flow; the full desktop composition (matching the
   preserved artwork) switches on at 1200px. Positions use stage units (--su = 1 art pixel). */
.hero{position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero-copy{order:1;padding:var(--s-6) var(--gutter) var(--s-5);display:flex;flex-direction:column;position:relative;z-index:3}
.hero-stage-viewport{order:2;position:relative;z-index:1}
.hero-rail{order:3;padding:var(--s-5) var(--gutter) 0;position:relative;z-index:3}
.hero-microcopy{order:4;padding:var(--s-4) var(--gutter) 0;position:relative;z-index:3}
.hero .hero-motion{order:5;margin:var(--s-4) var(--gutter) var(--s-5);align-self:flex-start;position:relative;z-index:3}
.hero-eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-1);margin-bottom:var(--s-3)}
.hero-title{font-size:clamp(3rem,13vw,5.75rem);line-height:.88;font-weight:400;letter-spacing:-.015em}
.hero-title-1{display:block;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.3)}
.hero-title-2{display:block;width:fit-content;background:linear-gradient(90deg,#a2f3ff 0%,#8fc8ff 38%,#aaa1ff 70%,#b48cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-body{margin-top:var(--s-4);font-size:var(--fs-lg);line-height:1.38;color:var(--text-1)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-5)}
.btn-explore{min-height:52px;padding:0 28px;gap:22px;font-size:var(--fs-md);border:2px solid transparent;
  background:linear-gradient(rgba(8,14,32,.92),rgba(8,14,32,.92)) padding-box,linear-gradient(90deg,#9c86ff,#7fe9f5) border-box;
  box-shadow:0 0 16px rgba(150,140,255,.45),0 0 22px rgba(110,230,240,.3)}
.btn-explore:hover{border-color:transparent;box-shadow:0 0 22px rgba(170,150,255,.7),0 0 30px rgba(120,240,250,.5)}
.guide-cta{position:relative;display:flex;flex-direction:column;gap:2px}
.guide-play{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;min-height:48px}
.guide-play-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(190,230,255,.55);background:rgba(8,18,34,.6);box-shadow:0 0 14px rgba(120,210,255,.25);transition:box-shadow var(--dur-fast),border-color var(--dur-fast)}
.guide-play-icon img{width:22px;height:22px;margin-left:2px}
.guide-play:hover .guide-play-icon{border-color:#fff;box-shadow:0 0 20px rgba(150,230,255,.55)}
.guide-label{font-size:var(--fs-lg)}
.guide-vision{margin-left:66px;margin-top:-12px;font-size:var(--fs-sm);color:var(--text-2);text-decoration:none;padding:4px 0}
.guide-vision:hover{color:#fff;text-decoration:underline}
.hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) 0;margin-top:var(--s-6)}
.stat{padding:0 var(--s-4);border-left:1px solid var(--line-soft)}
.stat:nth-child(odd){border-left:0;padding-left:0}
.stat dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-1)}
.stat-value{display:block;font-size:1.5rem;color:var(--stat-cyan);line-height:1.25}
.stat-caption{display:block;font-size:var(--fs-sm);color:var(--text-2)}
.hero-divider{margin-top:var(--s-5);height:1px;background:linear-gradient(90deg,#fff 0 24px,rgba(120,180,255,.55) 24px,rgba(120,180,255,.12))}
.hero-quote{margin-top:var(--s-5)}
.hero-quote p{font-style:italic;font-size:var(--fs-lg);color:var(--text-2);line-height:1.35;font-weight:300}
.hero-quote figcaption{margin-top:var(--s-2);font-size:.72rem;letter-spacing:.2em;color:var(--text-3)}
.hero-rail ul{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:0;padding:0}
.hero-rail a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-soft);text-decoration:none;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-1)}
.hero-rail a:hover{color:#fff;border-color:var(--line-glass)}
.rail-tagline{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--text-2)}
.hero-microcopy{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-3);line-height:1.9}

/* ---- below the hero ---- */
.home-intro{max-width:1100px;margin:0 auto;padding:var(--s-8) var(--gutter)}
.home-intro h2{margin-bottom:var(--s-4)}
.home-intro .card-grid{margin-top:var(--s-5)}
.home-intro .notice{margin-top:var(--s-6)}

/* ================= DESKTOP COMPOSITION (matches the preserved artwork) ================= */
@media (min-width:1200px){
  .page-home .site-header{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(1672*var(--su));height:calc(112*var(--su));z-index:30}
  .page-home .header-inner{display:block;position:relative;max-width:none;height:100%;padding:0}
  .page-home .brand{position:absolute;left:calc(45*var(--su));top:calc(22*var(--su));gap:calc(22*var(--su))}
  .page-home .brand-mark{width:calc(66*var(--su));height:calc(78*var(--su))}
  .page-home .brand-words{gap:calc(15*var(--su))}
  .page-home .brand-name{font-size:max(15px,calc(25*var(--su)));letter-spacing:.42em}
  .page-home .brand-tagline{font-size:max(8px,calc(10.5*var(--su)));letter-spacing:.47em;margin-left:calc(29*var(--su))}
  .page-home .site-menu{display:block}
  .page-home .site-nav{position:absolute;left:calc(563*var(--su));top:calc(20*var(--su))}
  .page-home .site-nav ul{gap:calc(34*var(--su))}
  .page-home .site-nav a{font-size:max(13px,calc(13.6*var(--su)));padding:calc(8*var(--su)) 0}
  .page-home .header-search{position:absolute;left:calc(1176*var(--su));top:calc(25*var(--su));width:calc(252*var(--su));margin:0}
  .page-home .header-search input{height:max(32px,calc(34*var(--su)));font-size:max(11px,calc(11.6*var(--su)));padding-left:calc(40*var(--su));background:rgba(4,10,22,.35);border-color:rgba(150,190,230,.45)}
  .page-home .header-search .search-icon{left:calc(14*var(--su));width:calc(16*var(--su));height:calc(16*var(--su))}
  .page-home .btn-get-started{position:absolute;left:calc(1458*var(--su));top:calc(20*var(--su));width:calc(165*var(--su));height:max(36px,calc(47*var(--su)));min-height:0;padding:0;gap:calc(26*var(--su));font-size:max(13px,calc(15.6*var(--su)))}
  .page-home .btn-get-started img{width:calc(21*var(--su));height:calc(21*var(--su))}

  .hero{display:block;width:calc(1672*var(--su));height:calc(941*var(--su));margin:0 auto}
  .hero-stage-viewport{position:absolute;inset:0}
  .hero-stage-viewport .stage{position:absolute;left:0;top:0}
  .hero-copy{position:absolute;left:calc(57*var(--su));top:calc(168*var(--su));width:calc(420*var(--su));padding:0}
  .hero-eyebrow{font-size:max(10px,calc(12.2*var(--su)));letter-spacing:.31em;white-space:nowrap;margin-bottom:calc(20*var(--su))}
  .hero-title{font-size:calc(96*var(--su));line-height:.815;margin:calc(-6*var(--su)) 0 0 calc(-3*var(--su))}
  .hero-title-1{text-shadow:0 0 calc(18*var(--su)) rgba(255,255,255,.35)}
  .hero-body{margin-top:calc(19*var(--su));font-size:max(15px,calc(20.2*var(--su)));line-height:1.31;max-width:calc(352*var(--su))}
  .hero-ctas{flex-wrap:nowrap;gap:calc(32*var(--su));margin-top:calc(30*var(--su))}
  .btn-explore{width:calc(206*var(--su));height:calc(54*var(--su));min-height:44px;padding:0;gap:calc(26*var(--su));font-size:max(14px,calc(17*var(--su)));border-width:max(1.5px,calc(2*var(--su)))}
  .btn-explore img{width:calc(22*var(--su));height:calc(22*var(--su))}
  .guide-play{gap:calc(14*var(--su));min-height:0}
  .guide-play-icon{width:calc(52*var(--su));height:calc(52*var(--su))}
  .guide-play-icon img{width:calc(22*var(--su));height:calc(22*var(--su))}
  .guide-label{font-size:max(14px,calc(16.6*var(--su)));transform:translateY(calc(-9*var(--su)))}
  .guide-vision{position:absolute;left:calc(66*var(--su));top:calc(27*var(--su));margin:0;font-size:max(11px,calc(12.6*var(--su)));padding:0;white-space:nowrap}
  .hero-stats{display:flex;gap:0;margin-top:calc(44*var(--su))}
  .stat,.stat:nth-child(odd){padding:0 0 0 calc(13*var(--su));border-left:1px solid rgba(140,180,230,.28);flex:none;white-space:nowrap}
  .stat:nth-child(1){width:calc(90*var(--su))} .stat:nth-child(2){width:calc(92*var(--su))} .stat:nth-child(3){width:calc(103*var(--su))}
  .stat:first-child{padding-left:calc(3*var(--su));border-left:0}
  .stat-caption{font-size:max(11px,calc(12.6*var(--su)))!important}
  .stat dt{font-size:max(9px,calc(10.6*var(--su)));letter-spacing:.2em}
  .stat-value{font-size:max(16px,calc(23*var(--su)));margin-top:calc(4*var(--su))}
  .stat-caption{font-size:max(11px,calc(13.4*var(--su)))}
  .hero-divider{margin-top:calc(34*var(--su));width:calc(395*var(--su));background:linear-gradient(90deg,#fff 0 calc(25*var(--su)),rgba(120,180,255,.55) calc(25*var(--su)),rgba(120,180,255,.1))}
  .hero-quote{margin-top:calc(34*var(--su));margin-left:calc(6*var(--su))}
  .hero-quote p{font-size:max(13px,calc(16.6*var(--su)));max-width:calc(210*var(--su))}
  .hero-quote figcaption{font-size:max(9px,calc(11.4*var(--su)));margin-top:calc(14*var(--su))}
  .hero-rail{position:absolute;left:calc(1503*var(--su));top:calc(168*var(--su));padding:0}
  .hero-rail ul{display:flex;flex-direction:column;gap:0}
  .hero-rail a{display:block;min-height:0;padding:calc(6*var(--su)) 0;line-height:1.15;border:0;border-radius:0;font-size:max(9px,calc(11.4*var(--su)));letter-spacing:.32em;color:var(--text-2)}
  .hero-rail a:hover{color:#fff;text-shadow:0 0 10px rgba(160,230,255,.7)}
  .rail-tagline{position:relative;margin-top:calc(40*var(--su));font-size:max(11px,calc(13.6*var(--su)));line-height:1.48;color:var(--text-2)}
  .rail-tagline::before{content:"";position:absolute;left:calc(1*var(--su));top:calc(-24*var(--su));width:calc(21*var(--su));height:1px;background:var(--text-2)}
  .hero-microcopy{position:absolute;left:calc(1526*var(--su));top:calc(826*var(--su));padding:0;font-size:max(8px,calc(9.4*var(--su)));letter-spacing:.24em;white-space:nowrap}
  .hero-microcopy::after{content:"";display:block;width:calc(18*var(--su));height:1px;margin-top:calc(14*var(--su));background:var(--text-3)}
  .hero .hero-motion{position:absolute;left:calc(60*var(--su));top:calc(872*var(--su));margin:0;min-height:0;padding:calc(6*var(--su)) calc(14*var(--su));font-size:max(10px,calc(11*var(--su)))}
}