:root {
      --purple:        #6b21a8;
      --purple-hero:   #5b1d98;
      --purple-title:  #a78bd4;
      --purple-lite:   #ede9fe;
      --purple-pale:   #f5f3ff;
      --white:         #ffffff;
      --off:           #f8f7fb;
      --border:        #e8e8ed;
      --ink:           #111118;
      --gray-micro:    #888899;
      --gray-body:     #5a5a6e;
      --gray-stat-lbl: #aaaabc;
      --gold:          #f59e0b;
    }

    body {
      font-family: 'Space Grotesk', sans-serif;
      background: var(--white);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
    }

    /* ═══════════════════════════════════════
       HERO  — flat solid purple like reference
    ═══════════════════════════════════════ */

.hero{
  background: var(--color-grad);
  padding:68px 60px 0;
  position:relative;
  overflow:hidden
}
.hero::before{
  content:'';position:absolute;top:-120px;right:-80px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,181,253,.18) 0%,transparent 65%);
  pointer-events:none
}
.hero::after{
  content:'';position:absolute;bottom:0;left:0;width:100%;height:160px;
  background:radial-gradient(ellipse 80% 60% at 50% 120%,rgba(196,181,253,.12) 0%,transparent 70%);
  pointer-events:none
}
.g{position:absolute;pointer-events:none}
.g1{top:22px;left:5%;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-radius:4px;transform:rotate(20deg)}
.g2{top:70px;left:18%;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.g3{top:38px;right:34%;width:14px;height:14px;border:2px solid rgba(255,255,255,.14);transform:rotate(45deg)}
.g4{top:130px;left:4%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g5{top:50px;right:13%;width:12px;height:12px;border:2px solid rgba(255,255,255,.16);transform:rotate(15deg)}
.g6{bottom:110px;right:6%;width:15px;height:15px;border:2px solid rgba(255,255,255,.12);border-radius:4px;transform:rotate(30deg)}
.g7{top:100px;right:27%;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.g8{bottom:140px;left:28%;width:10px;height:10px;border:2px solid rgba(255,255,255,.1);transform:rotate(25deg)}

.hero-inner{max-width: 80vw;margin:0 auto;text-align:center;position:relative;z-index:1;/* padding-bottom:60px; */}
.h-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:100px;padding:5px 18px 5px 10px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:22px
}
.h-badge-dot{width:6px;height:6px;border-radius:50%;background:#c4b5fd;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(1.7)}}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(36px,5vw,58px);font-weight:800;
  color:#fff;letter-spacing:-2.5px;line-height:1.02;margin-bottom:16px
}
.hero h1 em{font-style:normal;color:#c4b5fd}
.hero-sub{font-size:16px;color:rgba(255,255,255,.55);line-height:1.85;max-width:460px;margin:0 auto 36px}

    /* ═══════════════════════════════════════
       CONTENT WRAPPER
    ═══════════════════════════════════════ */
    .page {
      max-width: 80vw;
      margin: 0 auto;
      padding: 0;
    }

    /* ═══════════════════════════════════════
       SECTION 1 — two columns, generous space
    ═══════════════════════════════════════ */
    .s1 {
      padding: 80px 0 88px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      border-bottom: 1px solid var(--border);
    }

    /* micro label — all caps, muted, small */
    .micro {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gray-micro);
      margin-bottom: 14px;
    }

    /* big bold black heading */
    .big-heading {
      font-size: 32px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 20px;
    }

    .body-p {
      font-size: 15px;
      font-weight: 400;
      color: var(--gray-body);
      line-height: 1.8;
      margin-bottom: 12px;
    }
    .body-p:last-of-type { margin-bottom: 0; }
    .body-p strong { color: var(--ink); font-weight: 600; }

    /* 2×2 stat tiles */
    .stat-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 32px;
    }
    .st {
      background: var(--color-bg);
      border: 1px solid var(--color-bg-border);
      border-radius: 12px;
      padding: 22px 18px;
      text-align: center;
      transition: border-color .2s, box-shadow .2s;
    }
    .st:hover {
      border-color: #c4a8e8;
      box-shadow: 0 4px 18px rgba(107,33,168,.07);
    }
    .st-n {
      font-size: 18px;
      font-weight: 700;
      color: var(--purple);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 5px;
    }
    .st-n sup { font-size: 0.8rem; color: var(--gold); vertical-align: super; }
    .st-l {
      font-size: 15px;
      font-weight: 500;
      color: var(--gray-stat-lbl);
      text-transform: uppercase;
      letter-spacing: 0.09em;
    }

    /* right col — benefit rows */
    .s1-right .big-heading { margin-bottom: 6px; }

    .benefit-rows { margin-top: 18px; }
    .brow {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid var(--border);
    }
    .brow:last-child { border-bottom: none; }

    /* small circle icon — like reference purple circles */
    .brow-icon {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1.5px solid var(--color-bg-border);
      background: var(--color-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .brow-icon svg {
      width: 13px;
      height: 13px;
      color: black;
      flex-shrink: 0;
    }

    .brow-text {
      font-size: 15px;
      color: var(--gray-body);
      line-height: 1.7;
      font-weight: 400;
      padding-top: 3px;
    }
    .brow-text strong { color: var(--ink); font-weight: 600; }

    /* ═══════════════════════════════════════
       SECTION 2 — "Everything you need"
    ═══════════════════════════════════════ */
    .s2 {
      padding: 80px 0 96px;
    }

    .s2-head {
      margin-bottom: 48px;
    }
    .s2-head .big-heading {
      font-size: 32px;
      margin-bottom: 12px;
      line-height: 1.1;
    }
    .s2-sub {
      font-size: 15px;
      color: var(--gray-body);
      font-weight: 400;
      line-height: 1.6;
    }

    /* 4 cards row */
    .feat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .fc {
      background: var(--color-bg);
      border: 1px solid var(--color-bg-border);
      border-radius: 16px;
      padding: 28px 20px 26px;
      transition: transform .22s ease, box-shadow .22s ease, background .22s;
    }
    .fc:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(107,33,168,.09);
      background: var(--white);
    }

    /* icon box — rounded square, matches reference */
    .fc-ico {
      width: 48px; height: 48px;
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
      font-size: 1.3rem;
    }
    .fc.a .fc-ico { background: #fef9e7; }
    .fc.b .fc-ico { background: #eef2ff; }
    .fc.c .fc-ico { background: #f0fdfa; }
    .fc.d .fc-ico { background: var(--purple-pale); }

    .fc-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 9px;
      letter-spacing: -0.01em;
    }
    .fc-desc {
      font-size: 15px;
      color: var(--gray-body);
      line-height: 1.7;
      font-weight: 400;
    }

    /* ═══════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════ */
    @keyframes up {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero  { animation: up .5s ease 0s both; }
    .s1    { animation: up .5s ease .1s both; }
    .s2    { animation: up .5s ease .2s both; }

    /* ═══════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════ */

    /* ── Large Laptop (≤1200px) ── */
    @media (max-width: 1200px) {
      .page {/* padding: 0 4vw; */}
      .hero { padding: 56px 4vw 100px; }
    }

    /* ── Laptop (≤1024px) ── */
    @media (max-width: 1024px) {
      .hero { padding: 52px 4vw 96px; }

      .s1 { gap: 56px; padding: 72px 0 80px; }
      .big-heading { font-size: 32px; }

      .s2 { padding: 72px 0 88px; }
      .s2-head .big-heading { font-size: 32px; }
      .feat-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }

      .stat-tiles { margin-top: 28px; }
      .st { padding: 20px 14px; }
      .st-n {/* font-size: 1.55rem; */}
    }

    /* ── Tablet (≤860px) ── */
    @media (max-width: 860px) {
      .hero { padding: 44px 5vw 90px; }
      .hero-sub { font-size: 016px; max-width: 380px; }

      .page {/* padding: 0 5vw; */}

      /* Section 1: stack columns */
      .s1 {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 60px 0 68px;
        border-bottom: 1px solid var(--border);
      }

      /* Stat tiles stay 2×2 */
      .stat-tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
      .st { padding: 18px 14px; }
      .st-n {/* font-size: 19px; */}

      /* Benefit rows slightly tighter */
      .brow { gap: 12px; padding: 15px 0; }
      .brow-text {/* font-size: 0.87rem; */}

      /* Section 2 */
      .s2 { padding: 60px 0 76px; }
      .s2-head { margin-bottom: 36px; }
      .s2-head .big-heading { font-size: 32px; }
      .feat-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .fc { padding: 24px 18px 22px; }
      .fc-title {/* font-size: 0.92rem; */}
      .fc-desc {/* font-size: 0.8rem; */}
    }

    /* ── Large Mobile (≤640px) ── */
    @media (max-width: 640px) {
      .hero { padding: 38px 4vw 82px; }
      .hero-pill { font-size: 0.6rem; padding: 4px 13px; margin-bottom: 18px; }
      .hero-sub {/* font-size: 0.87rem; */max-width: 100%;}

      .page {/* padding: 0 4vw; */}

      .s1 { gap: 40px; padding: 52px 0 60px; }
      .big-heading { font-size: 22px; margin-bottom: 16px; }
      .body-p {/* font-size: 0.88rem; */}
  .hero-wave svg{
    vertical-align: bottom;
  }
      .stat-tiles {gap: 9px;margin-top: 24px;grid-template-columns: 1fr;}
      .st { padding: 16px 12px; border-radius: 10px; }
      .st-n {font-size: 22px;}
      .st-l {font-size: 14px;line-height: 1.2rem;}

      .micro {/* font-size: 0.6rem; */margin-bottom: 10px;}

      .brow { gap: 11px; padding: 14px 0; }
      .brow-icon { width: 27px; height: 27px; }
      .brow-icon svg { width: 12px; height: 12px; }
      .brow-text {/* font-size: 0.84rem; */padding-top: 2px;}

      .s2 { padding: 52px 0 64px; }
      .s2-head { margin-bottom: 28px; }
      .s2-sub {/* font-size: 0.86rem; */}

      /* Feature cards: 2 cols stay */
      .feat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .fc { padding: 20px 15px 18px; border-radius: 13px; }
      .fc-ico { width: 42px; height: 42px; border-radius: 11px; font-size: 1.15rem; margin-bottom: 14px; }
      .fc-title {/* font-size: 0.88rem; */margin-bottom: 7px;}
      .fc-desc {/* font-size: 0.77rem; */line-height: 1.65;}
    }

    /* ── Mobile (≤480px) ── */
    @media (max-width: 480px) {
      .hero { padding: 32px 4vw 76px; }
      .hero-sub {/* font-size: 0.84rem; */}

      .page {/* padding: 0 3.5vw; */}

      .s1 { gap: 36px; padding: 44px 0 52px; }
      .big-heading { font-size: 22px; line-height: 1.18; }
      .body-p {/* font-size: 0.85rem; *//* line-height: 1.75; */}

      /* Stats keep 2×2 */
      .stat-tiles { gap: 8px; margin-top: 22px; }
      .st { padding: 15px 10px; border-radius: 9px; }
      .st-n {font-size: 22px;}
      .st-l {/* font-size: 0.6rem; */}

      .brow { padding: 12px 0; gap: 10px; }
      .brow-text {/* font-size: 0.82rem; */}

      .s2 { padding: 44px 0 56px; }
      .s2-head { margin-bottom: 24px; }
      .s2-head .big-heading { font-size: 22px; }

      /* Feature cards: 1 column on mobile */
      .feat-row { grid-template-columns: 1fr; gap: 10px; }
      .fc {
        padding: 18px 16px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
      }
      .fc-ico { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; margin-bottom: 0; flex-shrink: 0; }
      .fc-body { flex: 1; min-width: 0; }
      .fc-title {/* font-size: 016px; */margin-bottom: 5px;}
      .fc-desc {/* font-size: 014px; */}
    }

    /* ── Small Mobile (≤360px) ── */
    /* @media (max-width: 360px) {
      .hero { padding: 28px 4vw 70px; }
      .hero-line1, .hero-line2 { font-size: 2rem; }

      .page { padding: 0 3vw; }

      .s1 { gap: 32px; padding: 38px 0 46px; }
      .big-heading { font-size: 1.35rem; }
      .stat-tiles { gap: 7px; }

      .s2 { padding: 38px 0 48px; }
      .fc { padding: 15px 13px; gap: 11px; }
      .fc-ico { width: 36px; height: 36px; font-size: 1rem; }

    } */
    @media(max-width: 576px){
      .page {
        max-width: 90vw;
        }
    }
    h2{
          line-height: 1em;
    }