/*
Theme Name: Nullpoint
Theme URI: https://nullpoint.example
Author: Nullpoint
Description: Dark, high-contrast game studio theme — cyan/magenta neon accents, angular cuts, HUD-style typography. Built for Nullpoint Interactive.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: nullpoint
*/

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--bg); }
body {
	margin: 0; background: transparent; color: var(--ink);
	font-family: var(--ff-body);
	font-size: 16px; line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ff-head); font-weight: 700; letter-spacing: -.01em; line-height: 1.02; text-transform: uppercase; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

:root {
	--bg: #07080d;
	--panel: #0e1018;
	--panel-2: #131622;
	--panel-3: #191d2c;
	--line: rgba(200, 220, 255, .1);
	--line-strong: rgba(200, 220, 255, .2);
	--ink: #eef1fb;
	--ink-dim: #98a0bd;
	--ink-mute: #5c6180;
	--cyan: #04e8d4;
	--magenta: #ff2e88;
	--yellow: #ffcc33;
	--grad: linear-gradient(120deg, var(--cyan) 0%, var(--magenta) 100%);
	--glow-cyan: 0 0 30px rgba(4, 232, 212, .45);
	--glow-magenta: 0 0 30px rgba(255, 46, 136, .45);
	--radius: 2px;
	--ff-head: 'Rajdhani', 'Barlow', sans-serif;
	--ff-body: 'Barlow', sans-serif;
	--ff-mono: 'Share Tech Mono', ui-monospace, monospace;
	--wrap: 1280px;
	--cut: 26px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--ff-mono); letter-spacing: .04em; }
::selection { background: var(--magenta); color: #fff; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ============ Ambient scanline + grain ============ */
body::before {
	content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0px, rgba(255,255,255,.014) 1px, transparent 1px, transparent 3px);
}
.mesh-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mesh-bg::before, .mesh-bg::after { content: ''; position: absolute; width: 56vmax; height: 56vmax; filter: blur(110px); opacity: .18; }
.mesh-bg::before { background: radial-gradient(circle, var(--cyan), transparent 62%); top: -22%; left: -14%; animation: np-mesh-a 26s ease-in-out infinite alternate; }
.mesh-bg::after { background: radial-gradient(circle, var(--magenta), transparent 62%); bottom: -22%; right: -12%; animation: np-mesh-b 30s ease-in-out infinite alternate; }
@keyframes np-mesh-a { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw,8vh) scale(1.2); } }
@keyframes np-mesh-b { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-9vw,-7vh) scale(1.26); } }
@media (prefers-reduced-motion: reduce) { .mesh-bg::before, .mesh-bg::after { animation: none; } }

#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad); box-shadow: var(--glow-cyan); z-index: 9999; transition: width .1s linear; }

/* ============ Preloader ============ */
#pre {
	position: fixed; inset: 0; z-index: 9900; background: var(--bg);
	display: flex; align-items: center; justify-content: center; gap: 16px;
	transition: opacity .5s ease, visibility .5s ease;
}
#pre.done { opacity: 0; visibility: hidden; }
#pre .pre-mark { font-family: var(--ff-head); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
#pre .pre-bar { width: 160px; height: 3px; background: var(--line); position: relative; overflow: hidden; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
#pre .pre-bar span { position: absolute; inset: 0; width: 0%; background: var(--grad); box-shadow: var(--glow-cyan); }

/* ============ Header ============ */
.site-head {
	position: fixed; top: 0; left: 0; right: 0; z-index: 900;
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 40px; transition: padding .3s ease, background .3s ease, border-color .3s ease;
	border-bottom: 1px solid transparent;
}
.site-head.is-scrolled { padding: 14px 40px; background: rgba(7,8,13,.86); backdrop-filter: blur(12px); border-color: var(--line); }
.brand { font-family: var(--ff-head); font-weight: 700; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand .mark { width: 30px; height: 30px; position: relative; flex: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--grad); display: grid; place-items: center; box-shadow: var(--glow-cyan); }
.brand .mark svg { width: 16px; height: 16px; }

#nav { display: flex; align-items: center; gap: 34px; }
#nav ul { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
#nav a { font-family: var(--ff-head); font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); position: relative; padding: 4px 0; transition: color .2s; }
#nav a:hover, #nav a.current { color: var(--ink); }
#nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--grad); box-shadow: var(--glow-cyan); transition: width .25s ease; }
#nav a:hover::after { width: 100%; }

.head-tools { display: flex; align-items: center; gap: 18px; }
.head-cta {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
	background: var(--magenta); color: #fff; font-family: var(--ff-head); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.head-cta:hover { transform: translateY(-2px); box-shadow: var(--glow-magenta); background: var(--cyan); color: #05070c; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 26px; padding: 6px 0; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); }

/* ============ Buttons ============ */
.btn {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px;
	font-family: var(--ff-head); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
	transition: all .25s ease;
}
.btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.btn:hover::after { left: 140%; }
.btn-primary { background: var(--cyan); color: #05070c; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-cyan); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--magenta); color: var(--magenta); box-shadow: var(--glow-magenta); }

/* ============ Hero ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 160px 0 100px; overflow: hidden; }
.hero-net { position: absolute; inset: 0; z-index: 0; opacity: .7; }
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.hero-eyebrow .dot { width: 8px; height: 8px; background: var(--magenta); box-shadow: var(--glow-magenta); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.hero-eyebrow span { font-family: var(--ff-mono); font-size: 13px; letter-spacing: .18em; color: var(--cyan); text-transform: uppercase; }
.hero h1 { font-size: clamp(44px, 7vw, 96px); line-height: .96; color: var(--ink); max-width: 18ch; margin-bottom: 26px; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 26px rgba(4,232,212,.35)); }
.hero-sub { font-size: 18px; color: var(--ink-dim); max-width: 52ch; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 60px; }

.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); padding-top: 26px; }
.hero-strip div { padding-right: 24px; border-right: 1px solid var(--line); }
.hero-strip div:last-child { border-right: none; }
.hero-strip strong { display: block; font-family: var(--ff-head); font-size: 32px; color: var(--ink); }
.hero-strip strong .unit { font-size: 16px; color: var(--cyan); margin-left: 2px; }
.hero-strip span { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); text-transform: uppercase; }

.scroll-cue { position: absolute; right: 40px; bottom: 40px; z-index: 2; writing-mode: vertical-rl; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .2em; color: var(--ink-mute); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.scroll-cue::after { content: ''; width: 1px; height: 46px; background: linear-gradient(var(--cyan), transparent); }

/* ============ Ticker ============ */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); overflow: hidden; position: relative; z-index: 2; }
.ticker-row { display: flex; white-space: nowrap; width: max-content; padding: 16px 0; animation: ticker 32s linear infinite; }
.ticker-row span { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-mute); text-transform: uppercase; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.ticker-row span em { color: var(--magenta); font-style: normal; text-shadow: var(--glow-magenta); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Section shell ============ */
.section { position: relative; z-index: 1; padding: 120px 0; }
.section-tight { padding: 80px 0; }
.section-angled { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); margin-block: -1px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.section-head .idx { font-family: var(--ff-mono); font-size: 12px; color: var(--cyan); letter-spacing: .12em; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; text-transform: uppercase; }
.section-head .idx::before { content: ''; width: 24px; height: 2px; background: var(--grad); box-shadow: var(--glow-cyan); }
.section-head h2 { font-size: clamp(28px, 3.6vw, 48px); max-width: 20ch; }
.section-head p { color: var(--ink-dim); max-width: 46ch; font-size: 15.5px; margin: 0; text-transform: none; font-family: var(--ff-body); }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ============ Studio split ============ */
.about-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center; }
.about-media { position: relative; aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line); clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.about-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.1) brightness(.85); }
.about-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,8,13,.9)); }
.about-media .tag { position: absolute; left: 20px; bottom: 20px; z-index: 2; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }
.about-media__badge { position: absolute; top: 20px; right: 20px; z-index: 2; text-align: right; background: rgba(7,8,13,.6); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); padding: 14px 18px; box-shadow: var(--glow-magenta); clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.about-media__badge strong { display: block; font-family: var(--ff-head); font-size: 28px; }
.about-media__badge span { display: block; margin-top: 4px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }
.about-copy p { color: var(--ink-dim); font-size: 16px; }
.about-list { margin-top: 32px; display: grid; gap: 18px; }
.about-list li { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.about-list .n { font-family: var(--ff-mono); font-size: 12px; color: var(--magenta); flex: none; padding-top: 3px; }
.about-list h4 { font-size: 16px; margin-bottom: 4px; text-transform: none; }
.about-list p { font-size: 14px; color: var(--ink-mute); margin: 0; }

/* ============ Stats band ============ */
.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel), var(--bg)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell { padding: 56px 32px; border-right: 1px solid var(--line); text-align: left; }
.stat-cell:last-child { border-right: none; }
.stat-cell strong { font-family: var(--ff-head); font-size: 46px; color: var(--ink); display: flex; align-items: baseline; gap: 4px; }
.stat-cell strong .unit { font-size: 22px; color: var(--cyan); }
.stat-cell strong .cnt { filter: drop-shadow(0 0 16px rgba(4,232,212,.35)); }
.stat-cell span { display: block; margin-top: 10px; font-size: 13px; color: var(--ink-mute); font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .06em; }

/* ============ Game grid ============ */
.game-rail { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 56px; }
.game-rail a { padding: 9px 18px; border: 1px solid var(--line); font-size: 12px; font-family: var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); transition: all .2s; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.game-rail a:hover, .game-rail a.active { border-color: var(--cyan); color: var(--ink); background: rgba(4,232,212,.08); }

.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.game-card {
	position: relative; display: block; background: var(--panel); border: 1px solid var(--line); overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
	transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.game-card:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); border-color: var(--line-strong); }
.game-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--panel-3); }
.game-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.08) brightness(.82); transition: transform .6s ease, filter .6s ease; }
.game-card:hover .game-card__media img { transform: scale(1.08); filter: grayscale(0) contrast(1.1) brightness(.95); }
.game-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,8,13,.92)); }
.game-card__status { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; background: rgba(7,8,13,.6); backdrop-filter: blur(6px); border: 1px solid var(--line-strong); }
.game-card__status.is-live { color: var(--cyan); border-color: rgba(4,232,212,.4); }
.game-card__status.is-dev { color: var(--yellow); border-color: rgba(255,204,51,.4); }
.game-card__genre { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.game-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px; }
.game-card__body h3 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.game-card__body p { font-size: 13.5px; color: var(--ink-dim); margin: 0; text-transform: none; font-family: var(--ff-body); }
.game-card__plat { display: flex; gap: 8px; margin-top: 12px; }
.game-card__plat span { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-mute); border: 1px solid var(--line); padding: 3px 8px; }

/* ============ Timeline ============ */
.timeline { position: relative; padding-left: 40px; border-left: 1px solid var(--line); display: grid; gap: 48px; }
.timeline li { position: relative; }
.timeline li::before { content: ''; position: absolute; left: -45px; top: 4px; width: 10px; height: 10px; background: var(--bg); border: 2px solid var(--cyan); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.timeline .yr { font-family: var(--ff-mono); color: var(--cyan); font-size: 13px; letter-spacing: .1em; }
.timeline h4 { font-size: 20px; margin: 8px 0; text-transform: none; }
.timeline p { color: var(--ink-mute); font-size: 14px; max-width: 60ch; margin: 0; text-transform: none; font-family: var(--ff-body); }

/* ============ Press/cert wall ============ */
.cert-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cert-cell {
	background: var(--panel); border: 1px solid var(--line); padding: 30px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
	transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
	clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.cert-cell:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.cert-cell .cert-icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--grad); box-shadow: var(--glow-cyan); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.cert-cell:hover .cert-icon { box-shadow: var(--glow-magenta); }
.cert-cell svg { width: 22px; height: 22px; color: var(--bg); }
.cert-cell span { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-mute); text-transform: uppercase; }

/* ============ News grid ============ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { border: 1px solid var(--line); overflow: hidden; background: var(--panel); transition: transform .35s ease, box-shadow .35s ease; clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.news-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.news-card .nc-media { aspect-ratio: 16/10; overflow: hidden; background: var(--panel-2); }
.news-card .nc-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) brightness(.85); transition: transform .5s ease, filter .5s ease; }
.news-card:hover .nc-media img { transform: scale(1.06); filter: grayscale(0) brightness(.95); }
.news-card .nc-body { padding: 22px; }
.news-card .nc-cat { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; color: var(--magenta); text-transform: uppercase; }
.news-card h3 { font-size: 17px; margin: 10px 0 8px; line-height: 1.3; text-transform: none; }
.news-card .nc-date { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; }

/* ============ CTA band ============ */
.cta-band { position: relative; overflow: hidden; text-align: center; padding: 110px 0; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band::before { content: ''; position: absolute; inset: 0; opacity: .5; background: radial-gradient(60% 80% at 25% 0%, rgba(4,232,212,.2), transparent 60%), radial-gradient(50% 70% at 90% 100%, rgba(255,46,136,.18), transparent 60%); }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(30px, 4.4vw, 54px); max-width: 20ch; margin: 0 auto 20px; }
.cta-band p { color: var(--ink-dim); max-width: 50ch; margin: 0 auto 34px; text-transform: none; font-family: var(--ff-body); font-size: 16px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============ Footer ============ */
.site-foot { padding: 90px 0 32px; position: relative; z-index: 1; }
.foot-top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.foot-brand p { color: var(--ink-mute); font-size: 14px; max-width: 30ch; margin-top: 16px; text-transform: none; }
.foot-col h5 { font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }
.foot-col ul { display: grid; gap: 11px; }
.foot-col a { font-size: 14px; color: var(--ink-dim); transition: color .2s; }
.foot-col a:hover { color: var(--cyan); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 16px; }
.foot-bottom span { font-size: 12px; color: var(--ink-mute); font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; }
.foot-social { display: flex; gap: 12px; }
.foot-social a { width: 36px; height: 36px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: all .2s; color: var(--ink-dim); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.foot-social a:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.foot-social svg { width: 15px; height: 15px; }

/* ============ Inner pages ============ */
.page-hero { padding: 165px 0 64px; position: relative; z-index: 1; }
.page-hero .kick { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.page-hero .kick::before { content: ''; width: 20px; height: 2px; background: var(--grad); box-shadow: var(--glow-cyan); }
.page-hero h1 { font-size: clamp(32px, 5.2vw, 60px); margin: 16px 0 0; max-width: 22ch; }
.page-hero .ph-meta { display: flex; gap: 18px; margin-top: 20px; font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink-mute); text-transform: uppercase; }

.entry { max-width: 720px; margin: 0 auto; font-size: 17px; color: var(--ink-dim); }
.entry h2 { color: var(--ink); font-size: 27px; margin: 46px 0 16px; }
.entry h3 { color: var(--ink); font-size: 20px; margin: 34px 0 12px; }
.entry p { margin-bottom: 18px; }
.entry ul, .entry ol { margin: 0 0 18px; padding-left: 22px; }
.entry li { margin-bottom: 8px; }
.entry a { color: var(--cyan); border-bottom: 1px solid rgba(4,232,212,.3); }
.entry blockquote { border-left: 2px solid var(--magenta); padding-left: 22px; margin: 30px 0; font-size: 18px; color: var(--ink); font-family: var(--ff-head); text-transform: none; }
.entry img { border-radius: var(--radius); margin: 30px 0; border: 1px solid var(--line); }

.related-strip { max-width: 720px; margin: 56px auto 0; padding-top: 36px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 24px; }
.related-strip a { font-size: 14px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.related-strip a:last-child { text-align: right; align-items: flex-end; }
.related-strip .dir { font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-mute); text-transform: uppercase; }

.archive-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: 900px; margin: 0 auto; }
.archive-row { background: var(--panel); padding: 24px 26px; display: flex; align-items: center; gap: 22px; transition: background .2s; }
.archive-row:hover { background: var(--panel-2); }
.archive-row .ar-cat { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; color: var(--magenta); text-transform: uppercase; width: 140px; flex: none; }
.archive-row h3 { font-size: 16.5px; flex: 1; text-transform: none; }
.archive-row .ar-date { font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink-mute); flex: none; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 54px; }
.pagination a, .pagination span { padding: 10px 16px; border: 1px solid var(--line); font-family: var(--ff-mono); font-size: 12px; color: var(--ink-dim); }
.pagination .current { border-color: var(--cyan); color: var(--cyan); }

/* ============ Contact form ============ */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.contact-info h3 { font-size: 21px; margin-bottom: 16px; text-transform: none; }
.contact-info ul { display: grid; gap: 18px; margin-top: 26px; }
.contact-info li { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.contact-info .ci-label { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 6px; }
.contact-info .ci-val { font-size: 15.5px; color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.form-field input, .form-field select, .form-field textarea {
	background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--ink);
	padding: 13px 15px; border-radius: 0; font-size: 14px; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(4,232,212,.14); }
.form-field textarea { resize: vertical; min-height: 120px; }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
	.about-split, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat-cell:nth-child(2) { border-right: none; }
	.game-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
	.cert-wall { grid-template-columns: repeat(3, 1fr); }
	.foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.wrap { padding: 0 20px; }
	#nav { position: fixed; top: 0; right: -100%; width: 80%; height: 100vh; background: var(--panel); flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; padding: 40px; transition: right .35s ease; z-index: 850; }
	#nav ul { flex-direction: column; align-items: flex-start; gap: 26px; }
	#nav.open { right: 0; }
	.nav-toggle { display: flex; }
	.hero-strip, .stats-grid, .game-grid, .news-grid, .cert-wall { grid-template-columns: 1fr; }
	.stat-cell, .stats-grid > * { border-right: none !important; border-bottom: 1px solid var(--line); }
	.form-row { grid-template-columns: 1fr; }
	.related-strip { flex-direction: column; }
	.related-strip a:last-child { text-align: left; align-items: flex-start; }
	.site-head, .site-head.is-scrolled { padding: 16px 20px; }
}

/* --- Section dropdown (nav) — theme-agnostic, added --- */
li:has(> .sub-menu){ position: relative; }
.sub-menu{ position:absolute; top:100%; left:0; min-width:210px; margin:12px 0 0; padding:8px; list-style:none; background:rgba(18,18,24,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 26px 60px -26px rgba(0,0,0,.75); display:none; z-index:500; }
li:hover > .sub-menu, li:focus-within > .sub-menu{ display:block; }
.sub-menu li{ margin:0; padding:0; list-style:none; }
.sub-menu a{ display:block; padding:.55em .85em; border-radius:7px; color:#f2f2f5 !important; white-space:nowrap; font-size:.9rem; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; }
.sub-menu a::before, .sub-menu a::after{ display:none !important; content:none !important; }
.sub-menu a:hover{ background:rgba(255,255,255,.13); color:#fff !important; }