:root{
  --bg-dark: #000000;
  --bg-dark-2: #1A1A1A;
  --text: #1f2937;
  --muted: #6b7280;
  --muted-2:#9ca3af;
  --accent: #ef4444; /* red-500 */
  --white: #ffffff;
  --card-shadow: 0 10px 24px rgba(0,0,0,.12);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:#fff; color:var(--text); font-family:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; left:0; right:0; z-index:50;
  background:rgb(0 0 0 / 90%); backdrop-filter: blur(6px);
}
.nav-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.logo{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.logo-icon{ position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.logo .shield{ width:40px; height:40px; fill: var(--accent); transition: transform .3s ease; }
.logo .shield-half{ fill:#7f1d1d; opacity:.3; }
.logo .flame{
  position:absolute; width:20px; height:20px; fill:#ffffff;
  transition: transform .3s ease, fill .3s ease;
}
.logo:hover .shield{ transform: scale(1.1); }
.logo:hover .flame{ fill: var(--accent); transform: translateY(-1px); }
.logo-text{ font-weight:800; letter-spacing:.08em; color:#ffffff; font-size:24px; }

.nav-desktop{ display:none; gap:32px; align-items:center; }
.nav-link{ position:relative; color:#ffffff; text-decoration:none; font-weight:600; letter-spacing:.02em; transition: color .3s ease; }
.nav-link:hover{ color: var(--accent); }
.nav-link.is-active{ color: var(--accent); }
.nav-link.is-active::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-8px;
  width:8px; height:8px; border-radius:999px; background: var(--accent);
}
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:#ffffff; width:40px; height:40px; cursor:pointer;
}

/* Mobile nav */
.mobile-nav{ background:rgba(0,0,0,.9); }
.mobile-nav-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:8px 24px 16px; }
.mobile-link{ color:#ffffff; text-decoration:none; font-weight:600; }
.mobile-link:hover{ color: var(--accent); }

/* ---------- COMMON ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 20px; border-radius:10px; text-decoration:none; font-weight:800; letter-spacing:.02em; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn .icon{ width:20px;height:20px; }
.btn .icon.sm{ width:16px;height:16px; }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background:#dc2626; transform: translateY(-1px); }
.btn-outline{ background: transparent; color:#fff; border:2px solid #fff; }
.btn-outline:hover{ background:#fff; color:#000; }
.btn-white{ border-color: rgba(255,255,255,.6); color:#fff; }
.btn-white:hover{ background:#fff; color:#000; }
.btn-link{ color: var(--accent); font-weight:800; }
.btn-link:hover{ text-decoration: underline; }
.btn-dark{ background:#111827; color:#fff; }
.btn-dark:hover{ background:#000; }

.section{ padding:80px 0; }
.section-muted{ background:#f9fafb; }
.section-header{ text-align:center; margin-bottom:32px; }
.section-header h2{ font-size:34px; font-weight:800; color:#111827; margin:0; }
.section-header p{ color:#6b7280; margin-top:8px; }
.section-underline{ display:block; width:96px; height:4px; background: var(--accent); margin:16px auto 0; }

.center{ text-align:center; }
.mt-24{ margin-top:24px; }
.mt-48{ margin-top:48px; }

/* ---------- HERO ---------- */
.hero{
  position:relative; color:#fff; min-height:93vh; display:flex; align-items:center; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgb(0 0 0 / 87%), rgb(0 0 0 / 93%)); }
.hero-pattern{
  position:absolute; inset:0; opacity:.04;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTQwIDBMMCA0MCA0MCA4MCA4MCA0MHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+');
  background-size:80px 80px;
  /*animation: patternMove 20s linear infinite;*/
}
@keyframes patternMove{ 0%{background-position:0 0;opacity:.03} 50%{background-position:40px 40px;opacity:.05} 100%{background-position:0 0;opacity:.03} }
.hero-inner{ position:relative; z-index:2; padding: 0 24px; }
.hero-title{ font-size: clamp(40px, 6vw, 72px); font-weight: 800; text-transform: uppercase; letter-spacing:.02em; line-height:1.05; }
.hero-title .accent{ color: var(--accent); }
.hero-sub{ margin-top: 16px; font-size: clamp(16px, 2.2vw, 20px); color:#e5e7eb; max-width:640px; }
.hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* ---------- STATS ---------- */
.stats{ background:#fff; padding:48px 0; }
.stats-grid{ display:grid; grid-template-columns:1fr; gap:24px; text-align:center; }
.stat{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.stat-num{ font-size:40px; font-weight:800; color:#111827; }
.stat-label{ color:#6b7280; font-weight:600; }
@media (min-width:768px){ .stats-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- CARDS (SERVICES) ---------- */
.cards{ display:grid; grid-template-columns:1fr; gap:24px; }
.card{ background:#fff; border-radius:14px; padding:28px; box-shadow: var(--card-shadow); transition: transform .25s ease, box-shadow .25s ease; text-align:center; }
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.12); }
.card h3{ margin:12px 0 6px; font-size:20px; font-weight:800; color:#111827; }
.card p{ color:#4b5563; }
.card-icon{ margin:0 auto 16px; }
.card-icon.circle{ width:64px; height:64px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#fee2e2; color: var(--accent); transition: background .25s ease, color .25s ease; }
.card:hover .card-icon.circle{ background: var(--accent); color:#fff; }
.card-icon svg{ width:32px; height:32px; }
@media (min-width:768px){ .cards{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- WHY CHOOSE US ---------- */
.why-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.why-left .why-option{
  border:2px solid transparent; border-radius:12px; padding:40px; cursor:pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.why-left .why-option:hover{ background:#f3f4f6; }
.why-left .why-option.active{ background:#fef2f2; border-color: var(--accent); box-shadow: 0 10px 24px rgba(239, 68, 68, .15); }
.why-option-head{ display:flex; align-items:center; gap:12px; }
.why-icon{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px;
  background:#fef2f2; color: var(--accent);
  transition: background .25s ease, color .25s ease;
  flex:0 0 44px;
}
.why-option.active .why-icon{ background: var(--accent); color:#fff; }
.why-title{ margin:0; font-size:18px; font-weight:800; color:#111827; }
.why-desc{ margin:12px 0 0; color:#4b5563; display:none; }
.why-option.active .why-desc{ display:block; }

.why-visual{
  position:relative; height:380px; border-radius:14px; overflow:hidden; box-shadow: var(--card-shadow);
}
.why-visual img{ width:100%; height:100%; object-fit:cover; }
.why-visual::after{ content:''; position:absolute; inset:0; background: rgba(0,0,0,.3); }

@media (min-width:768px){
  .why-grid{ grid-template-columns: 1fr 1fr; }
  .why-visual{ height:500px; }
}

/* ---------- PROJECTS ---------- */
.projects{ display:grid; grid-template-columns:1fr; gap:24px; }
.project-card{ position:relative; border-radius:14px; overflow:hidden; box-shadow: var(--card-shadow); height:380px; }
.project-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover img{ transform: scale(1.06); }
.project-overlay{ position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.4), rgba(0,0,0,0)); transition: opacity .3s ease; }
.project-content{ position:absolute; left:0; right:0; bottom:0; color:#fff; padding:24px; transform: translateY(20%); transition: transform .5s ease; }
.project-card:hover .project-content{ transform: translateY(0); }
.tag{ color:#fca5a5; font-weight:700; }
@media (min-width:768px){ .projects{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- CTA ---------- */
.cta{
  padding:80px 0; text-align:center; color:#fff; background:#1f2937;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%23c00' fill-opacity='0.1'%3E%3Crect x='0' y='0' width='50' height='50'/%3E%3Crect x='50' y='50' width='50' height='50'/%3E%3Cg%3E%3C/svg%3E");
}
.cta h2{ font-size:28px; font-weight:800; margin:0; }
.cta p{ max-width:720px; margin:12px auto 0; color:#d1d5db; }

/* ---------- FOOTER ---------- */
.site-footer{ background: var(--bg-dark-2); color:#d1d5db; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:32px; padding:48px 0; }
.brand-tag{ margin-top:12px; font-size:14px; color:#9ca3af; }
.col-title{ color:#ffffff; text-transform:uppercase; letter-spacing:.08em; font-size:18px; margin:0; }
.link-list{ margin:16px 0 0; padding:0; list-style:none; }
.link-list li{ margin:8px 0; }
.link-list a{ color:#d1d5db; text-decoration:none; transition:color .3s ease; }
.link-list a:hover{ color: var(--accent); }
.contact-list{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.contact-item{ display:flex; align-items:flex-start; gap:12px; }
.contact-item svg{ width:20px; height:20px; color: var(--accent); flex:0 0 20px; margin-top:2px; }
.footer-bottom{ border-top:1px solid #2b2b2b; text-align:center; padding:18px 0 28px; color:#6b7280; font-size:14px; }

/* ---------- RESPONSIVE ---------- */
@media (min-width:768px){
  .nav-desktop{ display:flex; }
  .burger{ display:none; }
  .footer-grid{ grid-template-columns: 1.1fr 1fr 1fr 1.2fr; }
}