/* ==========================================================
   Rocketry landing page — deep space to twilight sky
   (SpaceX: dark cinematic, bold type · NASA: mission patch, phases)
   ========================================================== */
body.rk{
  background:#07061a; color:#f3f2ec;
  --rk-line:rgba(243,242,236,.14);
  --rk-dim:rgba(243,242,236,.62);
  --rk-violet:#7b5cff;
}
body.rk .grid-bg{ display:none; }
.rk-stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
body.rk main{ position:relative; z-index:1; }

/* sky gradient that drifts from deep space (top) to twilight (bottom of page) */
body.rk::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 50% at 80% 10%, rgba(123,92,255,.28), transparent 70%),
    radial-gradient(60% 40% at 10% 40%, rgba(88,52,190,.22), transparent 70%),
    linear-gradient(180deg, #07061a 0%, #0f0a2e 45%, #1e1552 75%, #2d2470 100%);
}
body.rk::after{ /* horizon glow that rises as you scroll */
  content:""; position:fixed; left:0; right:0; bottom:0; height:60vh; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 120%, rgba(191,221,240,.55) 0%, rgba(142,195,230,.25) 35%, transparent 70%);
  opacity:var(--horizon, .25); transition:opacity .2s linear;
}

/* top bar / hud on dark */
.rk-top, .rk-hud{ color:#f3f2ec; }
.rk-top.scrolled{ background:rgba(7,6,26,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--rk-line); }
.rk-back{ display:none; }
.rk-hud span{ margin-right:14px; }
.rk-hud .hud__right span{ margin:0 0 0 14px; }
@media (max-width:760px){ .rk-top .nav{ display:none; } .rk-back{ display:inline-block; } .rk-hud .hud__left span:last-child{ display:none; } }

/* ---------- hero ---------- */
.rk-hero{
  min-height:100svh; position:relative;
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:var(--gutter);
  padding:110px var(--gutter) 120px;
}
.rk-kicker{ display:flex; align-items:center; gap:10px; font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:28px; }
.rk-title{
  font:700 clamp(48px, 7.4vw, 124px)/.92 var(--f-display); text-transform:uppercase; letter-spacing:-.03em;
  margin-bottom:30px;
}
.rk-title .line{ display:block; }
.rk-title .line:nth-child(2){ color:transparent; -webkit-text-stroke:1.5px #f3f2ec; }
.rk-lede{ max-width:46ch; font-size:15px; line-height:1.7; color:var(--rk-dim); margin-bottom:28px; }
.rk-status{ display:flex; flex-wrap:wrap; gap:10px; }
.rk-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  font:500 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
  background:var(--lime); color:var(--ink);
}
.rk-pill i{ width:7px; height:7px; border-radius:50%; background:var(--ink); animation:blink 1.4s steps(2, jump-none) infinite; }
.rk-pill--ghost{ background:transparent; color:#f3f2ec; border:1px solid var(--rk-line); }

.rk-hero__art{ position:relative; aspect-ratio:1; max-width:620px; justify-self:center; width:100%; }
.rk-orbit{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(243,242,236,.18); stroke-width:1; animation:spin 80s linear infinite; }
.rk-orbit ellipse:first-child{ stroke-dasharray:4 6; }
.rk-orbit__dot{ fill:var(--lime); stroke:none; }
.rk-rocket{
  position:absolute; left:50%; top:50%; width:58%; translate:-50% -50%;
  filter:drop-shadow(0 40px 60px rgba(123,92,255,.5));
  animation:rk-float 6s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes rk-float{ from{ transform:translateY(-10px) rotate(-2deg); } to{ transform:translateY(12px) rotate(2deg); } }
.rk-patch{ position:absolute; right:2%; bottom:6%; width:clamp(92px, 11vw, 140px); animation:spin 40s linear infinite reverse; }
.rk-patch svg{ width:100%; height:auto; }
.rk-patch circle{ fill:rgba(7,6,26,.6); stroke:#f3f2ec; stroke-width:1.2; }
.rk-patch circle.in{ fill:none; stroke:var(--lime); stroke-dasharray:2 3; }
.rk-patch text{ font:500 8.6px var(--f-mono); fill:#f3f2ec; letter-spacing:.14em; }
.rk-patch .ship{ fill:var(--lime); }

.rk-scroll{
  position:absolute; left:50%; bottom:76px; translate:-50% 0;
  font:400 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.2em; color:var(--rk-dim);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.rk-scroll span{ width:1px; height:42px; background:linear-gradient(var(--lime), transparent); animation:rk-drop 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes rk-drop{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

/* ---------- sections ---------- */
.rk-sec{ padding:clamp(90px, 14vh, 160px) var(--gutter); border-top:1px solid var(--rk-line); }
.rk-grid{ display:grid; grid-template-columns:1fr 3fr; gap:var(--gutter); }
.rk-label{ display:flex; align-items:center; gap:10px; align-self:start; font:400 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; padding-top:.7em; }
.rk-big{ font:400 clamp(28px, 3.6vw, 56px)/1.1 var(--f-display); letter-spacing:-.025em; max-width:24ch; margin-bottom:48px; }
.rk-big .dim{ color:var(--rk-dim); }
.rk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); max-width:960px; }
.rk-cols p{ font-size:15px; line-height:1.7; color:var(--rk-dim); }

/* systems cards */
.rk-cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); perspective:1200px; }
.rk-card{
  position:relative; overflow:hidden; padding:clamp(20px, 2.2vw, 32px);
  border:1px solid var(--rk-line);
  background:linear-gradient(160deg, rgba(123,92,255,.10), rgba(7,6,26,.4) 60%);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease-out), border-color .3s, opacity .8s var(--ease-out);
}
.rk-card::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(170,140,255,.22), transparent 60%); }
.rk-card:hover{ border-color:rgba(192,254,4,.5); }
.rk-card:hover::before{ opacity:1; }
.rk-card header{ display:flex; align-items:center; gap:10px; font:400 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; margin-bottom:28px; }
.rk-idx{ display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; }
.rk-card h3{ font:700 clamp(24px, 2.4vw, 36px)/1 var(--f-display); text-transform:uppercase; letter-spacing:-.02em; margin-bottom:10px; }
.rk-card > p{ color:var(--rk-dim); font-size:14px; line-height:1.6; margin-bottom:18px; max-width:40ch; }
.rk-card .spec{ margin:0; max-width:none; }
.rk-card .spec li{ border-color:var(--rk-line); }
.rk-tag{
  margin-left:auto; padding:4px 7px; border:1px solid var(--rk-line);
  font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:#f3f2ec;
}
.rk-tag--live{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.rk-tag--done{ background:#f3f2ec; color:var(--ink); border-color:#f3f2ec; }

/* control loop */
.rk-steps{ list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); border-top:1px solid var(--rk-line); }
.rk-steps li{ padding:22px 18px 0 0; border-right:1px solid var(--rk-line); position:relative; }
.rk-steps li:last-child{ border-right:0; }
.rk-steps li::before{ content:""; position:absolute; left:0; top:-1px; height:2px; width:0; background:var(--lime); transition:width 1s var(--ease-out); }
.rk-steps.in li::before{ width:100%; }
.rk-steps.in li:nth-child(2)::before{ transition-delay:.15s; }
.rk-steps.in li:nth-child(3)::before{ transition-delay:.3s; }
.rk-steps.in li:nth-child(4)::before{ transition-delay:.45s; }
.rk-steps.in li:nth-child(5)::before{ transition-delay:.6s; }
.rk-steps b{ display:block; font:400 11px/1 var(--f-mono); color:var(--lime); margin-bottom:12px; }
.rk-steps span{ display:block; font:700 22px/1 var(--f-display); text-transform:uppercase; margin-bottom:10px; }
.rk-steps p{ font-size:13px; line-height:1.55; color:var(--rk-dim); padding-right:10px; }

/* roadmap */
.rk-road{ list-style:none; position:relative; }
.rk-road::before{ content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--rk-line); }
.rk-road li{
  position:relative; display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:baseline;
  padding:22px 0 22px 34px; border-bottom:1px solid var(--rk-line);
}
.rk-road li::before{ content:""; position:absolute; left:0; top:28px; width:15px; height:15px; border-radius:50%; border:1px solid rgba(243,242,236,.5); background:#07061a; }
.rk-road li.done::before{ background:#f3f2ec; border-color:#f3f2ec; }
.rk-road li.live::before{ background:var(--lime); border-color:var(--lime); box-shadow:0 0 0 0 rgba(192,254,4,.6); animation:ping 1.8s ease-out infinite; }
.rk-phase{ font:400 11px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--rk-dim); }
.rk-road h4{ font:700 clamp(22px, 2.2vw, 34px)/1 var(--f-display); text-transform:uppercase; letter-spacing:-.02em; }
.rk-road p{ grid-column:2; font-size:14px; color:var(--rk-dim); }
.rk-road .rk-tag{ grid-row:1; grid-column:3; }

/* results placeholders */
.rk-media{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.rk-slot{
  position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--rk-line);
  display:flex; flex-direction:column; justify-content:space-between; padding:16px;
  font:400 11px/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.08em;
  background:
    repeating-linear-gradient(0deg, rgba(243,242,236,.035) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, rgba(123,92,255,.18), rgba(7,6,26,.2));
}
.rk-slot--wide{ grid-column:1 / -1; aspect-ratio:21/9; }
.rk-slot::after{ /* scanning bar */
  content:""; position:absolute; left:0; right:0; height:30%; top:-30%;
  background:linear-gradient(180deg, transparent, rgba(192,254,4,.08), transparent);
  animation:rk-scan 4s linear infinite;
}
@keyframes rk-scan{ to{ top:100%; } }
.rk-slot em{ font-style:normal; align-self:flex-start; padding:4px 7px; border:1px solid var(--rk-line); color:var(--lime); }
.rk-note{ margin-top:28px; font:400 12px/1.6 var(--f-mono); color:var(--rk-dim); max-width:70ch; }

/* cta */
.rk-cta{ min-height:70svh; display:flex; flex-direction:column; justify-content:center; padding:120px var(--gutter) 140px; border-top:1px solid var(--rk-line); }
.rk-cta h2{ font:700 clamp(48px, 8vw, 140px)/.9 var(--f-display); text-transform:uppercase; letter-spacing:-.03em; margin-bottom:22px; }
.rk-cta p{ color:var(--rk-dim); margin-bottom:30px; }
.rk-cta__row{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; font:400 12px/1 var(--f-mono); text-transform:uppercase; }
.rk-cta .track__cta{ background:var(--lime); color:var(--ink); }
.rk-cta .track__cta::before{ background:#f3f2ec; }

/* phone / tablet */
@media (max-width:900px){
  .rk-hero{ grid-template-columns:1fr; padding-top:96px; }
  .rk-hero__art{ max-width:420px; order:-1; margin-bottom:-20px; }
  .rk-grid{ grid-template-columns:1fr; }
  .rk-label{ margin-bottom:10px; }
  .rk-cols, .rk-cards, .rk-media{ grid-template-columns:1fr; }
  .rk-steps{ grid-template-columns:1fr; }
  .rk-steps li{ border-right:0; border-bottom:1px solid var(--rk-line); padding:18px 0; }
  .rk-road li{ grid-template-columns:1fr auto; padding-left:30px; }
  .rk-road .rk-phase{ grid-column:1; }
  .rk-road h4, .rk-road p{ grid-column:1 / -1; }
  .rk-road .rk-tag{ grid-column:2; grid-row:1; }
  .rk-scroll{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .rk-rocket, .rk-orbit, .rk-patch, .rk-slot::after, .rk-scroll span{ animation:none !important; }
}