:root {
  --bg: #080a10;
  --panel: #10131b;
  --panel-2: #151925;
  --ink: #f5f3ed;
  --muted: #969cac;
  --line: rgba(255,255,255,.11);
  --orange: #ff7a1a;
  --mint: #72e2bd;
  --violet: #a989ff;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 70% 5%, rgba(255,122,26,.12), transparent 32rem),
    radial-gradient(circle at 20% 42%, rgba(112,84,255,.08), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .03; z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  max-width: var(--max); margin: 0 auto; height: 88px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; letter-spacing: .08em; }
.brand > span:last-child { display: grid; line-height: .95; }
.brand b { font-size: 15px; letter-spacing: .12em; }
.brand small { color: var(--orange); font-size: 10px; letter-spacing: .32em; margin-top: 5px; }
.brand-mark { width: 34px; height: 34px; position: relative; transform: rotate(30deg) skew(-6deg); border: 2px solid var(--orange); display: grid; place-items: center; }
.brand-mark i { width: 12px; height: 12px; background: var(--orange); display: block; }
nav { display: flex; align-items: center; gap: 28px; }
nav > a { color: var(--muted); font-size: 13px; text-decoration: none; }
nav > a:hover { color: var(--ink); }
.account-button {
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink);
  padding: 11px 16px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
}
.account-button:hover { border-color: rgba(255,122,26,.6); }
.account-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.account-button.signed-in .account-dot { background: var(--mint); box-shadow: 0 0 10px var(--mint); }

.hero {
  max-width: var(--max); min-height: 670px; margin: 0 auto; padding: 80px 28px 56px;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; overflow: hidden;
}
.eyebrow { margin: 0 0 18px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; background: var(--orange); vertical-align: middle; margin-right: 8px; }
h1, h2 { font-family: "Arial Black", Impact, Inter, sans-serif; text-transform: uppercase; margin: 0; letter-spacing: -.045em; line-height: .94; }
h1 { font-size: clamp(58px, 7.8vw, 108px); max-width: 780px; }
h1 em { color: transparent; -webkit-text-stroke: 1px rgba(245,243,237,.65); font-style: normal; }
.hero-lede { color: #b6bac6; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.65; max-width: 650px; margin: 30px 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button {
  min-height: 48px; padding: 0 21px; border-radius: 4px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  text-decoration: none; color: var(--ink); background: transparent; cursor: pointer; font-size: 13px; font-weight: 800;
}
.button.primary { background: var(--orange); border-color: var(--orange); color: #111; }
.button.primary:hover { background: #ff984f; }
.button.ghost:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.live-strip { margin-top: 52px; display: flex; gap: 23px; color: #747b8b; font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .12em; }
.status-light { width: 6px; height: 6px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

.hero-art { height: 520px; position: relative; perspective: 900px; }
.hero-cube { position: absolute; width: 220px; height: 220px; left: 50%; top: 48%; transform-style: preserve-3d; transform: translate(-50%,-50%) rotateX(-20deg) rotateY(35deg); animation: cubeFloat 7s ease-in-out infinite; }
.cube-face { position: absolute; width: 220px; height: 220px; border: 1px solid rgba(255,122,26,.55); background: rgba(255,122,26,.035); box-shadow: inset 0 0 45px rgba(255,122,26,.04); }
.cube-face::after { content:""; position:absolute; inset:20px; border:1px solid rgba(255,255,255,.08); background: repeating-linear-gradient(90deg,transparent 0 44px,rgba(255,255,255,.05) 44px 45px), repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.05) 44px 45px); }
.face-front { transform: translateZ(110px); }
.face-right { transform: rotateY(90deg) translateZ(110px); }
.face-top { transform: rotateX(90deg) translateZ(110px); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; transform: translate(-50%,-50%) rotateX(68deg); }
.orbit-one { width: 480px; height: 480px; }
.orbit-two { width: 330px; height: 330px; border-color: rgba(169,137,255,.25); transform: translate(-50%,-50%) rotateX(68deg) rotateZ(55deg); }
.art-label { position: absolute; color: #6f7685; font: 700 10px ui-monospace, monospace; letter-spacing: .15em; }
.art-label-a { left: 6%; top: 20%; }.art-label-b { right: 3%; top: 42%; }.art-label-c { left: 13%; bottom: 17%; }.art-label-d { right: 8%; bottom: 9%; color: var(--orange); }
@keyframes cubeFloat { 0%,100% { transform:translate(-50%,-50%) rotateX(-20deg) rotateY(35deg) translateY(-6px) } 50% { transform:translate(-50%,-50%) rotateX(-16deg) rotateY(46deg) translateY(10px) } }

.section-shell { max-width: var(--max); margin: 0 auto; padding: 100px 28px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 60px; margin-bottom: 42px; }
.section-heading h2, .account-copy h2, .next-card h2 { font-size: clamp(36px, 4.5vw, 66px); }
.section-heading > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 2px; max-width: 560px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.game-card {
  min-height: 520px; position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; text-decoration: none; isolation: isolate;
}
.game-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(8,10,16,.2) 50%,rgba(8,10,16,.96) 100%); z-index:-1; }
.game-art { position:absolute; inset:0; z-index:-2; transition: transform .6s ease; }
.game-card:hover .game-art { transform:scale(1.025); }
.game-art-city { background: linear-gradient(150deg,#17233a 0 28%,#296456 28% 31%,#1c483e 31% 47%,#97b582 47% 49%,#263646 49%); }
.game-art-city::before { content:""; position:absolute; width:55%; height:45%; left:22%; top:15%; transform:rotateX(55deg) rotateZ(-35deg); background:repeating-linear-gradient(90deg,rgba(114,226,189,.28) 0 2px,transparent 2px 52px),repeating-linear-gradient(0deg,rgba(114,226,189,.28) 0 2px,transparent 2px 52px); box-shadow:0 0 80px rgba(114,226,189,.15); }
.game-art-city::after { content:""; position:absolute; width:90px; height:170px; left:48%; top:15%; background:linear-gradient(90deg,#456c67,#9cdcc5); clip-path:polygon(50% 0,100% 23%,100% 100%,0 100%,0 23%); box-shadow:-120px 110px 0 -20px #42645c,100px 100px 0 -25px #6c9083; }
.game-art-space { background: radial-gradient(circle at 65% 29%,#ffd4a9 0 2px,transparent 3px),radial-gradient(circle at 30% 16%,#fff 0 1px,transparent 2px),radial-gradient(circle at 15% 50%,#fff 0 1px,transparent 2px),radial-gradient(circle at 76% 56%,#fff 0 1px,transparent 2px),radial-gradient(circle at 55% 38%,rgba(169,137,255,.35),transparent 28%),linear-gradient(150deg,#17113a,#080a18 60%); }
.game-art-space::before { content:""; position:absolute; width:210px;height:210px;border-radius:50%;left:42%;top:13%;background:radial-gradient(circle at 38% 32%,#fff1e4 0 2%,#ff9a45 10%,#6f267c 45%,#17102f 70%);box-shadow:0 0 80px rgba(255,122,26,.35); }
.game-art-space::after { content:""; position:absolute;width:350px;height:110px;border:7px solid rgba(255,196,145,.5);border-radius:50%;left:31%;top:27%;transform:rotate(-17deg); }
.game-art-signal { background:radial-gradient(circle at 50% 35%,rgba(141,255,178,.2),transparent 25%),repeating-linear-gradient(0deg,transparent 0 5px,rgba(141,255,178,.035) 6px),linear-gradient(145deg,#0c2116,#030705 70%); }
.game-art-signal::before { content:"";position:absolute;left:8%;right:8%;top:27%;height:90px;background:linear-gradient(90deg,transparent,rgba(141,255,178,.8),transparent);clip-path:polygon(0 49%,8% 48%,12% 40%,16% 60%,21% 48%,27% 47%,31% 15%,35% 84%,40% 48%,47% 45%,51% 5%,55% 94%,60% 50%,68% 45%,72% 28%,77% 66%,82% 48%,100% 49%);filter:drop-shadow(0 0 8px rgba(141,255,178,.8)); }
.game-art-signal::after { content:"83.92 MHz";position:absolute;left:50%;top:15%;transform:translateX(-50%);color:#8dffb2;font:700 12px ui-monospace,monospace;letter-spacing:.22em;border:1px solid rgba(141,255,178,.25);padding:12px 18px;box-shadow:0 0 40px rgba(141,255,178,.12); }
.game-art-puzzle { background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,178,71,.13) 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(255,178,71,.13) 35px 36px),linear-gradient(150deg,#241408,#0d0804 65%); }
.game-art-puzzle::before { content:""; position:absolute; width:36px; height:36px; left:11%; top:16%; background:#ff7a1a; box-shadow:36px 0 #ff7a1a,144px 0 #96460e,216px 0 #ff7a1a,72px 36px #ffb347,108px 36px #ff7a1a,180px 36px #ff7a1a,36px 72px #ff7a1a,108px 72px #96460e,180px 72px #ffb347,0 108px #96460e,108px 108px #ff7a1a,216px 108px #ff7a1a; filter:drop-shadow(0 0 26px rgba(255,122,26,.35)); }
.game-art-puzzle::after { content:"2 1 4"; position:absolute; right:9%; top:15%; color:#ffb347; font:700 12px ui-monospace,monospace; letter-spacing:.35em; border:1px solid rgba(255,178,71,.3); padding:12px 16px 12px 20px; box-shadow:0 0 40px rgba(255,122,26,.15); }
.game-art-park { background:radial-gradient(circle at 70% 12%,rgba(255,150,40,.34),transparent 34%),linear-gradient(158deg,#2a1c0d 0%,#16290f 42%,#0a1608 100%); }
.game-art-park::before { content:""; position:absolute; width:250px; height:180px; left:50%; top:14%; transform:translateX(-52%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 170'%3E%3Cg fill='%230d1a0a'%3E%3Cpath d='M8 126 Q0 98 22 87 Q38 79 54 85 L56 112 Q30 112 8 126Z'/%3E%3Cellipse cx='102' cy='100' rx='60' ry='40'/%3E%3Crect x='58' y='118' width='15' height='46' rx='4'/%3E%3Crect x='86' y='126' width='15' height='42' rx='4'/%3E%3Crect x='118' y='126' width='15' height='42' rx='4'/%3E%3Crect x='144' y='118' width='15' height='46' rx='4'/%3E%3Ccircle cx='168' cy='66' r='30'/%3E%3Cpath d='M168 44 Q200 48 218 76 Q224 86 214 92 Q196 100 172 94Z'/%3E%3Cpath d='M177 40 L206 12 L188 44Z'/%3E%3Cpath d='M190 50 L221 28 L197 58Z'/%3E%3Cpath d='M210 70 L226 60 L214 80Z'/%3E%3C/g%3E%3Ccircle cx='185' cy='72' r='4' fill='%23ffb347'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 30px rgba(255,122,26,.28)); }
.game-art-park::after { content:"GENOME 62%"; position:absolute; left:50%; bottom:32%; transform:translateX(-50%); color:#8fdc8f; font:700 12px ui-monospace,monospace; letter-spacing:.3em; border:1px solid rgba(143,220,143,.3); padding:12px 18px; box-shadow:0 0 40px rgba(111,191,115,.15); background:rgba(8,14,6,.5); }
.game-number { position:absolute; top:24px; left:26px; font:800 11px ui-monospace,monospace; letter-spacing:.16em; color:rgba(255,255,255,.7); }
.game-state { position:absolute; top:22px; right:22px; padding:8px 10px; background:rgba(8,10,16,.72); border:1px solid rgba(255,255,255,.15); font:700 9px ui-monospace,monospace; letter-spacing:.12em; }
.game-state i { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);margin-right:7px; }
.game-card h3 { margin:0; font:900 clamp(34px,4vw,56px)/.95 "Arial Black",Impact,sans-serif; text-transform:uppercase; letter-spacing:-.045em; }
.game-card p { color:#b6bbc7; line-height:1.55; max-width:520px; margin:15px 0 22px; }
.game-meta { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.14); padding-top:18px; }
.game-tags { display:flex; flex-wrap:wrap; gap:7px; }
.game-tags span { font:700 9px ui-monospace,monospace; letter-spacing:.1em; padding:6px 8px; border:1px solid rgba(255,255,255,.14); color:#c6cad4; }
.play-arrow { width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#111;font-size:18px; }

.account-panel { border:1px solid var(--line); background:linear-gradient(135deg,rgba(255,122,26,.08),transparent 40%),var(--panel); display:grid;grid-template-columns:1fr 1fr; }
.account-copy { padding:58px; border-right:1px solid var(--line); }
.account-copy h2 { max-width:600px; }
.account-copy > p:not(.eyebrow) { color:var(--muted);line-height:1.7;max-width:570px;margin:25px 0; }
.account-features { display:grid;grid-template-columns:1fr 1fr; }
.account-features article { min-height:180px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start; }
.account-features article:nth-child(2n) { border-right:0; }
.account-features article:nth-last-child(-n+2) { border-bottom:0; }
.account-features article > span { color:var(--orange);font:700 10px ui-monospace,monospace; }
.account-features div { display:grid;gap:7px; }
.account-features b { font-size:15px; }
.account-features small { color:var(--muted);line-height:1.4; }
.account-stat b { color:var(--mint); }

.roadmap { padding-top:50px; }
.next-card { min-height:360px;border:1px solid var(--line);background:var(--panel-2);padding:50px;display:grid;grid-template-columns:1.5fr .5fr;align-items:center;gap:40px;overflow:hidden; }
.next-card h2 { max-width:840px; }
.next-card p:not(.eyebrow) { color:var(--muted);line-height:1.7;max-width:740px; }
.next-visual { height:260px;position:relative;display:grid;place-items:center; }
.next-visual span { font:900 150px/.8 "Arial Black",Impact,sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,122,26,.6); }
.next-visual i { position:absolute;border:1px solid rgba(255,122,26,.16);border-radius:50%;width:220px;height:220px; }
.next-visual i:nth-child(2){width:160px;height:160px}.next-visual i:nth-child(3){width:100px;height:100px}

footer { max-width:var(--max);margin:40px auto 0;padding:38px 28px 48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--muted);font-size:12px; }
.footer-brand { color:var(--ink);transform:scale(.9);transform-origin:left center; }
footer > div { display:flex;gap:18px; }
footer > div a { color:var(--muted);text-decoration:none; }
footer > div a:hover { color:var(--ink); }

@media (max-width: 900px) {
  nav > a { display:none; }
  .hero { grid-template-columns:1fr; padding-top:60px; min-height:auto; }
  .hero-art { height:410px; margin-top:20px; }
  .hero-cube,.cube-face { width:170px;height:170px}.face-front{transform:translateZ(85px)}.face-right{transform:rotateY(90deg) translateZ(85px)}.face-top{transform:rotateX(90deg) translateZ(85px)}
  .orbit-one{width:380px;height:380px}.orbit-two{width:270px;height:270px}
  .section-heading,.account-panel,.next-card { grid-template-columns:1fr; }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .section-heading { gap:20px; }
  .account-copy { border-right:0;border-bottom:1px solid var(--line); }
}
@media (max-width: 680px) {
  .site-header { height:72px;padding:0 18px; }
  .brand-mark { width:29px;height:29px}.brand b{font-size:13px}
  .account-button { padding:9px 12px; }
  .hero { padding:52px 18px 30px; }
  h1 { font-size:clamp(48px,15vw,72px); }
  .hero-lede { font-size:16px; }
  .hero-actions .button { width:100%; }
  .live-strip { margin-top:38px;gap:12px;flex-wrap:wrap; }
  .hero-art { height:330px; }
  .orbit-one{width:310px;height:310px}.orbit-two{width:220px;height:220px}
  .art-label-b { right:0; }
  .section-shell { padding:72px 18px; }
  .game-grid { grid-template-columns:1fr; }
  .game-card { min-height:460px;padding:22px; }
  .account-copy { padding:32px 24px; }
  .account-features { grid-template-columns:1fr; }
  .account-features article { min-height:auto;border-right:0!important;border-bottom:1px solid var(--line)!important; }
  .account-features article:last-child { border-bottom:0!important; }
  .next-card { padding:32px 24px; }
  .next-visual { height:190px; }
  .next-visual span { font-size:110px; }
  footer { margin-top:0;padding:34px 18px;align-items:flex-start;flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero-cube { animation:none; }
  .game-art { transition:none; }
}