/* Roadmap — "Journey" (night sky → launch) */

/* Hero */
.rm-hero{ position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 30px) 0 110px; }
.rm-sky{ position:absolute; inset:-6% 0; }
.rm-sky img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; }
.rm-sky::before{ content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,rgba(5,5,9,.9),rgba(5,5,9,.55) 55%,rgba(5,5,9,.2)),linear-gradient(180deg,transparent 45%,rgba(5,5,9,.6) 75%,var(--ink-0)); }
.stars{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.rm-hero-copy{ position:relative; z-index:3; }
.rm-hero-copy::before{ content:""; position:absolute; left:-10%; top:-10%; width:80%; height:120%; z-index:-1; pointer-events:none; background:radial-gradient(closest-side,rgba(5,5,9,.6),transparent); }
.rm-hero-copy .lead{ color:var(--bone); text-shadow:0 1px 2px rgba(5,5,9,.8),0 2px 22px rgba(5,5,9,.95); }
.rm-hero-copy .crumbs{ position:absolute; top:-10px; }
.rm-title{ margin:26px 0 30px; font-size:clamp(2.4rem,min(6.2vw,11svh),6.6rem); max-width:16ch; }
.rm-title > span{ display:block; }
.rm-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.rm-constellation{ position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:0; margin-top:70px; font-size:.68rem; color:var(--fog); }
.rm-constellation li{ position:relative; display:flex; align-items:center; gap:10px; padding:10px 22px 10px 0; margin-right:22px; }
.rm-constellation li b{ font-weight:500; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--bone); background:rgba(9,9,26,.5); }
.rm-constellation li:not(:last-child)::after{ content:""; position:absolute; right:-14px; top:50%; width:20px; height:1px; background:var(--line-2); }

/* Sequence */
.rm-seq-stage{ position:relative; height:100vh; overflow:hidden; display:grid; place-items:center; }
.rm-seq-stage::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 40% at 50% 50%,rgba(92,99,217,.25),transparent 70%); }
.rs-l{ text-align:center; font-size:clamp(2.4rem,min(11vw,18svh),12rem); white-space:nowrap; }
.rs-l .serif{ color:var(--accent-2); padding-right:.08em; }

/* Journey */
.j-pin{ position:relative; height:100vh; display:flex; flex-direction:column; overflow:hidden; padding-top:calc(var(--nav-h) + 6px); }
.j-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-bottom:22px; }
.j-h{ margin-top:14px; }
.j-h .serif{ color:var(--accent-2); }
.j-rail{ position:relative; display:flex; justify-content:space-between; width:min(48vw,620px); flex-shrink:0; }
.j-rail::before{ content:""; position:absolute; left:15px; right:15px; top:50%; height:1px; background:var(--line-2); }
.j-rail-fill{ position:absolute; left:15px; right:15px; top:50%; height:2px; margin-top:-1px; background:var(--grad); transform-origin:left; transform:scaleX(0); }
.j-node{ position:relative; z-index:1; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--ink-0); border:1px solid var(--line-2); font-family:var(--f-mono); font-size:.62rem; color:var(--dim); transition:all .5s var(--ease); }
.j-node b{ font-weight:500; }
.j-node.on{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 0 18px var(--glow); }
.j-track{ flex:1; display:flex; gap:24px; padding:0 var(--gutter) 30px; width:max-content; will-change:transform; }
.stage{ position:relative; width:min(86vw,1300px); height:100%; display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border-radius:30px; overflow:hidden; background:linear-gradient(180deg,#100f24,#0a0918); border:1px solid var(--line); }
.st-img{ border-radius:0; }
.st-img img{ position:absolute; inset:0; width:130%; max-width:none; left:-15%; }
.st-copy{ position:relative; padding:clamp(24px,3vw,48px); display:flex; flex-direction:column; justify-content:flex-end; gap:10px; overflow:hidden; }
.st-num{ position:absolute; top:-0.12em; right:.05em; font-family:var(--f-display); font-weight:600; font-size:clamp(8rem,16vw,15rem); line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px var(--line-2); pointer-events:none; }
.st-time{ font-size:.68rem; color:var(--accent-2); }
.st-copy .h2{ font-size:clamp(2.4rem,4.4vw,4.4rem); }
.st-sum{ color:var(--bone-2); font-size:1.08rem; max-width:52ch; opacity:.88; margin-bottom:12px; }
.st-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding-top:20px; border-top:1px solid var(--line); }
.st-cols h4{ font-size:.62rem; color:var(--dim); margin-bottom:10px; font-weight:500; }
.st-cols li{ position:relative; padding-left:14px; color:var(--fog); font-size:.9rem; line-height:1.45; margin-bottom:7px; }
.st-cols li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--line-2); }
.st-install li::before{ background:var(--accent-2); }
.st-install a{ color:var(--bone); border-bottom:1px solid var(--line-2); transition:border-color .3s, color .3s; }
.st-install a:hover{ color:var(--accent-2); border-color:var(--accent-2); }
.rm-note{ color:var(--dim); font-size:.92rem; max-width:80ch; padding:40px 0 0; }
@media (max-width:980px){
  .j-pin{ height:auto; padding-bottom:40px; }
  .j-top{ flex-direction:column; align-items:flex-start; }
  .j-rail{ display:none; }
  .j-track{ width:auto; flex-direction:column; }
  .stage{ width:100%; grid-template-columns:1fr; grid-template-rows:260px auto; }
  .st-cols{ grid-template-columns:1fr; }
  .st-img img{ width:100%; left:0; }
}

/* Flip cards */
.flips{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; perspective:1600px; }
.flip{ position:relative; height:280px; text-align:left; font:inherit; color:inherit; perspective:1200px; }
.flip-in{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1s var(--ease); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip[aria-pressed="true"] .flip-in{ transform:rotateY(180deg); }
.f-front, .f-back{ position:absolute; inset:0; border-radius:24px; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.f-front{ background:linear-gradient(180deg,#14132a,#0b0a1a); border:1px solid var(--line); }
.f-front > span:not(.mono){ color:var(--fog); }
.f-back{ transform:rotateY(180deg); background:radial-gradient(90% 80% at 100% 0%,rgba(141,79,198,.55),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(42,143,224,.5),transparent 60%),#0f0e22; border:1px solid rgba(198,179,255,.3); }
.f-back > span:not(.mono){ color:var(--bone); font-size:1.1rem; }
.f-front .mono, .f-back .mono{ font-size:.64rem; color:var(--dim); margin-bottom:auto; align-self:flex-start; max-width:calc(100% - 64px); }
.f-back .mono{ color:var(--accent-2); }
.f-hint{ position:absolute; top:28px; right:28px; font-style:normal; font-size:.62rem; color:var(--accent-2); }
@media (max-width:900px){ .flips{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .flips{ grid-template-columns:1fr; } }

/* Short desktop screens: keep each stage fully inside the pinned frame */
@media (min-width:981px) and (max-height:860px){
  .j-top{ padding-bottom:12px; }
  .j-h{ margin-top:8px; }
  .j-track{ padding-bottom:20px; }
  .st-copy{ gap:6px; padding:clamp(20px,2.6vw,36px); }
  .st-copy .h2{ font-size:clamp(2rem,6vh,3.4rem); }
  .st-sum{ font-size:.98rem; margin-bottom:4px; }
  .st-cols{ gap:16px; padding-top:12px; }
  .st-cols h4{ margin-bottom:6px; }
  .st-cols li{ font-size:.82rem; margin-bottom:4px; line-height:1.35; }
  .st-num{ font-size:clamp(6rem,20vh,11rem); }
}
@media (max-width:700px){
  .rm-sky::before{ background:linear-gradient(180deg,rgba(5,5,9,.55),rgba(5,5,9,.7) 50%,var(--ink-0)); }
}