*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#03050f;--text:#e8eaf6;--muted:#8790b2;--accent:#4cc9f0;--glow:#4cc9f066;--font-display:Orbitron,system-ui,sans-serif;--font-body:"Crimson Pro",Georgia,serif}
html{scroll-behavior:smooth}
body{background:#03050f;color:var(--text);font-family:var(--font-body);font-size:18px;min-height:100vh;overflow-x:hidden}
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
.nebula{position:fixed;border-radius:50%;filter:blur(120px);z-index:0;pointer-events:none;opacity:.13}
.nebula.one{width:620px;height:620px;background:var(--accent);top:-180px;right:-140px}
.nebula.two{width:480px;height:480px;background:#c77dff;bottom:60px;left:-150px}
.top-nav{position:relative;z-index:5;padding:18px clamp(18px,4vw,42px);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-bottom:1px solid #ffffff0a;background:#03050f99;backdrop-filter:blur(12px)}
.nav-group{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav-link,.nav-brand{font-family:var(--font-display);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.nav-brand{color:var(--accent)}
.nav-link{color:#ffffff66;border:1px solid #ffffff14;padding:8px 13px;border-radius:3px}
.nav-link:hover{color:var(--accent);border-color:var(--accent)}
.hero{position:relative;z-index:1;text-align:center;max-width:1060px;margin:0 auto;padding:clamp(64px,10vw,112px) 20px 52px}
.eyebrow{font-family:var(--font-display);font-size:.72rem;letter-spacing:.35em;color:var(--accent);text-transform:uppercase;margin-bottom:18px}
.hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,7vw,5.5rem);font-weight:900;line-height:1.05;letter-spacing:-.03em;background:linear-gradient(135deg,#fff 0%,var(--accent) 52%,#c77dff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(1.06rem,2.5vw,1.35rem);font-style:italic;font-weight:300;color:var(--muted);margin:20px auto 0;max-width:760px;line-height:1.65}
.hero-hook{margin:30px auto 0;max-width:830px;text-align:left;border-left:3px solid var(--accent);background:#0a0f2288;padding:18px 22px;color:#f5f6ff;font-size:1.18rem;line-height:1.6;font-style:italic}
.hero-actions,.footer-nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{font-family:var(--font-display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--accent);border:1px solid var(--glow);padding:10px 16px;border-radius:3px;background:#ffffff05}
.btn:hover{background:var(--glow);color:#fff}
.pill{display:inline-block;font-family:var(--font-display);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--glow);padding:8px 12px;margin:7px;border-radius:3px;background:#ffffff05}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 20px 90px}
.timeline-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#ff6b3544,#4cc9f044,#c77dff44,#06d6a044,#ffffff22);transform:translateX(-50%)}
.timeline-list{position:relative;display:flex;flex-direction:column;padding:20px 0 80px}
.timeline-row{position:relative;display:flex;align-items:center;min-height:116px;opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.timeline-row.visible,.section.visible{opacity:1;transform:translateY(0)}
.timeline-row:nth-child(odd){justify-content:flex-start;padding-right:52%}
.timeline-row:nth-child(even){justify-content:flex-end;padding-left:52%}
.timeline-row::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--node-color);box-shadow:0 0 14px var(--node-glow),0 0 34px var(--node-glow);z-index:2}
.timeline-row::after{content:"";position:absolute;top:50%;width:8%;height:1px;background:var(--node-color);opacity:.5}
.timeline-row:nth-child(odd)::after{right:48%}
.timeline-row:nth-child(even)::after{left:48%}
.card,.topic-card{display:block;text-decoration:none;background:linear-gradient(135deg,#0a0f22aa,#0d1535cc);border:1px solid #ffffff12;border-radius:6px;color:var(--text);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.card{padding:18px 20px;max-width:370px}
.card:hover,.topic-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 30px var(--glow)}
.date{font-family:var(--font-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.card h2,.topic-card strong{font-family:var(--font-display);line-height:1.28;color:#fff}
.card h2{font-size:1rem;margin-bottom:8px}.card p,.topic-card span{color:var(--muted);line-height:1.48}
.content{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 20px 90px}
.section{margin-bottom:28px;opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.section h2{font-family:var(--font-display);font-size:clamp(.76rem,2vw,.92rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.section-body{background:linear-gradient(135deg,#0a0f22aa,#0d1535c0);border:1px solid #ffffff10;border-radius:6px;padding:24px 28px;font-size:1.08rem;line-height:1.82;color:#cbd3ed}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;margin-top:18px}
.topic-card{padding:18px}
.topic-card small{display:block;font-family:var(--font-display);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.topic-card strong{display:block;font-size:.96rem;margin-bottom:8px}
@media(max-width:760px){.timeline-spine{left:22px}.timeline-row,.timeline-row:nth-child(odd),.timeline-row:nth-child(even){justify-content:flex-start;padding:0 0 0 52px;min-height:auto;margin-bottom:22px}.timeline-row::before{left:22px}.timeline-row::after,.timeline-row:nth-child(odd)::after,.timeline-row:nth-child(even)::after{left:22px;width:30px}.card{max-width:none;width:100%}.section-body{padding:20px}}