/* Reset & base */
* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {font-family:'Montserrat', sans-serif; background:#000; color:#fff; line-height:1.6;}
a {color:#ff4444; text-decoration:none;}
h1,h2 {font-weight:800; letter-spacing:.05em;}
img {max-width:100%; display:block;}

/* Layout helpers */
.container{width:90%; max-width:1200px; margin-inline:auto; padding-inline:1rem;}
header{position:sticky; top:0; z-index:100; background:#000;}

/* Navigation */
.nav-bar{display:flex; justify-content:space-between; align-items:center; padding-block:1rem; gap:.5rem;}
.logo{font-weight:800; font-size:1.25rem; letter-spacing:.06em;}
nav{display:flex; gap:1.5rem; transition:transform .3s ease;}
nav a{color:#fff; font-weight:600; text-transform:uppercase; letter-spacing:.04em; position:relative;}
nav a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:#ff4444; transition:width .3s;}
nav a:hover::after{width:100%;}
nav a:hover{opacity:.8;}

/* Burger */
.burger{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer;}
.burger span{width:24px; height:3px; background:#fff; border-radius:2px;}

/* Lang switcher */
.lang-switch{display:flex; align-items:center; gap:.25rem;}
.lang-switch button{background:none; border:none; color:#ff4444; font-weight:700; cursor:pointer;}
.lang-switch button.active{color:#fff; text-decoration:underline;}

/* Noise overlay */
.noise-overlay{pointer-events:none; position:fixed; inset:0; background:url('../images/noise.png') center/cover repeat; mix-blend-mode:screen; opacity:.06;}

/* Hero */
.hero{min-height:100vh; display:flex; align-items:center; justify-content:center; background:url('../images/hero_bg.png') center/cover no-repeat; text-align:center; position:relative;}
.hero-inner{max-width:700px;}
.glitch{position:relative; font-size:5rem;}
.glitch::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120%; height:120%; background:url('../images/FON_BG.png') center/contain no-repeat; mix-blend-mode:lighten; opacity:.22; z-index:-1;}
.subtitle{margin-top:.5rem; margin-bottom:1.5rem;}

/* Buttons */
.btn{display:inline-block; padding:.75rem 1.5rem; border:none; border-radius:4px; font-weight:600; text-transform:uppercase; cursor:pointer;}
.btn.primary{background:#ff4444; color:#fff;}
.btn.primary:hover{background:#cc3333;}
.btn.secondary{background:#111; color:#ff4444; border:1px solid #ff4444;}
.btn.secondary:hover{background:#ff4444; color:#fff;}

/* Sections */
section{padding:5rem 0;}
.trailer{background:#111;}

/* Grid screenshots */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem;}
.grid img{border-radius:6px;}

/* Video wrapper */
.video-wrapper{position:relative; padding-bottom:56.25%; height:0;}
.video-wrapper iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

/* Responsive adjustments */
@media(max-width:768px){
    nav{position:fixed; inset:0 0 auto auto; top:64px; background:#000; flex-direction:column; align-items:flex-start; padding:1rem; width:60%; max-width:300px; transform:translateX(100%);}
    nav.open{transform:translateX(0);}
    .burger{display:flex;}
}

@media(max-width:480px){
    .glitch{font-size:3rem;}
    section{padding:3rem 0;}
}