:root {
    --bg-0: #0b0d11;
    --bg-1: #0d1016;
    --panel: #141821;
    --panel-hi: #171c26;
    --inset: #0b0d11;
    --border: #232a36;
    --border-hi: #3a4453;
    --text-1: #e7ecf3;
    --text-2: #a9b3c2;
    --text-3: #6f7885;
    --accent: #4f8ef7;
    --money: #63d68a;
    --amber: #d98a3b;
    --slate: #64789e;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background:
      radial-gradient(1100px 480px at 70% -80px, rgba(79, 142, 247, 0.09), transparent 60%),
      linear-gradient(180deg, var(--bg-1), var(--bg-0) 600px);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration: none; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

  /* ---------- nav ---------- */
  nav {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(14px);
    background: rgba(13, 16, 22, 0.82);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner {
    display: flex; align-items: center; gap: 26px;
    min-height: 62px;
  }
  .brand { display: flex; align-items: center; gap: 11px; color: var(--text-1); font-weight: 750; font-size: 17px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .nav-links { display: flex; gap: 22px; margin-left: 8px; }
  .nav-links a { color: var(--text-2); font-size: 14px; font-weight: 500; }
  .nav-links a:hover { color: var(--text-1); }
  .spacer { flex: 1; }
  .btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14.5px;
    border: 1px solid var(--border-hi);
    color: var(--text-1);
    background: var(--panel);
    transition: transform 120ms ease, filter 120ms ease;
  }
  .btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
  .btn.primary {
    border: 0;
    background: linear-gradient(180deg, #5e9bff, #3f7ce0);
    color: #fff;
    box-shadow: 0 6px 22px rgba(79, 142, 247, 0.28);
  }
  .btn.money {
    border: 0;
    background: linear-gradient(180deg, #57c97f, #3da362);
    color: #0a1510;
    box-shadow: 0 6px 22px rgba(99, 214, 138, 0.22);
  }
  .btn.small { padding: 8px 16px; font-size: 13px; }

  /* ---------- hero ---------- */
  header { padding: 84px 0 40px; text-align: center; }
  .kicker {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
  }
  .kicker b { color: var(--money); }
  h1 {
    margin: 22px auto 0;
    max-width: 780px;
    font-size: clamp(34px, 5.2vw, 58px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.022em;
  }
  h1 .grad {
    background: linear-gradient(92deg, #7eb0ff, #63d68a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .sub {
    margin: 18px auto 0;
    max-width: 640px;
    color: var(--text-2);
    font-size: 18px;
  }
  .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
  .cta-note { margin-top: 12px; color: var(--text-3); font-size: 13px; }
  .cta-note b { color: var(--text-2); font-weight: 600; }

  /* ---------- hero app mock ---------- */
  .mock {
    margin: 56px auto 0;
    max-width: 980px;
    border: 1px solid var(--border-hi);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--panel-hi), var(--panel));
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    text-align: left;
  }
  .mock-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
  .dot { width: 11px; height: 11px; border-radius: 50%; }
  .mock-bar span:nth-child(1) { background: #ff5f57; }
  .mock-bar span:nth-child(2) { background: #febc2e; }
  .mock-bar span:nth-child(3) { background: #28c840; }
  .mock-bar em { margin-left: 10px; color: var(--text-3); font-size: 12px; font-style: normal; font-weight: 600; }
  .mock-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 22px; }
  .mock h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-1); }
  .stat-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; grid-column: 1 / -1; }
  .stat {
    border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
    background: linear-gradient(180deg, var(--panel-hi), var(--inset));
  }
  .stat.money { border-color: #28452f; background: linear-gradient(180deg, #17251c, #111a15); }
  .stat small { display: block; color: var(--text-3); font-size: 9.5px; font-weight: 800; letter-spacing: 1.8px; }
  .stat b { display: block; margin-top: 5px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .stat.money b { color: var(--money); }
  .stat.free b { color: #8fb4e8; }
  .rowlist { display: grid; gap: 8px; }
  .frow {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--inset); padding: 9px 13px; font-size: 13px;
  }
  .frow i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .frow .bar { flex: 1; height: 5px; border-radius: 3px; background: #222835; overflow: hidden; }
  .frow .bar b { display: block; height: 100%; border-radius: inherit; }
  .frow em { font-style: normal; color: var(--text-2); font-weight: 650; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .crow {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--inset); padding: 10px 13px;
  }
  .crow div { flex: 1; min-width: 0; }
  .crow strong { display: block; font-size: 13px; }
  .crow strong b { color: var(--money); font-weight: 750; margin-left: 6px; }
  .crow span { display: block; color: var(--text-3); font-size: 10.5px; margin-top: 1px; }
  .chip { padding: 3px 9px; border-radius: 9px; font-size: 9.5px; font-weight: 650; border: 1px solid; white-space: nowrap; }
  .chip.safe { color: var(--money); border-color: var(--money); }
  .chip.redl { color: var(--amber); border-color: var(--amber); }
  .review-pill { padding: 5px 11px; border: 1px solid var(--border-hi); border-radius: 7px; color: var(--text-2); font-size: 11px; font-weight: 600; }

  /* ---------- trust strip ---------- */
  .trust {
    margin: 64px 0 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(20, 24, 33, 0.5);
  }
  .trust-inner {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    padding: 26px 0;
  }
  .trust-item { display: flex; gap: 12px; align-items: flex-start; }
  .trust-item .tick {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
    background: rgba(99, 214, 138, 0.12); border: 1px solid rgba(99, 214, 138, 0.5);
    display: grid; place-items: center; color: var(--money); font-size: 12px; font-weight: 800;
  }
  .trust-item b { display: block; font-size: 14px; }
  .trust-item span { color: var(--text-3); font-size: 12.5px; }

  /* ---------- sections ---------- */
  section { padding: 84px 0 0; }
  .sec-kicker { color: var(--accent); font-size: 13px; font-weight: 750; letter-spacing: 1.5px; text-transform: uppercase; }
  h2 { margin: 10px 0 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
  .sec-sub { margin: 12px 0 0; max-width: 620px; color: var(--text-2); font-size: 16.5px; }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
  .card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel-hi), var(--panel));
    padding: 24px;
  }
  .card .ico {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; font-size: 19px;
    background: var(--inset); border: 1px solid var(--border-hi);
  }
  .card h3 { margin: 16px 0 0; font-size: 17px; font-weight: 750; }
  .card p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; }

  /* ---------- pricing ---------- */
  .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; max-width: 860px; }
  .price {
    border: 1px solid var(--border-hi);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--panel-hi), var(--panel));
    padding: 30px;
    position: relative;
  }
  .price.featured { border-color: rgba(99, 214, 138, 0.55); background: linear-gradient(180deg, #16211b, #111820); }
  .price .tag {
    position: absolute; top: -12px; left: 26px;
    padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 750;
    background: linear-gradient(180deg, #57c97f, #3da362); color: #0a1510;
  }
  .price h3 { margin: 0; font-size: 18px; }
  .price .amount { margin-top: 14px; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
  .price .amount s { color: var(--text-3); font-size: 22px; font-weight: 600; margin-right: 10px; }
  .price .amount small { color: var(--text-3); font-size: 14px; font-weight: 500; }
  .price ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
  .price li { color: var(--text-2); font-size: 14.5px; padding-left: 26px; position: relative; }
  .price li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 800; }
  .price.soon li::before { color: var(--slate); }
  .price .btn { display: block; text-align: center; margin-top: 26px; }
  .soon-badge { display: inline-block; margin-left: 10px; padding: 3px 10px; border: 1px solid var(--border-hi); border-radius: 999px; color: var(--text-3); font-size: 11px; font-weight: 650; vertical-align: middle; }

  /* ---------- faq ---------- */
  .faq { max-width: 760px; margin-top: 34px; }
  details {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    margin-bottom: 10px;
    padding: 0 20px;
  }
  summary {
    cursor: pointer; list-style: none;
    padding: 17px 0; font-weight: 650; font-size: 15.5px;
    display: flex; align-items: center;
  }
  summary::after { content: "+"; margin-left: auto; color: var(--text-3); font-size: 20px; font-weight: 400; }
  details[open] summary::after { content: "–"; }
  details p { margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; }

  /* ---------- final cta + footer ---------- */
  .final {
    margin-top: 92px;
    border-top: 1px solid var(--border);
    background:
      radial-gradient(700px 320px at 50% 0, rgba(99, 214, 138, 0.07), transparent 65%);
    text-align: center;
    padding: 84px 0 70px;
  }
  footer { border-top: 1px solid var(--border); padding: 30px 0 44px; color: var(--text-3); font-size: 13px; }
  .foot-inner { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  .foot-inner .brand { font-size: 14px; }
  .foot-inner .brand img { width: 22px; height: 22px; }

  @media (max-width: 880px) {
    .mock-body { grid-template-columns: 1fr; }
    .trust-inner { grid-template-columns: 1fr 1fr; }
    .grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .stat-cards { grid-template-columns: 1fr; }
  }