:root{
  --brand-1:#0f5fff;
  --brand-2:#00b3a4;
  --ink-1:#0b1220;
  --ink-2:#2b3240;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f7f9fc;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,95,255,0.08), 0 2px 8px rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,ui-sans-serif,-apple-system,Segoe UI,Roboto;color:var(--ink-1);background:var(--bg);line-height:1.6}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:50;background:#ffffffc9;backdrop-filter:blur(12px) saturate(180%);border-bottom:1px solid #eef2f7}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink-1);text-decoration:none}
.brand .logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand-1),var(--brand-2))}
.nav-toggle{display:none;background:none;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px}
.nav{}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav a{color:var(--ink-1);text-decoration:none;font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:1px solid transparent;box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));color:#fff}
.btn-secondary{background:#fff;border-color:#e5e7eb;color:var(--ink-1)}

/* Layout */
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:64px 0}
.section.alt{background:var(--bg-alt)}

/* Hero */
.hero{padding:84px 0 56px;background:
 radial-gradient(800px 400px at 0% -10%, rgba(15,95,255,.12), transparent 60%),
 radial-gradient(900px 500px at 100% -10%, rgba(0,179,164,.12), transparent 60%);}
.hero h1{font-size: clamp(28px, 4vw, 54px);line-height:1.08;margin:0 0 12px}
.hero p.lede{font-size: clamp(16px, 2vw, 20px);color:var(--muted);margin:0 0 22px}

/* Cards / Gallery */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{width:100%;height:240px;object-fit:cover;border-radius:12px;cursor:pointer}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:16px;text-align:center}
.kpi strong{font-size:28px;display:block}

/* Before/After Slider */
.ba{position:relative;max-width:100%;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:var(--shadow)}
.ba img{display:block;width:100%;height:auto}
.ba .after{position:absolute;inset:0;overflow:hidden}
.ba .after img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;border-left:1px solid #0f5fff;border-right:1px solid #0f5fff;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.ba .knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid #0f5fff;border-radius:999px;padding:8px 10px;font-weight:800}

/* Footer */
.site-footer{border-top:1px solid #eef2f7;background:#fff;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding:26px 0}
.legal{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #eef2f7;color:var(--muted)}

/* Responsive */
@media(max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-block}
  .nav ul{display:none;position:absolute;right:4%;top:64px;flex-direction:column;background:#fff;border:1px solid #eef2f7;border-radius:12px;box-shadow:var(--shadow);padding:10px}
  .nav ul.show{display:flex}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}