/* Fonts (self-hosted, latin subset) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/dm-sans-latin.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/space-grotesk-latin.woff2') format('woff2')}

:root{--bg:#080b12;--panel:#111621;--muted:#a0a8b8;--accent:#a5f75b;--line:#29303d;--display:'Space Grotesk','DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:#f7f8fc;font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.accent{color:var(--accent)}

/* Header */
header{height:82px;position:sticky;top:0;z-index:20;background:rgba(8,11,18,.91);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px)}
.logo{font-family:var(--display);font-weight:700;font-size:27px;letter-spacing:-1.7px}
.logo span{color:var(--accent)}
.logo .reg{color:#fff;font-size:12px;vertical-align:top;margin-left:4px;letter-spacing:0}
nav{display:flex;gap:35px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.06em}
nav a:hover{color:var(--accent)}
nav a.btn:hover{color:#10160b}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 24px;border-radius:3px;background:var(--accent);color:#10160b;font-weight:800;font-size:12px;letter-spacing:.07em;text-transform:uppercase;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-3px);background:#c0ff85}
.btn.ghost{background:transparent;color:#fff;border:1px solid #8d98a8}
.btn.ghost:hover{border-color:var(--accent)}

/* Hero */
.hero{min-height:740px;position:relative;overflow:hidden;display:flex;align-items:center;padding:90px max(5vw,24px) 120px}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080b12 0%,#080b12f2 31%,#080b1270 64%,#080b1240 100%),url('../images/slide1_0.webp') center right/cover no-repeat;opacity:.9}
.hero:after{content:'';position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,var(--bg))}
.hero-inner{position:relative;z-index:1;max-width:850px}
.eyebrow{color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.23em;text-transform:uppercase}
.hero h1,h2{font-family:var(--display);text-transform:uppercase;letter-spacing:-.065em;line-height:.96}
.hero h1{font-size:clamp(52px,8.5vw,132px);margin:24px 0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:560px;color:#c5cad4;font-size:18px;line-height:1.7}
.actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}
.hero-badge{margin-top:60px;display:flex;align-items:center;gap:18px}
.hero-badge strong{font-family:var(--display);font-size:43px;letter-spacing:-.07em;white-space:nowrap}
.hero-badge span{max-width:160px;color:#c4cbd5;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.divider-vert{width:1px;height:50px;background:#67707c;flex:none}

/* Layout */
.wrap{max-width:1450px;margin:auto;padding:0 5vw}
section{padding:110px 0}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:45px}
.section-top h2,h2{font-size:clamp(44px,5.5vw,80px);margin:15px 0 0}
.section-top p{max-width:390px;color:var(--muted);line-height:1.7}

/* Games */
.games{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.game{position:relative;overflow:hidden;min-height:440px;background:var(--panel);border:1px solid var(--line)}
.game img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .5s}
.game:hover img{transform:scale(1.045)}
.game:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#05080fee,transparent 57%)}
.game-info{position:absolute;bottom:30px;left:30px;right:30px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:10px}
.game-info h3{font-family:var(--display);font-size:33px;letter-spacing:-.04em;margin:8px 0}
.game-info small{font-weight:700;color:var(--accent);letter-spacing:.15em}
.arrow{border:1px solid #ffffff70;border-radius:50%;width:47px;height:47px;flex:none;display:grid;place-items:center;font-size:24px}
.arrow:hover{border-color:var(--accent);color:var(--accent)}
.marquee{border-block:1px solid var(--line);padding:23px 24px;color:#aab3c1;letter-spacing:.18em;font-size:12px;text-align:center;line-height:2}
.marquee b{color:var(--accent);padding:0 28px}

/* About */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.intro p{font-size:18px;color:var(--muted);line-height:1.8}
.intro-art{min-height:450px;position:relative;background:url('../images/slide2_23.webp') center/cover;border:1px solid var(--line)}
.intro-art:after{content:'CREATIVITY × TECHNOLOGY';position:absolute;bottom:0;left:0;right:0;padding:25px;background:linear-gradient(transparent,#070b14);font-size:12px;font-weight:800;letter-spacing:.2em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.stats strong{font-family:var(--display);font-size:30px;color:var(--accent)}
.stats span{display:block;color:#a8b0bc;font-size:12px;margin-top:6px}

/* Process */
.process{background:#101520}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:45px}
.step{padding:30px 24px;min-height:225px;background:#171e2b;border:1px solid #293241}
.step small{font-weight:800;color:var(--accent);letter-spacing:.15em}
.step h3{font-family:var(--display);font-size:23px;margin:42px 0 10px}
.step p{font-size:14px;line-height:1.7;color:#a8b0bc}

/* Banner */
.banner{padding:100px 5vw;background:linear-gradient(110deg,#182719,#0c1516 70%);border-block:1px solid #3b5931;text-align:center}
.banner h2{font-size:clamp(46px,6.6vw,100px);margin:20px auto;max-width:1050px}
.banner p{color:#c5cfc7;max-width:570px;margin:0 auto 30px;line-height:1.7}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.contact p{color:var(--muted);line-height:1.8}
.contact-card{background:#141b27;padding:40px;border:1px solid var(--line)}
.contact-card label{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;margin:0 0 10px}
.contact-card input,.contact-card textarea{display:block;width:100%;background:#0b1019;border:1px solid #303949;color:#fff;padding:14px;font:inherit;margin-bottom:18px;border-radius:2px}
.contact-card input:focus,.contact-card textarea:focus{border-color:var(--accent);outline:none}
.contact-card textarea{min-height:110px;resize:vertical}
.contact-card .btn{border:0;cursor:pointer;width:100%}
.contact-card .note{font-size:11px;margin-bottom:0}

/* Footer */
footer{border-top:1px solid var(--line);padding:40px 5vw;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#9da6b6;font-size:12px}

/* Mobile menu */
.menu{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;padding:4px 8px}

/* 404 */
.notfound{min-height:calc(100vh - 82px - 100px);display:flex;align-items:center;padding:90px max(5vw,24px)}
.notfound h1{font-family:var(--display);text-transform:uppercase;letter-spacing:-.065em;line-height:.96;font-size:clamp(52px,8.5vw,132px);margin:24px 0}
.notfound h1 em{font-style:normal;color:var(--accent)}
.notfound p{max-width:560px;color:#c5cad4;font-size:18px;line-height:1.7}

@media(max-width:800px){
  header{height:70px}
  nav{display:none;position:absolute;top:70px;left:0;right:0;padding:24px;background:#101520;flex-direction:column;align-items:start}
  nav.open{display:flex}
  .menu{display:block}
  .hero{min-height:680px}
  .hero:before{background:linear-gradient(90deg,#080b12e8,#080b12a8),url('../images/slide1_0.webp') center/cover}
  .games,.intro,.contact{grid-template-columns:1fr}
  .game{min-height:340px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .section-top{display:block}
  section{padding:75px 0}
  .intro-art{min-height:300px}
  .contact{gap:30px}
  .marquee b{padding:0 12px}
}
@media(max-width:480px){
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr);gap:12px}
  .stats strong{font-size:22px}
  .game-info{left:20px;right:20px;bottom:20px}
  .game-info h3{font-size:26px}
  .hero-badge strong{font-size:33px}
  .contact-card{padding:22px}
  footer{flex-direction:column;align-items:start}
}