:root { --bg1:#0b0b0c; --bg2:#1a0b0f; --accent:#b91c1c; --accent2:#ef4444; --fg:#f3f4f6; --muted:#9ca3af; --card:#121213; --stroke:#222; }
* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--fg);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(185,28,28,.35), transparent 60%),
              radial-gradient(1000px 500px at 100% 0%, rgba(30,10,14,.6), transparent 60%),
              linear-gradient(180deg, var(--bg1), #090909 60%);
}
a { color:#93c5fd; text-decoration: none }
header { position: sticky; top:0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
         border-bottom:1px solid var(--stroke); z-index: 20; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; max-width:1040px; margin:0 auto }
.brand { display:flex; align-items:center; gap:10px }
.brand img { width:44px; height:44px; object-fit:contain }
.brand-name { font-weight:800; letter-spacing:.3px }
nav a { margin-left:14px; color:var(--fg) }
.wrap { max-width:1040px; margin:0 auto; padding: 0 16px }
.hero { display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; padding:48px 0 24px }
.hero h1 { margin:.2em 0 .3em; font-size: clamp(30px, 4vw, 44px) }
.sub { color: var(--muted) }
.btns a { display:inline-block; padding:12px 18px; border-radius:12px; margin-right:8px; font-weight:700 }
.btn-primary { background: linear-gradient(135deg, var(--accent2), var(--accent)); color:white }
.btn-outline { border:1px solid var(--accent2); color:var(--fg) }
.card { background: var(--card); border:1px solid var(--stroke); border-radius:16px; padding:18px; margin:16px 0 }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px }
.gallery img { width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid var(--stroke); cursor:pointer; transition: transform .2s }
.gallery img:hover { transform: translateY(-2px) scale(1.01) }
.section-title { margin:0 0 12px }
footer { border-top:1px solid var(--stroke); color:var(--muted); padding:24px 16px; text-align:center; margin-top:30px }
iframe.form { width:100%; min-height:1200px; border:0; background:#0f0f0f }
.wafloat { position: fixed; right:18px; bottom:18px; background:#25D366; color:#111; border-radius:999px; padding:12px 16px; font-weight:800; box-shadow:0 8px 22px rgba(0,0,0,.35) }
#lightbox { position: fixed; inset:0; background: rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:50 }
#lightbox img { max-width:92vw; max-height:86vh; border-radius:12px; border:1px solid var(--stroke) }
#lightbox .close { position:absolute; top:16px; right:20px; background:#111; border:1px solid var(--stroke); color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer }
.slider { position: relative; overflow: hidden }
.slides { display:flex; transition: transform .5s ease }
.slide { min-width: 100%; padding: 8px }
.dots { display:flex; gap:6px; justify-content:center; margin-top:8px }
.dot { width:10px; height:10px; border-radius:999px; background:#333; border:1px solid #555; cursor:pointer }
.dot.active { background: var(--accent2) }
html { scroll-behavior: smooth }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr }
}