:root{
  --bg:#0a0d12;--panel:#11161d;--panel2:#0e1319;--line:#29323d;--text:#f2f5f7;--muted:#8f9aa7;
  --gold:#f4b942;--violet:#a56dff;--deadlock:#d7ab55;--watch:#69c9ff;--watch2:#f6a43a;--rivals:#ef5864;--rivals2:#a982ff;
  --green:#72d69b;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 12% 8%,rgba(244,185,66,.08),transparent 25%),
radial-gradient(circle at 88% 18%,rgba(165,109,255,.085),transparent 27%),
linear-gradient(145deg,#090c10 0%,#0d1218 48%,#090c11 100%)}
a{color:inherit;text-decoration:none}
.shell{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:24px 0 48px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 0 24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.02em}
.mark{width:35px;height:35px;border-radius:11px;border:1px solid rgba(255,255,255,.11);position:relative;background:linear-gradient(145deg,rgba(244,185,66,.13),rgba(165,109,255,.13)),#11161d;box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.22)}
.mark:before,.mark:after{content:"";position:absolute;left:8px;right:8px;height:2px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--violet));transform-origin:center}
.mark:before{top:12px;transform:rotate(28deg)}.mark:after{bottom:11px;transform:rotate(-28deg)}
.brand span{font-size:20px}.platformPill{font-size:10px;color:#aab4bf;border:1px solid #2a3440;border-radius:999px;padding:6px 9px;background:rgba(255,255,255,.025);letter-spacing:.05em;text-transform:uppercase}
.hero{border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:clamp(28px,5vw,58px);overflow:hidden;position:relative;background:
linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%),
radial-gradient(circle at 78% 30%,rgba(165,109,255,.13),transparent 27%),
radial-gradient(circle at 18% 70%,rgba(244,185,66,.09),transparent 30%),#0f141b;box-shadow:0 30px 70px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.04)}
.hero:after{content:"COUNTERLAB";position:absolute;right:-14px;bottom:-26px;font-size:clamp(70px,13vw,168px);font-weight:1000;letter-spacing:-.08em;color:rgba(255,255,255,.018);pointer-events:none;white-space:nowrap}
.eyebrow{display:flex;align-items:center;gap:8px;color:#c9b37d;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(114,214,155,.65)}
h1{max-width:850px;margin:13px 0 0;font-size:clamp(44px,7vw,82px);line-height:.93;letter-spacing:-.055em}
.hero p{max-width:710px;margin:18px 0 0;color:#a8b3bf;font-size:clamp(15px,2vw,18px);line-height:1.6}
.gamesHead{display:flex;justify-content:space-between;gap:18px;align-items:end;margin:32px 2px 13px}.gamesHead h2{margin:0;font-size:18px}.gamesHead p{margin:0;color:var(--muted);font-size:12px}
.gameGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.gameCard{min-height:286px;border:1px solid var(--line);border-radius:20px;padding:20px;position:relative;overflow:hidden;background:linear-gradient(180deg,#121821,#0e1319);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.gameCard:hover{transform:translateY(-2px);border-color:#465260;box-shadow:0 18px 38px rgba(0,0,0,.2)}
.gameCard:before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--accent)}
.cardTop{display:flex;justify-content:space-between;gap:10px;align-items:center}.status{font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:999px;border:1px solid #303b47;color:#9eabb7;background:#0c1117}.status.live{color:#9ee9ba;border-color:rgba(114,214,155,.27);background:rgba(114,214,155,.05)}
.gameSigil{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 36%,#39414b);background:color-mix(in srgb,var(--accent) 8%,#111720);font-weight:1000;font-size:15px;color:var(--accent)}
.gameTitle{margin:28px 0 0}.gameTitle span{display:block;color:#768390;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.gameTitle b{display:block;margin-top:4px;font-size:29px;letter-spacing:-.04em}.gameCard p{margin:8px 0 22px;min-height:60px;color:#98a4b1;font-size:13px;line-height:1.52}.cardCta{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #27313b;padding-top:14px;color:#dce3e9;font-size:12px;font-weight:850}.cardCta i{font-style:normal;color:var(--accent);font-size:17px}.deadlock{--accent:var(--deadlock)}.watch{--accent:var(--watch)}.rivals{--accent:var(--rivals)}
.about{margin-top:13px;border:1px solid var(--line);border-radius:18px;background:rgba(16,22,29,.76);padding:18px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}.about b{font-size:13px}.about p{margin:4px 0 0;color:#8794a0;font-size:12px;line-height:1.55}.aboutIcon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#171e27;border:1px solid #2a3540;color:#b7c1ca}
.footer{display:flex;justify-content:space-between;gap:20px;padding:20px 4px 0;color:#66727e;font-size:10px}.footer strong{color:#84919d}
/* Product landing */
.productHero{--accent:var(--gold);border:1px solid var(--line);border-radius:26px;padding:clamp(26px,5vw,52px);position:relative;overflow:hidden;background:radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 30%),linear-gradient(135deg,#11171f,#0d1218);box-shadow:0 25px 60px rgba(0,0,0,.22)}
.productHero:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.productHero .crumb{font-size:11px;color:#8793a0}.productHero .crumb a:hover{color:#d6dde3}.productHero h1{font-size:clamp(46px,7vw,78px)}.productHero h1 em{font-style:normal;color:var(--accent)}.productHero p{max-width:720px;color:#a3aebb;font-size:16px;line-height:1.6}.productMeta{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.productMeta span{border:1px solid #2b3540;border-radius:999px;padding:6px 9px;color:#909ca8;background:#0e141a;font-size:10px;font-weight:750}
.productGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.productFeature{border:1px solid var(--line);border-radius:16px;padding:17px;background:#10161d}.productFeature span{font-size:9px;color:var(--accent);font-weight:950;letter-spacing:.08em;text-transform:uppercase}.productFeature b{display:block;margin:6px 0 5px;font-size:15px}.productFeature p{margin:0;color:#83909c;font-size:12px;line-height:1.5}.comingBar{margin-top:14px;border:1px dashed #36414c;border-radius:16px;padding:16px;color:#9aa6b1;background:rgba(255,255,255,.015);font-size:12px;line-height:1.55}.comingBar b{color:#e2e7eb}.backBtn{display:inline-flex;margin-top:18px;padding:10px 13px;border-radius:11px;border:1px solid color-mix(in srgb,var(--accent) 30%,#35404b);background:color-mix(in srgb,var(--accent) 5%,#11171e);font-size:11px;font-weight:850}.backBtn:hover{border-color:var(--accent)}
@media(max-width:820px){.gameGrid,.productGrid{grid-template-columns:1fr}.gameCard{min-height:0}.gameCard p{min-height:0}.gamesHead,.topbar,.footer{align-items:flex-start}.gamesHead{flex-direction:column}.platformPill{display:none}.hero{padding:30px 24px}.about{grid-template-columns:1fr}.aboutIcon{display:none}}


/* CounterLab v0.2 — game identity pass */
.gameCard{isolation:isolate}
.gameCard>*{position:relative;z-index:2}
.gameCard:after{content:"";position:absolute;z-index:0;pointer-events:none;inset:0;opacity:.68;transition:opacity .18s ease,transform .22s ease}
.gameCard:hover:after{opacity:.92;transform:scale(1.015)}
.gameFlavor{margin-top:9px;font-size:8px;font-weight:950;letter-spacing:.16em;color:color-mix(in srgb,var(--accent) 70%,#aeb8c2);text-transform:uppercase}
.gameFlavor i{font-style:normal;opacity:.48;margin:0 4px}

/* Deadlock: occult metropolitan / art-deco geometry */
.gameCard.deadlock{background:
  radial-gradient(circle at 12% 7%,rgba(215,171,85,.12),transparent 28%),
  linear-gradient(180deg,#151610,#0d1217 78%)}
.gameCard.deadlock:after{background:
  linear-gradient(90deg,transparent 0 13%,rgba(215,171,85,.045) 13.2% 13.5%,transparent 13.7% 86%,rgba(215,171,85,.035) 86.2% 86.5%,transparent 86.7%),
  repeating-linear-gradient(135deg,transparent 0 18px,rgba(215,171,85,.022) 18px 19px,transparent 19px 38px),
  radial-gradient(circle at 84% 18%,rgba(215,171,85,.13),transparent 20%)}
.deadlock .gameSigil{border-radius:50%;box-shadow:inset 0 0 0 5px rgba(215,171,85,.035),0 0 22px rgba(215,171,85,.075);font-family:Georgia,serif;letter-spacing:-.08em}
.deadlock .gameSigil:before{content:"";position:absolute;width:21px;height:21px;border:1px solid rgba(215,171,85,.32);transform:rotate(45deg);border-radius:2px}

/* Overwatch: clean blue/orange futurism and circular HUD language */
.gameCard.watch{background:
  radial-gradient(circle at 88% 9%,rgba(105,201,255,.12),transparent 25%),
  linear-gradient(155deg,#101921 0%,#10151c 61%,#17130d 100%)}
.gameCard.watch:after{inset:auto -48px -80px auto;width:230px;height:230px;border-radius:50%;background:
  radial-gradient(circle,transparent 0 36%,rgba(105,201,255,.055) 36.5% 37.5%,transparent 38% 48%,rgba(246,164,58,.05) 48.5% 49.5%,transparent 50%),
  conic-gradient(from 24deg,transparent 0 12%,rgba(105,201,255,.07) 12% 13%,transparent 13% 34%,rgba(246,164,58,.07) 34% 35%,transparent 35% 100%)}
.watch .gameSigil{border-radius:50%;border-width:2px;box-shadow:0 0 22px rgba(105,201,255,.08);position:relative}
.watch .gameSigil:after{content:"";position:absolute;bottom:4px;width:20px;height:3px;border-radius:999px;background:var(--watch2);box-shadow:0 0 9px rgba(246,164,58,.4)}
.watch .gameFlavor{background:linear-gradient(90deg,var(--watch),var(--watch2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Marvel Rivals: comic-panel slashes, halftone texture, red/violet energy */
.gameCard.rivals{background:
  radial-gradient(circle at 92% 9%,rgba(239,88,100,.15),transparent 24%),
  radial-gradient(circle at 8% 95%,rgba(169,130,255,.09),transparent 27%),
  linear-gradient(145deg,#181116,#10141a 65%)}
.gameCard.rivals:after{background:
  radial-gradient(circle,rgba(239,88,100,.10) 1px,transparent 1.5px) 103% -8%/12px 12px no-repeat,
  repeating-linear-gradient(115deg,transparent 0 34px,rgba(239,88,100,.027) 34px 37px,transparent 37px 72px),
  linear-gradient(115deg,transparent 0 72%,rgba(169,130,255,.035) 72% 74%,transparent 74%)}
.rivals .gameSigil{border-radius:9px;transform:skew(-5deg) rotate(-2deg);background:linear-gradient(145deg,rgba(239,88,100,.12),rgba(169,130,255,.07)),#111720;box-shadow:6px 6px 0 rgba(169,130,255,.035)}
.rivals .gameSigil{color:#ff7984}
.rivals .gameFlavor{background:linear-gradient(90deg,var(--rivals),var(--rivals2));-webkit-background-clip:text;background-clip:text;color:transparent}

.gameSigil{position:relative}

/* Product foundation page identity */
.productHero.watchHero{background:
  radial-gradient(circle at 86% 18%,rgba(105,201,255,.13),transparent 25%),
  radial-gradient(circle at 96% 95%,rgba(246,164,58,.065),transparent 28%),
  linear-gradient(135deg,#111921,#0d1218)}
.productHero.watchHero:after{content:"";position:absolute;right:-70px;bottom:-105px;width:330px;height:330px;border-radius:50%;background:
  radial-gradient(circle,transparent 0 35%,rgba(105,201,255,.05) 35.5% 36.5%,transparent 37% 48%,rgba(246,164,58,.04) 48.5% 49.5%,transparent 50%);pointer-events:none}
.productHero.rivalsHero{background:
  radial-gradient(circle at 86% 15%,rgba(239,88,100,.15),transparent 26%),
  radial-gradient(circle at 8% 90%,rgba(169,130,255,.08),transparent 30%),
  repeating-linear-gradient(115deg,transparent 0 50px,rgba(239,88,100,.018) 50px 52px,transparent 52px 100px),#111419}
.productHero.rivalsHero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(239,88,100,.09) 1px,transparent 1.5px) 96% 9%/12px 12px no-repeat;pointer-events:none}
.productHero>*{position:relative;z-index:2}
.productIdentity{display:flex;align-items:center;gap:9px;margin-top:17px;color:#8995a1;font-size:9px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.productIdentity b{display:grid;place-items:center;min-width:31px;height:22px;padding:0 6px;border:1px solid color-mix(in srgb,var(--accent) 34%,#34404b);border-radius:7px;background:color-mix(in srgb,var(--accent) 7%,#0e141a);color:var(--accent);font-size:9px;letter-spacing:.03em}

@media(max-width:820px){
  .gameCard:after{opacity:.52}
  .gameFlavor{margin-bottom:2px}
}