:root{
      --brand:#0b5cff;
      --accent:#8b5cf6;
      --bg:#ffffff;
      --soft:#f6f8fe;
      --text:#162033;
      --muted:#647089;
      --border:#e6ecf6;
      --radius:18px;
      --shadow:0 10px 30px rgba(12,22,44,.08);
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.6}
    img{max-width:100%;display:block}
    a{color:var(--brand);text-decoration:none}
    .wrap{width:min(1180px,92vw);margin-inline:auto}
    .grid{display:grid;gap:28px}
    .hero{padding:56px 0 30px;background:linear-gradient(135deg,#eef4ff 0%,#faf7ff 100%)}
    .hero h1{font-size:clamp(28px,3.5vw,46px);line-height:1.1;margin:.2em 0 .4em}
    .lead{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:65ch}
    .hero-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
    .badges{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
    .badge{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:#21314c;font-weight:600}
    .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
    .btn{border:0;padding:13px 18px;border-radius:14px;font-weight:700;cursor:pointer;transition:transform .05s ease}
    .btn:active{transform:translateY(1px)}
    .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 20px rgba(11,92,255,.18)}
    .btn-ghost{background:#fff;border:1px solid var(--border);color:#111e34}
    .section{padding:56px 0}
    .section.soft{background:var(--soft)}
    h2.section-title{font-size:clamp(22px,2.6vw,34px);margin:0 0 8px}
    p.sub{color:var(--muted);max-width:72ch;margin:0 0 18px}
    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
    .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
    .card h3{margin:.2em 0 .4em;font-size:18px}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .kpi{background:#fff;border:1px solid var(--border);border-radius:14px;text-align:center;padding:16px}
    .kpi strong{display:block;font-size:22px;color:var(--brand)}
    .list-check{list-style:none;padding:0;margin:0}
    .list-check li{padding-left:28px;position:relative;margin:.4em 0}
    .list-check li::before{content:"✔";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}
    .panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
    .table{width:100%;border-collapse:collapse;border-radius:14px;overflow:hidden}
    .table th,.table td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}
    .table th{background:#f7f9ff}
    .spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
    .spec{background:#fff;border:1px dashed var(--border);border-radius:14px;padding:14px}
    .mini{color:var(--muted);font-size:14px}

    /* Before & After Slider */
    .ba{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#f1f4fb;box-shadow:var(--shadow)}
    .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .ba .after{clip-path:inset(0 50% 0 0);transition:clip-path .2s ease}
    .ba .handle{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(#fff,#cfe1ff);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
    .ba input[type=range]{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(520px,78%);appearance:none;height:6px;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:999px}
    .ba input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--brand)}

    /* Sticky CTA */
    .sticky{position:sticky;bottom:0;background:rgba(255,255,255,.95);border-top:1px solid var(--border);backdrop-filter:saturate(1.3) blur(6px);z-index:50}
    .sticky .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 0}

    @media (max-width:900px){ .kpis{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:760px){ .hero .grid{grid-template-columns:1fr} }