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

:root { --ink:#071d2d; --ink-soft:#12364d; --sand:#f4ecd9; --foam:#d4f0ee; --aqua:#5ed8cd; --orange:#f7ab47; --line:rgba(7,29,45,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--sand); font-family:Manrope,Arial,sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.skip-link { position:fixed; z-index:20; top:-4rem; left:1rem; padding:.6rem 1rem; color:var(--ink); background:var(--sand); transition:top .2s; }
.skip-link:focus { top:1rem; }
.site-header { position:absolute; z-index:4; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:24px clamp(24px,5vw,72px); color:#fff; }
.studio-link { font-weight:800; letter-spacing:.06em; font-size:15px; white-space:nowrap; }
.studio-link span { color:var(--aqua); margin-left:3px; }
.site-header nav { display:flex; align-items:center; gap:clamp(14px,2.5vw,35px); font:500 12px/1 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.site-header nav a { opacity:.9; transition:opacity .2s,color .2s; }.site-header nav a:hover { opacity:1; color:var(--aqua); }.site-header .nav-steam { padding:11px 14px; border:1px solid rgba(255,255,255,.55); border-radius:100px; }
.hero { min-height:790px; height:100vh; max-height:980px; position:relative; overflow:hidden; color:#fff; background:#09304a; }
.hero-art { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,20,32,.7) 0%,rgba(3,20,32,.18) 49%,rgba(3,20,32,.08) 100%),linear-gradient(0deg,rgba(3,20,32,.55),transparent 45%),url('images/3840-х1240.jpg') center/cover no-repeat; }
.hero-content { position:relative; z-index:1; padding-top:clamp(125px,22vh,140px); }.eyebrow { margin:0 0 18px; color:var(--foam); font:500 12px/1.2 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.12em; }.eyebrow.blue { color:#298e9d; }
.game-logo { width:min(575px,55vw); border-radius:3px; margin:0 0 12px; box-shadow:0 10px 28px rgba(0,0,0,0); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:800; line-height:.98; letter-spacing:-.055em; }
h1 { max-width:700px; margin-bottom:23px; font-size:clamp(48px,7vw,91px); }.hero-copy { max-width:510px; margin-bottom:31px; color:#eef8f7; font-size:clamp(16px,1.4vw,19px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:15px 20px; border:1px solid transparent; border-radius:100px; font-size:14px; font-weight:800; line-height:1.2; transition:transform .2s,background .2s,border .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--aqua); color:var(--ink); }.button-primary:hover { background:#9eefe7; }.button-ghost { color:#fff; border-color:rgba(255,255,255,.7); }.button-ghost:hover { background:rgba(255,255,255,.12); }.scroll-cue { position:absolute; z-index:1; bottom:29px; left:clamp(24px,5vw,72px); font:500 11px/1 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }.scroll-cue span { margin-left:9px; color:var(--aqua); }
.intro { display:grid; grid-template-columns:1.1fr .9fr; gap:100px; padding:145px 0 138px; }.intro h2,.section-heading h2,.trailer h2,.callout h2 { margin:0; font-size:clamp(37px,5.2vw,68px); }.intro-copy { padding-top:39px; font-size:18px; }.intro-copy p + p { margin-top:24px; }.intro-copy p:last-child { margin-bottom:0; }
.garry { position:relative; min-height:650px; color:#fff; overflow:hidden; background:#07253b; }.garry-image { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,29,45,.12),rgba(7,29,45,.82) 75%),url('images/3840-х1240.jpg') center/cover no-repeat; filter:saturate(.86); }.garry-card { position:relative; width:min(510px,calc(100% - 48px)); margin-left:auto; margin-right:clamp(24px,10vw,180px); padding-top:145px; }.garry-card h2 { margin-bottom:27px; font-size:clamp(42px,5vw,69px); }.garry-card p:not(.eyebrow) { font-size:18px; }.tagline { margin-top:30px; color:var(--aqua); font:500 12px/1.4 'DM Mono',monospace !important; letter-spacing:.1em; text-transform:uppercase; }
.features { padding:144px 0; }.section-heading { margin-bottom:51px; }.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }.feature-card { position:relative; min-height:440px; overflow:hidden; color:#fff; background:var(--ink); }.feature-card-large { grid-column:span 2; min-height:530px; }.feature-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; opacity:.84; transition:transform .5s ease; }.feature-card:hover img { transform:scale(1.03); }.feature-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,20,31,.94),rgba(4,20,31,.06) 75%); }.feature-card div { position:absolute; z-index:1; bottom:0; padding:34px; max-width:525px; }.feature-card span { color:var(--aqua); font:500 12px/1 'DM Mono',monospace; }.feature-card h3 { margin:11px 0 10px; font-size:clamp(28px,3vw,42px); }.feature-card p { margin:0; color:#e6f0ef; font-size:15px; }
.trailer { color:#fff; background:var(--ink); padding:118px 0; }.trailer-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:72px; align-items:center; }.trailer-layout > div > p:not(.eyebrow) { margin-bottom:26px; color:#b7d4d6; font-size:18px; }.trailer-video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#03101c; box-shadow:18px 18px 0 var(--aqua); }.text-link { display:inline-flex; gap:8px; align-items:center; padding-bottom:5px; border-bottom:1px solid var(--aqua); color:var(--aqua); font:500 12px/1.5 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.gallery { padding:143px 0; }.gallery-heading { margin-bottom:51px; }.gallery-grid { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:repeat(2,220px); gap:20px; }.gallery-grid img { width:100%; height:100%; object-fit:cover; }.gallery-grid .gallery-main { grid-row:span 2; }.callout { color:#fff; background:linear-gradient(90deg,rgba(7,29,45,.95),rgba(7,29,45,.77)),url('images/3840-х1240.jpg') center/cover; }.callout-inner { min-height:315px; display:flex; align-items:center; justify-content:space-between; gap:35px; }.callout h2 { margin:0; }.callout .eyebrow { color:var(--aqua); }
.connections { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:94px 0; }.connection-card { min-height:395px; padding:48px; display:flex; flex-direction:column; align-items:flex-start; }.connection-card h2 { margin:0 0 21px; font-size:clamp(38px,4.4vw,59px); }.connection-card > p:not(.eyebrow) { max-width:440px; margin-bottom:34px; font-size:17px; }.players-card { background:var(--foam); }.creator-card { color:#fff; background:linear-gradient(130deg,rgba(7,29,45,.96),rgba(7,29,45,.77)),url('images/600-х-900.jpg') center/cover; }.creator-card .eyebrow { color:var(--aqua); }.connection-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:auto; }.button-dark { color:#fff; background:var(--ink); }.button-dark:hover { background:#12445d; }.button-outline { color:var(--ink); border-color:var(--ink); }.button-outline:hover { background:rgba(7,29,45,.08); }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:25px; padding:34px 0; color:var(--ink-soft); font-size:12px; }.site-footer p { margin:0; text-align:center; }.footer-links { display:flex; justify-content:flex-end; gap:19px; font-weight:700; }.footer-links a:hover { color:#168b91; }
@media (max-width:780px) { .site-header { padding:18px 24px; }.site-header nav a:not(.nav-steam) { display:none; }.hero { min-height:700px; height:100svh; }.hero-art { background-position:60% center; }.hero-content { padding-top:150px; }.game-logo { width:230px; }.intro { grid-template-columns:1fr; gap:22px; padding:95px 0; }.intro-copy { padding:0; font-size:16px; }.garry { min-height:720px; }.garry-image { background-position:58% center; background-image:linear-gradient(0deg,rgba(7,29,45,.92),rgba(7,29,45,.16) 75%),url('images/3840-х1240.jpg'); }.garry-card { margin:0 24px; padding-top:335px; width:auto; }.garry-card p:not(.eyebrow) { font-size:16px; }.features { padding:95px 0; }.feature-grid { grid-template-columns:1fr; }.feature-card,.feature-card-large { grid-column:auto; min-height:395px; }.feature-card div { padding:25px; }.trailer { padding:92px 0 82px; }.trailer-layout { grid-template-columns:1fr; gap:38px; }.trailer-video { box-shadow:9px 9px 0 var(--aqua); }.gallery { padding:95px 0; }.gallery-grid { grid-template-columns:1fr; grid-template-rows:220px 180px 180px; }.gallery-grid .gallery-main { grid-row:auto; }.callout-inner { padding:63px 0; min-height:0; flex-direction:column; align-items:flex-start; }.connections { grid-template-columns:1fr; padding:70px 0; }.connection-card { min-height:350px; padding:34px; }.connection-card > p:not(.eyebrow) { font-size:16px; }.site-footer { grid-template-columns:1fr; text-align:center; }.site-footer p { order:3; }.footer-links { justify-content:center; } }
@media (max-width:440px) { .shell { width:min(100% - 36px,1180px); }.site-header { padding:18px; }.site-header .nav-steam { padding:10px 12px; }.hero-content { padding-top:135px; }.hero-copy { font-size:16px; }.scroll-cue { left:18px; }.hero-actions .button { width:100%; }.gallery-grid { grid-template-rows:190px 160px 160px; } }