/* ================= IGNITION — A SPACEX TIMELINE ================= */
:root{
  --void:#05070c;
  --panel:#0b0f18;
  --panel-2:#0f141f;
  --steel:#c9d0d8;
  --steel-dim:#6c7686;
  --ignition:#ff5a1f;
  --cryo:#5fb8ff;
  --line:#1c2330;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--steel);
  font-family:'IBM Plex Mono', monospace;
  line-height:1.5;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Space Grotesk', sans-serif;
  color:#fff;
  letter-spacing:-.01em;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--ignition); outline-offset:3px;}

.eyebrow{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ignition); font-weight:600; margin-bottom:14px; display:block;
}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 40px;
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(5,7,12,.85), transparent);
}
.brand{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:14px; letter-spacing:.18em; color:#fff;
}
.brand span{color:var(--ignition);}
.nav-links{display:flex; gap:32px; align-items:center;}
.nav-links a{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel-dim); transition:color .2s ease;
}
.nav-links a:hover{color:#fff;}
.nav-links a.active{color:#fff;}
.nav-links a.active{border-bottom:1px solid var(--ignition); padding-bottom:2px;}
.nav-links .cta-link{
  color:var(--ignition); border:1px solid var(--ignition); padding:8px 16px; border-radius:2px;
}
.nav-links .cta-link:hover{background:var(--ignition); color:#05070c;}

/* page-to-page next link */
.page-next{
  max-width:1200px; margin:0 auto; padding:0 40px 60px;
  display:flex; justify-content:flex-end;
}
.page-next a{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:14px;
  color:var(--steel); border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:color .2s ease, border-color .2s ease;
}
.page-next a:hover{color:var(--ignition); border-color:var(--ignition);}
.page-next .eyebrow-mini{
  display:block; font-size:10px; letter-spacing:.14em; color:var(--steel-dim);
  text-transform:uppercase; margin-bottom:4px; text-align:right;
}

footer{
  flex-wrap:wrap; gap:16px;
}
.footer-links{display:flex; gap:22px; flex-wrap:wrap;}
.footer-links a:hover{color:#fff;}

/* ---------- hero ---------- */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:flex-end;
  padding:0 40px 100px;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:url('images/starship.jpg') center 30%/cover no-repeat;
}
.hero-bg::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--void) 0%, rgba(5,7,12,.55) 45%, rgba(5,7,12,.25) 70%, rgba(5,7,12,.55) 100%),
    linear-gradient(to right, rgba(5,7,12,.5), transparent 50%);
}
.hero-content{position:relative; z-index:1; max-width:820px;}
.hero-content h1{
  font-size:clamp(40px,7vw,86px);
  line-height:.98;
  font-weight:700;
}
.hero-content h1 em{font-style:normal; color:var(--ignition);}
.hero-content p{
  margin-top:22px; max-width:480px;
  font-size:14px; color:var(--steel-dim); line-height:1.7;
}
.hero-meta{
  position:absolute; top:120px; right:40px; z-index:1;
  text-align:right; font-size:11px; color:var(--steel-dim); letter-spacing:.08em;
}
.hero-meta b{color:var(--cryo); display:block; font-size:22px; font-family:'Space Grotesk',sans-serif; margin-top:4px;}
.scroll-cue{
  position:absolute; bottom:36px; left:40px; z-index:1;
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.15em; color:var(--steel-dim); text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:34px; background:var(--steel-dim); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--ignition); animation:drip 1.8s ease-in-out infinite;
}
@keyframes drip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------- countdown timer ---------- */
.countdown{
  margin-top:36px;
  display:inline-block;
  padding:20px 26px;
  background:rgba(11,15,24,.72);
  border:1px solid var(--line);
  border-radius:6px;
  backdrop-filter:blur(4px);
}
.cd-eyebrow{
  display:block;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ignition); font-weight:600; margin-bottom:14px;
}
.cd-note{color:var(--steel-dim); font-weight:400; text-transform:none; letter-spacing:.02em;}
.cd-grid{display:flex; align-items:center; gap:14px;}
.cd-unit{display:flex; flex-direction:column; align-items:center; min-width:44px;}
.cd-num{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:32px; color:#fff;
  font-variant-numeric:tabular-nums;
}
.cd-label{
  margin-top:4px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-dim);
}
.cd-colon{font-size:26px; color:var(--steel-dim); transform:translateY(-8px);}
@media (max-width:520px){
  .cd-grid{gap:8px;}
  .cd-num{font-size:24px;}
  .cd-unit{min-width:34px;}
}

/* ---------- section shell ---------- */
section{padding:120px 40px;}
.section-head{max-width:640px; margin-bottom:60px;}
.section-head h2{font-size:clamp(28px,4vw,44px); font-weight:700;}
.section-head p{margin-top:14px; color:var(--steel-dim); font-size:14px; max-width:520px;}

/* ---------- about / mission ---------- */
.about-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:60px;
}
.about-copy p{
  font-size:14px; color:var(--steel-dim); line-height:1.8; margin-bottom:18px;
  max-width:560px;
}
.about-facts{
  border-left:1px solid var(--line);
  padding-left:32px;
  display:flex; flex-direction:column; gap:24px;
  align-self:start;
}
.fact{display:flex; flex-direction:column; gap:4px;}
.fact-k{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-dim);}
.fact-v{font-family:'Space Grotesk',sans-serif; font-size:17px; color:#fff; font-weight:500;}
@media (max-width:820px){
  .about-grid{grid-template-columns:1fr;}
  .about-facts{border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:24px;}
}

/* ---------- gallery 3D widget ---------- */
.gallery-head-flex{
  display:flex; justify-content:space-between; align-items:flex-end; gap:48px;
  flex-wrap:wrap;
}
.gallery-head-text{max-width:520px;}
.mini3d-card{
  position:relative;
  width:280px; height:280px; flex-shrink:0;
  background:radial-gradient(circle at 60% 30%, #10131c, #05070c);
  border:1px solid var(--line); border-radius:6px;
  overflow:hidden;
}
.mini3d-card canvas{width:100%; height:100%; display:block; cursor:grab;}
.mini3d-card canvas:active{cursor:grabbing;}
.mini3d-tag{
  position:absolute; top:14px; left:14px;
  font-size:10px; letter-spacing:.12em; color:var(--steel-dim);
  display:flex; align-items:center; gap:7px;
  pointer-events:none;
}
.mini3d-dot{width:5px; height:5px; border-radius:50%; background:var(--ignition); animation:mpulse 1.6s ease infinite;}
@keyframes mpulse{0%,100%{opacity:1} 50%{opacity:.3}}
.mini3d-link{
  position:absolute; bottom:14px; right:14px;
  font-size:10px; letter-spacing:.06em; color:var(--cryo);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.mini3d-link:hover{border-color:var(--cryo);}
@media (max-width:820px){
  .mini3d-card{width:100%; height:220px;}
}

/* ---------- timeline ---------- */
.timeline{
  max-width:1200px; margin:0 auto;
  border-top:1px solid var(--line);
}
.t-row{
  display:grid; grid-template-columns:110px 1fr 260px;
  gap:32px; align-items:center;
  padding:36px 0;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.t-row.in-view{opacity:1; transform:translateY(0);}
.t-year{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:20px; color:var(--ignition);
}
.t-body h3{font-size:22px; margin-bottom:8px;}
.t-body p{font-size:13px; color:var(--steel-dim); line-height:1.65; max-width:460px;}
.t-spec{
  font-size:11px; color:var(--cryo); letter-spacing:.04em;
  border-left:1px solid var(--line); padding-left:20px;
}
.t-spec div{margin-bottom:6px;}
.t-thumb{
  width:64px; height:64px; border-radius:3px; overflow:hidden; flex-shrink:0;
  background:var(--panel-2); border:1px solid var(--line);
}
.t-thumb img{width:100%; height:100%; object-fit:cover;}
.t-head-flex{display:flex; align-items:center; gap:16px; margin-bottom:8px;}
.t-head-flex h3{margin-bottom:0;}

@media (max-width:820px){
  .t-row{grid-template-columns:1fr; gap:14px;}
  .t-spec{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:14px;}
}

/* ---------- stats ---------- */
.stats-wrap{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
}
.stat{
  background:var(--panel); padding:44px 32px;
}
.stat .num{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(30px,3.4vw,46px); color:#fff;
  display:flex; align-items:baseline; gap:4px;
}
.stat .num .unit{font-size:16px; color:var(--cryo); font-family:'IBM Plex Mono',monospace; font-weight:400;}
.stat .label{margin-top:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim);}
@media (max-width:820px){ .stats-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .stats-grid{grid-template-columns:1fr;} }

/* ---------- CTA ---------- */
.cta{
  position:relative;
  border-radius:6px;
  max-width:1200px; margin:0 auto;
  padding:80px 60px;
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;
}
.cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(255,90,31,.18), transparent 55%);
  pointer-events:none;
}
.cta-text{position:relative; max-width:520px;}
.cta-text h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:14px;}
.cta-text p{color:var(--steel-dim); font-size:13px; line-height:1.7;}
.cta-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ignition); color:#05070c;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  padding:16px 26px; border-radius:3px;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta-btn:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,90,31,.35);}

/* ---------- debugging log ---------- */
.log-list{
  max-width:820px; margin:0 auto;
  list-style:none;
  counter-reset:log;
  display:flex; flex-direction:column; gap:22px;
}
.log-list li{
  counter-increment:log;
  position:relative;
  padding:22px 24px 22px 56px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  font-size:13px; color:var(--steel-dim); line-height:1.8;
}
.log-list li::before{
  content:counter(log);
  position:absolute; left:20px; top:22px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;
  color:var(--ignition);
}
.log-list b{color:#fff; font-weight:600;}

/* ---------- footer ---------- */
footer{
  padding:40px; display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--steel-dim); letter-spacing:.06em;
  border-top:1px solid var(--line);
}
footer b{color:var(--ignition);}