*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#0b0b0b;color:#f2f2f2}
header{position:sticky;top:0;background:#111;padding:20px 8%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #333}
nav a{color:#ddd;text-decoration:none;margin:0 12px}
.btn{background:#c8a24a;color:#111;padding:12px 22px;text-decoration:none;font-weight:bold;border-radius:4px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid #2a2a2a;color:#c8a24a;text-decoration:none;margin-left:10px;background:transparent}
.social-icon svg{width:18px;height:18px;display:block}
.social-icon:hover{background:#111;border-color:#c8a24a}
.success-message{display:none;background:#161616;border:1px solid #2a2a2a;color:#e4ae32;padding:16px;border-radius:12px;margin-bottom:20px}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding:1.5rem 8% 0;max-width:1200px;margin:0 auto;align-items:center;text-align:center}
.trust-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:1.25rem}
.trust-icon{font-size:1.35rem;letter-spacing:0.1em;margin-bottom:0.5rem}
.trust-value{font-size:2rem;font-weight:700;margin-bottom:0.35rem}
.trust-copy{font-size:0.95rem;line-height:1.5}
.hero{display:grid;grid-template-columns:1fr 1.2fr;min-height:85vh}
.hero .left{padding:80px}
.hero h1{font-size:4rem;line-height:.95;margin:0}
.hero p{font-size:1.2rem;color:#bbb;max-width:520px}
.hero .hero-image{border-radius:20px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;max-width:700px;max-height:525px;margin-left:auto}
.hero .hero-image img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;max-width:700px;max-height:525px}
.placeholder{background:#000;border:2px dashed #555;display:flex;align-items:center;justify-content:center;color:#888}
.hero .placeholder{min-height:10%;font-size:2rem}
section{padding:70px 8%}
h2{text-align:center;font-size:2rem;letter-spacing:2px;color:#c8a24a}
.games{display:grid;grid-template-columns:repeat(7,1fr);gap:15px;margin-top:30px}
.game,.iconcard{background:#161616;padding:20px;text-align:center;border:1px solid #2a2a2a}
.game--logo{display:flex;align-items:center;justify-content:center;padding:12px;min-height:84px}
.game--logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.game--logo img{display:block;width:120px;height:54px;max-width:120px;max-height:54px;object-fit:contain;object-position:center}
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project .placeholder{aspect-ratio:1}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery .gallery-item{background:#161616;overflow:hidden;border:1px solid #2a2a2a;border-radius:14px;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox-trigger{display:block;width:100%;height:100%;cursor:zoom-in}
.lightbox-trigger img{transition:transform .25s ease}
.lightbox-trigger:hover img{transform:scale(1.03)}
.lightbox{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:5vh 5vw}
.lightbox[hidden]{display:none}
.lightbox img{width:auto;height:auto;max-width:90vw;max-height:90vh;object-fit:contain;border:1px solid #444;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.lightbox-close{position:absolute;top:22px;right:28px;width:44px;height:44px;border:1px solid #555;border-radius:50%;background:#161616;color:#f2f2f2;font-size:2rem;line-height:1;cursor:pointer}
.lightbox-close:hover,.lightbox-close:focus{border-color:#c8a24a;color:#c8a24a}
.gallery-image--kx-droid{object-position:center 12%}
.projects-hidden{display:none}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.faq details{background:#161616;padding:15px;margin:10px 0}
form{display:grid;gap:15px;max-width:700px;margin:auto}
input,textarea{padding:12px;background:#161616;color:#fff;border:1px solid #444}
footer{text-align:center;padding:40px;background:#111;color:#888}
.page-intro{max-width:900px;margin:0 auto 30px;text-align:center;color:#bbb;line-height:1.7}
.project-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.project-highlights .iconcard{padding:24px}
@media (max-width:900px) {
  header{padding:12px 6%}
  nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  nav a, nav .btn, nav .social-icon{margin:6px 6px}
  .hero{grid-template-columns:1fr;min-height:65vh}
  .hero .left{padding:32px}
  .hero h1{font-size:2.4rem}
  .hero .hero-image{min-height:220px}
  .games,.projects,.why,.levels,.gallery,.process,.project-highlights{grid-template-columns:1fr 1fr;gap:12px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .gallery-item{border-radius:10px}
  .trust{grid-template-columns:1fr;gap:12px;padding:1rem 6% 0}
  .btn{padding:10px 14px}
  form{padding:0 10px}
  .iconcard, .game{padding:16px}
}