:root { color-scheme:dark; --page:#10251e; --panel:#1b392f; --ink:#fff9eb; --muted:#c8d9d2; --mint:#67d2ba; --gold:#f0cf72; --line:#4e786b; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 12% 5%,#2a6251 0,transparent 25rem),radial-gradient(circle at 88% 42%,#304c32 0,transparent 28rem),var(--page); line-height:1.6; }
a { color:var(--mint); }
a:focus-visible { outline:4px solid #ffe27b; outline-offset:4px; }
.skip-link { position:fixed; z-index:5; left:12px; top:12px; padding:10px 14px; border-radius:10px; color:#10251e; background:#ffe27b; font-weight:900; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.roadmap-shell { width:min(100% - 28px,960px); margin:auto; padding:max(28px,env(safe-area-inset-top)) 0 40px; }
.roadmap-hero { position:relative; overflow:hidden; padding:clamp(26px,7vw,64px); border:2px solid var(--line); border-radius:30px; background:linear-gradient(145deg,rgba(28,66,54,.98),rgba(20,45,37,.96)); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.roadmap-hero::after { content:""; position:absolute; right:-42px; bottom:-60px; width:230px; height:230px; border:26px solid rgba(103,210,186,.12); border-radius:50%; }
.eyebrow,.stage { margin:0; color:var(--mint); font-size:.82rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; line-height:1.08; }
h1 { position:relative; margin:.08em 0; max-width:10ch; font-size:clamp(3.2rem,12vw,7.2rem); }
.intro { max-width:38rem; margin:.8rem 0 1.5rem; color:var(--muted); font-size:clamp(1.08rem,3vw,1.35rem); }
.promise { position:relative; max-width:46rem; padding:16px 18px; border-left:5px solid var(--gold); border-radius:10px; background:rgba(240,207,114,.1); }
.garden-path { position:relative; margin:44px 0; }
.garden-path::before { content:""; position:absolute; left:37px; top:30px; bottom:50px; width:6px; border-radius:10px; background:linear-gradient(var(--mint),var(--gold)); opacity:.65; }
.milestone { position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); gap:18px; margin:0 0 28px; }
.marker { position:relative; z-index:1; display:grid; width:76px; height:76px; place-items:center; border:3px solid var(--mint); border-radius:50%; background:#17342a; box-shadow:0 0 0 8px rgba(16,37,30,.8),0 8px 28px rgba(0,0,0,.28); font-size:2.15rem; }
.milestone-card { padding:clamp(20px,5vw,34px); border:2px solid var(--line); border-radius:22px; background:rgba(27,57,47,.94); box-shadow:0 16px 45px rgba(0,0,0,.18); }
.milestone-card h2 { margin:.15rem 0 1rem; font-size:clamp(1.65rem,5vw,2.5rem); }
.milestone-card li { margin:.45rem 0; }
.milestone.destination .marker { border-color:var(--gold); }
.milestone.destination .milestone-card { border-color:#927e48; background:linear-gradient(145deg,#254739,#3b452c); }
.roadmap-note { padding:24px clamp(20px,5vw,34px); border:2px dashed var(--gold); border-radius:20px; background:rgba(240,207,114,.08); }
.roadmap-note h2 { margin:0 0 .4rem; }
.roadmap-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin:28px 0; }
.primary-link { display:inline-grid; min-height:52px; place-items:center; padding:0 22px; border:2px solid var(--mint); border-radius:999px; color:#10251e; background:var(--mint); font-weight:900; text-decoration:none; }
footer { padding:0 18px max(30px,env(safe-area-inset-bottom)); color:var(--muted); text-align:center; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px) { .garden-path::before { left:25px; }.milestone { grid-template-columns:52px minmax(0,1fr); gap:11px; }.marker { width:52px; height:52px; font-size:1.55rem; }.milestone-card { border-radius:18px; }.milestone-card ul { padding-left:1.2rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (forced-colors:active) { .roadmap-hero,.milestone-card,.roadmap-note,.primary-link,.marker { forced-color-adjust:auto; } }