:root{--bg:#0a0f1a;--fg:#e9ecf1;--accent:#ff3b3b;--muted:#0f1629;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;background:rgba(10,15,26,.85);backdrop-filter:saturate(130%) blur(6px);border-bottom:1px solid rgba(255,255,255,.06);z-index:20}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;gap:8px;align-items:center;color:#fff;text-decoration:none;font-weight:800}
.brand em{font-style:normal;opacity:.7}
.logo-dot{width:14px;height:14px;border-radius:999px;background:var(--accent);box-shadow:0 0 14px rgba(255,59,59,.8)}
.primary-nav .menu{display:flex;gap:18px;justify-content:center;list-style:none;margin:0;padding:0}
.primary-nav a{color:#fff;text-decoration:none;opacity:.9}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(255,59,59,.35)}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:#fff;margin-left:.6rem}
.hero{min-height:70vh;display:grid;place-items:center;position:relative;text-align:center;padding:100px 0;background:radial-gradient(80% 80% at 50% 50%, #10182a 0%, #070b14 60%, #05070d 100%)}
.hero::after{content:'';position:absolute;inset:-40%;background:radial-gradient(circle at 50% 60%, rgba(255,59,59,.15), transparent 50%);filter:blur(40px);pointer-events:none}
.hero h1{font-size:clamp(2.2rem,4vw + 1.2rem,5rem);line-height:1.05;margin:0 0 8px}
.glow{color:#fff;text-shadow:0 0 12px rgba(255,59,59,.65), 0 0 28px rgba(255,59,59,.35)}
.services-icons{padding:40px 0;background:#0c1220}
.services-icons .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.services-icons article{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:18px;text-align:center}
.ico{width:42px;height:42px;margin:4px auto 10px;background:var(--accent);mask:linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0);filter:drop-shadow(0 0 8px rgba(255,59,59,.4))}
.before-after{padding:48px 0}
.ba{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px}
.ba>img,.ba__after>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{--x:50%;position:absolute;inset:0;clip-path:polygon(0 0, var(--x) 0, var(--x) 100%, 0 100%)}
.ba__handle{position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);background:#fff;color:#000;padding:.3rem .5rem;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-weight:700}
.quote{max-width:640px;margin:24px auto;padding:20px;background:#0b1120;border:1px solid rgba(255,255,255,.08);border-radius:14px;display:grid;gap:10px}
.quote input,.quote select{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0f1629;color:#fff}
.portfolio-grid{padding:48px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden}
.card h3{margin:10px;color:#fff}
.site-footer{margin-top:60px;padding:28px 0;background:#070b14;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.small{font-size:.875rem}
.muted{opacity:.7}
@media (max-width: 800px){
  .nav{grid-template-columns:1fr auto}
  .primary-nav{display:none}
  .footer-grid{grid-template-columns:1fr}
}