*{box-sizing:border-box}
:root{
  --bg:#04111e;--bg2:#061827;--panel:#071c2e;--panel2:#0a243b;
  --line:#123d5d;--text:#fff;--muted:#a9c5d8;--blue:#0798ff;--cyan:#18d7ff;
  --green:#36c517;--orange:#ff8c00;--purple:#8f30ff;--yellow:#ffb900
}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(#04111e,#061827 54%,#04111e);color:var(--text);font-family:Nunito,Arial,sans-serif}
img{display:block;max-width:100%}
a{color:inherit}.container{width:min(1440px,calc(100% - 40px));margin:auto}

.site-header{position:sticky;top:0;z-index:100;background:rgba(3,13,24,.96);border-bottom:1px solid #0d3551;backdrop-filter:blur(14px)}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;text-decoration:none;font-family:"Press Start 2P",monospace;font-size:20px;text-shadow:0 3px 0 #000;white-space:nowrap}
.brand-pixel{color:#fff}.brand-bonko{color:var(--yellow);margin-left:4px}
nav{display:flex;align-items:center;gap:30px}
nav a{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:900;color:#e6f5ff}
nav a:hover{color:var(--cyan)}
.menu-btn{display:none;border:1px solid #17547d;background:#092038;color:#fff;border-radius:8px;padding:8px 12px;font-size:20px}

.hero{position:relative;background:#05111b;overflow:hidden}
.hero>img{width:100%;height:auto}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,rgba(3,14,24,.55));pointer-events:none}
.hero-actions{position:absolute;z-index:3;left:50%;bottom:6%;transform:translateX(-50%);display:flex;gap:16px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-transform:uppercase;font-weight:900;border-radius:8px;padding:15px 24px;border:1px solid rgba(255,255,255,.18);box-shadow:0 5px 0 rgba(0,0,0,.44),0 12px 28px rgba(0,0,0,.24)}
.youtube{background:linear-gradient(#15a7ff,#0068d6)}.community-btn{background:linear-gradient(#58d31d,#239009)}
.btn.small{padding:11px 16px;font-size:12px}

.feature-strip{position:relative;z-index:5;margin-top:-8px;padding:0 0 32px;background:linear-gradient(transparent,#04111e 42%)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feature{min-height:88px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:17px 18px;border-radius:10px;text-decoration:none;border:1px solid;box-shadow:0 13px 30px rgba(0,0,0,.24)}
.feature-icon{font-size:34px}.feature strong{display:block;text-transform:uppercase;font-size:16px}.feature span{display:block;color:#d3e5ef;font-size:13px;margin-top:3px}.feature>b{font-size:30px;font-weight:700}
.feature.blue{background:linear-gradient(135deg,#062746,#071a31);border-color:#078cff}
.feature.green{background:linear-gradient(135deg,#073a22,#071f19);border-color:#27b744}
.feature.orange{background:linear-gradient(135deg,#432106,#241307);border-color:#f17a00}
.feature.purple{background:linear-gradient(135deg,#2b0c4c,#180a2e);border-color:#8837f7}

.main-content{padding:34px 0 48px}
.content-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(300px,.85fr);gap:28px}
.videos-panel,.community-panel{min-width:0}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;border-left:5px solid var(--blue);padding-left:12px}
.section-title-row h2,.community-panel h2{font-size:26px;text-transform:uppercase;margin:0;letter-spacing:.01em}
.section-title-row>a{font-size:12px;text-transform:uppercase;font-weight:900;text-decoration:none;padding:9px 12px;border:1px solid #138bd2;border-radius:6px;color:#6bd7ff}

.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.video-card{text-decoration:none;background:#071b2d;border:1px solid #113b5d;border-radius:10px;padding:8px;min-width:0;transition:.18s transform,.18s border-color}
.video-card:hover{transform:translateY(-3px);border-color:#138ee0}
.thumb{aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:7px;background:#0c263c}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 50%),linear-gradient(to top,rgba(0,0,0,.48),transparent 50%)}
.thumb span{position:absolute;z-index:2;left:10px;top:10px;font-family:"Press Start 2P",monospace;font-size:clamp(11px,1.25vw,20px);line-height:1.25;color:#ffd500;text-shadow:0 3px 0 #000}
.thumb i{position:absolute;z-index:2;right:7px;bottom:7px;font-style:normal;background:rgba(0,0,0,.82);padding:3px 6px;border-radius:4px;font-size:11px}
.video-card h3{font-size:14px;margin:10px 2px 4px}.video-card p{font-size:12px;color:var(--muted);margin:0 2px 4px}

.community-panel{border-left:1px solid #123b59;padding-left:25px}
.community-panel h2{border-left:5px solid var(--blue);padding-left:12px;margin-bottom:16px}
.socials{display:grid;gap:10px}
.social{display:flex;align-items:center;justify-content:space-between;gap:15px;border-radius:7px;padding:12px 14px;text-decoration:none;font-size:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.social span{font-size:12px;opacity:.9}
.youtube-link{background:linear-gradient(90deg,#e1151c,#a80e17)}.twitch-link{background:linear-gradient(90deg,#6628be,#41207a)}
.discord-link{background:linear-gradient(90deg,#2764d7,#1e459e)}.telegram-link{background:linear-gradient(90deg,#0ca6d8,#0874aa)}
.instagram-link{background:linear-gradient(90deg,#ff5b1e,#bd0bc7)}

.about-section{padding:20px 0 52px}.about-card{display:grid;grid-template-columns:240px minmax(0,1.3fr) minmax(280px,.8fr);gap:28px;align-items:center;background:linear-gradient(135deg,#08223a,#071827);border:1px solid #174b70;border-radius:14px;padding:24px}
.avatar-wrap{height:220px;border-radius:10px;overflow:hidden;background:#0b2b46}.avatar-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.eyebrow{font-family:"Press Start 2P",monospace;color:#22bdff;font-size:10px}
.about-copy h2,.stream-card h2,.contact-card h2{font-size:28px;margin:9px 0 10px}.about-copy p,.stream-card p,.contact-card p{color:var(--muted);line-height:1.65}
.about-stats{display:grid;gap:9px}.about-stats div{background:#06192a;border:1px solid #123f63;border-radius:8px;padding:15px}.about-stats strong{display:block;color:#52c8ff;font-size:14px}.about-stats span{color:var(--muted);font-size:12px}

.streams-section,.contact-section{padding:0 0 42px}
.stream-card,.contact-card{display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:13px;padding:28px 30px;border:1px solid #19547d;background:linear-gradient(135deg,#07233b,#0a3654)}
.contact-card{background:linear-gradient(135deg,#071d30,#092944)}
.contact-email{font-weight:900;font-size:19px;color:#59d6ff;text-decoration:none;border:1px solid #158ac6;padding:14px 18px;border-radius:8px;background:#051a2b}

footer{background:#020b13;border-top:1px solid #103654;padding:26px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;color:#8ea9ba;font-size:12px}.footer-brand{font-size:15px}.footer-links{display:flex;gap:18px}.footer-links a{text-decoration:none;color:#9cd9ff}

@media(max-width:1120px){
 nav{gap:18px}.feature-grid{grid-template-columns:repeat(2,1fr)}
 .content-grid{grid-template-columns:1fr}.community-panel{border-left:0;padding-left:0}
 .video-grid{grid-template-columns:repeat(2,1fr)}
 .about-card{grid-template-columns:200px 1fr}.about-stats{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
 .menu-btn{display:block}nav{display:none;position:absolute;top:74px;left:20px;right:20px;background:#061827;border:1px solid #15517a;border-radius:10px;padding:14px;flex-direction:column;align-items:stretch}
 nav.open{display:flex}.hero-actions{bottom:4%}.btn{padding:12px 17px;font-size:12px}
}
@media(max-width:640px){
 .container{width:min(100% - 24px,1440px)}.brand{font-size:15px}.hero-actions{position:static;transform:none;background:#071827;padding:12px;justify-content:center;flex-wrap:wrap}
 .hero:after{display:none}.feature-strip{margin-top:0;padding-top:14px}.feature-grid,.video-grid{grid-template-columns:1fr}
 .about-card{grid-template-columns:1fr}.avatar-wrap{height:280px}.about-stats{grid-template-columns:1fr}
 .stream-card,.contact-card,.footer-inner{align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap}
 .section-title-row h2,.community-panel h2{font-size:21px}
}