:root {
  --black: #090b10;
  --ink: #11151c;
  --surface: #161b23;
  --line: #303946;
  --muted: #97a0ad;
  --white: #f5f6f1;
  --lime: #d6f54a;
  --orange: #ff5a36;
  --blue: #72cfff;
  --max: 1240px;
  --header: 74px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: #10141a; color: var(--white); font: 16px/1.6 Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; max-width: 100%; }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 1000; padding: .75rem 1rem; background: var(--lime); color: var(--black); font-weight: 800; }
.skip-link:focus { top: 1rem; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header); background: rgba(9,11,16,.72); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.1); }
.header-inner { height: 100%; max-width: 1440px; margin: auto; padding: 0 1rem; display: flex; align-items: center; gap: 1.35rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; line-height: 1; }
.brand strong { display: block; font-size: 1.1rem; letter-spacing: .12em; }
.brand strong span { color: var(--orange); }
.brand small { display: block; color: #9da6af; font-size: .5rem; letter-spacing: .2em; margin-top: .2rem; }
.brand-glyph { position: relative; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 2px solid var(--lime); transform: skew(-10deg); background: rgba(214,245,74,.08); }
.brand-glyph:before, .brand-glyph:after { content: ""; position: absolute; background: var(--lime); }
.brand-glyph:before { width: 1px; height: 1.55rem; }
.brand-glyph:after { width: 1.55rem; height: 1px; }
.brand-glyph i { width: .35rem; height: .35rem; border: 1px solid var(--orange); border-radius: 50%; z-index: 1; }
.brand-glyph b { position: absolute; right: -.3rem; top: -.3rem; width: .45rem; height: .45rem; background: var(--orange); clip-path: polygon(0 0,100% 0,100% 100%); }
.desktop-nav { display: none; margin-left: auto; gap: 1.7rem; align-items: center; }
.desktop-nav a { font-size: .77rem; font-weight: 800; color: #d5d9dc; letter-spacing: .06em; }
.desktop-nav a:hover { color: var(--lime); }
.header-cta { display: none; align-items: center; gap: .35rem; padding: .65rem 1rem; background: var(--lime); color: var(--black); font-size: .74rem; font-weight: 900; clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); }
.crosshair { font-size: 1rem; font-weight: 900; }
.menu-toggle { margin-left: auto; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.35); background: transparent; display: grid; place-content: center; gap: 4px; }
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--white); }
.mobile-menu { position: fixed; top: var(--header); left: 0; right: 0; padding: 1rem; background: rgba(9,11,16,.98); border-bottom: 1px solid #303946; }
.mobile-menu a { display: block; padding: .78rem 0; border-bottom: 1px solid #252d37; font-weight: 800; }
.hero { position: relative; min-height: 760px; padding: calc(var(--header) + 4.2rem) 1rem 4rem; background: var(--black); overflow: hidden; }
.hero-image { position: absolute; inset: 0; background: url("assets/csgo-official.jpg") center right/cover no-repeat; opacity: .98; }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,11,16,.98) 0%,rgba(9,11,16,.84) 36%,rgba(9,11,16,.24) 71%,rgba(9,11,16,.52) 100%), linear-gradient(0deg,rgba(9,11,16,.85),transparent 38%); }
.hero-scanlines { position: absolute; inset: 0; opacity: .1; background: repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,transparent 5px); }
.hero-side-shot, .hero-action-shot { position: absolute; z-index: 1; overflow: hidden; border: 1px solid rgba(214,245,74,.65); background-color: #17202a; background-repeat: no-repeat; background-size: cover; box-shadow: 8px 8px 0 rgba(255,90,54,.7); }
.hero-side-shot { right: 6%; bottom: 9%; width: min(27vw, 330px); aspect-ratio: 1.35; background-image: linear-gradient(0deg,rgba(9,11,16,.78),transparent 60%), url("assets/csgo-social.jpg"); background-position: center; transform: rotate(-3deg); }
.hero-action-shot { right: 2%; top: 20%; width: min(13vw, 170px); aspect-ratio: 1.25; background-image: linear-gradient(0deg,rgba(9,11,16,.76),transparent 65%), url("assets/csgo-action.jpg"); background-position: center; transform: rotate(5deg); border-color: rgba(255,90,54,.85); box-shadow: -6px 6px 0 rgba(114,207,255,.45); }
.hero-side-shot span, .hero-action-shot span { position: absolute; left: .65rem; bottom: .55rem; color: var(--lime); font-size: .48rem; font-weight: 900; letter-spacing: .13em; }
.hero-action-shot span { color: var(--orange); }
.bullet { position: absolute; height: 2px; background: var(--orange); box-shadow: 0 0 10px var(--orange); transform: rotate(-18deg); opacity: .85; }
.bullet-one { right: 8%; top: 31%; width: 9rem; }
.bullet-two { right: 30%; top: 20%; width: 4rem; transform: rotate(-26deg); opacity: .6; }
.hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: auto; display: grid; align-items: end; min-height: 590px; }
.hero-copy { max-width: 39rem; }
.eyebrow, .section-kicker { margin: 0 0 .9rem; color: var(--lime); font-size: .65rem; font-weight: 900; letter-spacing: .18em; }
.live-dot { display: inline-block; width: .48rem; height: .48rem; margin-right: .45rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,54,.18); }
.season { margin: 0 0 1.1rem; color: #a9b0b8; font-size: .62rem; letter-spacing: .16em; }
.season b { color: var(--orange); }
.season i { display: inline-block; width: 2rem; height: 1px; margin: 0 .65rem; background: #56616c; vertical-align: middle; }
.hero h1 { margin: 0; font-size: clamp(4.2rem,16vw,8.5rem); line-height: .78; letter-spacing: -.06em; text-transform: uppercase; }
.hero h1 em { font-style: normal; color: var(--lime); text-shadow: 6px 5px 0 rgba(255,90,54,.6); }
.hero-lead { max-width: 36rem; margin: 1.7rem 0 0; color: #c0c6ce; font-size: .95rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.6rem; }
.fire-btn, .outline-btn { position: relative; min-height: 58px; display: inline-flex; align-items: center; gap: .7rem; padding: .55rem .9rem; font-weight: 900; transition: transform .2s ease, filter .2s ease; }
.fire-btn { background: var(--lime); color: var(--black); clip-path: polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); box-shadow: 6px 6px 0 var(--orange); }
.fire-btn:hover { transform: translate(-2px,-2px); filter: brightness(1.08); }
.fire-icon { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 2px solid var(--black); font-size: 1.15rem; }
.fire-btn small, .fire-btn b { display: block; }
.fire-btn small { font-size: .55rem; letter-spacing: .04em; }
.fire-btn b { font-size: .86rem; }
.fire-btn>i { margin-left: .8rem; font-style: normal; font-size: .6rem; }
.outline-btn { border: 1px solid rgba(255,255,255,.5); color: #fff; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); font-size: .78rem; }
.outline-btn:hover { border-color: var(--lime); color: var(--lime); }
.outline-btn span { color: var(--orange); font-size: 1rem; }
.hero-meta { display: flex; gap: 1.8rem; margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.2); }
.hero-meta span { display: flex; flex-direction: column; }
.hero-meta b { font-size: 1.05rem; color: #fff; }
.hero-meta small { color: #8e98a2; font-size: .58rem; }
.hero-hud { display: none; position: absolute; right: 3%; bottom: 10%; width: 240px; height: 240px; border: 1px solid rgba(214,245,74,.45); border-radius: 50%; box-shadow: inset 0 0 0 20px rgba(214,245,74,.03), 0 0 50px rgba(114,207,255,.12); }
.hero-hud:before, .hero-hud:after { content: ""; position: absolute; background: rgba(214,245,74,.4); }
.hero-hud:before { left: 50%; top: -18px; width: 1px; height: 276px; }
.hero-hud:after { top: 50%; left: -18px; width: 276px; height: 1px; }
.hud-label { position: absolute; left: -2rem; top: -2rem; color: var(--lime); font-size: .55rem; letter-spacing: .12em; }
.hud-crosshair { position: absolute; inset: 34%; border: 1px solid var(--orange); border-radius: 50%; display: grid; place-items: center; }
.hud-crosshair i, .hud-crosshair b { position: absolute; background: var(--orange); }
.hud-crosshair i { width: 1px; height: 150%; }
.hud-crosshair b { width: 150%; height: 1px; }
.hud-callout { position: absolute; display: flex; gap: .45rem; align-items: center; font-size: .5rem; letter-spacing: .08em; }
.hud-callout b { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 1px solid var(--orange); color: var(--orange); }
.hud-callout span { color: #c7ced2; }
.callout-a { right: -4.6rem; top: 26%; }
.callout-b { left: -4.8rem; bottom: 24%; }
.hud-bottom { position: absolute; left: 50%; bottom: -2.7rem; transform: translateX(-50%); display: flex; gap: .85rem; white-space: nowrap; color: #aab3bc; font-size: .5rem; }
.hud-bottom b { color: var(--lime); }
.ammo-dot { display: inline-block; width: .4rem; height: .4rem; margin-right: .3rem; border-radius: 50%; background: var(--orange); }
.hero-bottom { position: absolute; z-index: 3; bottom: 1rem; left: 1rem; right: 1rem; max-width: var(--max); margin: auto; display: flex; justify-content: space-between; color: #8d98a2; font-size: .57rem; letter-spacing: .14em; }
.hero-bottom b { color: var(--orange); }
.scroll-cue { color: var(--lime); }
.scroll-cue i { font-style: normal; font-size: .9rem; }
.section { padding: 5rem 1rem; }
.section-inner { width: 100%; max-width: var(--max); margin: auto; }
.play { background: #eceee8; color: var(--ink); }
.play-grid { display: grid; gap: 2.2rem; }
.play-copy { max-width: 31rem; }
.play .section-kicker, .weapons .section-kicker, .download .section-kicker, .faq .section-kicker { color: var(--orange); }
h2 { margin: 0; font-size: clamp(2.45rem,7vw,5rem); line-height: .95; letter-spacing: -.045em; }
h2 em { font-style: normal; color: #6670f0; }
.play-copy>p:not(.section-kicker) { color: #57616a; margin: 1.4rem 0 0; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; color: var(--ink); font-weight: 900; border-bottom: 2px solid var(--orange); padding-bottom: .2rem; }
.text-link span { color: var(--orange); }
.play-scenes { display: grid; grid-template-columns: 1.2fr 1fr; gap: .75rem; }
.scene-card { min-height: 220px; }
.scene-main { grid-row: span 2; }
.scene-art { position: relative; height: 100%; min-height: 160px; overflow: hidden; padding: 1rem; background-color: #1d252f; background-repeat: no-repeat; background-size: cover; background-position: center; }
.scene-breach { background-image: linear-gradient(0deg,rgba(11,14,20,.82),transparent 75%),url("assets/csgo-social.jpg"); }
.scene-clutch { background-image: linear-gradient(0deg,rgba(11,14,20,.88),transparent 75%),url("assets/csgo-official.jpg"); }
.scene-rush { background-image: linear-gradient(0deg,rgba(11,14,20,.88),transparent 75%),url("assets/csgo-action.jpg"); }
.scene-tag { display: block; color: var(--lime); font-size: .56rem; font-weight: 900; letter-spacing: .14em; }
.scene-art b { position: absolute; left: 1rem; bottom: 2rem; color: #fff; font-size: 1.15rem; }
.scene-art small { position: absolute; left: 1rem; bottom: .9rem; color: #b7c0c7; font-size: .64rem; }
.scene-flare { position: absolute; right: 16%; top: 22%; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--orange); filter: blur(12px); opacity: .8; }
.weapons { background: #131820; }
.section-head { display: grid; gap: 1rem; margin-bottom: 2rem; }
.section-head>p { max-width: 30rem; margin: 0; color: #a4adb7; }
.weapon-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.weapon-card { position: relative; min-height: 230px; padding: 1rem; text-align: left; background: #1b222c; border: 1px solid #333e4a; cursor: pointer; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.weapon-card:hover { transform: translateY(-4px); border-color: var(--orange); }
.weapon-card.active { background: var(--lime); color: var(--black); border-color: var(--lime); }
.weapon-num, .weapon-class { display: block; font-size: .58rem; letter-spacing: .12em; }
.weapon-num { color: var(--orange); font-weight: 900; }
.weapon-class { color: #94a0aa; margin-top: .2rem; }
.weapon-card.active .weapon-class { color: #59611b; }
.weapon-card b { position: absolute; left: 1rem; bottom: 2.4rem; font-size: 1.35rem; }
.weapon-card small { position: absolute; left: 1rem; bottom: 1rem; color: #a1abb4; font-size: .63rem; }
.weapon-card.active small { color: #4e5815; }
.gun { position: absolute; right: 1.2rem; top: 5.2rem; display: block; color: #6d7882; transform: rotate(-5deg); }
.weapon-card.active .gun { color: #3a4210; }
.gun-ak { width: 9rem; height: .72rem; background: currentColor; box-shadow: 2.3rem .7rem 0 -.14rem currentColor; }
.gun-ak:before { content: ""; position: absolute; left: 1rem; top: .65rem; width: 1.6rem; height: 1.6rem; background: currentColor; transform: skew(-24deg); }
.gun-ak:after { content: ""; position: absolute; right: 1.5rem; top: .55rem; width: .4rem; height: 1.6rem; background: currentColor; transform: rotate(24deg); }
.gun-awp { width: 10rem; height: .45rem; background: currentColor; box-shadow: 1.9rem .42rem 0 -.09rem currentColor; }
.gun-awp:before { content: ""; position: absolute; left: 2.6rem; top: -.45rem; width: 2rem; height: .34rem; background: currentColor; }
.gun-smoke { width: 2.4rem; height: 2.4rem; border: 4px solid currentColor; border-radius: 50%; box-shadow: 1.1rem .7rem 0 -4px currentColor; }
.loadout-readout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; margin-top: .85rem; padding: 1.1rem; background: #0e1116; border-left: 3px solid var(--orange); }
.loadout-readout>div span { color: var(--orange); font-size: .56rem; letter-spacing: .15em; }
.loadout-readout h3 { margin: .2rem 0 0; font-size: 1.2rem; }
.loadout-readout h3 em { font-style: normal; color: var(--lime); font-size: .72rem; }
.loadout-readout p { margin: 0; color: #a5afb7; font-size: .75rem; }
.loadout-bar { display: flex; align-items: center; gap: .55rem; color: #87939e; font-size: .55rem; }
.loadout-bar i { display: block; height: 5px; flex: 1; max-width: 170px; background: #2e3742; }
.loadout-bar i b { display: block; width: 72%; height: 100%; background: var(--lime); transition: width .25s ease; }
.loadout-bar strong { color: var(--lime); font-size: .7rem; }
.maps { background: #0b1118; }
.maps-grid { display: grid; gap: 2rem; align-items: center; }
.map-copy>p:not(.section-kicker) { max-width: 30rem; color: #a7b0ba; margin: 1.3rem 0 0; }
.maps .section-kicker { color: var(--blue); }
.maps h2 em { color: var(--blue); }
.map-pills { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; color: #b9c4cd; font-size: .62rem; letter-spacing: .1em; }
.map-pills span { display: flex; align-items: center; gap: .35rem; }
.map-pills i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); }
.map-pills span:nth-child(2) i { background: var(--lime); }
.map-pills span:nth-child(3) i { background: var(--blue); }
.map-frame { padding: .85rem; background: #141c25; border: 1px solid #364451; box-shadow: 10px 10px 0 rgba(114,207,255,.16); }
.map-frame-top { display: flex; justify-content: space-between; color: #a0adb8; font-size: .57rem; letter-spacing: .12em; }
.map-frame-top b { color: var(--lime); }
.map-visual { position: relative; margin-top: .75rem; background: #0c202a; overflow: hidden; }
.map-visual svg { width: 100%; height: auto; }
.map-building { fill: #122e39; stroke: #396072; stroke-width: 4; }
.map-block { fill: #173744; stroke: #274e5c; stroke-width: 2; }
.map-route { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 8; filter: url(#glow); }
.route-yellow { stroke: var(--lime); }
.route-red { stroke: var(--orange); }
.route-blue { stroke: var(--blue); }
.map-site { fill: none; stroke-width: 3; }
.site-yellow { stroke: var(--lime); }
.site-red { stroke: var(--orange); }
.map-node { fill: var(--blue); }
.map-visual text { fill: #dceef4; font: 800 14px Inter, sans-serif; }
.map-label { position: absolute; padding: .3rem .45rem; background: #0b1118; color: var(--lime); font-size: .5rem; letter-spacing: .08em; }
.map-label-a { right: 25%; top: 17%; }
.map-label-mid { left: 44%; bottom: 21%; color: var(--orange); }
.map-label-b { right: 3%; top: 38%; color: var(--blue); }
.download { background: var(--orange); color: var(--black); }
.download-grid { display: grid; gap: 2rem; align-items: center; }
.download .section-kicker { color: var(--black); }
.download-grid>div>p:not(.section-kicker) { max-width: 32rem; color: #351d1a; margin: 1.3rem 0 0; }
.ready-list { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.5rem; color: #2e1d1a; font-size: .64rem; font-weight: 800; }
.ready-list span { display: flex; align-items: center; gap: .35rem; }
.ready-list i { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; background: var(--black); color: var(--lime); font-style: normal; }
.download-card { padding: 1.1rem; background: #f4f5ef; border: 1px solid var(--black); box-shadow: 10px 10px 0 var(--black); }
.download-card-top { display: flex; justify-content: space-between; color: #667078; font-size: .56rem; letter-spacing: .13em; }
.download-card-top b { color: #288d62; }
.package { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; padding: .9rem; background: #e3e7df; }
.package-icon { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--black); color: var(--lime); font-size: .9rem; }
.package b, .package small { display: block; }
.package b { font-size: .82rem; }
.package small { color: #69736e; font-size: .58rem; }
.package em { margin-left: auto; color: #d5482f; font-style: normal; font-size: .65rem; font-weight: 900; }
.download-main { display: flex; align-items: center; gap: .7rem; padding: .85rem; background: var(--black); color: #fff; clip-path: polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); box-shadow: 4px 4px 0 var(--lime); }
.download-main:hover { transform: translateY(-2px); }
.download-arrow { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; background: var(--lime); color: var(--black); font-size: 1.15rem; }
.download-main small, .download-main b { display: block; }
.download-main small { color: var(--lime); font-size: .55rem; }
.download-main b { font-size: .84rem; }
.download-main i { margin-left: auto; color: var(--orange); font-style: normal; font-size: .6rem; }
.download-note { margin: .8rem 0 0; color: #6a756f; font-size: .57rem; }
.faq { background: #eceee8; color: var(--ink); }
.faq-grid { display: grid; gap: 2rem; }
.faq-grid>div>p:not(.section-kicker) { max-width: 29rem; color: #59636a; margin: 1.3rem 0 0; }
.faq h2 em { color: #6670f0; }
.faq-list details { padding: 1rem 0; border-top: 1px solid #c4cbc7; }
.faq-list details:last-child { border-bottom: 1px solid #c4cbc7; }
.faq-list summary { position: relative; padding-right: 2rem; cursor: pointer; font-weight: 900; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: absolute; right: 0; color: var(--orange); font-size: 1.2rem; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: .6rem 0 0; color: #606c72; font-size: .76rem; }
footer { padding: 2.5rem 1rem 5.5rem; background: #080a0e; color: #fff; }
.footer-inner, .footer-bottom { max-width: var(--max); margin: auto; }
.footer-inner { display: flex; flex-direction: column; gap: 1rem; }
.footer-inner>p { margin: 0; color: #8d98a3; font-size: .7rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-inner nav a { color: #abb4be; font-size: .63rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #252e38; color: #71808c; font-size: .57rem; }
.mobile-download { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: .65rem .8rem; background: #f2f4ed; color: var(--black); border-top: 1px solid #c9d0c7; box-shadow: 0 -8px 24px rgba(0,0,0,.22); }
.mobile-download span { display: flex; flex-direction: column; }
.mobile-download b { font-size: .76rem; }
.mobile-download small { font-size: .55rem; color: #69736f; }
.mobile-download a { padding: .55rem .75rem; background: var(--black); color: var(--lime); font-size: .66rem; font-weight: 900; clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
@media (min-width: 768px) {
  .header-inner { padding: 0 2rem; }
  .desktop-nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle, .mobile-menu { display: none; }
  .hero { padding: calc(var(--header) + 5.5rem) 2rem 5rem; min-height: 860px; }
  .hero-inner { min-height: 640px; }
  .hero-hud { display: block; }
  .hero-bottom { left: 2rem; right: 2rem; }
  .section { padding: 7rem 2rem; }
  .play { padding-top: 4rem; }
  .play-grid { grid-template-columns: .7fr 1.3fr; align-items: center; }
  .play-scenes { min-height: 440px; }
  .weapon-grid { grid-template-columns: repeat(3, 1fr); }
  .loadout-readout { grid-template-columns: .8fr 1.3fr 1fr; }
  .section-head { grid-template-columns: 1fr .75fr; align-items: end; }
  .maps-grid { grid-template-columns: .72fr 1.28fr; }
  .download-grid { grid-template-columns: 1fr .95fr; }
  .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; }
  .footer-inner { flex-direction: row; align-items: center; }
  .footer-inner>p { margin-left: auto; }
  .mobile-download { display: none; }
}
@media (min-width: 1024px) { .hero-copy { padding-left: 2rem; } .hero-image { background-position: center right; } .hero-hud { right: 8%; } }
@media (max-width: 767px) {
  .hero { min-height: 760px; }
  .hero-image { background-position: 70% center; }
  .hero-vignette { background: linear-gradient(90deg,rgba(9,11,16,.97) 0%,rgba(9,11,16,.73) 75%,rgba(9,11,16,.35) 100%), linear-gradient(0deg,rgba(9,11,16,.94),transparent 45%); }
  .hero h1 { font-size: clamp(4rem,20vw,6.5rem); }
  .hero-lead { font-size: .88rem; }
  .hero-side-shot { right: -7%; bottom: 12%; width: 56vw; opacity: .72; }
  .hero-action-shot { right: 2%; top: 17%; width: 30vw; opacity: .72; }
  .hero-bottom span:nth-child(2) { display: none; }
  .play { padding-top: 3rem; }
  .play-scenes { grid-template-columns: 1fr 1fr; }
  .scene-main { grid-row: span 2; }
  .scene-art { min-height: 145px; }
  .scene-main .scene-art { min-height: 300px; }
  .map-frame { margin-top: .5rem; }
  .footer-bottom { flex-direction: column; }
  .mobile-download { display: flex; }
}

/* Black and orange combat palette. */
:root { --lime: #ff9f1c; --orange: #ff4b24; --blue: #ffb45a; }
.hero { background: #090a0d; color: #f5f6f1; }
.hero-image { background-image: linear-gradient(90deg,rgba(9,10,13,.98) 0%,rgba(9,10,13,.68) 19%,rgba(9,10,13,.08) 58%,rgba(9,10,13,.38) 100%),url("assets/csgo-social.jpg"); }
.hero-vignette { background: linear-gradient(90deg,rgba(9,10,13,1) 0%,rgba(9,10,13,.9) 32%,rgba(9,10,13,.08) 74%,rgba(9,10,13,.5) 100%), linear-gradient(0deg,rgba(9,10,13,.92),transparent 40%); }
.hero-scanlines { opacity: .1; mix-blend-mode: screen; background: repeating-linear-gradient(0deg,transparent 0 3px,#ff9f1c 4px,transparent 5px); }
.hero-copy { color: #f5f6f1; }
.eyebrow, .hero h1 em, .hero-meta b, .scroll-cue { color: #ff9f1c; }
.season, .hero-meta small { color: #a7adb5; }
.hero h1 { color: #f5f6f1; text-shadow: 7px 7px 0 rgba(255,75,36,.48); }
.hero h1 em { text-shadow: 7px 7px 0 rgba(255,75,36,.65); }
.hero-lead { color: #c8cdd2; }
.outline-btn { border-color: rgba(255,255,255,.62); color: #fff; }
.hero-meta { border-color: rgba(255,255,255,.24); }
.hero-side-shot, .hero-action-shot { border-color: #ff9f1c; outline-color: #090a0d; box-shadow: 9px 9px 0 #ff4b24; }
.hero-action-shot { box-shadow: -8px 8px 0 #ff9f1c; }
.play { background: #111317; color: #f5f6f1; }
.play .section-kicker, .weapons .section-kicker, .download .section-kicker, .faq .section-kicker { color: #ff6a2d; }
.play h2 em, .faq h2 em, .maps h2 em { color: #ff8d24; }
.play-copy>p:not(.section-kicker) { color: #a9b0b7; }
.text-link { color: #fff; border-color: #ff4b24; }
.play-scenes .scene-card { border-color: #111317; outline-color: #ff9f1c; box-shadow: 8px 8px 0 #ff4b24; }
.weapons { background: #0b0d11; }
.section-head>p, .loadout-readout p { color: #a9b0b7; }
.weapon-card { background: #171a20; border-color: #3d3330; }
.weapon-card.active { background: #ff6a2d; border-color: #ff9f1c; color: #100d0c; }
.weapon-card.active .weapon-class, .weapon-card.active small { color: #321610; }
.loadout-readout { background: #07080b; border-color: #ff4b24; }
.loadout-readout h3 em, .loadout-bar strong { color: #ff9f1c; }
.loadout-bar i b { background: #ff6a2d; }
.maps { background: #090c10; }
.maps .section-kicker { color: #ff9f1c; }
.map-pills i, .route-red { background: #ff4b24; stroke: #ff4b24; }
.route-yellow, .site-yellow { stroke: #ff9f1c; }
.route-blue, .site-red { stroke: #ff7a30; }
.map-label, .map-frame { border-color: #4b3530; }
.download { background: #e84a24; }
.download-card { box-shadow: 10px 10px 0 #090a0d; }
.download-main { box-shadow: 4px 4px 0 #ff9f1c; }
.faq { background: #15171b; color: #f5f6f1; }
.faq-grid>div>p:not(.section-kicker), .faq-list details p { color: #a6adb5; }
.faq-list details { border-color: #36343a; }
.mobile-download { background: #111317; color: #fff; border-color: #42342d; }
.mobile-download small { color: #9ea5ad; }
.mobile-download a { background: #ff6a2d; color: #120c09; }
@media (max-width: 767px) {
  .hero-image { background-image: linear-gradient(0deg,rgba(9,10,13,.72),rgba(9,10,13,0) 58%),url("assets/csgo-social.jpg"); }
  .hero-vignette { background: linear-gradient(180deg,rgba(9,10,13,1) 0%,rgba(9,10,13,.98) 49%,rgba(9,10,13,.18) 80%), linear-gradient(0deg,rgba(9,10,13,.55),transparent 36%); }
}

/* Editorial game-poster hero: image first, interface second. */
.hero { min-height: 820px; padding-top: calc(var(--header) + 3.2rem); background: #e9e6de; color: #11151c; }
.hero-image { inset: auto 0 0 auto; width: 62%; height: calc(100% - var(--header)); opacity: 1; background-image: linear-gradient(90deg,rgba(233,230,222,.98) 0%,rgba(233,230,222,.5) 12%,rgba(233,230,222,0) 32%),url("assets/csgo-social.jpg"); background-position: center; background-size: cover; clip-path: polygon(13% 0,100% 0,100% 100%,0 100%); }
.hero-vignette { background: linear-gradient(90deg,rgba(233,230,222,1) 0%,rgba(233,230,222,.96) 35%,rgba(233,230,222,.08) 73%,rgba(233,230,222,0) 100%), linear-gradient(0deg,rgba(17,21,28,.18),transparent 30%); }
.hero-scanlines { opacity: .07; background: repeating-linear-gradient(135deg,transparent 0 8px,#11151c 9px,transparent 10px); mix-blend-mode: multiply; }
.hero-copy { max-width: 35rem; color: #11151c; padding: 3rem 0 2rem; }
.eyebrow { color: #eb4b2d; }
.live-dot { background: #eb4b2d; box-shadow: 0 0 0 4px rgba(235,75,45,.17); }
.season { color: #4c5661; }
.hero h1 { font-size: clamp(4.6rem,14vw,9.8rem); color: #11151c; text-shadow: 8px 8px 0 rgba(235,75,45,.35); }
.hero h1 em { color: #eb4b2d; text-shadow: 8px 8px 0 #c8ed39; }
.hero-lead { color: #303a44; max-width: 29rem; font-weight: 600; }
.hero-actions { position: relative; z-index: 5; }
.fire-btn { background: #c8ed39; box-shadow: 7px 7px 0 #eb4b2d; }
.outline-btn { border-color: #11151c; color: #11151c; }
.outline-btn:hover { border-color: #eb4b2d; color: #eb4b2d; }
.hero-meta { border-color: rgba(17,21,28,.3); }
.hero-meta b { color: #11151c; }
.hero-meta small { color: #58636d; }
.hero-hud { display: none; }
.hero-side-shot { right: 42%; top: 11%; bottom: auto; width: min(20vw,250px); aspect-ratio: 1.1; z-index: 4; border: 7px solid #f2efe8; outline: 2px solid #11151c; background-image: linear-gradient(0deg,rgba(17,21,28,.6),transparent 60%),url("assets/csgo-action.jpg"); transform: rotate(-7deg); box-shadow: 9px 9px 0 #eb4b2d; }
.hero-action-shot { right: 3%; top: auto; bottom: 7%; width: min(22vw,280px); aspect-ratio: 1.15; z-index: 4; border: 7px solid #f2efe8; outline: 2px solid #11151c; background-image: linear-gradient(0deg,rgba(17,21,28,.5),transparent 60%),url("assets/csgo-official.jpg"); transform: rotate(6deg); box-shadow: -8px 8px 0 #c8ed39; }
.hero-side-shot span, .hero-action-shot span { color: #f2efe8; background: #11151c; padding: .2rem .35rem; left: .45rem; bottom: .4rem; }
.bullet { background: #eb4b2d; box-shadow: 0 0 12px rgba(235,75,45,.65); z-index: 3; }
.bullet-one { right: 25%; top: 26%; width: 12rem; transform: rotate(-13deg); }
.bullet-two { right: 18%; top: 48%; width: 5rem; transform: rotate(14deg); }
.hero-bottom { color: #4c5661; }
.scroll-cue { color: #eb4b2d; }
.play { position: relative; }
.play-scenes .scene-card { border: 7px solid #eceee8; outline: 1px solid #151b23; box-shadow: 8px 8px 0 #c8ed39; }
@media (min-width: 768px) { .hero { min-height: 860px; padding-top: calc(var(--header) + 4.5rem); } .hero-copy { padding-left: 2rem; } }
@media (max-width: 767px) {
  .hero { min-height: 820px; padding-top: calc(var(--header) + 2.2rem); }
  .hero-image { width: 100%; height: 52%; inset: auto 0 0; clip-path: polygon(0 17%,100% 0,100% 100%,0 100%); background-image: linear-gradient(0deg,rgba(9,11,16,.55),rgba(9,11,16,0) 55%),url("assets/csgo-social.jpg"); background-position: 35% center; }
  .hero-vignette { background: linear-gradient(180deg,rgba(233,230,222,1) 0%,rgba(233,230,222,.98) 49%,rgba(233,230,222,.05) 76%), linear-gradient(0deg,rgba(9,11,16,.3),transparent 35%); }
  .hero-copy { padding: 1.2rem 0 0; }
  .hero h1 { font-size: clamp(4rem,20vw,6.8rem); }
  .hero-lead { max-width: 22rem; }
  .hero-side-shot { right: 3%; top: 28%; width: 31vw; border-width: 4px; }
  .hero-action-shot { right: -10%; bottom: 5%; width: 47vw; border-width: 4px; opacity: .9; }
  .bullet-one { right: 10%; top: 34%; width: 7rem; }
  .bullet-two { right: 28%; top: 52%; }
}

/* Final palette override (kept last for deterministic cascade). */
:root { --lime:#ff9f1c; --orange:#ff4b24; --blue:#ffb45a; }
.hero { background:#090a0d; color:#f5f6f1; }
.hero-image { background-image:linear-gradient(90deg,rgba(9,10,13,.98) 0%,rgba(9,10,13,.68) 22%,rgba(9,10,13,.08) 60%,rgba(9,10,13,.42) 100%),url("assets/csgo-social.jpg"); }
.hero-vignette { background:linear-gradient(90deg,rgba(9,10,13,1) 0%,rgba(9,10,13,.9) 32%,rgba(9,10,13,.08) 74%,rgba(9,10,13,.5) 100%),linear-gradient(0deg,rgba(9,10,13,.92),transparent 40%); }
.hero-copy { color:#f5f6f1; }
.eyebrow,.hero h1 em,.hero-meta b,.scroll-cue { color:#ff9f1c; }
.season,.hero-meta small { color:#a7adb5; }
.hero h1 { color:#f5f6f1; text-shadow:7px 7px 0 rgba(255,75,36,.48); }
.hero h1 em { text-shadow:7px 7px 0 rgba(255,75,36,.65); }
.hero-lead { color:#c8cdd2; }
.fire-btn { background:#ff6a2d; color:#100d0c; box-shadow:7px 7px 0 #ff9f1c; }
.fire-btn .fire-icon { border-color:#100d0c; }
.fire-btn:hover { filter:brightness(1.08); }
.outline-btn { border-color:rgba(255,255,255,.62); color:#fff; }
.hero-meta { border-color:rgba(255,255,255,.24); }
.hero-side-shot,.hero-action-shot { border-color:#ff9f1c; outline-color:#090a0d; box-shadow:9px 9px 0 #ff4b24; }
.hero-action-shot { box-shadow:-8px 8px 0 #ff9f1c; }
.play { background:#111317; color:#f5f6f1; }
.play h2 em,.faq h2 em,.maps h2 em { color:#ff8d24; }
.play-copy>p:not(.section-kicker),.section-head>p,.loadout-readout p { color:#a9b0b7; }
.play-scenes .scene-card { border-color:#111317; outline-color:#ff9f1c; box-shadow:8px 8px 0 #ff4b24; }
.weapons { background:#0b0d11; }
.weapon-card { background:#171a20; border-color:#3d3330; }
.weapon-card.active { background:#ff6a2d; border-color:#ff9f1c; color:#100d0c; }
.weapon-card.active .weapon-class,.weapon-card.active small { color:#321610; }
.loadout-readout { background:#07080b; border-color:#ff4b24; }
.loadout-readout h3 em,.loadout-bar strong { color:#ff9f1c; }
.loadout-bar i b { background:#ff6a2d; }
.maps { background:#090c10; }
.maps .section-kicker { color:#ff9f1c; }
.route-yellow,.site-yellow { stroke:#ff9f1c; }
.route-red { stroke:#ff4b24; }
.route-blue,.site-red { stroke:#ff7a30; }
.download { background:#e84a24; }
.faq { background:#15171b; color:#f5f6f1; }
.faq-grid>div>p:not(.section-kicker),.faq-list details p { color:#a6adb5; }
.faq-list details { border-color:#36343a; }
.mobile-download { background:#111317; color:#fff; border-color:#42342d; }
.mobile-download small { color:#9ea5ad; }
.mobile-download a { background:#ff6a2d; color:#120c09; }
@media (max-width:767px) {
  .hero-image { background-image:linear-gradient(0deg,rgba(9,10,13,.72),rgba(9,10,13,0) 58%),url("assets/csgo-social.jpg"); }
  .hero-vignette { background:linear-gradient(180deg,rgba(9,10,13,1) 0%,rgba(9,10,13,.98) 49%,rgba(9,10,13,.18) 80%),linear-gradient(0deg,rgba(9,10,13,.55),transparent 36%); }
}