:root{
  --bg:#111314;--card:#171a1d;--ink:#f2f5f7;--muted:#aab3bf;
  --brand:#ff2b2b;--brand-2:#9b0c0c;--line:#262c33;
  --glow:0 8px 30px rgba(255,43,43,.35)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92vw);margin-inline:auto}

header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(17,19,20,.95),rgba(17,19,20,.75),rgba(17,19,20,0));backdrop-filter:saturate(140%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brandmark{display:flex;align-items:center;gap:10px}
.brandmark img{height:100px;width:180px;filter:drop-shadow(0 3px 8px rgba(255,43,43,.35))}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #2b323a;border-radius:999px;padding:8px 12px;color:#c1c7d4;font-size:14px}

/* ===== HERO LIGHT (white bg + Calibri stack) ===== */
.hero{padding:24px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;border-radius:18px}
.hero-light{background:#ffffff;color:#0b0b0b;border:1px solid #e5e7eb}
.hero-copy{max-width:640px}
.hero-light .pill{border-color:#e5e7eb;background:#f3f4f6;color:#0b0b0b}
.hero-light h1{
  font-family: Calibri, "Carlito", "Segoe UI", Arial, sans-serif !important;
  color:#0b0b0b;font-weight:700;letter-spacing:0;line-height:1.05;
  font-size:clamp(30px,6.5vw,60px);margin:8px 0 12px;
}
.hero-light p,.hero-light .muted{color:#111}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:16px;text-align:center;color:#0b0b0b}
.kpi b{display:block;font-size:20px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:none}
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;padding:14px 20px;border-radius:12px;font-weight:800;box-shadow:var(--glow);transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:#1b1f24;color:#e7e9ee;border:1px solid #20252c}
.hero-dark{background:#0b0b0b !important;color:#fff !important;border:1px solid #0b0b0b}
.hero-alt{background:#f3f4f6 !important;color:#0b0b0b !important;border:1px solid #e5e7eb}

/* Sections */
.section{padding:64px 0}
.section h2{font-size:28px;margin:0 0 16px}
.features{text-align:center}
.grid{display:grid;gap:16px}
.features .grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.feature h3{margin:0 0 6px;font-size:16px}
.feature p{margin:0;color:var(--muted);font-size:14px}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px}
.price{font-size:28px;font-weight:900}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.faq details+details{margin-top:10px}

/* Footer */
footer{padding:24px 0;border-top:1px solid #232931;color:#9aa3b2}

/* ===== Sliders ===== */
.slider{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#0f1318}
@media (max-width:640px){.slider{aspect-ratio:4/3}}
.slides{display:flex;height:100%;transition:transform .45s ease}

/* Only the HERO slides are full width */
.slider:not(.thumbs) .slide{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}

/* Installs slider (4-up desktop) */
#installs-slider{--gap:16px;--per:4;aspect-ratio:auto;height:auto;background:#0f1318;border-radius:16px}
#installs-slider .slides{display:flex;gap:var(--gap);padding:0}
#installs-slider .slide{
  flex:0 0 calc((100% - (var(--gap)*3)) / 4) !important; /* 4 tiles + three gaps */
  aspect-ratio:4/3;width:25%;height:auto;object-fit:cover;border-radius:14px;background:#0d0f14;border:1px solid var(--line)
}
#installs-slider .s-prev{left:6px}
#installs-slider .s-next{right:6px}
#installs-slider .dots{bottom:6px}

/* Responsive: 3-up tablet, 2-up mobile */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}
  #installs-slider{--per:3}
  #installs-slider .slide{flex-basis:calc((100% - (var(--gap)*2)) / 3) !important}
}
@media (max-width:640px){
  .brandmark img{height:80px;width:auto}
  .pricing{grid-template-columns:1fr}
  .pill{display:none}
  #installs-slider{--per:2}
  #installs-slider .slide{flex-basis:calc((100% - var(--gap)) / 2) !important}
}

/* ---- Contact section layout ---- */
.contact-card{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
@media (max-width:980px){.contact-card{grid-template-columns:1fr}}
form.price-card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){form.price-card .row{grid-template-columns:1fr}}
form.price-card label{display:block;margin-bottom:6px;font-size:14px;color:#cbd3df}
form.price-card input,form.price-card select,form.price-card textarea{
  width:100%;background:#0c0f16;border:1px solid var(--line);border-radius:12px;color:#e7e9ee;padding:12px
}
form.price-card .btn{width:100%;margin-top:8px}
.contact-card .price-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}