/* ---------- Base & layout ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family:'Atkinson Hyperlegible', sans-serif; line-height: 1.5; background:#0b1220; color:#e2e8f0; }
h1,h2,h3,h4,h5,h6 { font-family:'Simply Sans', sans-serif; font-weight:700; }
h1 { font-size:2.8rem; margin: 0 auto 36px; text-align: center;}
a { color: inherit; text-decoration: none; }
.container { width:100%; max-width:1100px; margin:0 auto; padding:0 1rem; }
.section { padding:36px 0; }
.section + .section { border-top:1px solid #1e293b; }
.section h2 { font-size:1.85rem; margin:0 0 .75rem; letter-spacing:.3px; }
.muted { color:#94a3b8; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; padding:0.75rem 1.2rem; border-radius:9999px; font-weight:700; border:1px solid #94a3b8; transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }
.btn:hover { transform: translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.28); }
.btn.primary { background:#22c55e; border-color:#22c55e; color:#0b1220; box-shadow:0 10px 24px rgba(34,197,94,.35); }
.btn.primary:hover { background:#16a34a; border-color:#16a34a; }
.btn.ghost { background:transparent; color:#e2e8f0; }
.btn.ghost:hover { background:#122034; }

/* ---------- Body SVG ---------- */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.015' stroke-width='1'%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Ccircle cx='60' cy='60' r='55'/%3E%3Cpath d='M60 5 L115 60 L60 115 L5 60 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 120px 120px;
	pointer-events: none;
}

/* ---------- Section gradients ---------- */
.with-gradient1 {
	background: linear-gradient(135deg, #0b1220 0%, #0f172a 60%, #0b1220 100%);
}

.with-gradient2 {
	background: radial-gradient(circle at top center, rgba(34,197,94,0.08) 0%, #0b1220 70%);
}

.with-gradient2-inverse {
	background: radial-gradient(circle at bottom center, rgba(34,197,94,0.08) 0%, #0b1220 70%);
}

.with-gradient3 {
	background: linear-gradient(to bottom, #0b1220 0%, #0f172a 50%, #0b1220 100%);
}
.with-gradient1 > .container,
.with-gradient2 > .container,
.with-gradient3 > .container {
	position: relative;
	z-index: 1;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	padding: 26px 0 32px 0;
	text-align: center;
	overflow: hidden;
	background:url('../images/hero.png');
	background-size: cover;
	background-position: -430px -140px;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 60% at 50% 0%, rgba(15,23,42,.8) 0%, rgba(11,18,32,.8) 60%);
	pointer-events: none;
}
.hero .wrap { position:relative; z-index:1; }
.hero .cta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 32px; }
.steam-widget { margin:22px auto; max-width:650px; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45); }
.steam-widget iframe { width:100%; height:190px; border:0; display:block; }

/* ---------- Video ---------- */
.video { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 16px 40px rgba(0,0,0,.45); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Cards & grid ---------- */
.card { background:#0f172a; border:1px solid #1e293b; border-radius:16px; padding:20px; box-shadow:0 10px 28px rgba(0,0,0,.33); height: fit-content; }
.grid-2 { display:grid; gap:18px; grid-template-columns:1fr; }
.features {padding-left: 1em;}
@media(min-width:900px){ .grid-2 { grid-template-columns:1fr 1fr; } }

/* ---------- Gallery (Swiper) ---------- */
.swiper { border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.swiper-slide img { width:100%; height:auto; display:block; }
.gallery-swiper { --swiper-navigation-size: 22px; }

/* ---------- Footer ---------- */
.footer { padding:28px 0; border-top:1px solid #1e293b; text-align:center; color:#94a3b8; }
.footer a { color:#94a3b8; text-decoration:underline; }