/* Stasis — gaming portal (not a landing) */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #040408;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text: #f4f4f8;
  --muted: rgba(244,244,248,.5);
  --accent: #3b82f6;
  --accent-2: #a855f7;
  --accent-glow: rgba(59,130,246,.45);
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --nav-h: 64px;
  --ticker-h: 36px;
  --font-hud: 'Bebas Neue', sans-serif;
  --font-title: 'Unbounded', sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --video-op: .3;
  --ease-snap: cubic-bezier(.2,1,.3,1);
}

[data-theme="gmod"] { --accent:#f97316; --accent-2:#22d3ee; --accent-glow:rgba(249,115,22,.5); --video-op:.32; }
[data-theme="l4d"]  { --accent:#ef4444; --accent-2:#a3e635; --accent-glow:rgba(239,68,68,.45); --video-op:.34; }
[data-theme="samp"] { --accent:#facc15; --accent-2:#c084fc; --accent-glow:rgba(250,204,21,.4); --video-op:.3; }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + var(--ticker-h));
}

/* Страницы без live-ticker (cabinet, decoy webapp) */
body.page-simple {
  padding-top: var(--nav-h);
}

/* ── BG ── */
.bg-layers { position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--video-op); filter:saturate(1.35) contrast(1.15); }
.bg-fallback { position:absolute; inset:0; background:
  radial-gradient(ellipse 70% 55% at 15% 20%, var(--accent-glow), transparent 60%),
  radial-gradient(ellipse 55% 45% at 90% 75%, rgba(168,85,247,.12), transparent 55%), var(--bg); }
.bg-scan { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px); opacity:.35; animation:scan-drift 8s linear infinite; }
.bg-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000,transparent); }
#particles { position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.55; }

@keyframes scan-drift { to { background-position:0 40px; } }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px var(--accent-glow)} 50%{box-shadow:0 0 40px var(--accent-glow),0 0 60px rgba(255,255,255,.08)} }
@keyframes float-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes border-spin { to{--angle:360deg} }
@keyframes glitch { 0%,100%{clip-path:inset(0 0 0 0)} 20%{clip-path:inset(8% 0 60% 0);transform:translate(-2px,1px)} 40%{clip-path:inset(50% 0 10% 0);transform:translate(2px,-1px)} 60%{clip-path:inset(20% 0 40% 0)} }
@keyframes pop-in { from{opacity:0;transform:scale(.92) translateY(12px)} to{opacity:1;transform:none} }
@keyframes shake-cta { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-1.5deg)} 75%{transform:rotate(1.5deg)} }
@keyframes live-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ── Ticker ── */
.live-ticker {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:90;
  height:var(--ticker-h); background:#06060c; border-bottom:1px solid var(--border);
  display:flex; align-items:stretch; overflow:hidden;
}
.ticker-tag {
  flex-shrink:0; padding:0 1.1rem; display:flex; align-items:center; gap:.45rem;
  background:#06060c; font-family:var(--font-hud); font-size:.85rem; letter-spacing:.12em;
  position:relative; z-index:3; border-right:2px solid var(--accent);
  box-shadow:8px 0 20px rgba(0,0,0,.85);
}
.ticker-tag .blink { width:7px; height:7px; border-radius:50%; background:var(--accent); animation:live-blink 1.2s infinite; flex-shrink:0; }
.ticker-viewport { flex:1; min-width:0; overflow:hidden; display:flex; align-items:center; position:relative; }
.ticker-viewport::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:12px; z-index:2;
  background:linear-gradient(90deg,#06060c,transparent); pointer-events:none;
}
.ticker-track { display:flex; animation:marquee 35s linear infinite; white-space:nowrap; padding-left:.5rem; }
.ticker-viewport:hover .ticker-track { animation-play-state:paused; }
.ticker-item { padding:0 2.5rem; font-size:.8rem; color:var(--muted); }
.ticker-item b { color:var(--accent); font-weight:600; }

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,3vw,2.5rem);
  background:rgba(4,4,8,.55); backdrop-filter:blur(16px); border-bottom:1px solid var(--border);
}
.nav-logo { font-family:var(--font-hud); font-size:1.6rem; letter-spacing:.14em; color:var(--text); text-decoration:none; }
.nav-logo em { font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-links { display:flex; gap:.15rem; list-style:none; }
.nav-links a {
  color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:600;
  padding:.45rem .9rem; border-radius:8px; transition:.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--text); background:var(--surface-2); }
.nav-links a.active { color:var(--accent); }
.nav-play {
  font-family:var(--font-hud); letter-spacing:.1em; font-size:.95rem;
  padding:.55rem 1.2rem; border-radius:8px; background:var(--grad); color:#fff;
  text-decoration:none; animation:pulse-glow 2.5s infinite, shake-cta 4s ease-in-out infinite;
}
.nav-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; }

/* ── Layout ── */
.container { width:min(1280px,100% - 2rem); margin:0 auto; }
.portal { padding:clamp(1.5rem,4vw,3rem) 0; }

/* ── Hero portal (split) ── */
.hero-portal {
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,3vw,2.5rem);
  align-items:stretch; min-height:calc(100vh - var(--nav-h) - var(--ticker-h) - 2rem);
  padding:clamp(1rem,3vw,2rem) 0;
}
.hero-copy { display:flex; flex-direction:column; justify-content:center; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; width:fit-content;
  padding:.35rem .9rem; border:1px solid var(--border); border-radius:100px;
  font-size:.75rem; font-weight:600; color:var(--accent); margin-bottom:1.25rem;
  animation:pop-in .6s var(--ease-snap) both;
}
.hero-eyebrow::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:live-blink 1.5s infinite; }
.hero-title {
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(2.2rem,6.5vw,4.2rem); line-height:1.02; letter-spacing:-.02em;
  margin-bottom:1rem; animation:pop-in .7s .1s var(--ease-snap) both;
}
.hero-title .line2 { display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-title.glitch:hover .line2 { animation:glitch .4s; }
.hero-pitch {
  font-size:clamp(1rem,2vw,1.15rem); color:var(--muted); max-width:520px; line-height:1.65;
  margin-bottom:1.75rem; animation:pop-in .7s .2s var(--ease-snap) both;
}
.hero-pitch strong { color:var(--text); }
.hero-btns { display:flex; flex-wrap:wrap; gap:.75rem; animation:pop-in .7s .3s var(--ease-snap) both; }
.btn {
  display:inline-flex; align-items:center; gap:.5rem; padding:.9rem 1.6rem;
  border-radius:10px; font-weight:700; font-size:.9rem; text-decoration:none; border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.btn:hover { transform:translateY(-3px) scale(1.02); }
.btn-fire { background:var(--grad); color:#fff; box-shadow:0 8px 32px var(--accent-glow); animation:pulse-glow 2s infinite; }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }

/* ── Server browser panel ── */
.server-panel {
  background:rgba(0,0,0,.45); border:1px solid var(--border); border-radius:20px;
  backdrop-filter:blur(20px); overflow:hidden; display:flex; flex-direction:column;
  animation:pop-in .8s .15s var(--ease-snap) both;
  box-shadow:0 24px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  min-height:0;
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(255,255,255,.04),transparent);
  flex-shrink:0;
}
.panel-head h3 { font-family:var(--font-hud); font-size:1.1rem; letter-spacing:.1em; }
.panel-live { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#22c55e; font-weight:600; }
.panel-live::before { content:''; width:7px; height:7px; border-radius:50%; background:#22c55e; animation:live-blink 1s infinite; }
.panel-body { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.server-rows { flex:0 1 auto; overflow:visible; }
.server-row {
  display:flex; align-items:center; gap:.65rem;
  padding:.65rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .2s; position:relative;
}
.server-row:hover { background:var(--surface); }
.server-row--full { opacity:.72; }
.server-row--full .server-connect { pointer-events:none; opacity:.45 !important; }

.server-main {
  flex:1; min-width:0; display:grid; grid-template-columns:1fr 72px auto; gap:.6rem; align-items:center;
}
.server-row .name { font-weight:600; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.server-row .mode { font-size:.68rem; color:var(--muted); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.server-row .slots { font-family:var(--font-hud); font-size:1.05rem; color:var(--accent); letter-spacing:.04em; white-space:nowrap; }
.bar-wrap { width:72px; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; background:var(--grad); border-radius:3px; transition:width 1.2s var(--ease-snap); }

.server-connect {
  flex-shrink:0; padding:.45rem .85rem; border-radius:8px; font-size:.72rem; font-weight:700;
  text-decoration:none; background:var(--grad); color:#fff; white-space:nowrap;
  opacity:0; transform:translateX(6px); transition:opacity .2s, transform .2s;
  box-shadow:0 4px 16px var(--accent-glow);
}
.server-row:hover .server-connect { opacity:1; transform:none; }
.server-connect:focus-visible { opacity:1; transform:none; outline:2px solid var(--accent); outline-offset:2px; }

.btn-disabled { opacity:.55; pointer-events:none; }
.panel-loading { padding:2rem; text-align:center; color:var(--muted); font-size:.85rem; }
.panel-foot {
  padding:.75rem 1.25rem; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.panel-total { font-family:var(--font-hud); font-size:1.35rem; letter-spacing:.06em; }
.panel-total span { color:var(--accent); }
.panel-foot small { color:var(--muted); font-size:.72rem; display:block; margin-top:.15rem; }

.panel-dashboard {
  flex:1; min-height:150px; padding:1rem 1.25rem 1.1rem;
  display:flex; flex-direction:column; gap:.65rem; overflow:hidden;
}

.panel-dash-top {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.panel-dash-label {
  font-family:var(--font-hud); font-size:.78rem; letter-spacing:.1em; color:var(--muted);
}
.panel-dash-trend {
  font-size:.7rem; font-weight:700; padding:.2rem .5rem; border-radius:6px;
}
.panel-dash-trend.up { color:#4ade80; background:rgba(74,222,128,.12); }
.panel-dash-trend.down { color:#f87171; background:rgba(248,113,113,.12); }

.panel-chart-box {
  height:64px; border-radius:10px; background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.06); padding:.35rem .45rem .25rem; overflow:hidden;
  color:var(--accent);
}
.panel-chart { width:100%; height:100%; display:block; }
.panel-chart-area { fill:url(#panelChartFill); }
.panel-chart-line {
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.panel-chart-dot { fill:var(--accent); stroke:#fff; stroke-width:1; }

.panel-metrics {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem;
}
.panel-metric {
  text-align:center; padding:.45rem .35rem; border-radius:10px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06);
}
.panel-metric .val { display:block; font-family:var(--font-hud); font-size:1.05rem; color:var(--accent); line-height:1.1; }
.panel-metric .lbl { display:block; font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:.15rem; }

.panel-announce-title {
  font-family:var(--font-hud); font-size:.72rem; letter-spacing:.1em; color:var(--muted);
  margin-top:.15rem;
}
.panel-announce-list { display:flex; flex-direction:column; gap:.35rem; flex:1; min-height:0; overflow:hidden; }
.panel-announce-item {
  font-size:.72rem; line-height:1.45; color:var(--muted);
  padding:.45rem .55rem; border-radius:8px; background:rgba(0,0,0,.2);
  border-left:2px solid var(--accent);
}
.panel-announce-item .tag {
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-right:.4rem;
}

/* ── Why Stasis (selling points) ── */
.why-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem;
}
.why-card {
  padding:1.25rem 1.1rem; border-radius:16px; border:1px solid var(--border);
  background:var(--surface); transition:transform .25s, border-color .25s, box-shadow .25s;
}
.why-card:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 36px var(--accent-glow); }
.why-card .ico { font-size:1.6rem; margin-bottom:.5rem; display:block; }
.why-card h4 { font-family:var(--font-hud); letter-spacing:.06em; font-size:1rem; margin-bottom:.35rem; }
.why-card p { font-size:.8rem; color:var(--muted); line-height:1.5; }

/* ── Bento worlds ── */
.section-head { margin-bottom:1.5rem; }
.section-head h2 { font-family:var(--font-title); font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; letter-spacing:-.02em; }
.section-head p { color:var(--muted); margin-top:.35rem; max-width:560px; }
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.bento-card {
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border);
  text-decoration:none; color:var(--text); min-height:200px;
  transition:transform .35s var(--ease-snap), box-shadow .35s;
}
.bento-card:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.bento-card--lg { grid-column:span 7; min-height:280px; }
.bento-card--sm { grid-column:span 5; }
.bento-card--md { grid-column:span 4; }
.bento-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s; }
.bento-card:hover .bento-bg { transform:scale(1.08); }
.bento-overlay { position:absolute; inset:0; background:linear-gradient(160deg,transparent 20%,rgba(4,4,8,.92) 75%); }
.bento-content { position:absolute; bottom:0; left:0; right:0; padding:1.5rem; z-index:1; }
.bento-tag { font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:.35rem; }
.bento-content h3 { font-family:var(--font-hud); font-size:clamp(1.5rem,3vw,2rem); letter-spacing:.06em; }
.bento-content p { font-size:.82rem; color:var(--muted); margin-top:.25rem; }
.bento-play {
  display:inline-flex; margin-top:.75rem; font-size:.78rem; font-weight:700; color:var(--accent);
  opacity:0; transform:translateX(-8px); transition:.3s;
}
.bento-card:hover .bento-play { opacity:1; transform:none; }
.bento--gmod .bento-bg { background-image:url('/gmod_1.jpg'),linear-gradient(135deg,#1a0800,#f97316 45%,#0891b2); }
.bento--l4d .bento-bg  { background-image:url('/l4d_1.jpg'),linear-gradient(135deg,#0f1500,#dc2626 40%,#65a30d); }
.bento--samp .bento-bg { background-image:url('/samp_1.jpg'),linear-gradient(135deg,#1a1200,#eab308 40%,#9333ea); }
.bento--hub .bento-bg  { background-image:url('/night_raid_1.jpg'),linear-gradient(135deg,#0a0a20,#3b82f6 50%,#7c3aed); }

/* ── Activity feed ── */
.split-section { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }
.activity-box, .hype-box {
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:1.25rem; backdrop-filter:blur(12px);
}
.activity-box h3, .hype-box h3 { font-family:var(--font-hud); letter-spacing:.1em; font-size:1rem; margin-bottom:1rem; }
.feed { display:flex; flex-direction:column; gap:.5rem; max-height:280px; overflow:hidden; }
.feed-item {
  display:flex; gap:.65rem; align-items:flex-start; padding:.55rem .65rem;
  border-radius:10px; background:rgba(0,0,0,.25); font-size:.8rem;
  animation:pop-in .4s var(--ease-snap) both;
}
.feed-item .time { color:var(--muted); font-size:.7rem; flex-shrink:0; min-width:42px; }
.feed-item .msg { color:var(--text); }
.feed-item .nick { color:var(--accent); font-weight:600; }

.hype-scroll { display:flex; flex-direction:column; gap:.75rem; }
.hype-quote {
  padding:1rem; border-left:3px solid var(--accent); background:rgba(0,0,0,.2);
  border-radius:0 12px 12px 0; font-size:.88rem; line-height:1.5;
  transition:transform .25s, border-color .25s;
}
.hype-quote:hover { transform:translateX(6px); border-color:var(--accent-2); }
.hype-quote cite { display:block; margin-top:.5rem; font-size:.75rem; color:var(--muted); font-style:normal; }

/* ── Mode tabs (game pages) ── */
.mode-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.mode-tab {
  padding:.6rem 1.1rem; border-radius:100px; border:1px solid var(--border);
  background:transparent; color:var(--muted); font-family:var(--font-body);
  font-size:.82rem; font-weight:600; cursor:pointer; transition:.25s;
}
.mode-tab:hover { border-color:var(--accent); color:var(--text); }
.mode-tab.active { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
.mode-panel { display:none; animation:pop-in .45s var(--ease-snap) both; }
.mode-panel.active { display:block; }

/* ── Feature chips animated ── */
.chip-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; }
.chip {
  padding:1.25rem 1rem; text-align:center; border-radius:14px;
  border:1px solid var(--border); background:var(--surface);
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.chip:hover { transform:translateY(-5px) rotate(-1deg); border-color:var(--accent); box-shadow:0 12px 40px var(--accent-glow); }
.chip .ico { font-size:1.75rem; margin-bottom:.5rem; display:block; animation:float-y 3s ease-in-out infinite; }
.chip:nth-child(2) .ico { animation-delay:-1s; }
.chip:nth-child(3) .ico { animation-delay:-2s; }
.chip h4 { font-family:var(--font-hud); letter-spacing:.06em; font-size:1rem; }
.chip p { font-size:.75rem; color:var(--muted); margin-top:.25rem; }

/* ── Event banner ── */
.event-banner {
  position:relative; border-radius:20px; overflow:hidden; padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--border); margin:2rem 0;
  background:linear-gradient(120deg,rgba(0,0,0,.6),rgba(255,255,255,.03));
}
.event-banner::before {
  content:''; position:absolute; inset:-2px; border-radius:22px; padding:2px;
  background:conic-gradient(from var(--angle,0deg),var(--accent),var(--accent-2),var(--accent));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:border-spin 4s linear infinite;
}
@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.event-inner { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.event-inner h2 { font-family:var(--font-title); font-size:clamp(1.4rem,3vw,2rem); font-weight:800; }
.event-inner p { color:var(--muted); max-width:480px; margin-top:.35rem; }
.countdown { display:flex; gap:.75rem; }
.countdown div { text-align:center; min-width:56px; padding:.6rem .5rem; background:rgba(0,0,0,.4); border-radius:10px; border:1px solid var(--border); }
.countdown b { display:block; font-family:var(--font-hud); font-size:1.6rem; color:var(--accent); line-height:1; }
.countdown small { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ── Sticky play FAB ── */
.play-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:80;
  padding:1rem 1.5rem; border-radius:100px; background:var(--grad); color:#fff;
  font-family:var(--font-hud); font-size:1.1rem; letter-spacing:.12em;
  text-decoration:none; box-shadow:0 8px 40px var(--accent-glow);
  animation:pulse-glow 2s infinite, float-y 3s ease-in-out infinite;
  transition:transform .2s;
}
.play-fab:hover { transform:scale(1.08); }

/* ── Footer minimal ── */
.footer { border-top:1px solid var(--border); padding:1.5rem 0 5rem; margin-top:2rem; }
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; font-size:.8rem; color:var(--muted); }
.footer-row a { color:var(--muted); text-decoration:none; margin-left:1rem; }
.footer-row a:hover { color:var(--accent); }

/* ── Scroll reveal ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease-snap), transform .6s var(--ease-snap); }
.reveal.on { opacity:1; transform:none; }

/* ── Responsive ── */
@media (max-width:960px) {
  .hero-portal, .split-section { grid-template-columns:1fr; }
  .bento-card--lg, .bento-card--sm, .bento-card--md { grid-column:span 12; }
  .server-connect { opacity:1; transform:none; }
  .server-row { flex-wrap:wrap; }
}
@media (max-width:720px) {
  .nav-toggle { display:block; }
  .nav-links {
    position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column;
    background:rgba(4,4,8,.97); padding:1rem; border-bottom:1px solid var(--border);
    transform:translateY(-130%); opacity:0; pointer-events:none; transition:.3s;
  }
  .nav-links.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-play { display:none; }
  .play-fab { left:1rem; right:1rem; text-align:center; }
}