:root{
      --bg:#ffffff;           /* Light background */
      --surface:#f7fafc;      /* Section background */
      --card:#ffffff;         /* Card background */
      --text:#0b1220;         /* Main text */
      --muted:#5b6776;        /* Secondary text */
      --brand:#245FE6;        /* Primary brand */
      --accent:#00BFA6;       /* Accent color */
      --border:#e6ecf2;       /* Border color */
      --radius:16px;
      --shadow:0 12px 28px rgba(16,24,40,.08);
      --wrap:1080px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
      line-height:1.65;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    a{color:var(--brand); text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--wrap); margin:0 auto; padding:28px 20px 60px}

    /* ===== Header / Hero ===== */
    header.hero{
      padding:64px 20px 56px;
      background:
        radial-gradient(800px 260px at 10% -40%, rgba(36,95,230,.06), transparent 60%),
        radial-gradient(900px 320px at 100% 0, rgba(0,191,166,.08), transparent 65%),
        var(--bg);
      border-bottom:1px solid var(--border);
    }
    header h1{
      margin:0 0 14px;
      font-size:clamp(28px,4.2vw,44px);
      line-height:1.12;
    }
    header .lead{
      color:var(--muted);
      font-size:clamp(15px,1.9vw,18px);
      max-width:860px;
      margin:0 0 22px;
    }
    .cta-row{display:flex; gap:12px; flex-wrap:wrap}
    .btn{
      display:inline-flex; align-items:center; gap:8px;
      padding:12px 16px; border-radius:12px; border:1px solid transparent;
      background:linear-gradient(135deg, var(--brand), var(--accent));
      color:#fff; font-weight:700; box-shadow:var(--shadow);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn.secondary{
      background:#fff; color:var(--brand);
      border:1px solid var(--border);
    }

    /* ===== Layout ===== */
    main.grid{
      display:grid; grid-template-columns:280px 1fr; gap:28px;
    }
    @media (max-width: 980px){ main.grid{grid-template-columns:1fr} }

    nav.toc{
      position:sticky; top:16px; align-self:start;
      background:var(--surface); border:1px solid var(--border);
      padding:16px; border-radius:12px; box-shadow:var(--shadow)
    }
    nav.toc h2{
      margin:0 0 8px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)
    }
    nav.toc a{display:block; padding:8px 0; color:var(--text)}
    nav.toc a:hover{color:var(--brand)}

    article{
      background:var(--card); border:1px solid var(--border);
      border-radius:14px; box-shadow:var(--shadow); overflow:hidden
    }
    .section{padding:26px 26px 8px}
    .section h2{font-size:clamp(22px,3vw,28px); margin:0 0 8px}
    .section p{margin:10px 0}

    .badge{
      display:inline-block; padding:6px 10px; border-radius:20px;
      background:#ecfeff; color:#0f766e; border:1px solid #99f6e4; font-size:12px; letter-spacing:.06em; text-transform:uppercase
    }
    .muted{color:var(--muted)}

    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    @media (max-width: 720px){ .grid-2{grid-template-columns:1fr} }

    .card{
      background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow)
    }

    /* ===== Before/After ===== */
    figure{margin:0; position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border)}
    figure figcaption{
      position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,.85); color:#111827;
      padding:6px 10px; border-radius:10px; font-size:12px; border:1px solid var(--border)
    }
    .ba-wrapper{position:relative; width:100%; max-width:960px; margin:12px auto}
    .ba-viewport{position:relative; width:100%; height:auto}
    .ba-viewport img{display:block; width:100%; height:auto}
    .ba-after{position:absolute; top:0; left:0; height:100%; overflow:hidden}
    .ba-handle{position:absolute; top:0; bottom:0; width:4px; background:var(--brand); transform:translateX(-2px); cursor:ew-resize}
    .ba-label{position:absolute; top:12px; padding:6px 10px; background:rgba(255,255,255,.9); border:1px solid var(--border); border-radius:10px; font-size:12px}
    .ba-label.left{left:12px} .ba-label.right{right:12px}
    .range{width:100%; margin-top:10px}

    /* ===== KPIs & Table ===== */
    .kpi-row{display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:4px}
    @media (max-width: 900px){ .kpi-row{grid-template-columns: repeat(2,1fr)} }
    .kpi{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center}
    .kpi .num{font-size:24px; font-weight:800}

    table{width:100%; border-collapse:separate; border-spacing:0; margin:12px 0 22px; overflow:hidden; border-radius:12px}
    th, td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top}
    th{font-size:13px; text-align:left; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
    tr:last-child td{border-bottom:none}

    details{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0}
    summary{cursor:pointer; font-weight:700}

    footer{text-align:center; color:var(--muted); padding:22px}