:root{
  --bg0:#040711;
  --bg1:#081221;
  --bg2:#0b1730;
  --cardTop:rgba(10,16,32,.76);
  --cardBottom:rgba(4,9,20,.9);
  --line:rgba(148,163,184,.18);
  --text:#f8fafc;
  --muted:rgba(226,232,240,.84);
  --green1:#4ade80;
  --green2:#22c55e;
  --green3:#15803d;
  --gold:#fbbf24;
  --cyan:#38bdf8;
  --shadow:0 24px 80px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 12% 12%, rgba(34,197,94,.20), transparent 55%),
    radial-gradient(800px 680px at 86% 16%, rgba(56,189,248,.14), transparent 58%),
    radial-gradient(920px 760px at 50% 120%, rgba(251,191,36,.10), transparent 62%),
    linear-gradient(145deg, var(--bg0), var(--bg1) 48%, var(--bg2));
  overflow:hidden;
}

.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.aurora,
.speedTrail,
.gridGlow,
.grain{position:absolute;inset:auto}
.aurora{
  width:52vw;height:52vw;min-width:380px;min-height:380px;border-radius:50%;
  filter:blur(42px);opacity:.75;mix-blend-mode:screen;animation:auroraFloat 14s ease-in-out infinite alternate;
}
.a1{left:-12vw;top:-16vw;background:radial-gradient(circle at 35% 35%, rgba(74,222,128,.5), rgba(74,222,128,0) 62%)}
.a2{right:-12vw;top:-10vw;background:radial-gradient(circle at 35% 35%, rgba(56,189,248,.4), rgba(56,189,248,0) 62%);animation-duration:18s}
.a3{left:22vw;bottom:-24vw;background:radial-gradient(circle at 45% 45%, rgba(251,191,36,.30), rgba(251,191,36,0) 62%);animation-duration:16s}
.gridGlow{
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.1));
  opacity:.18;
}
.grain{
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.26;
}
.speedTrail{
  height:2px;border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  box-shadow:0 0 14px rgba(255,255,255,.32);
  opacity:.4;
  animation:trail 5s linear infinite;
}
.t1{top:19%;left:-28%;width:34%;animation-delay:-.6s}
.t2{top:58%;left:-35%;width:42%;animation-duration:6.5s}
.t3{top:74%;left:-24%;width:28%;animation-delay:-1.8s;animation-duration:4.6s}

.hero{
  position:relative;
  min-height:100%;
  display:grid;
  place-items:center;
  padding:20px;
}
.heroCard{
  position:relative;
  width:min(700px, 94vw);
  padding:30px 28px 26px;
  border-radius:34px;
  text-align:center;
  background:linear-gradient(180deg, var(--cardTop), var(--cardBottom));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  overflow:hidden;
  animation:cardIn .8s cubic-bezier(.2,.9,.2,1) both;
}
.heroCard::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%, transparent 64%, rgba(255,255,255,.03));
  pointer-events:none;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#dcfce7;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.logoStage{
  position:relative;
  width:min(360px, 62vw);
  aspect-ratio:1;
  margin:18px auto 8px;
  display:grid;
  place-items:center;
  perspective:1000px;
}
.orbit{
  position:absolute;inset:12% 12%;border-radius:50%;
  border:1px solid rgba(255,255,255,.11);
}
.orbit1{animation:spin 16s linear infinite}
.orbit2{inset:22% 22%;border-style:dashed;animation:spinReverse 10s linear infinite}
.spark{
  position:absolute;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, rgba(255,255,255,.15) 58%, transparent 72%);
  filter:blur(.4px);opacity:.9;
}
.s1{top:16%;left:70%;animation:floatSpark 5s ease-in-out infinite}
.s2{bottom:18%;left:17%;animation:floatSpark 4.2s ease-in-out infinite reverse}
.s3{top:56%;right:14%;animation:floatSpark 5.6s ease-in-out infinite .5s}
.logo{
  position:relative;
  width:min(280px, 48vw);
  object-fit:contain;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.45));
  transform-origin:center;
  animation:logoFlyIn 1s cubic-bezier(.16,.95,.2,1) both, logoIdle 5.6s ease-in-out 1.1s infinite;
  user-select:none;
  -webkit-user-drag:none;
}
.wordmark{
  margin:8px 0 8px;
  font-size:clamp(40px, 7vw, 78px);
  line-height:.94;
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:0 8px 24px rgba(0,0,0,.35);
}
.slogan{
  margin:0 auto 10px;
  max-width:28ch;
  font-size:clamp(18px, 2.6vw, 24px);
  line-height:1.2;
  color:#e5f8ed;
  font-weight:600;
}
.slogan .em{
  display:block;
  margin-top:8px;
  color:#fff;
  font-weight:900;
}
.subcopy{
  max-width:42ch;
  margin:0 auto 22px;
  color:var(--muted);
  font-size:clamp(14px, 2vw, 17px);
  line-height:1.45;
}
.ctaStack{max-width:420px;margin:0 auto}
.tap{
  position:relative;
  width:100%;
  min-height:62px;
  border:0;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  color:#052e16;
  font-weight:900;
  font-size:20px;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--green1), var(--green2) 58%, var(--green3));
  box-shadow:0 16px 36px rgba(34,197,94,.26), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.tapText{position:relative;z-index:1}
.tapGlow{
  position:absolute;inset:-40% auto auto -20%;width:40%;height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(14deg);
  animation:shine 3.2s linear infinite;
}
.tap:hover{filter:brightness(1.05);box-shadow:0 18px 40px rgba(34,197,94,.34), inset 0 1px 0 rgba(255,255,255,.28)}
.tap:active{transform:scale(.988)}
.miniRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.miniBtn{
  min-width:180px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.miniBtn:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.miniBtn:active{transform:scale(.99)}
.miniBtn.ghost{opacity:.9}
.hint{margin:14px 0 0;font-size:12px;color:rgba(226,232,240,.74)}

body.leaving .heroCard{animation:cardOut .22s ease-in both}

@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cardOut{to{opacity:0;transform:translateY(-10px) scale(.992)}}
@keyframes auroraFloat{from{transform:translate3d(-2%, -1%, 0) scale(1)}to{transform:translate3d(2%, 2%, 0) scale(1.07)}}
@keyframes trail{0%{transform:translateX(0);opacity:0}10%{opacity:.55}70%{opacity:.4}100%{transform:translateX(150vw);opacity:0}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinReverse{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes floatSpark{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.16)}}
@keyframes logoFlyIn{
  0%{opacity:0;transform:translate3d(22%, -24%, 0) scale(.5) rotate(-12deg)}
  58%{opacity:1;transform:translate3d(-3%, 2%, 0) scale(1.05) rotate(2deg)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes logoIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.015)}}
@keyframes shine{0%{transform:translateX(-10%) rotate(14deg)}100%{transform:translateX(340%) rotate(14deg)}}

@media (max-width:700px){
  .heroCard{padding:24px 18px 20px;border-radius:28px}
  .logoStage{width:min(300px, 72vw)}
  .logo{width:min(236px, 52vw)}
  .miniBtn{min-width:145px;flex:1 1 0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
}


.pulseRing{
  position:absolute;
  width:58vmax;height:58vmax;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.22;
  animation:softPulse 7s ease-out infinite;
}
.p1{animation-delay:0s}
.p2{animation-delay:2.5s}
.starfield{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 66% 74%, rgba(255,255,255,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle at 30% 68%, rgba(255,255,255,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 58%, rgba(255,255,255,.75) 0 1px, transparent 1.7px),
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.65) 0 1px, transparent 1.6px);
  opacity:.3;
  animation:twinkle 6.5s ease-in-out infinite alternate;
}
.logoHalo{
  position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle, rgba(74,222,128,.28), rgba(56,189,248,.16) 42%, transparent 68%);
  filter:blur(14px);
  animation:haloBreath 4.5s ease-in-out infinite;
}
.statusWrap{
  max-width:420px;
  margin:0 auto 16px;
}
.bootStatus{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:26px;
  color:#dbeafe;
  font-weight:700;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}
.bootStatus.is-visible{opacity:1;transform:translateY(0)}
.bootDot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(180deg, #86efac, #22c55e);
  box-shadow:0 0 0 0 rgba(74,222,128,.45);
  animation:bootBlink 1.2s ease-in-out infinite;
}
.detectBar{
  margin:10px auto 0;
  width:min(320px, 82%);
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.detectBar span{
  display:block;height:100%;width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg, #22c55e, #38bdf8 58%, #fbbf24);
  box-shadow:0 0 18px rgba(56,189,248,.35);
}
body.detecting .detectBar span{animation:detectFill 1.5s linear forwards}
.ctaStack.is-hidden{opacity:0;pointer-events:none;transform:translateY(10px)}
.ctaStack{
  transition:opacity .35s ease, transform .35s ease;
}
body.ready .ctaStack{opacity:1;pointer-events:auto;transform:translateY(0)}
body.ready .statusWrap{margin-bottom:14px}
body.ready .bootStatus{min-height:24px}
.premiumRow{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:16px auto 0;
}
.premiumChip{
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:#dbeafe;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.miniBtn{
  min-width:220px;
  background:linear-gradient(180deg, rgba(56,189,248,.20), rgba(56,189,248,.10));
}
.wordmark{
  background:linear-gradient(180deg, #ffffff 0%, #e2f7ea 44%, #b8f5cb 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.heroCard::after{
  content:"";
  position:absolute;inset:1px;border-radius:33px;pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
  mask:linear-gradient(180deg, rgba(0,0,0,.75), transparent 26%, transparent 72%, rgba(0,0,0,.75));
}
@keyframes detectFill{from{width:0%}to{width:100%}}
@keyframes bootBlink{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.45)}50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
@keyframes softPulse{0%{transform:translate(-50%,-50%) scale(.82);opacity:.16}70%{opacity:.05}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
@keyframes twinkle{from{opacity:.18}to{opacity:.34}}
@keyframes haloBreath{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.05);opacity:1}}

@media (max-width:700px){
  .premiumRow{gap:8px}
  .premiumChip{padding:9px 12px;font-size:11px}
  .miniBtn{min-width:190px}
}