:root{
    --bg:#ffffff;
    --ink:#0f172a;
    --muted:#475569;
    --line:#e2e8f0;
    --ring:#2563eb;
    --card:#ffffff;
    --shadow:0 8px 18px rgba(2,6,23,.08);
    --pill1:#f59e0b;
    --pill2:#eab308;
    --pill3:#fde68a;
    --radius:16px;
    --maxw:1200px;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    margin:0; color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  .container{ max-width:var(--maxw); margin:0 auto; padding:0 5vw; }
  .row{ display:flex; gap:36px; flex-wrap:wrap; }
  .pill{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.62rem 1rem; border-radius:999px; font-weight:800;
    letter-spacing:.2px; text-decoration:none; color:#0b1220;
    background:linear-gradient(135deg,var(--pill1),var(--pill2) 46%,var(--pill3));
    border:1px solid rgba(0,0,0,.06);
    transition: filter .15s ease, transform .15s ease;
  }
  .pill:hover{ filter:brightness(.98); transform:translateY(-1px); }
  .pill:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

  .eyebrow{
    display:inline-block; font-size:12px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:#334155; background:#f8fafc;
    border:1px solid var(--line); padding:.35rem .6rem; border-radius:999px;
  }

  .hero{
    padding:58px 0 40px;
    background:
      radial-gradient(1200px 420px at 10% -10%, rgba(253,230,138,.35), transparent 60%),
      radial-gradient(1000px 520px at 100% -20%, rgba(59,130,246,.08), transparent 55%);
    border-bottom:1px solid var(--line);
  }
  .hero h1{
    margin:10px 0 10px;
    font-size:clamp(28px,3.6vw,44px); font-weight:900; letter-spacing:-.02em;
  }
  .hero .lead{
    margin:0 0 18px; color:var(--muted);
    font-size:clamp(15px,1.8vw,18px); line-height:1.6;
  }
  .hero-wrap{ display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap; }
  .hero-text{ flex:1 1 460px; min-width:280px; }
  .hero-media{
    flex:1 1 420px; min-width:260px;
    width:100%; min-height:220px; border-radius:var(--radius);
    background:#0b1220; display:grid; place-items:center; padding:12px;
    box-shadow:var(--shadow); border:1px solid var(--line);
  }
  .hero-media img{ max-width:100%; height:auto; border-radius:12px; display:block; }

  .features{ padding:34px 0 16px; }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
  }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:18px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(2,6,23,.12); border-color:rgba(30,144,255,.35); }
  .card h3{ margin:8px 0 6px; font-size:18px; }
  .card p{ margin:0; color:var(--muted); line-height:1.6; }
  .icon{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:#f1f5f9; border:1px solid var(--line); color:#1e3a8a; font-size:18px;
  }

  .how{ padding:10px 0 24px; }
  .steps{
    counter-reset: cstep; list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px;
  }
  .steps li{
    position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:14px 16px 14px 56px;
  }
  .steps li::before{
    counter-increment:cstep; content:counter(cstep);
    position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:999px;
    display:grid; place-items:center; background:#f1f5f9; border:1px solid var(--line); font-weight:800; color:#1e293b;
  }
  .steps h4{ margin:0 0 6px; font-size:16.5px; }
  .steps p{ margin:0; color:var(--muted); }

  .security{ padding:10px 0 24px; }
  .badge{
    display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#065f46;
    background:#ecfdf5; border:1px solid #a7f3d0; padding:.4rem .6rem; border-radius:999px; font-size:13px;
  }
  .note{
    margin:14px 0 0; background:#fffbeb; border:1px solid #fde68a; color:#713f12;
    border-radius:12px; padding:12px 14px; font-size:14px;
  }

  .plans{ padding:10px 0 24px; }
  .plan{
    display:flex; flex-direction:column; gap:8px; text-align:left;
  }
  .plan h4{ margin:0; font-size:18px; }
  .price{ font-weight:900; font-size:20px; }
  .muted{ color:#64748b; }

  .faq{ padding:10px 0 64px; }
  .faq-item{
    border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;
  }
  .faq-q{
    width:100%; text-align:left; background:#f8fafc; border:0; padding:14px 16px; font-weight:800; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between;
  }
  .faq-a{ padding:12px 16px; color:var(--muted); display:none; }
  .faq-item.open .faq-a{ display:block; }
  .faq-item.open .faq-q .chev{ transform:rotate(180deg); }
  .chev{ transition:transform .18s ease; }

  .center{ text-align:center; }
  .gspace{ margin-top:16px; }

  @media print{
    .pill{ display:none !important; }
    .card, .hero-media{ box-shadow:none; }
    body{ background:#fff; color:#000; }
  }
  @media (prefers-reduced-motion:reduce){ .pill, .card{ transition:none; } }