@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --bg:#080a10; --surface:#10131d; --surface-2:#0c111c; --text:#f5f7ff; --muted:#9ba4b8; --line:rgba(210,224,255,.16); --blue:#58c2ff; --violet:#8e7cff; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:radial-gradient(circle at 78% 8%,rgba(85,184,255,.11),transparent 28%),radial-gradient(circle at 10% 30%,rgba(142,124,255,.08),transparent 26%),var(--bg); font-family:'Space Grotesk',system-ui,sans-serif; line-height:1.5; } a { color:inherit; text-decoration:none; } button { font:inherit; } .section-shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.site-header { position:relative; z-index:5; height:84px; width:min(calc(100% - 48px),var(--max)); margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand,.footer-brand { display:flex; align-items:center; gap:11px; font-size:12px; font-weight:700; letter-spacing:.12em; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet)); color:#080a10; font-size:10px; font-weight:700; letter-spacing:-.06em; box-shadow:0 0 22px rgba(88,194,255,.22); } .nav { display:flex; align-items:center; gap:24px; color:var(--muted); font-size:13px; } .nav a,.text-link { transition:color .2s; } .nav a:hover,.text-link:hover { color:var(--blue); } .nav-cta { padding:11px 16px; border:1px solid var(--line); border-radius:999px; color:var(--text)!important; } .nav-cta:hover { border-color:var(--blue); background:var(--blue); color:#080a10!important; } .language-switch { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; } .language-switch:hover { border-color:var(--blue); color:var(--text); } .language-active { color:var(--blue); } .language-divider { opacity:.45; } .mobile-actions { display:none; align-items:center; gap:12px; } .menu-button { display:none; border:0; background:none; color:var(--text); font-size:22px; }
.hero { min-height:635px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding:84px 0 98px; } .eyebrow { margin:0 0 19px; color:var(--blue); font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .pulse-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(88,194,255,.1),0 0 16px rgba(88,194,255,.65); } h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.065em; line-height:.92; } h1 { font-size:clamp(72px,10vw,146px); margin-bottom:31px; } h1 em,h2 em { font-style:normal; color:var(--blue); } .hero-text { max-width:410px; margin-bottom:35px; color:var(--muted); font-size:18px; } .hero-actions { display:flex; gap:12px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:15px; min-height:47px; padding:0 20px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; transition:transform .2s,background .2s,border-color .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:linear-gradient(100deg,var(--blue),var(--violet)); border-color:transparent; color:#080a10; } .button-primary span { font-size:19px; } .button-ghost:hover { border-color:var(--blue); color:var(--blue); }
.hero-art { position:relative; min-height:500px; display:grid; place-items:center; } .hero-art-image { overflow:hidden; border:1px solid rgba(88,194,255,.4); background:#091326; box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 55px rgba(88,194,255,.08); } .hero-shot { display:block; width:100%; height:540px; object-fit:cover; object-position:center 30%; filter:saturate(1.04); } .hero-art-image::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 54%,rgba(8,10,16,.82)); pointer-events:none; } .image-note { position:absolute; right:22px; bottom:20px; z-index:1; color:var(--blue); font-family:'DM Mono',monospace; font-size:10px; line-height:1.35; letter-spacing:.08em; text-align:right; } .image-note span { display:block; color:var(--text); opacity:.75; } .image-note strong { font-size:17px; }
.content-section { padding:98px 0; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:32px; } .section-heading h2 { margin:0; font-size:clamp(40px,5vw,67px); } .text-link { color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.04em; } .text-link>span:last-child { color:var(--blue); font-size:16px; margin-left:7px; } .patch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .patch-card { min-height:248px; padding:26px; background:rgba(16,19,29,.84); border:1px solid var(--line); border-radius:5px; display:flex; flex-direction:column; align-items:flex-start; } .patch-card:hover { border-color:rgba(88,194,255,.58); } .patch-meta { display:flex; justify-content:space-between; width:100%; margin-bottom:43px; color:var(--blue); font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; } .patch-meta time { color:var(--muted); } .patch-card h3 { margin-bottom:10px; font-size:22px; letter-spacing:-.03em; } .patch-card p { margin-bottom:20px; color:var(--muted); font-size:14px; } .patch-card .text-link { margin-top:auto; }
.feature-band { background:linear-gradient(105deg,rgba(88,194,255,.13),rgba(142,124,255,.11) 54%,rgba(16,19,29,.2)); border-top:1px solid rgba(88,194,255,.14); border-bottom:1px solid rgba(142,124,255,.14); } .feature-grid { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:70px; padding:88px 0; } .feature-grid h2 { margin:0; font-size:clamp(55px,7vw,90px); } .feature-copy { max-width:410px; margin:0; color:var(--muted); font-size:18px; }
.gameplay-section { padding-top:112px; } .gameplay-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:76px; } .gameplay-visual { position:relative; border:1px solid rgba(142,124,255,.5); background:#070c17; box-shadow:0 22px 62px rgba(0,0,0,.38),0 0 38px rgba(142,124,255,.08); } .gameplay-visual img { display:block; width:100%; height:auto; } .visual-caption { position:absolute; left:16px; bottom:14px; color:var(--blue); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; } .gameplay-copy h2 { font-size:clamp(55px,6vw,82px); margin-bottom:24px; } .gameplay-copy>p:not(.eyebrow) { max-width:420px; color:var(--muted); font-size:18px; } .feature-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; } .feature-tags span { padding:9px 12px; border:1px solid var(--line); color:var(--blue); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.05em; }
.merch-section { padding-bottom:115px; } .section-note { margin:0; color:var(--muted); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; } .merch-card { display:grid; grid-template-columns:1fr 1fr; min-height:350px; background:var(--surface); border:1px solid var(--line); } .shirt-preview { display:grid; place-items:center; background:radial-gradient(circle,rgba(88,194,255,.16),transparent 55%),linear-gradient(135deg,#121b31,#0d1019); font-size:80px; font-weight:700; color:var(--blue); } .shirt-preview span { display:grid; place-items:center; width:190px; height:190px; border:4px solid var(--blue); border-radius:50%; transform:rotate(-12deg); box-shadow:0 0 30px rgba(88,194,255,.18); } .merch-copy { padding:52px; align-self:center; max-width:470px; } .card-kicker { color:var(--blue); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; } .merch-copy h3 { font-size:34px; letter-spacing:-.05em; margin-bottom:13px; } .merch-copy>p:not(.card-kicker) { color:var(--muted); font-size:15px; margin-bottom:27px; } .button-disabled { opacity:.45; cursor:not-allowed; }
.download-section { background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .download-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:75px 0; } .download-inner h2 { margin:0; font-size:clamp(45px,6vw,76px); } .store-actions { display:flex; gap:10px; } .store-button { display:flex; align-items:center; gap:11px; padding:12px 18px; border:1px solid var(--line); border-radius:4px; background:var(--bg); min-width:175px; } .store-button:hover { border-color:var(--blue); } .store-button small { display:block; color:var(--muted); font-size:9px; } .store-button strong { display:block; font-size:15px; } .store-icon { color:var(--blue); font-size:19px; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:31px 0; color:var(--muted); font-size:12px; } .site-footer>p { margin:0; text-align:right; font-family:'DM Mono',monospace; font-size:10px; } .footer-links { display:flex; gap:22px; } .footer-links a:hover { color:var(--blue); } .subpage { min-height:calc(100vh - 190px); padding:104px 0; } .subpage-heading { max-width:620px; margin-bottom:70px; } .subpage-heading h1 { font-size:clamp(62px,9vw,120px); margin-bottom:20px; } .subpage-heading>p:last-child { color:var(--muted); font-size:18px; } .patch-list-full { display:grid; gap:14px; max-width:850px; } .patch-card-full { min-height:auto; } .patch-card-full .patch-meta { margin-bottom:18px; } .patch-card-full h3 { font-size:28px; } .patch-card-full ul { display:grid; gap:7px; padding-left:19px; color:var(--muted); font-size:14px; }
@media (max-width:760px) { .section-shell,.site-header { width:min(calc(100% - 34px),var(--max)); } .site-header { height:72px; } .mobile-actions { display:flex; } .menu-button { display:block; } .nav { display:none; position:absolute; top:72px; left:0; right:0; z-index:3; flex-direction:column; align-items:stretch; gap:0; padding:9px; background:var(--surface); border:1px solid var(--line); border-radius:4px; } .nav.nav-open { display:flex; } .nav a { padding:13px 15px; } .nav .language-switch { display:none; } .nav-cta { text-align:center; } .hero { display:block; padding:73px 0 68px; } .hero-art { min-height:330px; margin-top:27px; } .hero-shot { height:430px; } .gameplay-grid { grid-template-columns:1fr; gap:40px; } .gameplay-section { padding-top:75px; } .gameplay-copy h2 { font-size:58px; } .patch-grid,.feature-grid,.merch-card { grid-template-columns:1fr; } .patch-card { min-height:220px; } .feature-grid { padding:65px 0; gap:25px; } .merch-copy { padding:33px; } .shirt-preview { min-height:280px; } .download-inner { display:block; padding:58px 0; } .store-actions { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; } .store-button { min-width:0; padding:11px 12px; } .site-footer { grid-template-columns:1fr; gap:18px; } .site-footer>p { text-align:left; } .subpage { padding:75px 0; } .section-heading { align-items:start; flex-direction:column; } .section-heading .text-link { margin-top:0; } }