@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root{
  --ink:#171717;
  --paper:#f7ede2;
  --sun:#ffb457;
  --hot:#ff765f;
  --sky:#91c8d4;
  --deep:#25324a;
  --line:rgba(23,23,23,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:.08em}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:var(--sun);border:2px solid var(--ink);border-radius:50%;font-size:18px}
.nav-links{display:flex;gap:28px;font:500 13px DM Mono,monospace;text-transform:lowercase}
.nav-links a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:5px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 21px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font:700 13px DM Mono,monospace;box-shadow:4px 4px 0 var(--sun);transition:.16s transform,.16s box-shadow}
.pill:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--sun)}
.pill.ghost{background:transparent;color:var(--ink);box-shadow:none}
.pill.ghost:hover{box-shadow:4px 4px 0 var(--sky)}
.pill.mini{min-height:40px;padding:0 17px;box-shadow:none}
.hero{min-height:690px;display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;padding-block:66px}
.eyebrow,.section-kicker{font:500 12px DM Mono,monospace;letter-spacing:.15em;text-transform:uppercase}
.hero h1{font-size:clamp(58px,7.2vw,104px);line-height:.86;letter-spacing:-.07em;margin:20px 0 28px;max-width:620px}
.hero h1 span{color:var(--hot);font-style:italic}
.lead{font-size:19px;line-height:1.55;max-width:510px;margin:0 0 30px;color:#383838}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.ca-box{margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;display:flex;align-items:center;justify-content:space-between;max-width:545px;cursor:pointer}
.ca-box span{display:block;font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:#686868;margin-bottom:6px}
.ca-box strong{font:500 13px DM Mono,monospace;word-break:break-all}
.ca-box button,.game-topline button{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:8px 14px;font:500 11px DM Mono,monospace;cursor:pointer}
.hero-media{border:2px solid var(--ink);border-radius:28px;background:#0f1730;overflow:hidden;box-shadow:12px 12px 0 var(--ink);transform:rotate(1deg)}
.media-topline{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);font:500 11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em;background:var(--paper)}
.media-topline a{text-decoration:none}
.media-topline a:hover{text-decoration:underline;text-underline-offset:4px}
.media-frame{padding:18px;background:linear-gradient(180deg,#11193c 0%,#1d2955 100%)}
.hero-video{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:2px solid var(--ink);border-radius:20px;background:#000}
.media-caption{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;padding-top:14px;color:var(--paper)}
.media-caption strong{font-size:26px;line-height:1;letter-spacing:-.04em;text-transform:lowercase}
.media-caption span{max-width:250px;font:500 11px DM Mono,monospace;line-height:1.5;text-transform:uppercase;opacity:.9}
.story{padding:130px 0 110px;border-top:1px solid var(--line)}
.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:90px;align-items:end;margin-top:35px}
.story h2{font-size:clamp(48px,6vw,86px);line-height:.94;letter-spacing:-.06em;margin:0}
.story-card{border-left:3px solid var(--ink);padding-left:28px;font-size:22px;line-height:1.5}.story-card p{margin:0 0 14px}.story-card p:first-child{font-weight:800;font-size:34px;color:var(--hot)}
.marquee{overflow:hidden;background:var(--ink);color:var(--paper);border-block:2px solid var(--ink)}.marquee div{width:max-content;padding:15px 0;font:500 13px DM Mono,monospace;letter-spacing:.08em;animation:mar 18s linear infinite}@keyframes mar{to{transform:translateX(-50%)}}
.how{padding:110px 0}.steps{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);margin-top:30px}.steps article{padding:28px;min-height:230px;border-right:2px solid var(--ink)}.steps article:last-child{border-right:0}.steps span{font:500 11px DM Mono,monospace;color:#6c6c6c}.steps h3{font-size:25px;letter-spacing:-.04em;margin:46px 0 8px}.steps p{font-size:14px;line-height:1.6;color:#555;margin:0}
.token{padding:10px 0 120px}.token-panel{background:var(--sun);border:2px solid var(--ink);border-radius:30px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:60px;box-shadow:10px 10px 0 var(--ink)}.token-panel h2{font-size:clamp(54px,7vw,92px);letter-spacing:-.06em;line-height:1;margin:12px 0}.token-panel p{max-width:460px;font-size:17px;line-height:1.5}.facts{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--paper)}.facts div{padding:24px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}.facts div:nth-child(2n){border-right:0}.facts div:nth-last-child(-n+2){border-bottom:0}.facts span,.facts strong{display:block}.facts span{font:500 10px DM Mono,monospace;color:#6b6b6b;text-transform:uppercase;margin-bottom:8px}.facts strong{font-size:20px}
.footer{min-height:180px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:30px;font-size:12px}.footer p{color:#666;line-height:1.6}.footer-links{display:flex;justify-content:flex-end;gap:22px;font:500 11px DM Mono,monospace}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font:500 11px DM Mono,monospace;z-index:100;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:900px){.nav-links{display:none}.hero{grid-template-columns:1fr;gap:50px;padding-top:50px}.hero-media{max-width:620px;width:100%;margin:auto}.story-grid{grid-template-columns:1fr;gap:40px}.steps{grid-template-columns:1fr 1fr}.steps article:nth-child(2){border-right:0}.steps article:nth-child(-n+2){border-bottom:2px solid var(--ink)}.token-panel{grid-template-columns:1fr}.footer{grid-template-columns:1fr;padding-block:40px}.footer-links{justify-content:flex-start}}
@media (max-width:600px){.shell{width:min(100% - 24px,1180px)}.nav{height:74px}.pill.mini{display:none}.hero{padding-block:42px}.hero h1{font-size:58px}.lead{font-size:17px}.hero-actions{display:grid}.hero-media{border-radius:21px;box-shadow:7px 7px 0 var(--ink)}.media-frame{padding:12px}.media-caption{display:block}.media-caption strong{display:block;margin-bottom:10px;font-size:22px}.media-caption span{display:block;max-width:none}.story{padding-block:90px}.story h2{font-size:52px}.story-card{font-size:19px}.steps{grid-template-columns:1fr}.steps article,.steps article:nth-child(2){border-right:0;border-bottom:2px solid var(--ink)}.steps article:last-child{border-bottom:0}.token-panel{padding:32px 24px}.facts{grid-template-columns:1fr}.facts div,.facts div:nth-child(2n),.facts div:nth-last-child(-n+2){border-right:0;border-bottom:1px solid var(--ink)}.facts div:last-child{border-bottom:0}}
