/* ------------------------------------------------------------------ tokens */
:root{
  --bg:#08090A;
  --s1:#0F1011; --s2:#141516; --s3:#191A1B;
  --tx:#F7F8F8; --tx2:#D0D6E0; --tx3:#8A8F98;
  --indigo:#5E6AD2; --indigo-h:#6F7AE0; --indigo-l:#828FFF;
  --hot:#F2555A; --amber:#F2994A; --yellow:#F2C94C;

  --r4:4px; --r6:6px; --r8:8px; --r12:12px; --r16:16px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --t-fast:120ms; --t-med:180ms; --t-slow:240ms;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* driven from JS: 0..1 detonation light spilling onto the UI */
  --flash:0;
  --shake:0px;
}

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

html,body{ height:100%; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ------------------------------------------------------------- background */
#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  opacity:0;
  transition:opacity 700ms var(--ease);
  transform:translate3d(var(--shake),0,0);
}
body.gl-on #gl{ opacity:1; }

/* CSS-only fallback: visible until WebGL proves itself, and after a lost
   context. Deliberately composed — core, cap, stem, dust sheet, horizon. */
.fallback{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    /* cap */
    radial-gradient(26% 17% at 68% 31%, rgba(255,196,120,.50), rgba(255,132,48,.20) 52%, rgba(255,80,30,0) 78%),
    radial-gradient(34% 22% at 68% 33%, rgba(255,150,70,.20), rgba(255,90,40,0) 74%),
    /* stem */
    radial-gradient(5% 17% at 68% 52%, rgba(255,166,80,.42), rgba(255,110,40,0) 80%),
    radial-gradient(9% 22% at 68% 55%, rgba(255,130,55,.16), rgba(255,90,40,0) 82%),
    /* dust sheet */
    radial-gradient(46% 8% at 68% 69%, rgba(242,153,74,.26), rgba(242,153,74,0) 76%),
    /* light spilling into the sky + brand lift */
    radial-gradient(85% 52% at 68% 36%, rgba(255,120,50,.075), rgba(255,90,40,0) 72%),
    radial-gradient(95% 62% at 30% 22%, rgba(94,106,210,.075), rgba(94,106,210,0) 74%),
    linear-gradient(to bottom, #08090A 0%, #0A0B0E 40%, #100E10 66%, #14100F 70%, #0A0A0C 84%, #08090A 100%);
}
.fallback::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(125% 105% at 68% 38%, rgba(8,9,10,0) 26%, rgba(8,9,10,.55) 72%, rgba(8,9,10,.88) 100%),
    linear-gradient(to bottom, rgba(8,9,10,0) 72%, rgba(8,9,10,.70) 100%);
}
.fallback .horizon{
  position:absolute; left:0; right:0; top:69%; height:1px;
  background:linear-gradient(to right, rgba(242,153,74,0), rgba(255,178,104,.42) 50%, rgba(242,153,74,0));
  box-shadow:0 0 22px 4px rgba(242,153,74,.10);
}
.fallback .core{
  position:absolute; left:68%; top:33%; width:11vmin; height:11vmin;
  margin:-5.5vmin 0 0 -5.5vmin; border-radius:50%;
  background:radial-gradient(circle, #fffdf6 0%, #ffe0ac 26%, rgba(255,160,70,.45) 56%, rgba(255,90,30,0) 100%);
  filter:blur(.7vmin);
  animation:fbPulse 5.2s var(--ease) infinite;
}
@keyframes fbPulse{ 0%,100%{ transform:scale(1); opacity:.88 } 50%{ transform:scale(1.07); opacity:1 } }
body.gl-on .fallback{ display:none; }
/* without a canvas there is no shader to fight, so let the poster breathe */
body:not(.gl-on) .scrim{
  background:
    radial-gradient(105% 82% at 18% 56%, rgba(4,5,6,.86) 0%, rgba(4,5,6,.48) 34%, rgba(4,5,6,0) 68%),
    linear-gradient(to top, rgba(4,5,6,.60) 0%, rgba(4,5,6,0) 44%);
}
body:not(.gl-on) .scrim::after{ opacity:0; }

/* scrim: guarantees text contrast over whatever the shader is doing */
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(96% 82% at 15% 56%, rgba(4,5,6,.90) 0%, rgba(4,5,6,.58) 26%, rgba(4,5,6,0) 58%),
    linear-gradient(to top,    rgba(4,5,6,.78) 0%,  rgba(4,5,6,0) 40%),
    linear-gradient(to bottom, rgba(4,5,6,.58) 0%,  rgba(4,5,6,0) 24%);
}
/* extra scrim that rides the flash so the copy never blows out */
.scrim::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(88% 76% at 15% 56%, rgba(3,4,5,.94) 0%, rgba(3,4,5,.62) 34%, rgba(3,4,5,0) 66%);
  opacity:calc(var(--flash) * .82);
}
/* warm light spill across the whole page at flash peak */
.spill{
  position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(70% 55% at 68% 40%, rgba(255,214,160,.30), rgba(255,140,60,.10) 45%, rgba(255,100,40,0) 75%);
  opacity:var(--flash);
}

/* -------------------------------------------------------------- structure */
.stage{
  position:fixed; inset:0; z-index:3;
  display:grid;
  grid-template-rows:auto 1fr;
  padding:clamp(18px, 2.6vw, 40px) clamp(20px, 3.4vw, 56px);
  padding-top:max(clamp(18px,2.6vw,40px), env(safe-area-inset-top));
  padding-bottom:max(clamp(18px,2.6vw,40px), env(safe-area-inset-bottom));
  pointer-events:none;
}
.stage > *{ pointer-events:auto; }

/* ------------------------------------------------------------------- head */
.masthead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--tx);
}
.mark{
  position:relative; width:18px; height:18px; flex:0 0 18px;
  border-radius:var(--r6);
  background:linear-gradient(150deg, var(--indigo-h), var(--indigo) 58%, #46509E);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(255,255,255,.06),
    0 2px 10px rgba(94,106,210,.42),
    0 0 calc(20px * var(--flash)) rgba(242,153,74, calc(.9 * var(--flash)));
}
.mark::after{
  content:""; position:absolute; inset:0; border-radius:var(--r6);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 1.5px, rgba(255,255,255,0) 2.4px);
  opacity:.9;
}
.wordmark{
  font-size:16px; font-weight:590; letter-spacing:-.02em; line-height:1;
  text-shadow:0 0 calc(18px * var(--flash)) rgba(255,190,130, calc(.8 * var(--flash)));
}
.masthead nav{ display:flex; align-items:center; gap:6px; }
.ghost{
  display:inline-flex; align-items:center; gap:7px;
  height:32px; padding:0 12px;
  border-radius:999px;
  color:var(--tx2); text-decoration:none;
  font-size:13px; font-weight:510; letter-spacing:-.005em;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(20,21,22,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ghost:hover{ color:var(--tx); border-color:rgba(255,255,255,.14); background:rgba(25,26,27,.62); }
.ghost svg{ opacity:.55; }

/* ------------------------------------------------------------------- hero */
.hero{
  display:flex; flex-direction:column; justify-content:center;
  max-width:min(640px, 60vw);
  padding-bottom:clamp(0px, 3vh, 40px);
}
h1{
  margin:0;
  font-size:clamp(42px, 6.4vw, 84px);
  line-height:.96;
  font-weight:680;
  letter-spacing:-.038em;
  color:var(--tx);
  text-wrap:balance;
}
h1 .hot{
  background:linear-gradient(96deg, #FFF3E0 0%, #FFD08A 26%, #F2994A 58%, #F2555A 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 calc(26px * var(--flash)) rgba(255,170,90,calc(.85*var(--flash))));
}
.sub{
  margin:clamp(18px,2.6vh,26px) 0 0;
  max-width:38ch;
  font-size:clamp(16px, 1.28vw, 19px);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--tx2);
}

/* -------------------------------------------------------------------- CTA */
.cta-wrap{
  margin-top:clamp(28px,4.2vh,44px);
  align-self:flex-start;
  animation:bob 6.5s var(--ease) infinite;
  will-change:transform;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

.cta{
  --mx:50%; --my:50%;
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:11px;
  height:52px; padding:0 26px;
  border-radius:999px;
  text-decoration:none;
  font-size:16px; font-weight:590; letter-spacing:-.014em;
  color:#fff;
  background:linear-gradient(180deg, var(--indigo-h) 0%, var(--indigo) 62%, #5460C6 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.5),
    0 10px 34px rgba(94,106,210,.40),
    0 0 0 0 rgba(94,106,210,.28);
  transform:translate3d(0,0,0);
  transition:
    box-shadow var(--t-med) var(--ease),
    background var(--t-med) var(--ease),
    transform var(--t-med) var(--ease);
  will-change:transform;
}
/* cursor-following specular */
.cta::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:radial-gradient(120px 120px at var(--mx) var(--my), rgba(255,255,255,.26), rgba(255,255,255,0) 62%);
  opacity:0; transition:opacity var(--t-med) var(--ease);
}
/* warm rim that lights up when the fireball peaks — the button catches the
   light from the detonation like anything else in the scene */
.cta::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
  background:linear-gradient(96deg,
    rgba(255,228,182,.95) 0%, rgba(242,153,74,.92) 42%,
    rgba(242,85,90,.62) 74%, rgba(242,85,90,.15) 100%);
  filter:blur(7px);
  opacity:calc(var(--flash) * .92);
}
.cta:hover{
  background:linear-gradient(180deg, #7C86E8 0%, var(--indigo-h) 62%, var(--indigo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.5),
    0 14px 44px rgba(94,106,210,.55),
    0 0 0 6px rgba(94,106,210,.10);
}
.cta:hover::before{ opacity:1; }
.cta:active{ transition-duration:80ms; }
.cta:focus-visible{
  outline:2px solid var(--indigo-l);
  outline-offset:3px;
}
.cta .arrow{ transition:transform var(--t-med) var(--ease); }
.cta:hover .arrow{ transform:translateX(3px); }
.cta-glow{
  position:absolute; left:50%; top:50%; width:120%; height:180%;
  transform:translate(-50%,-50%);
  border-radius:999px; z-index:-2; pointer-events:none;
  background:radial-gradient(closest-side, rgba(94,106,210,.30), rgba(94,106,210,0) 100%);
  filter:blur(14px);
  opacity:.75;
}

/* click ripple */
.ripple{
  position:fixed; z-index:2; pointer-events:none;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  border:1px solid rgba(255,214,160,.9);
  box-shadow:0 0 24px rgba(255,170,90,.7), inset 0 0 12px rgba(255,190,120,.5);
  animation:ripple 700ms cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes ripple{
  from{ transform:scale(1); opacity:.9 }
  to  { transform:scale(26); opacity:0 }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px){
  .hero{ max-width:none; padding-bottom:0; }
  .hero{ justify-content:flex-end; padding-bottom:clamp(8px,3vh,28px); }
  .scrim{
    background:
      radial-gradient(140% 62% at 50% 100%, rgba(4,5,6,.94) 0%, rgba(4,5,6,.72) 34%, rgba(4,5,6,0) 72%),
      linear-gradient(to top,    rgba(4,5,6,.90) 0%, rgba(4,5,6,0) 54%),
      linear-gradient(to bottom, rgba(4,5,6,.66) 0%, rgba(4,5,6,0) 22%);
  }
  .scrim::after{
    background:radial-gradient(130% 58% at 50% 100%, rgba(3,4,5,.94) 0%, rgba(3,4,5,.5) 44%, rgba(3,4,5,0) 76%);
  }
}
@media (max-width: 560px){
  h1{ font-size:clamp(36px, 10.8vw, 50px); letter-spacing:-.032em; }
  .sub{ font-size:15px; max-width:32ch; }
  .cta{ height:50px; padding:0 22px; font-size:15px; }
  .cta-wrap{ align-self:stretch; }
  .cta{ width:100%; justify-content:center; }
  .masthead .ghost span{ display:none; }
  .masthead .ghost{ padding:0 10px; }
}
@media (max-height: 620px) and (min-width: 901px){
  h1{ font-size:clamp(38px, 5.4vw, 60px); }
  .cta-wrap{ margin-top:22px; }
}
/* short viewports (phone landscape): keep everything on one screen */
@media (max-height: 520px){
  .stage{ padding:14px clamp(16px,3vw,32px); }
  h1{ font-size:clamp(26px, 6.6vh, 44px); letter-spacing:-.028em; }
  .sub{ font-size:14px; margin-top:12px; max-width:44ch; }
  .cta-wrap{ margin-top:16px; }
  .cta{ height:44px; padding:0 20px; font-size:14px; }
  .hero{ max-width:min(560px, 62vw); }
}
@media (max-height: 520px) and (max-width: 900px){
  .hero{ max-width:min(520px, 60vw); justify-content:center; padding-bottom:0; }
  .cta-wrap{ align-self:flex-start; }
  .cta{ width:auto; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .cta-wrap{ animation:none; }
  .fallback .core{ animation:none; }
  #gl{ transition:none; opacity:1; }
  .ripple{ display:none; }
}