
:root {
  --bg: #08090d; --panel: #101218; --panel-2: #141721; --text: #f4f6fb; --muted: #9ba4b5;
  --line: rgba(255,255,255,.10); --accent: #8df5df; --accent-2:#8ea7ff; --max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--text); background:
  radial-gradient(900px 500px at 85% -10%, rgba(105,115,255,.14), transparent 70%),
  radial-gradient(700px 500px at -10% 15%, rgba(62,235,202,.09), transparent 68%), var(--bg); }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width:100%; }
::selection { background:#8df5df; color:#07100e; }
.skip { position:absolute; left:-9999px; } .skip:focus { left:16px; top:16px; z-index:999; padding:10px 14px; background:#fff; color:#000; border-radius:10px; }
.site-header { position:sticky; top:0; z-index:20; backdrop-filter: blur(18px); background:rgba(8,9,13,.78); border-bottom:1px solid var(--line); }
.nav { max-width:var(--max); margin:auto; min-height:72px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:780; letter-spacing:-.03em; }
.logo { width:30px; height:30px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:2px; filter:drop-shadow(0 0 16px rgba(141,245,223,.24)); }
.logo i { display:block; border-radius:1px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.logo i:nth-child(2),.logo i:nth-child(5),.logo i:nth-child(12),.logo i:nth-child(15) { opacity:.12; }
.nav-links { display:flex; align-items:center; gap:22px; color:#c9cfda; font-size:14px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:#fff; }
.nav-cta { border:1px solid var(--line); padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.04); }
.mobile-toggle { display:none; background:none; border:1px solid var(--line); color:#fff; border-radius:10px; padding:9px 11px; }
.container { width:min(var(--max), calc(100% - 48px)); margin-inline:auto; }
.hero { padding:106px 0 74px; min-height:680px; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:68px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#b5bdc9; text-transform:uppercase; font-weight:750; letter-spacing:.16em; font-size:11px; }
.eyebrow::before { content:""; width:18px; height:1px; background:var(--accent); box-shadow:0 0 12px var(--accent); }
h1 { margin:20px 0; max-width:790px; font-size:clamp(54px,8.3vw,106px); line-height:.91; letter-spacing:-.072em; font-weight:820; }
h1 .soft { color:#7e8798; }
.lead { color:#b2bac7; font-size:clamp(18px,2.1vw,22px); line-height:1.6; max-width:650px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 19px; border-radius:13px; font-size:14px; font-weight:760; border:1px solid var(--line); transition:.2s ease; }
.btn.primary { background:var(--text); color:#0a0c11; border-color:transparent; }
.btn.secondary { background:rgba(255,255,255,.04); }
.btn:hover { transform:translateY(-2px); }
.world-orbit { aspect-ratio:1/1; position:relative; border:1px solid var(--line); border-radius:50%; max-width:520px; margin:auto; background:radial-gradient(circle at center, rgba(141,245,223,.08), transparent 58%); }
.world-orbit::before,.world-orbit::after { content:""; position:absolute; inset:12%; border:1px dashed rgba(255,255,255,.1); border-radius:50%; transform:rotate(28deg); }
.world-orbit::after { inset:28%; transform:rotate(-28deg); }
.orbit-core { position:absolute; inset:39%; display:grid; place-items:center; border-radius:26px; background:linear-gradient(145deg,#161b24,#0c0f15); border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 90px rgba(0,0,0,.5), 0 0 50px rgba(141,245,223,.08); font-weight:900; letter-spacing:-.05em; font-size:28px; }
.orb { position:absolute; width:74px; height:74px; display:grid; place-items:center; border-radius:22px; border:1px solid rgba(255,255,255,.14); background:#10131a; box-shadow:0 18px 40px rgba(0,0,0,.35); font-size:24px; }
.orb.o1 { top:10%; left:19%; }.orb.o2 { top:18%; right:4%; }.orb.o3 { bottom:12%; right:13%; }.orb.o4 { bottom:5%; left:12%; }
.section { padding:92px 0; border-top:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:38px; }
.section h2 { margin:8px 0 0; font-size:clamp(34px,5vw,58px); letter-spacing:-.055em; line-height:1; }
.section-copy { color:var(--muted); max-width:560px; line-height:1.65; }
.game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.game-card { min-height:440px; position:relative; overflow:hidden; padding:30px; border-radius:28px; border:1px solid var(--line); background:#0e1117; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease, border-color .25s ease; }
.game-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.22); }
.game-card::before { content:""; position:absolute; width:320px; height:320px; right:-80px; top:-80px; border-radius:50%; filter:blur(6px); opacity:.28; }
.game-card.cyan::before { background:#23e6ff; }.game-card.rust::before { background:#ff7f45; }.game-card.amber::before { background:#ffc857; }.game-card.violet::before { background:#9b7dff; }
.card-top, .card-bottom { position:relative; z-index:2; }
.status { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#d6dbe4; background:rgba(0,0,0,.2); }
.status::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
.game-mark { font-size:92px; line-height:1; text-align:right; padding:25px 14px 0 0; opacity:.88; font-weight:800; }
.game-card h3 { font-size:40px; letter-spacing:-.045em; margin:0 0 10px; }
.game-card p { margin:0; color:#aab2bf; max-width:520px; line-height:1.55; }
.meta { margin-top:21px; display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:#777f90; }
.arrow { position:absolute; right:26px; bottom:26px; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.info-card { padding:34px; background:var(--panel); border:1px solid var(--line); border-radius:24px; min-height:250px; }
.info-card .num { color:#5d6573; font-size:12px; font-weight:800; letter-spacing:.16em; }
.info-card h3 { font-size:28px; letter-spacing:-.04em; margin:54px 0 10px; }
.info-card p { color:var(--muted); line-height:1.6; margin:0; }
.statement { padding:118px 0; text-align:center; }
.statement p { margin:0 auto; max-width:900px; font-size:clamp(36px,6vw,76px); line-height:1.06; letter-spacing:-.06em; font-weight:780; color:#dde1e9; }
.statement em { font-style:normal; color:#737d8f; }
.site-footer { border-top:1px solid var(--line); padding:50px 0 30px; color:#8d96a7; }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:40px; }
.footer-title { color:#fff; font-weight:800; font-size:18px; margin-bottom:12px; }
.footer-links { display:grid; gap:10px; font-size:14px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid var(--line); margin-top:42px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; font-size:12px; }
.page-hero { padding:92px 0 58px; }
.page-hero h1 { font-size:clamp(50px,7vw,86px); max-width:920px; }
.page-hero .lead { max-width:760px; }
.breadcrumb { color:#697283; font-size:13px; margin-bottom:22px; }
.breadcrumb a:hover { color:#fff; }
.game-hero { padding:70px 0 54px; }
.game-hero-grid { display:grid; grid-template-columns:1fr .82fr; gap:50px; align-items:center; }
.game-art { min-height:500px; border-radius:34px; border:1px solid var(--line); position:relative; overflow:hidden; display:grid; place-items:center; font-size:clamp(100px,16vw,210px); font-weight:900; background:#10131a; }
.game-art::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.35), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.04), transparent 40%); }
.game-art.cyan { box-shadow:inset 0 0 160px rgba(35,230,255,.12); }.game-art.rust { box-shadow:inset 0 0 160px rgba(255,127,69,.14); }.game-art.amber { box-shadow:inset 0 0 160px rgba(255,200,87,.13); }.game-art.violet { box-shadow:inset 0 0 160px rgba(155,125,255,.15); }
.facts { display:grid; grid-template-columns:repeat(3,1fr); margin-top:36px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fact { padding:20px 0; }.fact + .fact { padding-left:24px; border-left:1px solid var(--line); }
.fact small { display:block; color:#697283; text-transform:uppercase; letter-spacing:.12em; font-size:10px; margin-bottom:7px; }.fact strong { font-size:14px; }
.prose { max-width:820px; margin:0 auto; padding:60px 0 110px; }
.prose h1 { font-size:clamp(46px,7vw,78px); }.prose h2 { font-size:27px; margin:50px 0 14px; letter-spacing:-.035em; }.prose h3 { margin-top:32px; }
.prose p,.prose li { color:#b1b8c4; line-height:1.75; }.prose a { color:#fff; text-decoration:underline; text-underline-offset:3px; }.prose ul { padding-left:22px; }
.notice { margin:28px 0; padding:18px 20px; border:1px solid rgba(255,200,87,.26); background:rgba(255,200,87,.06); border-radius:16px; color:#d8cba7; font-size:14px; line-height:1.6; }
.support-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.support-card { padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--panel); }
.support-card h3 { margin:0 0 8px; font-size:24px; }.support-card p { color:var(--muted); line-height:1.55; }
.kicker { color:#70798a; font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
@media (max-width: 820px) {
  .nav-links { display:none; position:absolute; top:72px; left:0; right:0; padding:18px 24px 25px; background:#0b0d12; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }
  .nav-links.open { display:flex; }.mobile-toggle { display:block; }
  .hero { min-height:0; padding:76px 0 56px; }.hero-grid,.game-hero-grid { grid-template-columns:1fr; }.world-orbit { max-width:420px; width:100%; }
  .game-grid,.split,.support-grid { grid-template-columns:1fr; }.game-card { min-height:400px; }.section-head { display:block; }.section-copy { margin-top:20px; }
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > :first-child { grid-column:1/-1; }.footer-bottom { flex-direction:column; }
  .game-art { min-height:390px; order:-1; }.facts { grid-template-columns:1fr; }.fact + .fact { padding-left:0; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width: 520px) { .container { width:min(var(--max), calc(100% - 32px)); }.hero h1 { font-size:56px; }.game-card { padding:24px; border-radius:23px; }.game-card h3 { font-size:34px; }.footer-grid { grid-template-columns:1fr; }.footer-grid > :first-child { grid-column:auto; }.world-orbit { transform:scale(.94); }.statement { padding:88px 0; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
