:root {
      --brand: #0077ff;
      --brand-dark: #0c7bd0;
      --text: #0f172a;
      --muted: #6b7280;
      --bg: var(---colorOnPrimary);
      --card: #ffffff;
      --border: #e5e7eb;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--text);
      background: var(--bg);
      line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { color: var(--brand); text-decoration: none; }

    .container { max-width: 1350px; margin: 0 auto; padding: 0 2rem; }

    /* Hero */
    .hero {
      padding: 6rem 0 4rem;
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
    }
    .hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin: 0 0 1rem;
      font-weight: normal;
    }
    .hero p { max-width: 720px; font-size: 18px; margin-bottom: 2rem; color: #374151; }
    .cta-btn {
      display: inline-block;
      padding: 0.9rem 1.4rem;
      border-radius: 0.75rem;
      font-weight: 600;
      background: var(--brand);
      color: #fff;
      border: 1px solid var(--brand);
      transition: all .15s ease;
    }
    .cta-btn.secondary { background: #fff; color: var(--text); border-color: var(--border); margin-left: .75rem; }
    .cta-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

    /* Section */
    section { padding: 4rem 0; }
    .section-header { margin-bottom: 2.25rem; }
    .section-header h2 { margin: 0 0 .5rem; font-size: 1.75rem; }
    .muted { color: var(--muted); }

    .grid { display: grid; gap: 1.25rem; }
    @media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr);} }

    .card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem 1.5rem; }
    .card h3 { margin-top: 0; }

    /* How it works steps */
    .step { display: flex; gap: .75rem; }
    .step-number { flex-shrink: 0; background: var(--brand); color: #fff; width: 34px; height: 34px; border-radius: .75rem; display: grid; place-items: center; font-weight: 700; }

    /* FAQ */
    details { background: #fff; border: 1px solid var(--border); border-radius: .75rem; padding: .75rem 1rem; }
    details + details { margin-top: .6rem; }
    summary { cursor: pointer; font-weight: 600; }

    /* Terms */
    .terms p { margin: .65rem 0; }

    /* Footer CTA */
    .footer-cta {
      background: transparent;
      padding: 3.5rem 0;
      text-align: center;
    }

    footer { text-align: center; padding: 1rem 0 2.25rem; color: #6b7280; font-size: .9rem; }

    @media screen and (min-width:1024px) {
      .button{
        max-width: 240px !important;
      }
    }