:root{
    --brand:#0b5cff;
    --brand-dark:#073a9b;
    --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;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    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;
  }

  .section{
    padding:56px 0;
  }

  .section.soft{
    background:var(--soft);
  }

  .section-title{
    font-size:clamp(24px,2.8vw,36px);
    line-height:1.15;
    margin:0 0 10px;
    color:var(--text);
  }

  .sub{
    color:var(--muted);
    max-width:74ch;
    margin:0 0 22px;
    font-size:16px;
  }

  .mini{
    color:var(--muted);
    font-size:14px;
  }

  .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:700;
    font-size:14px;
  }

  .cta-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:13px 18px;
    border-radius:14px;
    font-weight:800;
    border:1px solid transparent;
    transition:.2s ease;
  }

  .btn:hover{
    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-color:var(--border);
    color:#111e34;
  }

  /* Sticky CTA */
  .sticky{
    position:sticky;
    bottom:0;
    background:rgba(255,255,255,.96);
    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;
  }

  /* Image areas - prevent distortion */
  .image-box{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:var(--radius);
    background:#eef4ff;
    border:1px solid var(--border);
    box-shadow:var(--shadow);
  }

  .image-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .image-box.contain img{
    object-fit:contain;
    padding:10px;
    background:#fff;
  }

  .image-size-label{
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:2;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    color:#39506f;
    font-size:12px;
    font-weight:700;
    border:1px solid rgba(230,236,246,.9);
    box-shadow:0 6px 18px rgba(12,22,44,.08);
  }

  .ratio-4-3{
    aspect-ratio:4/3;
  }

  .ratio-16-9{
    aspect-ratio:16/9;
  }

  .ratio-1-1{
    aspect-ratio:1/1;
  }

  .ratio-3-2{
    aspect-ratio:3/2;
  }

  /* Hero */
  .hero{
    padding:64px 0 42px;
    background:
      radial-gradient(circle at top right,rgba(139,92,246,.15),transparent 34%),
      linear-gradient(135deg,#eef4ff 0%,#faf7ff 100%);
  }

  .hero-layout{
    grid-template-columns:1.08fr .92fr;
    align-items:center;
  }

  .hero h1{
    font-size:clamp(32px,4vw,52px);
    line-height:1.06;
    margin:.2em 0 .4em;
    letter-spacing:-.02em;
  }

  .lead{
    font-size:clamp(16px,2vw,19px);
    color:var(--muted);
    max-width:68ch;
  }

  /* KPI */
  .kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
  }

  .kpi{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    text-align:center;
    padding:18px 14px;
    box-shadow:var(--shadow);
  }

  .kpi strong{
    display:block;
    font-size:24px;
    color:var(--brand);
    line-height:1.2;
  }

  .kpi span{
    color:var(--muted);
    font-size:14px;
  }

  /* Cards */
  .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:20px;
    box-shadow:var(--shadow);
  }

  .card h3{
    margin:.2em 0 .45em;
    font-size:18px;
    color:var(--text);
  }

  .card p{
    margin:0;
    color:var(--muted);
  }

  .panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    box-shadow:var(--shadow);
  }

  .list-check{
    list-style:none;
    padding:0;
    margin:0;
  }

  .list-check li{
    padding-left:28px;
    position:relative;
    margin:.55em 0;
  }

  .list-check li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    color:var(--brand);
    font-weight:900;
  }

  /* Specs */
  .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:16px;
  }

  .spec strong{
    display:block;
    color:var(--brand-dark);
    margin-bottom:3px;
  }

  /* Table */
  .table-wrap{
    overflow-x:auto;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
  }

  .table{
    width:100%;
    border-collapse:collapse;
    min-width:640px;
  }

  .table th,
  .table td{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    text-align:left;
    vertical-align:top;
  }

  .table th{
    background:#f7f9ff;
    color:#17223a;
    font-weight:800;
  }

  .table tr:last-child td{
    border-bottom:0;
  }

  /* Before & After Slider */
  .ba{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    background:#f1f4fb;
    box-shadow:var(--shadow);
  }

  .ba img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .ba .after{
    clip-path:inset(0 50% 0 0);
    transition:clip-path .18s 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);
    z-index:3;
  }

  .ba input[type=range]{
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    width:min(520px,78%);
    appearance:none;
    height:6px;
    background:linear-gradient(90deg,var(--brand),var(--accent));
    border-radius:999px;
    z-index:4;
  }

  .ba input::-webkit-slider-thumb{
    appearance:none;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--brand);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }

  .ba input::-moz-range-thumb{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    border:2px solid var(--brand);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }

  .ba-tag{
    position:absolute;
    top:14px;
    z-index:5;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    font-weight:800;
    color:#20304b;
    font-size:13px;
  }

  .ba-tag.before{
    left:14px;
  }

  .ba-tag.after-label{
    right:14px;
  }

  details.card{
    cursor:pointer;
  }

  details.card summary{
    list-style:none;
  }

  details.card summary::-webkit-details-marker{
    display:none;
  }

  .faq-grid{
    display:grid;
    gap:14px;
  }

  @media (max-width:980px){
    .hero-layout,
    .two-col{
      grid-template-columns:1fr !important;
    }

    .kpis{
      grid-template-columns:repeat(2,1fr);
    }
  }

  @media (max-width:620px){
    .section{
      padding:42px 0;
    }

    .hero{
      padding:46px 0 32px;
    }

    .kpis{
      grid-template-columns:1fr 1fr;
    }

    .sticky .wrap{
      align-items:flex-start;
    }

    .sticky .btn{
      min-height:42px;
      padding:10px 14px;
      font-size:14px;
    }

    .image-size-label{
      font-size:11px;
    }
  }