/* ============================================================
   MARSGROW — premium space theme
   Palette: space black / dark red / mars orange / crimson / white
   ============================================================ */

:root{
  --black:#050505;
  --black-2:#0a0708;
  --dark-red:#7A0D0D;
  --orange:#E24A1D;
  --orange-lt:#FF7A2F;
  --crimson:#C62828;
  --white:#FFFFFF;

  --ink:#F4EEEC;
  --ink-2:rgba(244,238,236,.66);
  --ink-3:rgba(244,238,236,.42);

  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(226,74,29,.16);
  --line-2:rgba(255,255,255,.08);

  --glow-o:0 0 24px rgba(226,74,29,.38);
  --glow-c:0 0 60px rgba(198,40,40,.28);

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --wrap:1220px;
  --nav-h:74px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f-disp:'Orbitron','Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Chakra Petch',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0; background:var(--black); color:var(--ink);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
::selection{background:rgba(226,74,29,.35); color:#fff}

.wrap{width:min(var(--wrap),calc(100% - 44px)); margin-inline:auto}

/* ── scrollbar ───────────────────────────── */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#070405}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--orange),var(--dark-red)); border-radius:20px; border:2px solid #070405}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%,#170707 0%,#050505 62%);
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{opacity:0; visibility:hidden; pointer-events:none}
.preloader__inner{display:grid; justify-items:center; gap:14px; position:relative}
.preloader__mars{width:150px; height:150px; filter:drop-shadow(0 0 40px rgba(226,74,29,.55))}
.preloader__ring{
  position:absolute; top:-16px; left:50%; width:196px; height:196px; margin-left:-98px;
  border-radius:50%; border:1px solid rgba(226,74,29,.22);
  border-top-color:var(--orange-lt); animation:spin 2.4s linear infinite;
}
.preloader__ring::after{
  content:''; position:absolute; inset:16px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.09); animation:spin 7s linear infinite reverse;
}
.preloader__word{
  margin:6px 0 0; font-family:var(--f-disp); font-weight:900; letter-spacing:.36em;
  font-size:clamp(18px,4.4vw,26px); color:var(--orange);
  text-shadow:0 0 26px rgba(226,74,29,.6);
}
.preloader__word span{color:#fff; text-shadow:0 0 20px rgba(255,255,255,.28)}
.preloader__bar{width:min(280px,62vw); height:3px; border-radius:9px; background:rgba(255,255,255,.09); overflow:hidden}
.preloader__bar i{display:block; height:100%; width:0%; border-radius:9px;
  background:linear-gradient(90deg,var(--dark-red),var(--orange),var(--orange-lt));
  box-shadow:0 0 16px rgba(226,74,29,.85); transition:width .35s var(--ease)}
.preloader__pct{margin:0; font-size:11px; letter-spacing:.28em; color:var(--ink-3); text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   SPACE BACKGROUND
   ============================================================ */
.space{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--black); pointer-events:none}
.space__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.space__nebula{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform}
.space__nebula--a{
  top:-14%; left:-12%; width:min(760px,80vw); height:min(760px,80vw);
  background:radial-gradient(circle,rgba(122,13,13,.55) 0%,rgba(198,40,40,.16) 45%,transparent 70%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.space__nebula--b{
  bottom:-20%; right:-14%; width:min(880px,88vw); height:min(880px,88vw);
  background:radial-gradient(circle,rgba(226,74,29,.34) 0%,rgba(122,13,13,.14) 48%,transparent 72%);
  animation:drift-b 44s ease-in-out infinite alternate;
}
@keyframes drift-a{to{transform:translate3d(8%,6%,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(-7%,-5%,0) scale(1.1)}}
.space__glow{
  position:absolute; left:50%; bottom:-46vh; width:150vw; height:96vh; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(226,74,29,.22) 0%,rgba(122,13,13,.1) 38%,transparent 68%);
  pointer-events:none;
}
.space__grain{
  position:absolute; inset:0; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900; height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
  padding:0 clamp(16px,3vw,40px);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s, box-shadow .45s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,4,5,.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line); box-shadow:0 18px 50px -30px rgba(0,0,0,.9);
}
.nav__brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.nav__mark{width:46px; height:auto; filter:drop-shadow(0 0 12px rgba(226,74,29,.5)); transition:transform .5s var(--ease-out)}
.nav__brand:hover .nav__mark{transform:rotate(-8deg) scale(1.08)}
.nav__name{font-family:var(--f-disp); font-weight:800; letter-spacing:.2em; font-size:15px; color:var(--orange)}
.nav__name b{color:#fff; font-weight:800}
.nav__links{display:flex; gap:6px; margin-left:auto}
.nav__links a{
  position:relative; padding:9px 14px; border-radius:999px; font-size:13.5px; font-weight:500;
  letter-spacing:.06em; color:var(--ink-2); transition:color .3s, background .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:50%; bottom:4px; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-lt));
  transform:translateX(-50%); transition:width .35s var(--ease-out);
}
.nav__links a:hover,.nav__links a.is-active{color:#fff; background:rgba(255,255,255,.04)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:18px}
.nav__right{display:flex; align-items:center; gap:10px; margin-left:14px}
.nav__burger{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); position:relative}
.nav__burger span{position:absolute; left:11px; width:20px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .38s var(--ease-out), opacity .25s}
.nav__burger span:nth-child(1){top:14px}
.nav__burger span:nth-child(2){top:20px}
.nav__burger span:nth-child(3){top:26px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   BUTTONS / GLASS
   ============================================================ */
.glass{
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-radius:var(--r-l);
}
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-family:var(--f-disp); font-weight:700;
  font-size:13.5px; letter-spacing:.12em; text-transform:uppercase; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s, color .3s;
  border:1px solid transparent; white-space:nowrap;
}
.btn span{position:relative; z-index:2}
.btn--sm{padding:10px 20px; font-size:12px}
.btn--primary{
  color:#fff; background:linear-gradient(135deg,var(--crimson) 0%,var(--orange) 55%,var(--orange-lt) 100%);
  box-shadow:0 10px 30px -12px rgba(226,74,29,.85), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:1; opacity:0;
  background:linear-gradient(135deg,var(--orange-lt),#ff9a55); transition:opacity .35s var(--ease);
}
.btn--primary:hover{transform:translateY(-3px); box-shadow:0 18px 44px -14px rgba(226,74,29,1), 0 0 30px rgba(226,74,29,.4), inset 0 1px 0 rgba(255,255,255,.3)}
.btn--primary:hover::before{opacity:1}
.btn--ghost{
  color:var(--ink); border-color:var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.btn--ghost:hover{transform:translateY(-3px); color:#fff; border-color:rgba(226,74,29,.55);
  box-shadow:0 14px 36px -18px rgba(226,74,29,.9), 0 0 22px rgba(226,74,29,.18)}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible,.copy:focus-visible,.nav__links a:focus-visible,.social:focus-visible{
  outline:2px solid var(--orange-lt); outline-offset:3px
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1; min-height:100svh; padding:calc(var(--nav-h) + 8px) 0 46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero__stage{
  position:relative; width:min(440px,74vw,34svh); aspect-ratio:1; margin-bottom:clamp(2px,1.2vw,14px);
  display:grid; place-items:center; will-change:transform;
}
.hero__mars{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  animation:float-y 9s ease-in-out infinite;
}
@keyframes float-y{0%,100%{transform:translateY(-8px)}50%{transform:translateY(10px)}}

.orbit{
  position:absolute; border-radius:50%; border:1px solid rgba(226,74,29,.16);
  transform-style:preserve-3d;
}
.orbit--1{width:78%; height:78%; transform:rotateX(74deg) rotate(0deg); animation:orb 26s linear infinite}
.orbit--2{width:92%; height:92%; border-color:rgba(255,255,255,.07); transform:rotateX(68deg) rotate(38deg); animation:orb 40s linear infinite reverse}
.orbit--3{width:100%; height:100%; border-style:dashed; border-color:rgba(226,74,29,.12); animation:orb 70s linear infinite}
@keyframes orb{to{transform:rotateX(var(--rx,72deg)) rotate(360deg)}}
.orbit--1{--rx:74deg}.orbit--2{--rx:68deg}.orbit--3{--rx:0deg}

.orbit-track{position:absolute; inset:0; animation:spin 18s linear infinite}
.orbit-track--2{animation-duration:30s; animation-direction:reverse; inset:-6%}
/* orbiting flying saucer — stays level while its track spins */
.ufo{
  position:absolute; top:4%; left:50%; width:58px; margin-left:-29px; display:block;
  filter:drop-shadow(0 0 10px rgba(226,74,29,.55)) drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
.ufo svg{display:block; width:100%; height:auto; animation:spin 18s linear infinite reverse}
.orbit-track--2 .ufo{width:42px; margin-left:-21px}
.orbit-track--2 .ufo svg{animation-duration:30s; animation-direction:normal}
.ufo circle{animation:ufo-lights 1.8s ease-in-out infinite}
.ufo circle:nth-of-type(2){animation-delay:.25s}
.ufo circle:nth-of-type(3){animation-delay:.5s}
.ufo circle:nth-of-type(4){animation-delay:.75s}
@keyframes ufo-lights{0%,100%{opacity:1}50%{opacity:.35}}

.hero__trajectory{position:absolute; inset:-6%; width:112%; height:112%; overflow:visible; pointer-events:none}
.traj__line{stroke-dasharray:1000; stroke-dashoffset:1000; opacity:0}
.traj__head{opacity:0}

.hero__content{
  position:relative; z-index:3; display:grid; justify-items:center; gap:clamp(10px,1.5vw,20px);
  text-align:center; width:min(var(--wrap),calc(100% - 40px));
}
.hero__logo{
  width:min(420px,66vw,22svh); height:auto;
  filter:drop-shadow(0 14px 60px rgba(226,74,29,.45));
  animation:logo-in 1.4s var(--ease-out) both .25s;
}
@keyframes logo-in{from{opacity:0; transform:translateY(38px) scale(.94); filter:blur(10px)}to{opacity:1; transform:none; filter:blur(0)}}
.hero__sub{
  margin:0; max-width:640px; font-size:clamp(15px,2.1vw,19.5px); color:var(--ink-2);
  letter-spacing:.02em;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* contract pill */
.ca{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  padding:11px 12px 11px 20px; border-radius:999px; max-width:100%;
}
.ca--wide{margin:44px auto 0; width:fit-content; max-width:100%}
.ca__label{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.ca__value{
  font-size:13.5px; color:#fff; letter-spacing:.02em; word-break:break-all; text-align:left;
  text-shadow:0 0 18px rgba(226,74,29,.35);
}
.copy{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:rgba(226,74,29,.1); color:var(--orange-lt);
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  transition:background .3s, color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.copy svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.copy:hover{background:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 8px 22px -8px rgba(226,74,29,.9)}
.copy.is-done{background:#1c7a34; border-color:#1c7a34; color:#fff}
.copy--mini{padding:7px; border-radius:10px}

.status{margin:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.status b{color:var(--orange-lt); font-weight:700}
.status__dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--orange);
  margin-right:8px; vertical-align:1px; box-shadow:0 0 0 0 rgba(226,74,29,.65); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(226,74,29,.6)}
  70%{box-shadow:0 0 0 12px rgba(226,74,29,0)}
  100%{box-shadow:0 0 0 0 rgba(226,74,29,0)}
}

.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:26px; height:42px; border-radius:14px; border:1px solid var(--line);
  display:grid; justify-items:center; padding-top:8px; opacity:.75;
}
.scroll-hint span{width:3px; height:8px; border-radius:3px; background:var(--orange-lt); animation:wheel 1.9s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0); opacity:1}70%{transform:translateY(16px); opacity:0}100%{opacity:0}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{position:relative; padding:clamp(80px,10vw,140px) 0; z-index:2}
.head{max-width:760px; margin:0 auto clamp(42px,5vw,68px); text-align:center}
.kicker{
  margin:0 0 14px; font-family:var(--f-disp); font-size:11.5px; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--orange);
}
.kicker::before{content:''; display:inline-block; width:26px; height:1px; background:var(--orange); vertical-align:4px; margin-right:12px; opacity:.6}
.h2{
  margin:0 0 16px; font-family:var(--f-disp); font-weight:800; line-height:1.1;
  font-size:clamp(28px,5.2vw,54px); letter-spacing:-.01em; color:#fff;
}
.h2 em{
  font-style:normal;
  background:linear-gradient(120deg,var(--crimson),var(--orange) 45%,var(--orange-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(226,74,29,.5));
}
.lede{margin:0; color:var(--ink-2); font-size:clamp(14.5px,1.7vw,17.5px)}

/* reveal */
.reveal{opacity:0; transform:translateY(34px); will-change:transform,opacity}
.reveal.is-in{opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}

/* ============================================================
   TOKENOMICS
   ============================================================ */
.tok{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1000px){.tok{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tok{grid-template-columns:1fr}}
.tok__card{
  position:relative; padding:34px 28px 32px; text-align:center; overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
}
.tok__card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(226,74,29,.16),transparent 62%);
  transition:opacity .45s;
}
.tok__card:hover{transform:translateY(-8px); border-color:rgba(226,74,29,.42); box-shadow:0 30px 60px -34px rgba(226,74,29,.7), var(--glow-c)}
.tok__card:hover::after{opacity:1}
.tok__card h3{margin:20px 0 8px; font-family:var(--f-disp); font-size:17px; font-weight:700; letter-spacing:.06em; color:#fff}
.tok__card p{margin:0; font-size:14.5px; color:var(--ink-2)}

.ring{position:relative; width:150px; height:150px; margin:0 auto; display:grid; place-items:center}
.ring svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.ring__bg{fill:none; stroke:rgba(255,255,255,.07); stroke-width:7}
.ring__fg{
  fill:none; stroke:url(#ringGrad); stroke:var(--orange); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327;
  filter:drop-shadow(0 0 8px rgba(226,74,29,.85));
  transition:stroke-dashoffset 1.8s var(--ease-out);
}
.ring::before{
  content:''; position:absolute; inset:16px; border-radius:50%;
  background:radial-gradient(circle at 40% 32%,rgba(226,74,29,.2),rgba(122,13,13,.06) 55%,transparent 72%);
  animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.85}50%{transform:scale(1.07); opacity:1}}
.ring__mid{display:grid; justify-items:center; gap:2px; position:relative; z-index:2}
.ring__num{font-family:var(--f-disp); font-weight:900; font-size:23px; color:#fff; text-shadow:0 0 24px rgba(226,74,29,.55); line-height:1.05}
.ring__num--sm{font-size:15px; letter-spacing:.1em; color:var(--orange-lt); text-align:center}
.ring__cap{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3)}
.ring__icon{width:40px; height:auto; filter:drop-shadow(0 0 12px rgba(226,74,29,.7))}

/* ============================================================
   REWARDS
   ============================================================ */
.section--rewards::before{
  content:''; position:absolute; left:50%; top:6%; width:min(1000px,120vw); height:520px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse,rgba(226,74,29,.13),transparent 66%); filter:blur(20px);
}
.rewards{position:relative}
.rewards__canvas{
  width:100%; height:clamp(320px,44vw,480px); display:block;
  border-radius:var(--r-xl); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(122,13,13,.10),rgba(5,5,5,.55) 62%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.65), 0 40px 80px -50px rgba(226,74,29,.5);
}
.rewards__stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:20px}
.stat{padding:22px 18px; text-align:center; border-radius:var(--r-m); transition:transform .4s var(--ease-out), border-color .4s}
.stat:hover{transform:translateY(-5px); border-color:rgba(226,74,29,.4)}
.stat__num{
  display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(26px,3.6vw,38px);
  background:linear-gradient(120deg,#fff,var(--orange-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(226,74,29,.45)); line-height:1.1;
}
.stat__cap{display:block; margin-top:6px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}

.flow{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px;
}
.flow__step{position:relative; padding:24px 22px; border-radius:var(--r-m); transition:transform .4s var(--ease-out), border-color .4s}
.flow__step:hover{transform:translateY(-5px); border-color:rgba(226,74,29,.4)}
.flow__i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  font-family:var(--f-disp); font-weight:800; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--dark-red),var(--orange));
  box-shadow:var(--glow-o);
}
.flow__step h4{margin:14px 0 6px; font-family:var(--f-disp); font-size:14.5px; letter-spacing:.05em; color:#fff; font-weight:700}
.flow__step p{margin:0; font-size:13.5px; color:var(--ink-2)}

/* ============================================================
   FEATURES
   ============================================================ */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.feat{
  position:relative; padding:34px 28px 32px; overflow:hidden;
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
}
.feat:hover{transform:translateY(-10px); border-color:rgba(226,74,29,.45);
  box-shadow:0 34px 70px -38px rgba(226,74,29,.85), 0 0 44px rgba(198,40,40,.16)}
.feat__ico{
  width:62px; height:62px; border-radius:18px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(150deg,rgba(226,74,29,.24),rgba(122,13,13,.12));
  border:1px solid var(--line); transition:transform .5s var(--ease-out), box-shadow .5s;
}
.feat:hover .feat__ico{transform:translateY(-3px) rotate(-6deg) scale(1.06); box-shadow:var(--glow-o)}
.feat__ico svg{width:28px; height:28px; fill:none; stroke:var(--orange-lt); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.feat__ico img{width:40px; filter:drop-shadow(0 0 10px rgba(226,74,29,.6))}
.feat h3{margin:0 0 10px; font-family:var(--f-disp); font-size:16.5px; font-weight:700; letter-spacing:.04em; color:#fff}
.feat p{margin:0; font-size:14.5px; color:var(--ink-2)}
.feat__sheen{
  position:absolute; top:0; left:-140%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.075),transparent);
  transform:skewX(-18deg); transition:left .85s var(--ease-out);
}
.feat:hover .feat__sheen{left:150%}

/* ============================================================
   ROADMAP
   ============================================================ */
.road{position:relative; display:grid; gap:26px; padding-left:56px; max-width:840px; margin-inline:auto}
.road__line{
  position:absolute; left:20px; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,rgba(226,74,29,.14),rgba(255,255,255,.05));
  overflow:hidden;
}
.road__line b{
  position:absolute; inset:0 0 auto 0; height:0%; display:block; border-radius:2px;
  background:linear-gradient(180deg,var(--orange-lt),var(--crimson));
  box-shadow:0 0 14px rgba(226,74,29,.85); transition:height .25s linear;
}
.phase{position:relative}
.phase__node{position:absolute; left:-52px; top:26px; width:26px; height:26px; display:grid; place-items:center}
.phase__node::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(226,74,29,.45); background:#0b0505;
}
.phase__node span{
  position:relative; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange-lt),var(--crimson)); box-shadow:var(--glow-o);
}
.phase.is-in .phase__node span{animation:pulse 2.6s infinite}
.phase__card{
  padding:30px 32px; transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
}
.phase__card:hover{transform:translateX(8px); border-color:rgba(226,74,29,.42); box-shadow:0 30px 60px -40px rgba(226,74,29,.8)}
.phase__no{margin:0 0 4px; font-family:var(--f-disp); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--orange)}
.phase__card h3{margin:0 0 16px; font-family:var(--f-disp); font-size:clamp(20px,2.6vw,26px); font-weight:800; color:#fff}
.phase__card ul{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.phase__card li{position:relative; padding-left:24px; font-size:15px; color:var(--ink-2)}
.phase__card li::before{
  content:''; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:2px;
  background:linear-gradient(135deg,var(--orange),var(--dark-red)); transform:rotate(45deg);
  box-shadow:0 0 10px rgba(226,74,29,.6);
}

/* ============================================================
   MARS SURFACE SCENE
   ============================================================ */
.surface{position:relative; min-height:clamp(560px,88vh,880px); overflow:hidden; z-index:2}
.surface__canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.surface__fog{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,var(--black) 0%,rgba(5,5,5,.35) 16%,transparent 34%),
    linear-gradient(0deg,var(--black) 0%,rgba(5,5,5,.4) 9%,transparent 28%),
    radial-gradient(ellipse at 50% 92%,rgba(226,74,29,.22),transparent 60%);
}
.surface__copy{position:relative; z-index:3; padding:clamp(80px,14vh,150px) 0; text-align:center}
.surface__copy .lede{max-width:640px; margin-inline:auto}

/* ============================================================
   COMMUNITY
   ============================================================ */
.section--community{overflow:hidden}
.crew{display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:34px; align-items:center}
.crew__helmet{display:grid; place-items:center}
.crew__helmet svg{width:min(240px,60vw); filter:drop-shadow(0 30px 50px rgba(0,0,0,.8)) drop-shadow(0 0 40px rgba(226,74,29,.3));
  animation:float-h 7s ease-in-out infinite}
@keyframes float-h{0%,100%{transform:translateY(-12px) rotate(-4deg)}50%{transform:translateY(12px) rotate(4deg)}}

.crew__rocket{display:grid; justify-items:center; gap:18px}
.rocket{position:relative; width:96px; height:230px; display:grid; place-items:start center; will-change:transform}
.rocket svg{width:78px; filter:drop-shadow(0 0 22px rgba(226,74,29,.4))}
.rocket__flame{
  position:absolute; left:50%; bottom:56px; width:26px; height:52px; margin-left:-13px; border-radius:50% 50% 46% 46%;
  background:radial-gradient(ellipse at 50% 20%,#fff 0%,var(--orange-lt) 26%,var(--orange) 52%,rgba(198,40,40,0) 78%);
  filter:blur(1px); transform-origin:50% 0; opacity:0;
}
.rocket__smoke{
  position:absolute; left:50%; bottom:0; width:120px; height:60px; margin-left:-60px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(226,74,29,.34),transparent 68%); filter:blur(10px); opacity:0;
}
.rocket.is-fly .rocket__flame{opacity:1; animation:flame .12s steps(2) infinite}
.rocket.is-fly .rocket__smoke{animation:smoke 1.6s ease-out forwards}
@keyframes flame{0%{transform:scaleY(1) scaleX(1)}100%{transform:scaleY(1.5) scaleX(.82)}}
@keyframes smoke{0%{opacity:.9; transform:scale(.5)}100%{opacity:0; transform:scale(2.6)}}
.rocket__btn{
  padding:9px 20px; border-radius:999px; border:1px solid var(--line); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); background:rgba(255,255,255,.03); transition:all .3s var(--ease)
}
.rocket__btn:hover{color:#fff; border-color:rgba(226,74,29,.6); box-shadow:var(--glow-o)}

.crew__side{display:grid; gap:20px}
.socials{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.social{
  display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r-m);
  border:1px solid var(--line-2); background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-family:var(--f-disp); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .4s var(--ease-out), border-color .4s, box-shadow .4s, color .3s;
}
.social svg{width:22px; height:22px; fill:var(--orange-lt); flex-shrink:0; transition:transform .45s var(--ease-out), fill .3s}
.social:hover{transform:translateY(-5px); color:#fff; border-color:rgba(226,74,29,.5);
  box-shadow:0 18px 40px -22px rgba(226,74,29,.95), 0 0 26px rgba(226,74,29,.18)}
.social:hover svg{transform:scale(1.16) rotate(-8deg); fill:#fff}

.countdown{padding:24px 24px 20px; text-align:center}
.countdown__cap{margin:0 0 16px; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3)}
.countdown__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.countdown__grid div{
  padding:14px 6px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(226,74,29,.12),rgba(255,255,255,.02));
}
.countdown__grid b{
  display:block; font-family:var(--f-disp); font-weight:900; font-size:clamp(20px,3vw,28px); color:#fff;
  text-shadow:0 0 22px rgba(226,74,29,.6); font-variant-numeric:tabular-nums;
}
.countdown__grid span{display:block; margin-top:4px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.countdown__note{margin:16px 0 0; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--orange-lt)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative; z-index:2; padding:clamp(60px,7vw,90px) 0 28px; border-top:1px solid var(--line)}
.foot::before{
  content:''; position:absolute; left:50%; top:0; width:min(700px,90vw); height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
.foot__grid{display:grid; grid-template-columns:1.4fr 1.2fr .8fr; gap:44px}
.foot__logo{width:min(280px,70vw); filter:drop-shadow(0 0 30px rgba(226,74,29,.35))}
.foot__tag{margin:14px 0 0; font-size:14px; color:var(--ink-2); max-width:320px}
.foot__k{margin:0 0 6px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--orange)}
.foot__k:not(:first-child){margin-top:20px}
.foot__v{margin:0; font-family:var(--f-disp); font-size:15px; font-weight:700; color:#fff}
.foot__v--live{color:var(--orange-lt)}
.ca--mini{padding:9px 10px 9px 14px; border-radius:12px; border:1px solid var(--line-2);
  background:rgba(255,255,255,.03); justify-content:space-between; gap:8px}
.ca--mini .ca__value{font-size:12px}
.foot__links{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
.foot__links a{font-size:13px; color:var(--ink-2); transition:color .3s}
.foot__links a:hover{color:var(--orange-lt)}
.foot__bar{
  width:min(var(--wrap),calc(100% - 44px)); margin:44px auto 0; padding-top:22px;
  border-top:1px solid var(--line-2); display:grid; gap:8px;
}
.foot__bar p{margin:0; font-size:12px; color:var(--ink-3)}
.foot__dis{max-width:820px; line-height:1.6}

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:1200; transform:translate(-50%,26px);
  padding:12px 22px; border-radius:999px; font-size:13px; letter-spacing:.06em; color:#fff;
  background:rgba(12,6,6,.88); border:1px solid rgba(226,74,29,.5);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(226,74,29,.9);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .crew{grid-template-columns:1fr 1fr; }
  .crew__side{grid-column:1 / -1}
  .foot__grid{grid-template-columns:1fr 1fr; }
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:860px){
  :root{--nav-h:66px}
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:2px; margin:0; padding:14px 18px 24px;
    background:rgba(7,4,5,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .35s var(--ease), transform .4s var(--ease-out), visibility .35s;
  }
  .nav__links.is-open{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  .nav__links a{padding:13px 12px; font-size:15px; border-radius:12px}
  .nav__links a::after{display:none}
  .nav__burger{display:block}
  .socials{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .nav__right .btn--sm{display:none}   /* the hero CTA is right below */
  .nav__name{letter-spacing:.14em; font-size:14px}
  .nav__mark{width:38px}
  .nav__right{margin-left:auto}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .wrap{width:calc(100% - 32px)}
  .hero{padding-bottom:70px}
  .hero__cta .btn{padding:12px 20px; font-size:12px}
  .ca{padding:12px 14px; border-radius:20px; flex-direction:column; gap:10px}
  .ca__label{letter-spacing:.18em}
  .ca__value{text-align:center; font-size:12.5px}
  .crew{grid-template-columns:1fr}
  .road{padding-left:44px}
  .road__line{left:14px}
  .phase__node{left:-44px}
  .phase__card{padding:24px 22px}
  .foot__grid{grid-template-columns:1fr}
  .countdown__grid{gap:7px}
  .scroll-hint{display:none}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.12s !important;
  }
  .reveal{opacity:1 !important; transform:none !important}
}