*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --navy: #0F1B35;
      --navy-mid: #162040;
      --teal: #00C896;
      --teal-dim: #00A87E;
      --teal-glow: rgba(0, 200, 150, 0.18);
      --sky: #EBF4FF;
      --white: #FFFFFF;
      --off-white: #F7FAFC;
      --gray-100: #F0F4F8;
      --gray-200: #E2E9F0;
      --gray-400: #94A3B8;
      --gray-600: #475569;
      --gray-800: #1E293B;
      --ink: #0B1120;
      --amber: #F59E0B;
      /* Font stacks — Fancy elegant serif with modern sans fallback */
      --font-display: 'Playfair Display', serif;
      --font-body: 'Outfit', sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 200, 150, 0.1);
      color: var(--teal-dim);
      border: 1px solid rgba(0, 200, 150, 0.25);
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.5px;
      font-family: var(--font-display);
    }

    .tag-dot {
      width: 6px;
      height: 6px;
      background: var(--teal);
      border-radius: 50%;
      animation: blink 2s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.up {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── AI ENGINE SECTION ────────────────────────────────── */
    .ai-engine {
      padding: 120px 0;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }

    .ai-engine::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    .ai-glow-c {
      position: absolute;
      width: 800px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(0, 200, 150, .08) 0%, transparent 65%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      pointer-events: none;
    }

    .ai-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .ai-left .tag {
      margin-bottom: 20px;
    }

    .ai-left h2 {
      font-family: var(--font-display);
      font-size: clamp(30px, 3.5vw, 46px);
      font-weight: 800;
      color: white;
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 18px;
    }

    .ai-left h2 span {
      color: var(--teal);
    }

    .ai-left p {
      font-size: 15px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 36px;
    }

    .ai-tech-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 40px;
    }

    .ai-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 16px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-display);
      letter-spacing: .3px;
      border: 1.5px solid;
      transition: all .25s;
    }

    .ai-pill:hover {
      transform: translateY(-2px);
    }

    .pill-teal {
      background: rgba(0, 200, 150, .1);
      border-color: rgba(0, 200, 150, .3);
      color: var(--teal);
    }

    .pill-blue {
      background: rgba(79, 134, 247, .1);
      border-color: rgba(79, 134, 247, .3);
      color: #7faff9;
    }

    .pill-purple {
      background: rgba(168, 85, 247, .1);
      border-color: rgba(168, 85, 247, .3);
      color: #c084fc;
    }

    .pill-amber {
      background: rgba(245, 158, 11, .1);
      border-color: rgba(245, 158, 11, .3);
      color: #fbbf24;
    }

    .pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: .7;
    }

    .ai-metric-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .ai-metric {
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 16px;
      padding: 20px;
      transition: background .25s;
    }

    .ai-metric:hover {
      background: rgba(0, 200, 150, .06);
      border-color: rgba(0, 200, 150, .2);
    }

    .ai-metric-val {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 800;
      color: white;
      line-height: 1;
    }

    .ai-metric-val span {
      color: var(--teal);
    }

    .ai-metric-label {
      font-size: 11px;
      color: rgba(255, 255, 255, .35);
      margin-top: 4px;
      line-height: 1.4;
    }

    /* AI right – pipeline diagram */
    .ai-right {
      position: relative;
    }

    .ai-pipeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .pipe-step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      padding: 20px 24px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 16px;
      margin-bottom: 8px;
      position: relative;
      transition: all .3s;
    }

    .pipe-step:hover {
      background: rgba(0, 200, 150, .06);
      border-color: rgba(0, 200, 150, .2);
    }

    .pipe-step::after {
      content: '↓';
      position: absolute;
      bottom: -18px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(0, 200, 150, .4);
      font-size: 14px;
      z-index: 1;
    }

    .pipe-step:last-child::after {
      display: none;
    }

    .pipe-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .pi-1 {
      background: rgba(0, 200, 150, .15);
    }

    .pi-2 {
      background: rgba(79, 134, 247, .15);
    }

    .pi-3 {
      background: rgba(168, 85, 247, .15);
    }

    .pi-4 {
      background: rgba(245, 158, 11, .15);
    }

    .pi-5 {
      background: rgba(239, 68, 68, .1);
    }

    .pipe-text {
      flex: 1;
    }

    .pipe-text strong {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: white;
      margin-bottom: 3px;
    }

    .pipe-text span {
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      line-height: 1.5;
    }

    .pipe-badge {
      font-size: 9px;
      font-weight: 700;
      font-family: var(--font-display);
      padding: 3px 10px;
      border-radius: 6px;
      letter-spacing: .5px;
      align-self: center;
      flex-shrink: 0;
    }

    .pb-live {
      background: rgba(0, 200, 150, .2);
      color: var(--teal);
    }

    .pb-ml {
      background: rgba(79, 134, 247, .2);
      color: #7faff9;
    }

    .pb-gen {
      background: rgba(168, 85, 247, .2);
      color: #c084fc;
    }

    .pb-rt {
      background: rgba(245, 158, 11, .2);
      color: #fbbf24;
    }

    .pb-out {
      background: rgba(0, 200, 150, .15);
      color: var(--teal);
    }

    @media(max-width:1024px) {
      .ai-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .ai-metric-row {
        grid-template-columns: 1fr 1fr;
      }
    }


    /* NAV */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 900;
      padding: 0 32px;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      transition: background-color .3s, backdrop-filter .3s, border-color .3s, box-shadow .3s;
    }

    nav.stuck {
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(16px);
      border-color: var(--gray-200);
      box-shadow: 0 2px 24px rgba(15, 27, 53, .06);
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      height: 40px;
    }

    .nav-logo img {
      height: 45px;
      width: auto;
      object-fit: contain;
    }

    nav:not(.stuck) .logo-dark {
      display: none;
    }

    nav.stuck .logo-light {
      display: none;
    }

    .nav-center {
      display: flex;
      gap: 32px;
    }

    .nav-center a {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      transition: color .2s;
    }

    nav.stuck .nav-center a {
      color: var(--gray-600);
    }

    .nav-center a:hover {
      color: white;
    }

    nav.stuck .nav-center a:hover {
      color: var(--navy);
    }

    .nav-right {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .btn-nav-ghost {
      font-size: 14px;
      font-weight: 500;
      color: white;
      text-decoration: none;
      padding: 8px 18px;
      border: 1.5px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      transition: all .2s;
    }

    nav.stuck .btn-nav-ghost {
      color: var(--navy);
      border-color: var(--gray-200);
    }

    .btn-nav-ghost:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-color: white;
    }

    nav.stuck .btn-nav-ghost:hover {
      background: var(--navy);
      color: white;
      border-color: var(--navy);
    }

    .btn-nav-fill {
      font-size: 14px;
      font-weight: 600;
      background: var(--teal);
      color: var(--navy);
      padding: 8px 20px;
      border-radius: 10px;
      text-decoration: none;
      transition: all .2s;
      font-family: var(--font-display);
    }

    .btn-nav-fill:hover {
      background: var(--teal-dim);
      box-shadow: 0 4px 20px rgba(0, 200, 150, .35);
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      background: #050a18;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 68px;
    }

    /* Globe canvas — fills entire hero */
    #heroCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    /* Dark overlay — heavy centre-bottom & top, lighter in middle so globe shows */
    .hero-vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(105deg, rgba(5, 10, 24, 0.95) 0%, rgba(5, 10, 24, 0.82) 32%, rgba(5, 10, 24, 0.35) 58%, rgba(5, 10, 24, 0.05) 75%),
        linear-gradient(180deg, rgba(5, 10, 24, 0.45) 0%, rgba(5, 10, 24, 0) 20%, rgba(5, 10, 24, 0) 75%, rgba(5, 10, 24, 0.60) 100%);
    }

    /* Remove old static glow blobs — globe has its own atmosphere */
    .hero-glow-1,
    .hero-glow-2 {
      display: none;
    }

    /* Hero inner — two column: text left, phones right */
    .hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
      padding: 80px 32px;
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
    }

    .hero-left .tag {
      margin-bottom: 28px;
      animation: fadeUp .6s ease forwards;
      opacity: 0;
      display: inline-flex;
    }

    .hero-left h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(32px, 3.2vw, 48px);
      line-height: 1.08;
      color: var(--white);
      letter-spacing: -1.5px;
      margin-bottom: 24px;
      animation: fadeUp .6s ease .1s forwards;
      opacity: 0;
      text-align: left;
    }

    .hero-left h1 .teal {
      color: var(--teal);
    }

    .hero-left p {
      font-size: 17px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.62);
      max-width: 480px;
      margin-bottom: 40px;
      font-weight: 300;
      animation: fadeUp .6s ease .2s forwards;
      opacity: 0;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      align-items: center;
      animation: fadeUp .6s ease .3s forwards;
      opacity: 0;
    }

    .btn-hero {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--teal);
      color: var(--navy);
      padding: 14px 28px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      font-family: var(--font-display);
      text-decoration: none;
      transition: all .25s;
      letter-spacing: -.2px;
    }

    .btn-hero:hover {
      background: #00dfa8;
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(0, 200, 150, .4);
    }

    .btn-hero-ghost {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.7);
      padding: 14px 20px;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      transition: color .2s;
    }

    .btn-hero-ghost:hover {
      color: white;
    }

    .hero-trust {
      margin-top: 48px;
      display: flex;
      align-items: center;
      gap: 20px;
      animation: fadeUp .6s ease .4s forwards;
      opacity: 0;
    }

    .trust-avatars {
      display: flex;
    }

    .trust-avatars span {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--navy-mid);
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -8px;
      font-weight: 600;
      font-family: var(--font-display);
    }

    .trust-avatars span:first-child {
      margin-left: 0;
    }

    .ta1 {
      background: #4F86F7;
      color: white
    }

    .ta2 {
      background: #F59E0B;
      color: white
    }

    .ta3 {
      background: #EF4444;
      color: white
    }

    .ta4 {
      background: var(--teal);
      color: var(--navy)
    }

    .ta5 {
      background: #A855F7;
      color: white
    }

    .trust-text {
      font-size: 13px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.5;
    }

    .trust-text strong {
      color: rgba(255, 255, 255, .85);
      font-weight: 500;
    }

    /* HERO PHONES */
    .hero-right {
      position: relative;
      height: 580px;
      animation: fadeUp .8s ease .35s forwards;
      opacity: 0;
    }

    .phone-wrap {
      position: absolute;
      border-radius: 36px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
      background: #111;
    }

    .phone-main {
      width: 240px;
      height: 500px;
      top: 40px;
      left: 50%;
      transform: translateX(-40%);
      z-index: 2;
      background: var(--navy);
      animation: phoneFloat 5s ease-in-out infinite;
    }

    .phone-secondary {
      width: 200px;
      height: 420px;
      top: 100px;
      right: 0;
      z-index: 1;
      background: #0e1a32;
      transform: rotate(5deg);
      animation: phoneFloatRight 5s ease-in-out infinite 1s;
    }

    @keyframes phoneFloat {

      0%,
      100% {
        transform: translateY(0) translateX(-40%)
      }

      50% {
        transform: translateY(-12px) translateX(-40%)
      }
    }

    @keyframes phoneFloatRight {

      0%,
      100% {
        transform: rotate(5deg) translateY(0)
      }

      50% {
        transform: rotate(5deg) translateY(-12px)
      }
    }

    .phone-screen {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: 20px 16px;
      overflow: hidden;
    }

    .phone-notch {
      width: 90px;
      height: 24px;
      background: #000;
      border-radius: 0 0 14px 14px;
      margin: -20px auto 12px;
    }

    .phone-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .phone-header-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 14px;
      color: white;
    }

    .phone-notif {
      width: 28px;
      height: 28px;
      background: rgba(0, 200, 150, .15);
      border: 1px solid rgba(0, 200, 150, .3);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .phone-search {
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .phone-section-label {
      font-size: 10px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 10px;
      font-weight: 500;
    }

    .phone-card {
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .phone-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 6px;
    }

    .phone-card-title {
      font-size: 11px;
      font-weight: 600;
      color: white;
    }

    .phone-card-badge {
      font-size: 9px;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 600;
      font-family: var(--font-display);
    }

    .badge-new {
      background: rgba(0, 200, 150, .2);
      color: var(--teal)
    }

    .badge-hot {
      background: rgba(245, 158, 11, .2);
      color: var(--amber)
    }

    .phone-card-price {
      font-size: 13px;
      font-weight: 700;
      color: var(--teal);
      font-family: var(--font-display);
    }

    .phone-card-meta {
      font-size: 9px;
      color: rgba(255, 255, 255, .35);
      margin-top: 2px;
    }

    .phone-xp-bar {
      margin-top: 12px;
      background: rgba(255, 255, 255, .05);
      border-radius: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 200, 150, .12);
    }

    .xp-label {
      font-size: 9px;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: 6px;
    }

    .xp-bar {
      height: 4px;
      background: rgba(255, 255, 255, .1);
      border-radius: 4px;
      overflow: hidden;
    }

    .xp-fill {
      height: 100%;
      width: 68%;
      background: linear-gradient(90deg, var(--teal), #00dfa8);
      border-radius: 4px;
    }

    .xp-num {
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
      text-align: right;
      margin-top: 4px;
    }

    .phone-match-card {
      background: rgba(0, 200, 150, .08);
      border: 1px solid rgba(0, 200, 150, .2);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 8px;
    }

    .match-icon {
      font-size: 20px;
      margin-bottom: 6px;
    }

    .match-title {
      font-size: 11px;
      font-weight: 600;
      color: white;
      margin-bottom: 4px;
    }

    .match-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .match-tag {
      background: rgba(255, 255, 255, .08);
      border-radius: 4px;
      font-size: 8px;
      padding: 2px 6px;
      color: rgba(255, 255, 255, .5);
    }

    /* LOGO BELT */
    .logo-belt {
      background: var(--off-white);
      padding: 28px 0;
      border-bottom: 1px solid var(--gray-200);
      overflow: hidden;
    }

    .logo-belt-inner {
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .belt-track {
      display: flex;
      gap: 60px;
      align-items: center;
      animation: scrollBelt 22s linear infinite;
      white-space: nowrap;
      flex-shrink: 0;
    }

    @keyframes scrollBelt {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .belt-item {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      color: var(--gray-400);
      letter-spacing: -.3px;
      white-space: nowrap;
    }

    .belt-sep {
      color: var(--teal);
      font-size: 20px;
      flex-shrink: 0;
    }

    /* FEATURES */
    .features {
      padding: 120px 0;
      background: white;
    }

    .features-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .features-header .tag {
      margin-bottom: 20px;
    }

    .features-header h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.5px;
      line-height: 1.1;
      margin-bottom: 16px;
    }

    .features-header h2 span {
      color: var(--teal);
    }

    .features-header p {
      font-size: 16px;
      color: var(--gray-600);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .feat-card {
      padding: 36px 32px;
      border-radius: 20px;
      background: var(--off-white);
      border: 1.5px solid var(--gray-200);
      transition: all .3s;
      position: relative;
      overflow: hidden;
    }

    .feat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--teal), #00dfa8);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s;
    }

    .feat-card:hover {
      border-color: rgba(0, 200, 150, .35);
      background: white;
      box-shadow: 0 12px 48px rgba(0, 200, 150, .08), 0 0 0 1px rgba(0, 200, 150, .12);
      transform: translateY(-4px);
    }

    .feat-card:hover::before {
      transform: scaleX(1);
    }

    .feat-icon {
      width: 52px;
      height: 52px;
      background: rgba(0, 200, 150, .1);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 24px;
    }

    .feat-card h3 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px;
      letter-spacing: -.3px;
    }

    .feat-card p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--gray-600);
      font-weight: 300;
    }

    .feat-card.wide {
      grid-column: span 2;
    }

    .feat-mini-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 16px;
    }

    .feat-mini-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--gray-100);
      border-radius: 10px;
      font-size: 13px;
      color: var(--gray-800);
    }

    .feat-mini-item span {
      font-size: 16px;
    }

    /* HOW IT WORKS */
    .how {
      padding: 120px 0;
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }

    .how::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 48px 48px;
    }

    .how-glow {
      position: absolute;
      width: 700px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(0, 200, 150, .07) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }

    .how-header {
      text-align: center;
      margin-bottom: 72px;
      position: relative;
      z-index: 2;
    }

    .how-header .tag {
      margin-bottom: 20px;
    }

    .how-header h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800;
      color: white;
      letter-spacing: -1.5px;
      line-height: 1.1;
      margin-bottom: 16px;
    }

    .how-header p {
      font-size: 16px;
      color: rgba(255, 255, 255, .5);
      max-width: 460px;
      margin: 0 auto;
    }

    .steps-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      position: relative;
      z-index: 2;
    }

    .steps-row::before {
      content: '';
      position: absolute;
      top: 44px;
      left: calc(12.5% + 24px);
      right: calc(12.5% + 24px);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 200, 150, .3), rgba(0, 200, 150, .3), transparent);
      z-index: 0;
    }

    .step-col {
      padding: 0 20px;
      text-align: center;
      position: relative;
    }

    .step-circle {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .04);
      border: 1.5px solid rgba(0, 200, 150, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      font-size: 28px;
      position: relative;
      z-index: 1;
      transition: all .3s;
    }

    .step-col:hover .step-circle {
      background: rgba(0, 200, 150, .12);
      border-color: var(--teal);
      box-shadow: 0 0 32px rgba(0, 200, 150, .25);
    }

    .step-num {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 24px;
      height: 24px;
      background: var(--teal);
      color: var(--navy);
      border-radius: 50%;
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-display);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-col h4 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -.2px;
    }

    .step-col p {
      font-size: 13px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .45);
      font-weight: 300;
    }

    /* XP SYSTEM */
    .xp {
      padding: 120px 0;
      background: white;
    }

    .xp-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .xp-left .tag {
      margin-bottom: 20px;
    }

    .xp-left h2 {
      font-family: var(--font-display);
      font-size: clamp(30px, 3.5vw, 46px);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.2px;
      line-height: 1.1;
      margin-bottom: 16px;
    }

    .xp-left h2 span {
      color: var(--teal);
    }

    .xp-left>p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--gray-600);
      margin-bottom: 36px;
      font-weight: 300;
    }

    .xp-rows {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .xp-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 14px;
      border: 1.5px solid var(--gray-200);
      background: var(--off-white);
      transition: all .25s;
    }

    .xp-row:hover {
      border-color: rgba(0, 200, 150, .35);
      background: rgba(0, 200, 150, .03);
      transform: translateX(4px);
    }

    .xp-row-icon {
      width: 40px;
      height: 40px;
      background: rgba(0, 200, 150, .1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .xp-row-text {
      flex: 1;
    }

    .xp-row-text strong {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
      display: block;
    }

    .xp-row-text span {
      font-size: 12px;
      color: var(--gray-400);
    }

    .xp-row-amount {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      color: var(--teal);
    }

    .xp-spend {
      margin-top: 20px;
      padding: 20px;
      background: var(--navy);
      border-radius: 14px;
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .xp-spend-icon {
      font-size: 24px;
      flex-shrink: 0;
    }

    .xp-spend h4 {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      color: white;
      margin-bottom: 6px;
    }

    .xp-spend p {
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.5;
    }

    .xp-card-big {
      background: var(--navy);
      border-radius: 24px;
      padding: 32px;
      position: relative;
      overflow: hidden;
    }

    .xp-card-big::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(0, 200, 150, .12) 0%, transparent 70%);
      border-radius: 50%;
    }

    .xp-card-label {
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 20px;
    }

    .xp-total {
      font-family: var(--font-display);
      font-size: 56px;
      font-weight: 800;
      color: white;
      line-height: 1;
    }

    .xp-total small {
      font-size: 18px;
      color: var(--teal);
    }

    .xp-card-subtext {
      font-size: 13px;
      color: rgba(255, 255, 255, .4);
      margin-top: 4px;
      margin-bottom: 28px;
    }

    .xp-progress-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .xp-prog-meta {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 6px;
    }

    .xp-prog-bar {
      height: 6px;
      background: rgba(255, 255, 255, .08);
      border-radius: 6px;
      overflow: hidden;
    }

    .xp-prog-fill {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--teal), #00dfa8);
    }

    .xp-mini-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 16px;
    }

    .xp-mini {
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 14px;
      padding: 16px;
    }

    .xp-mini-val {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      color: white;
      margin-bottom: 2px;
    }

    .xp-mini-label {
      font-size: 11px;
      color: rgba(255, 255, 255, .35);
    }

    /* APP SECTION */
    .app-section {
      padding: 120px 0;
      background: linear-gradient(135deg, #081428 0%, #0F1B35 50%, #0A2240 100%);
      position: relative;
      overflow: hidden;
    }

    .app-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 44px 44px;
    }

    .app-glow-l {
      position: absolute;
      top: 0;
      left: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(0, 200, 150, .1) 0%, transparent 65%);
      border-radius: 50%;
    }

    .app-glow-r {
      position: absolute;
      bottom: -100px;
      right: -100px;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(79, 134, 247, .1) 0%, transparent 65%);
      border-radius: 50%;
    }

    .app-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .app-left .tag {
      margin-bottom: 20px;
    }

    .app-left h2 {
      font-family: var(--font-display);
      font-size: clamp(30px, 3.5vw, 48px);
      font-weight: 800;
      color: white;
      letter-spacing: -1.5px;
      line-height: 1.1;
      margin-bottom: 20px;
    }

    .app-left h2 span {
      color: var(--teal);
    }

    .app-left p {
      font-size: 16px;
      color: rgba(255, 255, 255, .55);
      line-height: 1.7;
      margin-bottom: 36px;
      font-weight: 300;
    }

    .app-features-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 44px;
    }

    .app-feat {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 14px;
      color: rgba(255, 255, 255, .7);
    }

    .app-feat-check {
      width: 22px;
      height: 22px;
      background: rgba(0, 200, 150, .15);
      border: 1px solid rgba(0, 200, 150, .35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
      color: var(--teal);
    }

    .app-dl-buttons {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .dl-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 24px;
      background: rgba(255, 255, 255, .06);
      border: 1.5px solid rgba(255, 255, 255, .12);
      border-radius: 14px;
      text-decoration: none;
      transition: all .25s;
    }

    .dl-btn:hover {
      background: rgba(255, 255, 255, .1);
      border-color: rgba(0, 200, 150, .4);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
    }

    .dl-btn-icon {
      font-size: 28px;
      line-height: 1;
      color: var(--teal);
    }

    .dl-btn-text {
      display: flex;
      flex-direction: column;
    }

    .dl-btn-sub {
      font-size: 10px;
      color: rgba(255, 255, 255, .45);
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .dl-btn-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: white;
      letter-spacing: -.3px;
    }

    .dl-qr-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      font-size: 12px;
      color: rgba(255, 255, 255, .3);
    }

    /* App phones */
    .app-right {
      position: relative;
      height: 560px;
    }

    .app-phone {
      position: absolute;
      border-radius: 32px;
      box-shadow: 0 40px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
      overflow: hidden;
      background: #0e1830;
    }

    .ap-main {
      width: 220px;
      height: 460px;
      left: 50%;
      top: 20px;
      transform: translateX(-55%);
      z-index: 3;
      animation: appFloat 5s ease-in-out infinite;
    }

    .ap-left {
      width: 180px;
      height: 380px;
      left: 20px;
      top: 80px;
      z-index: 2;
      animation: appFloatL 5s ease-in-out infinite .8s;
    }

    .ap-right-phone {
      width: 180px;
      height: 380px;
      right: 15px;
      top: 80px;
      z-index: 2;
      animation: appFloatR 5s ease-in-out infinite 1.6s;
    }

    @keyframes appFloat {

      0%,
      100% {
        transform: translateY(0) translateX(-55%)
      }

      50% {
        transform: translateY(-14px) translateX(-55%)
      }
    }

    @keyframes appFloatL {

      0%,
      100% {
        transform: rotate(-6deg) translateY(0)
      }

      50% {
        transform: rotate(-6deg) translateY(-10px)
      }
    }

    @keyframes appFloatR {

      0%,
      100% {
        transform: rotate(6deg) translateY(0)
      }

      50% {
        transform: rotate(6deg) translateY(-10px)
      }
    }

    .app-screen {
      position: absolute;
      inset: 0;
      padding: 18px 14px;
      overflow: hidden;
    }

    .app-screen-notch {
      width: 80px;
      height: 20px;
      background: #000;
      border-radius: 0 0 12px 12px;
      margin: -18px auto 10px;
    }

    .app-screen-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 13px;
      color: white;
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .match-score-big {
      background: linear-gradient(135deg, rgba(0, 200, 150, .15), rgba(0, 200, 150, .05));
      border: 1px solid rgba(0, 200, 150, .25);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 10px;
    }

    .msb-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .msb-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, .4);
    }

    .msb-score {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      color: var(--teal);
    }

    .msb-title {
      font-size: 11px;
      font-weight: 600;
      color: white;
      margin-bottom: 3px;
    }

    .msb-sub {
      font-size: 9px;
      color: rgba(255, 255, 255, .35);
    }

    .mini-result {
      background: rgba(255, 255, 255, .05);
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .mr-left {
      font-size: 10px;
      color: rgba(255, 255, 255, .6);
    }

    .mr-left strong {
      display: block;
      font-size: 11px;
      color: white;
      font-weight: 600;
    }

    .mr-price {
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      color: var(--teal);
    }

    .side-screen {
      position: absolute;
      inset: 0;
      padding: 14px 12px;
      overflow: hidden;
    }

    .side-notch {
      width: 60px;
      height: 16px;
      background: #000;
      border-radius: 0 0 10px 10px;
      margin: -14px auto 10px;
    }

    .side-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 11px;
      color: white;
      margin-bottom: 10px;
    }

    .side-listing {
      background: rgba(255, 255, 255, .05);
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 6px;
    }

    .sl-price {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 800;
      color: var(--teal);
    }

    .sl-title {
      font-size: 9px;
      color: rgba(255, 255, 255, .55);
      margin-top: 2px;
    }

    .sl-badge {
      display: inline-block;
      font-size: 8px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      margin-top: 5px;
    }

    .sl-b1 {
      background: rgba(0, 200, 150, .2);
      color: var(--teal)
    }

    .sl-b2 {
      background: rgba(245, 158, 11, .2);
      color: var(--amber)
    }

    /* LISTINGS */
    .listings {
      padding: 120px 0;
      background: var(--gray-100);
    }

    .listings-header {
      margin-bottom: 60px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .listings-header-left .tag {
      margin-bottom: 16px;
    }

    .listings-header-left h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.2px;
      line-height: 1.1;
    }

    .listings-header-left h2 span {
      color: var(--teal);
    }

    .listings-header-right {
      font-size: 14px;
      color: var(--gray-600);
      max-width: 340px;
      text-align: right;
      line-height: 1.6;
      font-weight: 300;
    }

    .listing-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .listing-card {
      background: white;
      border-radius: 18px;
      overflow: hidden;
      border: 1.5px solid var(--gray-200);
      transition: all .3s;
      cursor: pointer;
    }

    .listing-card:hover {
      border-color: rgba(0, 200, 150, .3);
      box-shadow: 0 16px 48px rgba(0, 0, 0, .08);
      transform: translateY(-4px);
    }

    .listing-img-wrap {
      position: relative;
      overflow: hidden;
    }

    .listing-img-wrap img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
      transition: transform .4s;
    }

    .listing-card:hover .listing-img-wrap img {
      transform: scale(1.04);
    }

    .listing-status {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 10px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 8px;
      font-family: var(--font-display);
    }

    .ls-pub {
      background: rgba(0, 200, 150, .9);
      color: var(--navy)
    }

    .ls-hot {
      background: rgba(245, 158, 11, .9);
      color: white
    }

    .ls-new {
      background: rgba(255, 255, 255, .95);
      color: var(--navy)
    }

    .listing-xp {
      position: absolute;
      top: 14px;
      right: 14px;
      background: var(--navy);
      color: var(--teal);
      font-size: 10px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 8px;
      font-family: var(--font-display);
    }

    .listing-body {
      padding: 20px;
    }

    .listing-price {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 4px;
      letter-spacing: -.5px;
    }

    .listing-title {
      font-size: 14px;
      color: var(--gray-800);
      margin-bottom: 10px;
      font-weight: 500;
    }

    .listing-meta-row {
      display: flex;
      gap: 14px;
      font-size: 12px;
      color: var(--gray-400);
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .listing-footer {
      padding-top: 14px;
      border-top: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .listing-agent {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .listing-agent-av {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-display);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .av1 {
      background: #4F86F7;
      color: white
    }

    .av2 {
      background: var(--teal);
      color: var(--navy)
    }

    .av3 {
      background: #A855F7;
      color: white
    }

    .listing-agent-name {
      font-size: 12px;
      color: var(--gray-600);
      font-weight: 500;
    }

    .listing-commission {
      font-size: 12px;
      color: var(--teal);
      font-weight: 600;
      font-family: var(--font-display);
    }

    /* STATS */
    .proof {
      padding: 80px 0;
      background: white;
      border-top: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
    }

    .proof-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-radius: 20px;
      overflow: hidden;
      border: 1.5px solid var(--gray-200);
    }

    .proof-cell {
      background: white;
      padding: 40px 32px;
      text-align: center;
      border-right: 1px solid var(--gray-200);
      transition: background .2s;
    }

    .proof-cell:last-child {
      border-right: none;
    }

    .proof-cell:hover {
      background: var(--off-white);
    }

    .proof-num {
      font-family: var(--font-display);
      font-size: 44px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .proof-num span {
      color: var(--teal);
    }

    .proof-label {
      font-size: 13px;
      color: var(--gray-400);
    }

    /* PRICING */
    .pricing {
      padding: 120px 0;
      background: var(--off-white);
    }

    .pricing-header {
      text-align: center;
      margin-bottom: 72px;
    }

    .pricing-header .tag {
      margin-bottom: 20px;
    }

    .pricing-header h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 4vw, 50px);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.5px;
      margin-bottom: 14px;
    }

    .pricing-header p {
      font-size: 15px;
      color: var(--gray-600);
      max-width: 440px;
      margin: 0 auto;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .pricing-card {
      background: white;
      border: 1.5px solid var(--gray-200);
      border-radius: 22px;
      padding: 40px 32px;
      transition: all .3s;
      position: relative;
    }

    .pricing-card:hover {
      border-color: rgba(0, 200, 150, .35);
      box-shadow: 0 12px 48px rgba(0, 0, 0, .07);
      transform: translateY(-4px);
    }

    .pricing-card.featured {
      background: var(--navy);
      border-color: var(--navy);
    }

    .pricing-card.featured:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(15, 27, 53, .3);
    }

    .pricing-popular {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--teal);
      color: var(--navy);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 100px;
      font-family: var(--font-display);
      white-space: nowrap;
    }

    .pricing-plan {
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gray-400);
      font-weight: 600;
      margin-bottom: 20px;
      font-family: var(--font-display);
    }

    .pricing-card.featured .pricing-plan {
      color: rgba(255, 255, 255, .45);
    }

    .pricing-price {
      font-family: var(--font-display);
      font-size: 52px;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 4px;
    }

    .pricing-card.featured .pricing-price {
      color: white;
    }

    .pricing-price .cur {
      font-size: 22px;
      vertical-align: top;
      margin-top: 12px;
      display: inline-block;
      color: var(--teal);
    }

    .pricing-period {
      font-size: 13px;
      color: var(--gray-400);
      margin-bottom: 28px;
    }

    .pricing-card.featured .pricing-period {
      color: rgba(255, 255, 255, .4);
    }

    .pricing-divider {
      height: 1px;
      background: var(--gray-200);
      margin-bottom: 24px;
    }

    .pricing-card.featured .pricing-divider {
      background: rgba(255, 255, 255, .1);
    }

    .pricing-features {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 32px;
    }

    .pf-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--gray-600);
    }

    .pricing-card.featured .pf-item {
      color: rgba(255, 255, 255, .65);
    }

    .pf-check {
      width: 18px;
      height: 18px;
      background: rgba(0, 200, 150, .12);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      color: var(--teal);
      flex-shrink: 0;
    }

    .pricing-card.featured .pf-check {
      background: rgba(0, 200, 150, .2);
    }

    .pricing-btn {
      display: block;
      text-align: center;
      padding: 14px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-display);
      text-decoration: none;
      transition: all .25s;
      letter-spacing: -.2px;
      border: 1.5px solid var(--gray-200);
      color: var(--navy);
    }

    .pricing-btn:hover {
      background: var(--navy);
      color: white;
      border-color: var(--navy);
    }

    .pricing-card.featured .pricing-btn {
      background: var(--teal);
      color: var(--navy);
      border-color: var(--teal);
    }

    .pricing-card.featured .pricing-btn:hover {
      background: #00dfa8;
      box-shadow: 0 8px 24px rgba(0, 200, 150, .4);
    }

    /* TESTIMONIALS */
    .testimonials {
      padding: 120px 0;
      background: white;
    }

    .testimonials-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .testimonials-header .tag {
      margin-bottom: 20px;
    }

    .testimonials-header h2 {
      font-family: var(--font-display);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -1.2px;
    }

    .testimonials-header h2 span {
      color: var(--teal);
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .testi-card {
      padding: 32px;
      border-radius: 20px;
      border: 1.5px solid var(--gray-200);
      background: var(--off-white);
      transition: all .3s;
    }

    .testi-card:hover {
      border-color: rgba(0, 200, 150, .25);
      background: white;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .06);
      transform: translateY(-3px);
    }

    .testi-stars {
      color: var(--amber);
      font-size: 14px;
      margin-bottom: 16px;
      letter-spacing: 2px;
    }

    .testi-text {
      font-size: 14px;
      line-height: 1.75;
      color: var(--gray-600);
      margin-bottom: 24px;
      font-weight: 300;
      font-style: italic;
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .testi-av {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 14px;
      font-weight: 800;
      font-family: var(--font-display);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tav1 {
      background: #4F86F7;
      color: white
    }

    .tav2 {
      background: var(--teal);
      color: var(--navy)
    }

    .tav3 {
      background: #F59E0B;
      color: white
    }

    .testi-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
    }

    .testi-role {
      font-size: 12px;
      color: var(--gray-400);
    }

    /* FINAL CTA */
    .final-cta {
      padding: 120px 0;
      background: var(--navy);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .final-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .final-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(0, 200, 150, .1) 0%, transparent 70%);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .final-cta-content {
      position: relative;
      z-index: 2;
    }

    .final-cta .tag {
      margin: 0 auto 28px;
    }

    .final-cta h2 {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 64px);
      font-weight: 800;
      color: white;
      letter-spacing: -2px;
      line-height: 1.05;
      margin-bottom: 20px;
    }

    .final-cta h2 span {
      color: var(--teal);
    }

    .final-cta p {
      font-size: 16px;
      color: rgba(255, 255, 255, .5);
      max-width: 460px;
      margin: 0 auto 44px;
      line-height: 1.7;
      font-weight: 300;
    }

    .final-cta-btns {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn-big-teal {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--teal);
      color: var(--navy);
      padding: 16px 36px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 800;
      font-family: var(--font-display);
      text-decoration: none;
      letter-spacing: -.3px;
      transition: all .25s;
    }

    .btn-big-teal:hover {
      background: #00dfa8;
      box-shadow: 0 16px 40px rgba(0, 200, 150, .4);
      transform: translateY(-2px);
    }

    .btn-big-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font-display);
      text-decoration: none;
      letter-spacing: -.3px;
      transition: all .25s;
      border: 1.5px solid rgba(255, 255, 255, .18);
      color: rgba(255, 255, 255, .8);
    }

    .btn-big-ghost:hover {
      border-color: rgba(0, 200, 150, .5);
      color: white;
    }

    /* FOOTER */
    footer {
      background: #080F20;
      padding: 72px 0 40px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 60px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      margin-bottom: 40px;
    }

    .footer-brand .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      margin-bottom: 14px;
      height: 48px;
    }

    .footer-brand .nav-logo img {
      height: 45px;
    }

    .footer-brand p {
      font-size: 13px;
      color: rgba(255, 255, 255, .35);
      line-height: 1.7;
      max-width: 260px;
      font-weight: 300;
    }

    .footer-social {
      display: flex;
      gap: 10px;
      margin-top: 24px;
    }

    .footer-soc-btn {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      transition: all .2s;
    }

    .footer-soc-btn:hover {
      background: rgba(0, 200, 150, .1);
      border-color: rgba(0, 200, 150, .3);
      color: var(--teal);
    }

    .footer-col h5 {
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 20px;
      font-weight: 600;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col ul li a {
      font-size: 13px;
      color: rgba(255, 255, 255, .45);
      text-decoration: none;
      transition: color .2s;
      font-weight: 300;
    }

    .footer-col ul li a:hover {
      color: var(--teal);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-bottom p {
      font-size: 12px;
      color: rgba(255, 255, 255, .25);
    }

    .footer-bottom-right {
      display: flex;
      gap: 24px;
    }

    .footer-bottom-right a {
      font-size: 12px;
      color: rgba(255, 255, 255, .25);
      text-decoration: none;
      transition: color .2s;
    }

    .footer-bottom-right a:hover {
      color: rgba(255, 255, 255, .5);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* RESPONSIVE */
    @media(max-width:1024px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .feat-card.wide {
        grid-column: span 1
      }

      .steps-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px
      }

      .steps-row::before {
        display: none
      }

      .xp-inner,
      .app-inner {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .listings-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
      }

      .listings-header-right {
        text-align: left
      }

      .listing-cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .proof-inner {
        grid-template-columns: repeat(2, 1fr)
      }

      .testimonials-grid {
        grid-template-columns: 1fr 1fr
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px
      }

      .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 420px
      }
    }

    @media(max-width:768px) {
      nav {
        padding: 0 20px
      }

      .nav-center,
      .btn-nav-ghost {
        display: none
      }

      .container {
        padding: 0 20px
      }

      .hero-inner {
        grid-template-columns: 1fr;
        padding: 60px 20px
      }

      .hero-right {
        display: none
      }

      .hero-right {
        display: none
      }

      .features-grid {
        grid-template-columns: 1fr
      }

      .listing-cards {
        grid-template-columns: 1fr
      }

      .testimonials-grid {
        grid-template-columns: 1fr
      }

      .app-right {
        display: none
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center
      }

      .proof-inner {
        grid-template-columns: 1fr 1fr
      }
    }

    /* Phosphor Icons Color Overrides */
    .feat-icon,
    .step-circle,
    .phone-notif,
    .match-icon,
    .xp-row-icon,
    .xp-spend-icon,
    .app-screen-title span {
      color: var(--teal);
    }

    .phone-match-card[style*="79,134,247"] .match-icon {
      color: #7faff9;
    }

    .feat-mini-item span {
      color: var(--teal);
    }

    .pi-1 {
      color: var(--teal);
    }

    .pi-2 {
      color: #7faff9;
    }

    .pi-3 {
      color: #c084fc;
    }

    .pi-4 {
      color: #fbbf24;
    }

    .pi-5 {
      color: #ef4444;
    }

    .xp-mini-label i {
      color: var(--amber);
    }