:root{--red:#d0182f;--red2:#ff1738;--ink:#07080a;--panel:#0e1013;--line:#25282d;--white:#f4f4f3;--muted:#a5a8ad;--head:'Barlow Condensed',sans-serif;--body:'Inter',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--body);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 15%,rgba(208,24,47,.09),transparent 28%);z-index:20}
.noise{position:fixed;inset:0;opacity:.028;pointer-events:none;z-index:30;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.site-header{height:88px;position:absolute;z-index:40;top:0;left:0;width:100%;display:flex;align-items:center;padding:0 clamp(24px,4.5vw,84px);border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(3,4,5,.82),rgba(3,4,5,.15))}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff}
.brand img{width:48px;height:55px;object-fit:contain}
.brand span{display:flex;flex-direction:column}
.brand b{font:800 26px/20px var(--head);letter-spacing:.1em;text-transform:uppercase}
.brand small{font:600 8px/16px var(--body);letter-spacing:.35em;color:var(--red2)}
nav{margin:auto;display:flex;height:100%;align-items:center;gap:42px}
nav a{font:600 12px var(--body);letter-spacing:.15em;text-transform:uppercase;color:#d7d7d8;text-decoration:none;position:relative}
nav a:after{content:"";height:2px;width:0;background:var(--red2);position:absolute;left:0;bottom:-12px;transition:.25s}
nav a:hover:after{width:100%}
.header-cta{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.22);padding:13px 18px;font:600 11px var(--body);letter-spacing:.13em;text-transform:uppercase}
.header-cta i,.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red2);box-shadow:0 0 12px var(--red2);margin-right:10px}
.live-status{min-width:158px;text-align:center;transition:border-color .25s,background .25s,color .25s}
.live-status.is-offline{color:#a8aaae;border-color:rgba(255,255,255,.14);background:rgba(0,0,0,.2)}
.live-status.is-offline i{background:#777;box-shadow:none}
.live-status.is-live{border-color:rgba(255,23,56,.7);background:rgba(255,23,56,.12)}
.live-status.is-live i{animation:livePulse 1.3s infinite}
@keyframes livePulse{50%{opacity:.45;box-shadow:0 0 20px var(--red2)}}
.menu-toggle{display:none}
.hero{height:min(900px,100vh);min-height:720px;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,#07080a 0%,rgba(7,8,10,.9) 32%,rgba(7,8,10,.2) 69%,rgba(7,8,10,.4)),linear-gradient(0deg,#07080a 0%,transparent 30%),url('lobby.webp') center/cover no-repeat;filter:saturate(.65) contrast(1.1)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(to right,black,transparent 70%)}
.hero-scan{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--red2),transparent);opacity:.35;animation:scan 8s linear infinite}
@keyframes scan{from{left:0}
to{left:100%}
}
.hero-content{width:min(1320px,90%);margin:70px auto 0;position:relative;z-index:2}
.eyebrow{font:600 11px var(--body);letter-spacing:.3em;color:#c7c8ca;margin-bottom:25px}
.hero h1,.section h2,.final-cta h2{font:700 clamp(70px,8.6vw,148px)/.77 var(--head);letter-spacing:-.035em;margin:0;text-transform:uppercase}
.hero h1 em,.section h2 em,.final-cta h2 em{font-style:normal;color:var(--red2);text-shadow:0 0 25px rgba(255,23,56,.24)}
.hero p{max-width:610px;color:#c0c2c5;font-size:16px;line-height:1.8;margin:38px 0}
.hero-actions{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-width:220px;padding:18px 22px;text-decoration:none;text-transform:uppercase;font:700 12px var(--body);letter-spacing:.12em;transition:.25s}
.btn.primary{color:#fff;background:var(--red);border:1px solid var(--red)}
.btn.primary:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 12px 35px rgba(208,24,47,.24)}
.btn.ghost{color:#fff;border:1px solid #3a3c40;background:rgba(10,11,13,.5)}
.btn.ghost:hover{border-color:#fff}
.hero-meta{display:flex;gap:0;margin-top:60px}
.hero-meta span{min-width:145px;border-left:1px solid var(--line);padding-left:18px;font:700 16px var(--head);letter-spacing:.06em}
.hero-meta small{display:block;font:500 8px var(--body);letter-spacing:.25em;color:#777b81;margin-bottom:8px}
.side-label{position:absolute;right:34px;bottom:90px;writing-mode:vertical-rl;font:600 9px var(--body);letter-spacing:.28em;color:#86898d}
.side-label i{display:inline-block;height:65px;width:1px;background:var(--red);margin-top:15px}
.route{position:absolute;width:35vw;height:180px;right:5%;top:30%;border-top:1px dashed rgba(255,23,56,.35);transform:rotate(-12deg);border-radius:50%}
.route i,.route b{position:absolute;width:7px;height:7px;background:var(--red2);border-radius:50%;top:-4px}
.route i{left:30%}
.route b{right:15%}
.section{position:relative;padding:140px max(5vw,24px);border-top:1px solid #17191d}
.section-number{position:absolute;right:5vw;top:80px;font:700 11px var(--body);letter-spacing:.2em;color:#55585d}
.section-number:before{content:'SECTION // ';color:var(--red)}
.profile{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;max-width:1500px;margin:auto}
.section h2{font-size:clamp(55px,6.7vw,100px);line-height:.84}
.profile-copy>p{max-width:580px;color:var(--muted);line-height:1.9;margin:36px 0 45px}
.stat-row{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row div{padding:22px 35px 22px 0;min-width:120px;border-right:1px solid var(--line);margin-right:35px}
.stat-row strong{display:block;font:700 27px var(--head)}
.stat-row span{font-size:8px;letter-spacing:.22em;color:#777}
.profile-visual{position:relative}
.image-frame{position:relative;padding:12px;border:1px solid #292c31;background:#0d0f12}
.image-frame:before{content:"";position:absolute;inset:12px;background:linear-gradient(0deg,rgba(8,9,11,.45),transparent);z-index:1}
.image-frame img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.65) contrast(1.12)}
.corner{position:absolute;width:34px;height:34px;z-index:3}
.corner.tl{left:-1px;top:-1px;border-left:2px solid var(--red2);border-top:2px solid var(--red2)}
.corner.br{right:-1px;bottom:-1px;border-right:2px solid var(--red2);border-bottom:2px solid var(--red2)}
.visual-tag{position:absolute;right:-20px;bottom:-28px;background:#111317;border-left:3px solid var(--red);padding:18px 24px;z-index:4;min-width:235px}
.visual-tag small{display:block;color:#6f7379;font-size:8px;letter-spacing:.25em;margin-bottom:8px}
.visual-tag b{font:700 17px var(--head);letter-spacing:.06em}
.channels{background:#0a0b0d}
.section-heading{max-width:1350px;margin:0 auto 70px}
.channel-grid{max-width:1350px;margin:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.channel{min-height:150px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:30px;color:#fff;text-decoration:none;transition:.25s;position:relative;overflow:hidden}
.channel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(208,24,47,.16),transparent);transform:translateX(-100%);transition:.35s}
.channel:hover:before{transform:translateX(0)}
.channel:hover{border-color:#5b1d27}
.channel .platform{width:58px;height:58px;border:1px solid #34373c;display:grid;place-items:center;color:var(--red2);font:700 15px var(--head);margin-right:23px}
.channel div{position:relative}
.channel small{display:block;color:#777b81;font-size:8px;letter-spacing:.28em;margin-bottom:10px}
.channel strong{font:600 clamp(18px,2vw,27px) var(--head);letter-spacing:.03em}
.channel>b{margin-left:auto;color:#676a70;font-size:24px;position:relative}
.gallery{max-width:1500px;margin:auto}
.gallery-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.gallery figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:#101216}
.gallery img{width:100%;height:100%;min-height:480px;object-fit:cover;display:block;filter:saturate(.55) brightness(.68);transition:.5s}
.gallery figure:hover img{transform:scale(1.025);filter:saturate(.8) brightness(.78)}
.gallery figcaption{position:absolute;left:25px;right:25px;bottom:22px;padding:18px 20px;background:rgba(8,9,11,.82);border-left:2px solid var(--red)}
.gallery figcaption small{display:block;color:#8b8e93;font-size:8px;letter-spacing:.25em;margin-bottom:7px}
.gallery figcaption b{font:700 18px var(--head);letter-spacing:.05em}
.final-cta{min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(circle,rgba(208,24,47,.11),transparent 42%)}
.final-cta>img{position:absolute;width:420px;opacity:.025}
.final-cta h2{font-size:clamp(64px,8vw,125px);position:relative}
.final-cta .btn{margin-top:45px;position:relative}
.reticle{position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.04);border-radius:50%}
.reticle:before,.reticle:after{content:"";position:absolute;inset:70px;border:1px solid rgba(208,24,47,.08);border-radius:50%}
.reticle:after{inset:150px}
footer{padding:35px max(5vw,24px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#777b81;font-size:10px;letter-spacing:.1em}
.footer-brand img{width:34px;height:40px}
.footer-brand b{font-size:19px}
.footer-brand small{font-size:6px}
footer>a:last-child{color:#a9acb0;text-decoration:none;font-weight:700}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.site-header{height:74px;padding:0 22px}
.brand img{width:39px;height:46px}
.brand b{font-size:22px}
.header-cta{display:flex;position:absolute;right:76px;top:23px;align-items:center;justify-content:center;min-width:0;padding:8px 10px;font-size:8px;letter-spacing:.1em;z-index:81}
.header-cta i{width:6px;height:6px;margin-right:7px}
.menu-toggle{display:block;margin-left:auto;background:none;border:0;width:38px;height:38px;position:relative}
.menu-toggle span{position:absolute;right:2px;width:27px;height:1px;background:#fff}
.menu-toggle span:first-child{top:13px}
.menu-toggle span:last-child{top:23px;width:19px}
nav{position:absolute;top:74px;left:0;width:100%;height:auto;background:#0a0b0d;display:flex;flex-direction:column;gap:0;align-items:stretch;padding:0 22px;max-height:0;overflow:hidden;transition:.3s}
nav.open{max-height:300px;padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
nav a{padding:16px 0}
.hero{min-height:760px}
.hero-bg{background:linear-gradient(90deg,rgba(7,8,10,.96),rgba(7,8,10,.52)),linear-gradient(0deg,#07080a,transparent 45%),url('lobby.webp') 58% center/cover}
.hero-content{margin-top:50px}
.hero h1{font-size:clamp(63px,18vw,98px)}
.hero p{font-size:14px;margin:28px 0}
.hero-actions{flex-direction:column;align-items:flex-start}
.hero-meta{margin-top:45px;flex-wrap:wrap;gap:20px}
.hero-meta span{min-width:110px}
.side-label,.route{display:none}
.section{padding:100px 22px}
.profile{grid-template-columns:1fr;gap:65px}
.visual-tag{right:10px}
.channel-grid{grid-template-columns:1fr}
.gallery-grid{grid-template-columns:1fr}
.gallery img{min-height:330px}
.final-cta{padding:80px 22px;min-height:540px}
footer{flex-direction:column;gap:25px;text-align:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.hero-scan{display:none}
.reveal{opacity:1;transform:none;transition:none}
}

/* Platform CTAs and PUBG Mobile download mission */
.hero-actions{flex-wrap:wrap}
.hero-actions .btn{min-width:205px;gap:28px}
.game-download{display:block;text-align:center}
.download-copy{max-width:1120px;margin:0 auto}
.download-copy .eyebrow{justify-content:center}
.download-copy>p{max-width:720px;color:var(--muted);line-height:1.9;margin:34px auto 48px}
.download-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:28px;max-width:920px;margin:0 auto}
.download-logo{height:126px;display:flex;align-items:center;justify-content:center;padding:24px;border:1px solid #292c31;background:#0d0f12;text-decoration:none;transition:.25s}
.download-logo img{display:block;width:100%;max-width:220px;max-height:74px;object-fit:contain}
.download-logo.pubg-link img{max-width:190px;max-height:82px}
.download-logo:hover{border-color:var(--red);transform:translateY(-4px);background:#121419;box-shadow:0 16px 35px rgba(0,0,0,.28)}
.download-logo:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.download-note{display:block;margin-top:20px;color:#666a70;font:600 8px var(--body);letter-spacing:.18em;line-height:1.6}
@media(max-width:900px){.hero-actions .btn{width:100%;max-width:330px}.download-copy h2{font-size:clamp(52px,16vw,78px)}.download-links{grid-template-columns:1fr;max-width:360px;gap:14px}.download-logo{height:110px}.download-copy>p{margin-bottom:38px}}
