:root {
  --accent: #FF6B35;
  --dark: #0f1724;
  --muted: #6b7280;
  --bg: #fff8f4;
  --card: #ffffff;
  --shadow: 0 8px 26px rgba(17,24,39,0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}

* { box-sizing: border-box }
body { margin:0; background: var(--bg); color: var(--dark); line-height:1.55 }
.container { max-width:1100px; margin:0 auto; padding:0 16px }

/* Header */
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:18px 0 }

/* Logo */
.logo { display:flex; align-items:center; text-decoration:none }
.logo-icon { font-size:28px; margin-right:8px }
.logo-text { display:flex; flex-direction:column; line-height:1.1 }
.brand-main { font-size:20px; font-weight:800; color:var(--dark) }
.brand-accent { font-size:20px; font-weight:900; color:var(--accent); text-transform:uppercase }
.brand-sub { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:1px; margin-top:2px }

.main-nav a { margin-left:18px; color:var(--dark); text-decoration:none; font-weight:600 }
.main-nav a:hover { color: var(--accent) }
.btn-outline { padding:8px 12px; border:1px solid var(--accent); border-radius:8px; color:var(--accent); text-decoration:none }
.btn-outline:hover { background:var(--accent); color:#fff }
.nav-toggle { display:none; background:none; border:0; font-size:24px; cursor:pointer }

/* Hero */
.hero { background:linear-gradient(90deg, rgba(255,107,53,0.08), rgba(255,255,255,0)); padding:56px 0; border-bottom:1px solid rgba(0,0,0,0.04) }
.hero-inner { display:flex; gap:32px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap }
.hero-left { flex:1; min-width:280px }
.hero-form { flex:1; min-width:300px; max-width:420px; width:100% }
.hero-title { font-size:38px; margin:0 0 12px; color:var(--dark) }
.hero-sub { color:var(--muted); margin-bottom:18px }
.btn-primary { background:var(--accent); color:#fff; padding:12px 20px; border-radius:10px; border:0; font-weight:700; text-decoration:none; display:inline-block }
.btn-primary:hover { background:#e65a27 }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:24px }
.card { background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow) }

/* Projects */
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; clear:both }
.project-img { width:100%; height:180px; object-fit:cover; border-radius:10px; aspect-ratio:16/9; display:block }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px }
.service-box { background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start }
.service-icon { font-size:28px; color:var(--accent); width:48px; height:48px; border-radius:8px; background:rgba(255,107,53,0.06); display:flex; align-items:center; justify-content:center }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:16px; clear:both }
.gallery-grid .card { padding:0; overflow:hidden; background:#fff; border-radius:8px; box-shadow:var(--shadow); text-align:center; display:flex; align-items:center; justify-content:center; height:220px }
.gallery-grid img,
.gallery-grid video { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; display:block; margin:auto; background:#f9f9f9; transition:transform .2s ease; cursor:pointer }
.gallery-grid img:hover,
.gallery-grid video:hover { transform:scale(1.03) }
.gallery-empty { padding:14px; background:var(--card); border-radius:8px; box-shadow:var(--shadow); color:var(--muted) }
.gallery-grid input[type="checkbox"] { margin-bottom:6px }

/* Lightbox */
#lightbox { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.9); z-index:9999; align-items:center; justify-content:center; flex-direction:column }
#lightbox img,
#lightbox video { max-width:90%; max-height:90%; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.4) }
#lightbox span,
#lightbox button { cursor:pointer }
#lightbox-close { position:absolute; top:20px; right:30px; font-size:32px; color:#fff; font-weight:bold }
#lightbox-prev,
#lightbox-next { position:absolute; top:50%; transform:translateY(-50%); font-size:40px; color:#fff; background:none; border:none }
#lightbox-prev { left:20px }
#lightbox-next { right:20px }

/* Contact & Forms */
.form { background:var(--card); padding:18px; border-radius:12px; box-shadow:var(--shadow) }
.input, textarea { width:100%; padding:10px; border:1px solid #efecec; border-radius:8px }
textarea { min-height:120px; resize:vertical }
.success { color:green; margin:10px 0; font-weight:600 }
.error { color:red; margin:10px 0; font-weight:600 }

/* Footer */
.site-footer { background:linear-gradient(0deg, #0f1724, #0b1220); color:#d1d5db; padding:28px 0; margin-top:36px; clear:both }
.site-footer .footer-inner { display:flex; gap:20px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap }
.footer-bottom { background:#081017; color:#94a3b8; padding:12px 0; margin-top:12px; text-align:center }

/* Responsive */
@media(max-width:900px) {
  body { padding-left:8px; padding-right:8px }
  .container { width:100%; padding-left:10px; padding-right:10px }

  .hero-inner { flex-direction:column; align-items:stretch }
  .hero-left, .hero-form { width:100%; max-width:100% }
  .hero-form { margin-top:20px }

  .main-nav { display:none; flex-direction:column; position:absolute; top:68px; left:10px; right:10px; background:#fff; padding:12px; border-radius:8px; box-shadow:var(--shadow) }
  .main-nav.open { display:flex }
  .nav-toggle { display:block }

  .site-footer .footer-inner { flex-direction:column; gap:12px }
}

@media(max-width:520px) {
  .hero-title { font-size:26px }
  .project-img { height:150px }
  .gallery-grid .card { height:160px }
}

/* Video thumbnails */
.video-thumb { position:relative; display:inline-block; width:100%; height:220px; overflow:hidden; border-radius:6px; background:#000; cursor:pointer }
.video-thumb video { width:100%; height:100%; object-fit:contain; border-radius:6px; display:block }
.play-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:50px; color:white; background:rgba(0,0,0,0.5); border-radius:50%; width:70px; height:70px; display:flex; align-items:center; justify-content:center; pointer-events:none }