:root{
      --primary:#1273ea;
      --text:#0f172a;
      --muted:#475569;
      --bg:#f8fafc;
      --card:#ffffff;
      --radius:16px;
      --shadow:0 12px 30px rgba(2,6,23,.08);
      --success:#10b981;
      --warning:#eab308;
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
    a{color:var(--primary);text-decoration:none}
    .container{max-width:1150px;margin:0 auto;padding:28px}
    .topbar{background:#ffffff;position:sticky;top:0;z-index:50;border-bottom:1px solid #e5e7eb}
    .nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:12px 18px;max-width:1170px;margin:0 auto}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--primary)}
    .brand svg{width:26px;height:26px}
    .menu{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
    .menu a{font-weight:600;color:var(--text);opacity:.9}
    .menu .cta{padding:10px 14px;border-radius:12px;background:var(--primary);color:#fff;font-weight:800}
    .notice{background:#0b5fff;color:#fff;text-align:center;padding:10px 14px;font-weight:700}
    .notice a{color:#fff;text-decoration:underline;font-weight:800}
    h1{margin:18px 0 8px;font-size:42px;line-height:1.1;color:var(--primary);text-align:center}
    .lead{max-width:900px;margin:8px auto 22px;text-align:center;font-size:18px;color:#0b1324}
    .pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
    @media (max-width:1100px){.pricing{grid-template-columns:repeat(2,minmax(0,1fr))}}
    @media (max-width:680px){.pricing{grid-template-columns:1fr}}
    .plan{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;position:relative;border:1px solid #e5e7eb}
    .plan h3{margin:0 0 8px}
    .price{font-size:28px;font-weight:900;margin:8px 0 10px}
    .per{font-size:14px;color:var(--muted);font-weight:600}
    .list{margin:10px 0 16px;padding-left:18px}
    .list li{margin:4px 0}
    .btn{display:inline-block;background:var(--primary);color:#fff;border-radius:12px;padding:12px 16px;font-weight:800}
    .muted-btn{background:#e5e7eb;color:#0f172a}
    .ribbon{position:absolute;top:14px;right:-6px;background:#111827;color:#fff;font-size:12px;font-weight:800;
            padding:6px 10px;border-radius:999px;box-shadow:var(--shadow)}
    .badge{display:inline-block;background:#eef2ff;color:#1e3a8a;border:1px solid #c7d2fe;border-radius:999px;
           padding:4px 10px;font-size:12px;font-weight:800;margin-left:8px}
    .popular{outline:2px solid var(--primary)}