@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,900&family=Space+Mono:wght@700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#100b16;--surface:#1a1224;--ink:#fff0d9;--muted:#c7b7cd;--lime:#aaff33;--pink:#ff478b;--line:#3d2d49;--title:"Barlow Condensed",Impact,sans-serif;--mono:"Space Mono",monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.65 "Work Sans",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{color:var(--lime)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3,.brand{font-family:var(--title);line-height:.94;text-transform:uppercase}
h2{font-size:clamp(3rem,7vw,5.6rem);font-weight:900}
h3{font-size:2rem}
img{display:block;max-width:100%}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px;padding:10px max(24px,calc((100% - 1120px)/2));background:#120b1a;border-bottom:1px solid var(--line)}
.brand,.social,nav{display:flex;align-items:center;gap:16px}
.brand{font-size:1.85rem;font-weight:900;gap:10px}
.brand img{border-radius:10px}
nav,.social{font-size:.9rem;font-weight:700}
.hero{min-height:630px;display:grid;align-items:center;background:linear-gradient(90deg,#100b16f2 0%,#100b16a6 35%,transparent 72%),linear-gradient(0deg,#100b16 0%,transparent 35%),url(assets/hero.webp) 62% center/cover no-repeat}
.hero-inner{padding-block:80px}
.stars{font-size:clamp(1.35rem,4vw,2rem);color:#ff4061;letter-spacing:.19em;line-height:1}
h1{font-size:clamp(4.2rem,11vw,10rem);font-weight:900;font-style:italic;letter-spacing:-.035em;text-shadow:4px 5px #0e0913;margin-top:13px}
h1 span{display:block;color:var(--lime);font-size:.48em;letter-spacing:.035em;margin-top:10px}
.hero p{font-size:clamp(1.1rem,3vw,1.65rem);font-weight:600;margin:24px 0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:9px 17px;border:1px solid transparent;border-radius:5px;font:700 .83rem/1.3 var(--mono);white-space:nowrap;cursor:pointer}
.lime{background:var(--lime);color:#142006}
.lime:hover{background:#ceff83;color:#142006}
.outline{border-color:#aa98bb;color:var(--ink);background:#150e20bd}
.outline:hover{border-color:var(--lime)}
button:disabled{opacity:.44;cursor:default}
.contract{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 22px;background:#1a1224;border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:7px}
.contract div{min-width:0}
.label{display:block;color:var(--lime);font:700 .76rem/1.5 var(--mono);letter-spacing:.09em}
.ca{font:600 clamp(.75rem,2.3vw,.95rem)/1.45 var(--mono);overflow-wrap:anywhere}
.story{padding-block:85px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:45px}
.story h2{margin:10px 0 22px}
.story p{color:var(--muted);margin-top:12px}
.story .lead{color:var(--ink);font-size:1.2rem;font-weight:600}
.story img{width:min(100%,395px);height:auto;justify-self:center;border-radius:16px;border:1px solid #45305d}
.road{padding-block:64px;background:radial-gradient(ellipse at 65% 20%,#2a133b,#15101d 66%);border-block:1px solid var(--line)}
.exchange{display:flex;align-items:center;gap:17px;padding:20px;background:#21152e;border:1px solid #634375;border-radius:9px;margin-bottom:55px}
.exchange>span{color:var(--pink);font-size:1.8rem}
.exchange h2{font-size:clamp(1.45rem,4vw,2.5rem)}
.exchange p,.road-intro,.phases p,.grid p{color:var(--muted)}
.exchange .button{margin-left:auto}
.road-intro{margin:10px 0 22px}
.map{border:1px solid #553866;border-radius:10px 10px 0 0;overflow:hidden}
.map img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.phases,.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.phases{list-style:none;padding:0;margin:12px 0 0}
.phases li,.grid article{padding:21px;background:var(--surface);border:1px solid var(--line);border-radius:7px}
.phases strong{display:block;font:900 clamp(2.5rem,5vw,4.3rem)/1.03 var(--title);margin:5px 0}
.commitments{padding-block:70px}
.commitments h2{margin-bottom:24px}
.grid article{border-top:2px solid var(--pink)}
.grid p{margin-top:8px}
footer{padding-top:25px;border-top:1px solid var(--line)}
.footer-line{padding-block:25px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.footer-line>span{font:700 .75rem var(--mono);color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:680px){
.wrap{width:calc(100% - 30px)}
.nav{padding-inline:15px}.nav nav{display:none}.nav .brand{font-size:1.55rem}.brand img{width:32px;height:32px}
.hero{min-height:610px;align-items:end;background-image:linear-gradient(0deg,#100b16 5%,#100b16dc 26%,transparent 68%),url(assets/hero.webp);background-position:68% top;background-size:auto 100%}
.hero-inner{padding:265px 0 34px}
h1{font-size:clamp(3.7rem,14vw,6.2rem)}.hero p{margin-block:16px}
.contract{padding:13px 10px}.contract .button{padding-inline:9px}
.story{grid-template-columns:1fr;gap:24px;padding-block:55px}.story img{width:min(80%,330px)}
.road,.commitments{padding-block:45px}
.exchange{flex-wrap:wrap;margin-bottom:35px}.exchange .button{margin-left:0}
.phases,.grid{grid-template-columns:1fr}.phases li,.grid article{padding:15px 17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}