:root {
      --blue:#0f3d7a;
      --blue-2:#1f60b5;
      --ink:#0b1320;
      --text:#283041;
      --ok:#0aad63;
      --bg:#ffffff;
      --soft:#f7faff;
    }
    *{box-sizing:border-box}
    body {
      margin:0;
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }
    .hero {
      background: linear-gradient(120deg, var(--blue) 0%, var(--blue-2) 80%);
      color:#fff;
      padding:clamp(40px,8vw,80px) 20px;
      text-align:center;
    }
    .hero h1 {
      margin:0 0 12px;
      font-size:clamp(26px,5vw,42px);
    }
    .hero p {
      max-width:800px;
      margin:0 auto;
      font-size:clamp(15px,2.5vw,19px);
      opacity:.95;
    }
    .cta-row {
      margin-top:20px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
    }
    .btn {
      background:#fff;
      color:var(--ink);
      font-weight:600;
      padding:12px 18px;
      border-radius:999px;
      text-decoration:none;
      box-shadow:0 4px 12px rgba(0,0,0,.15);
      transition:transform .2s;
    }
    .btn:hover { transform:translateY(-2px); }
    .btn.alt { background:var(--ink); color:#fff; }
    .container {
      max-width:1100px;
      margin:0 auto;
      padding:clamp(24px,5vw,48px) 20px;
    }
    h2 {
      font-size:clamp(22px,3.5vw,28px);
      margin:24px 0 12px;
      color:var(--ink);
    }
    h3 {
      font-size:clamp(18px,3vw,22px);
      margin:16px 0 8px;
      color:var(--ink);
    }
    .grid {
      display:grid;
      gap:20px;
      grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    }
    .card {
      background:#fff;
      border:1px solid #e5eaf0;
      border-radius:14px;
      padding:20px;
      box-shadow:0 6px 16px rgba(15,61,122,.06);
    }
    ul.check { list-style:none; padding:0; margin:0 }
    ul.check li { margin:10px 0; padding-left:28px; position:relative }
    ul.check li:before {
      content:"✔"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700;
    }
    .compare {
      width:100%; border-collapse:collapse;
      font-size:clamp(14px,2.5vw,16px);
    }
    .compare th,.compare td {
      border:1px solid #e5eaf0;
      padding:10px;
      text-align:left;
    }
    .compare th { background:var(--soft); }
    .ba { display:grid; gap:10px; grid-template-columns:1fr 1fr; }
    .ba .ph {
      background:#f1f5fa; border:1px dashed #cbd5e1; border-radius:12px;
      height:200px; display:flex; align-items:center; justify-content:center;
      font-size:14px; color:#6b7280;
    }
    footer {
      background:var(--ink); color:#cbd5e1;
      padding:24px 20px; text-align:center;
      margin-top:30px;
    }
    footer a { color:#fff; text-decoration:underline }
    @media(max-width:600px){
      .ba{ grid-template-columns:1fr; }
    }