:root { --bg:#04050c; --fg:#c7d6d2; --bright:#eefaf6; --dim:#7f9a93; --accent:#8fe3c0; --amber:#ffcc80; --line:rgba(143,227,192,.22); --panel:rgba(5,8,16,.78); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--fg); background:var(--bg); font:17px/1.65 ui-monospace,"Noto Sans Mono",Menlo,Consolas,monospace; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(4,5,12,.45),rgba(4,5,12,.75)),url(galaxy.webp) center top/430px 1080px repeat; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
nav { position:absolute; top:16px; right:16px; z-index:2; }
.lang { color:var(--bright); padding:6px 12px; border:1px solid var(--line); background:var(--panel); text-decoration:none; font-size:14px; }
.hero img { display:block; width:100%; height:auto; max-height:80vh; object-fit:cover; object-position:center top; -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
.intro { max-width:820px; margin:0 auto; padding:8px 16px 32px; text-align:center; }
.badge { display:inline-block; margin:0 0 16px; padding:4px 12px; color:var(--amber); border:1px solid var(--amber); font-size:14px; text-transform:uppercase; letter-spacing:.06em; }
.tagline { margin:0 0 24px; color:var(--bright); font-size:clamp(20px,3vw,28px); line-height:1.35; }
.actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0 0 16px; }
.btn { display:inline-block; padding:12px 20px; color:var(--bright); border:1px solid var(--line); background:var(--panel); text-decoration:none; }
.btn:hover,.lang:hover { border-color:var(--accent); }
.btn.primary { color:#04100c; background:var(--accent); border-color:var(--accent); font-weight:700; }
.btn.disabled { color:var(--dim); }
.facts { margin:0; color:var(--dim); font-size:14px; }
main { max-width:980px; margin:0 auto; padding:0 16px; }
section { margin:0 0 24px; padding:28px; background:var(--panel); border:1px solid var(--line); }
h2 { margin:0 0 16px; color:var(--accent); font-size:15px; text-transform:uppercase; letter-spacing:.12em; }
h3 { margin:0 0 4px; color:var(--bright); font-size:17px; }
p { margin:0 0 14px; } section > p:last-child { margin-bottom:0; }
.lead { color:var(--bright); }
.steps { list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:18px; }
.steps li { counter-increment:s; position:relative; padding-left:48px; }
.steps li::before { content:"0" counter(s); position:absolute; left:0; color:var(--amber); }
.steps p { margin:0; }
.columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.columns section { margin:0; }
ul { list-style:none; margin:0; padding:0; } li + li { margin-top:10px; }
.status li,.goals li { position:relative; padding-left:26px; }
.status li::before,.goals li::before { position:absolute; left:0; }
.status .done::before { content:"✓"; color:var(--accent); }
.status .doing::before { content:"…"; color:var(--amber); }
.goals li::before { content:"▸"; color:var(--accent); }
.support { border-color:var(--amber); }
footer { padding:16px 16px 40px; text-align:center; color:var(--dim); font-size:14px; }
footer a { color:var(--fg); }
@media (max-width:720px) { body { font-size:16px; } section { padding:20px; } .columns { grid-template-columns:1fr; } .hero img { min-height:220px; } }