:root{
      --brand:#0ea5e9;   /* medical blue */
      --ink:#0b1220;     /* headings */
      --muted:#475569;   /* body */
      --bg:#f6f9ff;      /* soft clinic bg */
      --card:#ffffff;    /* white cards */
      --accent:#82d1ff;  /* subtle accent */
      --shadow:0 18px 50px rgba(10,35,80,.10);
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--muted);font:16px/1.65 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial}
    h1,h2,h3{color:var(--ink);letter-spacing:.2px}
    img{max-width:100%;display:block}

    /* HERO */
    .hero{
      position:relative;overflow:hidden;
      background:linear-gradient(180deg,#fff, #eef7ff 70%);
      padding:56px 24px 48px;
      isolation:isolate;
    }
    .wrap{max-width:1200px;margin:0 auto}
    .hero-grid{
      display:grid;gap:40px;align-items:center;
      grid-template-columns: 1.15fr .85fr;
    }
    .badge{
      display:inline-flex;gap:10px;align-items:center;
      background:rgba(130,209,255,.25);
      color:#075985;padding:8px 14px;border-radius:999px;font-weight:600
    }
    .hero h1{font-size:44px;margin:14px 0 10px}
    .subtitle{font-size:18px;max-width:680px}
    .hero-device{
      filter: drop-shadow(var(--shadow));
      border-radius:20px; overflow:hidden;
      background:var(--card);
    }

    /* ICON BENEFITS */
    .icons{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
    .icon-card{
      background:var(--card);border-radius:14px;padding:16px 14px;
      display:flex;gap:12px;align-items:flex-start;
      box-shadow:var(--shadow);
    }
    .icon-card svg{flex:0 0 28px}
    .icon-card b{color:var(--ink)}

    /* SECTION CARD */
    section.card{
      background:var(--card);border-radius:var(--radius);
      padding:38px 28px;margin:28px 0;box-shadow:var(--shadow)
    }
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
    .bullets{list-style:none;margin:0;padding:0}
    .bullets li{margin:10px 0 0 0;padding-left:28px;position:relative}
    .bullets li:before{
      content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;border-radius:50%;
      background:radial-gradient(circle at 35% 35%, #fff 2px, var(--brand) 3px, #7dd3fc 100%);
      box-shadow:0 0 0 4px rgba(14,165,233,.12)
    }

    /* SPEC TABLE */
    table{width:100%;border-collapse:collapse;margin-top:8px}
    th,td{padding:12px 10px;border-bottom:1px solid #edf2f7}
    th{width:36%;color:#0b1220;text-align:left;font-weight:600}

    /* BEFORE-AFTER SLIDER */
    .ba{
      position:relative;border-radius:16px;overflow:hidden;
      box-shadow:var(--shadow);aspect-ratio:16/10;background:#000;
      --pos:50%;
    }
    .ba img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}
    .ba .after{clip-path:polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%)}
    .ba .bar{
      position:absolute;inset:0;height:100%;
      background:linear-gradient(to right, transparent calc(var(--pos) - 1px), #ffffff calc(var(--pos) - 1px), #ffffff calc(var(--pos) + 1px), transparent calc(var(--pos) + 1px));
      pointer-events:none
    }
    .ba input[type=range]{
      -webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;
      background:transparent;cursor:ew-resize
    }
    .ba input::-webkit-slider-thumb{
      -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
      background:#fff;border:2px solid var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.25)
    }
    .ba-label{
      position:absolute;top:12px;padding:6px 10px;border-radius:10px;font-size:12px;
      background:rgba(0,0,0,.55);color:#fff
    }
    .ba-label.before{left:12px}
    .ba-label.after{right:12px}

    /* METRICS / STATS */
    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .stat{background:linear-gradient(180deg,#fff,#f2faff);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow)}
    .stat b{display:block;color:var(--ink);font-size:26px}
    .stat span{font-size:13px;color:#64748b}

    /* TESTIMONIALS */
    .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .q{background:var(--card);border:1px solid #e6eef7;padding:18px;border-radius:14px;box-shadow:var(--shadow)}
    .q b{color:var(--ink)}

    /* CTA banner (no links) */
    .cta{
      background:linear-gradient(90deg,#e0f2ff,#f7fbff);
      border:1px solid #dbeafe;border-radius:16px;padding:22px 20px;margin:30px 0;
      display:flex;gap:22px;align-items:center;justify-content:space-between;box-shadow:var(--shadow)
    }
    .cta .right{
      display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px;width:100%
    }
    .pill{
      background:#0ea5e9;color:#fff;text-align:center;padding:14px;border-radius:999px;font-weight:700;
      box-shadow:0 8px 24px rgba(14,165,233,.35)
    }
    .muted-pill{background:#e6f6ff;color:#075985;border-radius:999px;text-align:center;padding:14px;font-weight:600}

    /* Responsive */
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr}
      .icons{grid-template-columns:repeat(2,1fr)}
      .grid-2{grid-template-columns:1fr}
      .stats{grid-template-columns:repeat(2,1fr)}
      .quotes{grid-template-columns:1fr}
      .cta{flex-direction:column;align-items:flex-start}
      .cta .right{grid-template-columns:1fr}
    }