  <style>
    /* ===== RESET & BASE ===== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --text-strong: #171717;
      --text-sub: #5c5c5c;
      --text-soft: #a3a3a3;
      --bg-white: #ffffff;
      --bg-weak: #f7f7f7;
      --bg-soft: #ebebeb;
      --stroke-soft: #ebebeb;
      --primary: #FA7319;
      --primary-hover: #e0650f;
      --grey-bg: #f7f7f7;
      --grey-hover: #ebebeb;
      --shadow-xs: 0px 1px 2px 0px rgba(10,13,20,0.03);
      --shadow-card: 0px 0px 0px 1px rgba(23,23,23,0.08), 0px 1px 1px -0.5px rgba(23,23,23,0.04), 0px 3px 3px -1.5px rgba(23,23,23,0.04);
      --shadow-card-sm: 0px 1px 1px -0.5px rgba(23,23,23,0.06), 0px 3px 3px -1.5px rgba(23,23,23,0.06);
      --shadow-badge: 0px 0px 0px 1px rgba(23,23,23,0.02), 0px 1px 1px -0.5px rgba(23,23,23,0.06), 0px 3px 3px -1.5px rgba(23,23,23,0.06);
    }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text-strong);
      background: var(--bg-white);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.5;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; }
    input, textarea { font-family: inherit; }

    /* ===== MOTION SYSTEM ===== */
    :root {
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --dur-xs: 150ms;   /* micro feedback */
      --dur-sm: 250ms;   /* small interactions */
      --dur-md: 350ms;   /* medium interactions */
      --dur-lg: 450ms;   /* layout transitions */
      --dur-xl: 600ms;   /* scroll reveals */
    }

    /* ===== UTILITY ===== */
    .container { max-width: 1600px; margin: 0 auto; padding-left: 188px; padding-right: 188px; }
    .text-center { text-align: center; }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
    @keyframes rippleEffect { to { width:300px; height:300px; opacity:0; } }
    @keyframes phoneEntrance {
      0% { opacity: 0; transform: translateX(-50%) translateY(48px) scale(0.99); }
      100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    }
    @keyframes shineSweep {
      0% { left: -100%; }
      100% { left: 150%; }
    }
    @keyframes badgeShimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @keyframes badgeBorderRotate {
      0% { --angle: 0deg; }
      100% { --angle: 360deg; }
    }
    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .anim { opacity:0; transform:translateY(20px); transition: opacity var(--dur-xl) var(--ease), transform var(--dur-xl) var(--ease); }
    .anim.visible { opacity:1; transform:translateY(0); }
    .anim.d1 { transition-delay:0.1s; }
    .anim.d2 { transition-delay:0.2s; }
    .anim.d3 { transition-delay:0.3s; }

    /* ===== BUTTONS ===== */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      font-size: 14px; font-weight: 500; letter-spacing: -0.084px; line-height: 20px;
      border: none; cursor: pointer; white-space: nowrap;
      transition: all var(--dur-sm) var(--ease);
      position: relative; overflow: hidden;
    }
    .btn-primary {
      background: var(--primary); color: #fff;
      padding: 6px 10px; border-radius: 10px;
    }
    .btn-primary:hover { background: var(--primary-hover); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary-lg {
      background: var(--primary); color: #fff;
      padding: 10px 14px; border-radius: 10px; gap: 4px;
    }
    .btn-primary-lg:hover { background: var(--primary-hover); }
    .btn-primary-lg:active { transform: scale(0.98); }
    .btn-outline {
      background: var(--bg-white); color: var(--text-sub);
      padding: 6px 14px; border-radius: 10px;
      border: 1px solid var(--stroke-soft);
      box-shadow: var(--shadow-xs);
    }
    .btn-outline:hover { background: #f0f0f0; border-color: #d4d4d4; }
    .btn-grey {
      background: var(--grey-bg); color: var(--text-sub);
      padding: 10px 18px; border-radius: 12px;
    }
    .btn-grey:hover { background: var(--grey-hover); }
    .btn-grey:active { transform: scale(0.98); }
    .btn-full { width: 100%; }
    .btn-icon { opacity: 0.64; display: inline-flex; align-items: center; }
    .btn-icon svg { width: 20px; height: 20px; }
    /* Shine sweep on hover — a light band slides across the button */
    .btn::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.25) 40%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.25) 60%,
        transparent 100%
      );
      pointer-events: none;
      transition: none;
    }
    .btn:hover::after {
      animation: shineSweep 0.6s ease forwards;
    }
    /* Grey/outline buttons get a subtler sweep since they're light */
    .btn-grey::after,
    .btn-outline::after {
      background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(0,0,0,0.03) 40%,
        rgba(0,0,0,0.06) 50%,
        rgba(0,0,0,0.03) 60%,
        transparent 100%
      );
    }

    /* ===== NAVIGATION ===== */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(255,255,255,1);
      backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
      display: flex; align-items: center; gap: 24px;
      padding: 20px 188px;
      transition: background var(--dur-md) var(--ease), backdrop-filter var(--dur-md) var(--ease), -webkit-backdrop-filter var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease), transform var(--dur-md) var(--ease);
    }
    .nav.scrolled {
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 1px 12px rgba(0,0,0,0.06);
    }
    .nav.nav-hidden {
      transform: translateY(-100%);
    }
    .brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .brand-icon {
      width: 22.63px; height: 22px; flex-shrink: 0;
    }
    .brand-icon img { width: 100%; height: 100%; }
    .brand-name {
      font-size: 18px; font-weight: 500; color: var(--text-strong);
      line-height: 24px; white-space: nowrap;
    }
    .nav-links { display: flex; gap: 4px; align-items: center; }
    .nav-links a {
      font-size: 14px; font-weight: 500; color: var(--text-sub);
      padding: 6px 12px; border-radius: 10px;
      letter-spacing: -0.084px; line-height: 20px;
      transition: color var(--dur-sm) var(--ease), background var(--dur-sm) var(--ease);
    }
    .nav-links a:hover { color: var(--text-strong); background: var(--bg-weak); }
    .nav-actions { display: flex; gap: 12px; align-items: center; margin-left: auto; }

    /* Hamburger */
    .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; margin-left:auto; z-index:200; }
    .hamburger span { width:20px; height:2px; background:var(--text-strong); border-radius:2px; transition:all var(--dur-md) var(--ease); display:block; }
    .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .hamburger.active span:nth-child(2) { opacity:0; }
    .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
    .mobile-menu {
      display:none; position:fixed; top:0; left:0; right:0; bottom:0;
      background:white; z-index:150; padding:80px 24px 24px;
      flex-direction:column; gap:4px;
    }
    .mobile-menu.active { display:flex; }
    .mobile-menu a {
      font-size:16px; font-weight:500; color:var(--text-sub);
      padding:14px 0; border-bottom:1px solid var(--stroke-soft);
    }

    /* ===== HERO ===== */
    .hero {
      background: var(--bg-white);
      padding: 32px 188px 64px;
      display: flex; flex-direction: column; align-items: center;
      gap: 56px;
    }
    .hero-top {
      display: flex; flex-direction: column; align-items: center;
      gap: 28px; animation: fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .hero-text-group {
      display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%;
    }
    .hero-title-group {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      max-width: 742px;
    }
    /* Badge */
    .badge-pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--bg-weak); padding: 4px 9px 4px 6px; border-radius: 10px;
      position: relative; overflow: hidden;
    }
    .badge-pill::before {
      content: '';
      position: absolute; top: 0; left: -200%; width: 200%; height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 70%,
        transparent 100%
      );
      animation: badgeShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }
    .badge-pill-tag {
      background: white; padding: 2px 5px; border-radius: 5px;
      font-size: 10px; font-weight: 600; color: var(--text-sub);
      letter-spacing: 0.2px; line-height: 12px;
      box-shadow: 0px 1px 1px -0.5px rgba(23,23,23,0.04), 0px 3px 3px -1.5px rgba(23,23,23,0.04);
    }
    .badge-pill-text {
      font-size: 14px; font-weight: 500; color: var(--text-sub);
      letter-spacing: -0.084px; line-height: 20px;
      display: flex; align-items: center; gap: 6px;
    }
    .badge-pill-text svg { width: 16px; height: 16px; flex-shrink: 0; }

    .hero-title {
      font-size: 56px; font-weight: 500; text-align: center;
      letter-spacing: -0.56px; line-height: 64px;
    }
    .hero-title .faded { color: var(--text-soft); }
    .hero-subtitle {
      font-size: 16px; font-weight: 400; color: var(--text-sub);
      text-align: center; line-height: 24px; letter-spacing: -0.176px;
      max-width: 500px;
    }
    .hero-actions { display: flex; gap: 16px; align-items: center; }

    /* Hero Image Area */
    .hero-visual {
      position: relative; width: 100%; max-width: 1224px;
      height: 700px;
    }
    .hero-bg-card {
      position: absolute; bottom: 0; left: 0; right: 0; height: 564px;
      background: linear-gradient(180deg, var(--bg-weak) 0%, var(--bg-soft) 100%);
      border-radius: 40px;
      opacity: 0;
      animation: fadeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
    }
    /* Phone image wrapper: animated on page load */
    .hero-phone-img {
      position: absolute; left: 50%; top: 0;
      width: 424px; height: 700px; z-index: 2;
      overflow: hidden;
      pointer-events: none;
      /* Start state for animation */
      opacity: 0;
      transform: translateX(-50%) translateY(48px) scale(0.99);
      /* Entrance animation */
      animation: phoneEntrance 850ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards;
      /* will-change hint for GPU compositing */
      will-change: transform, opacity;
    }
    .hero-phone-img img {
      position: absolute;
      /* Figma crop values */
      width: 271.06%;
      height: 164.18%;
      left: -86.02%;
      top: -11.79%;
      max-width: none;
      object-fit: cover;
      /* Prevent image from triggering its own layout */
      display: block;
    }
    /* Hero corner info blocks */
    .hero-corner {
      position: absolute; z-index: 1;
      display: flex; align-items: flex-start; gap: 48px;
      opacity: 0;
      animation: fadeIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 850ms forwards;
    }
    .hero-corner--lt { top: 64px; left: 69px; }
    .hero-corner--rt { top: 64px; right: 69px; }
    .hero-corner--lb { top: 420px; left: 89px; align-items: center; }
    .hero-corner--rb { top: 420px; right: 56px; align-items: center; }
    .hero-corner-text {
      font-size: 14px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; width: 232px;
    }
    .hero-corner-text.text-right { text-align: right; }
    .hero-corner-text strong { color: var(--text-sub); font-weight: 500; }
    .hero-vline { width: 1px; height: 121px; background: var(--stroke-soft); flex-shrink: 0; }
    .hero-vline-sm { width: 1px; height: 80px; background: var(--stroke-soft); flex-shrink: 0; }
    .hero-corner-col { display: flex; flex-direction: column; gap: 12px; }
    .hero-corner-col.align-end { align-items: flex-end; }
    .hero-corner-col.align-start { align-items: flex-start; }
    .avatar-stack {
      display: flex; align-items: center;
      height: 20px;
    }
    .avatar-stack img {
      height: 20px; width: auto;
    }
    .hero-meta {
      font-size: 14px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; white-space: nowrap;
    }
    .hero-meta strong { color: var(--text-sub); font-weight: 500; }
    .appstore-row { display: flex; align-items: center; gap: 8px; }
    .appstore-icon-sm {
      width: 20px; height: 20px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .appstore-icon-sm img { width: 20px; height: 20px; }

    /* ===== SECTION BADGES ===== */
    .sec-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px 4px 8px; border-radius: 9px;
      background: var(--bg-weak);
      position: relative;
      overflow: hidden;
    }
    /* Animated shimmer highlight that sweeps across the badge */
    .sec-badge::before {
      content: '';
      position: absolute; top: 0; left: -200%; width: 200%; height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0) 70%,
        transparent 100%
      );
      animation: badgeShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }
    .sec-badge--white { background: white; }
    .sec-badge-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .sec-badge-icon img { width: 16px; height: 16px; }
    .sec-badge-label {
      font-size: 14px; font-weight: 500; color: var(--text-sub);
      letter-spacing: -0.084px; line-height: 20px;
    }
    /* Typewriter cursor blink */
    .typewrite-cursor {
      display: inline-block; width: 1px; height: 14px;
      background: var(--text-sub); margin-left: 1px;
      vertical-align: middle;
      animation: cursorBlink 0.6s step-end infinite;
    }
    @keyframes cursorBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .sec-title-sm {
      font-size: 24px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.12px; line-height: 32px; text-align: center;
    }
    .sec-title-md {
      font-size: 40px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.4px; line-height: 48px;
    }
    .sec-title-lg {
      font-size: 48px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.48px; line-height: 56px; text-align: center;
    }
    .sec-subtitle {
      font-size: 16px; font-weight: 400; color: var(--text-sub);
      letter-spacing: -0.176px; line-height: 24px;
      text-align: center; max-width: 528px;
    }
    .sec-subtitle strong { font-weight: 500; }

    /* ===== PARTNERS ===== */
    .partners {
      background: #fafafa;
      padding: 96px 0;
      display: flex; flex-direction: column; align-items: center; gap: 32px;
      overflow: hidden;
    }
    .partners-head { padding: 0 188px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .ticker-wrap {
      width: 100%; position: relative;
      padding: 12px 0; /* room for hover lift */
      mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    }
    .ticker-track {
      display: flex; gap: 6px; width: max-content;
      animation: ticker 40s linear infinite;
    }
    .ticker-track:hover { animation-play-state: paused; }
    .partner-card {
      width: 240px; height: 240px; border-radius: 24px;
      background: var(--bg-weak); flex-shrink: 0;
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
      padding: 16px 20px;
      transition: transform var(--dur-md) var(--ease);
      cursor: pointer;
    }
    .partner-card:hover { transform: translateY(-6px) scale(1.02); }
    /* Background image layer */
    .partner-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .partner-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Dark overlay on top of image for contrast */
    .partner-bg::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.15) 50%,
        rgba(0,0,0,0.45) 100%
      );
    }
    /* Number label */
    .partner-num {
      position: absolute; top: 20px; left: 20px; z-index: 3;
      font-size: 12px; font-weight: 500; color: white;
      line-height: 16px;
    }
    .partner-num.dark { color: var(--text-strong); }
    /* Logo at bottom — always scale, never stretch */
    .partner-logo {
      position: relative; z-index: 3;
      height: 28px; max-width: 160px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .partner-logo img {
      display: block;
      height: auto;
      max-height: 28px;
      max-width: 140px;
      width: auto;
      /* object-fit does nothing on auto-sized images;
         width:auto + height:auto + max constraints = natural scaling */
    }
    .partners-foot {
      padding: 0 188px;
      font-size: 14px; font-weight: 400; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; text-align: center;
    }
    .partners-foot strong { color: var(--text-sub); font-weight: 500; }

    /* ===== HOW IT WORKS ===== */
    .how-section {
      background: var(--bg-white);
      padding: 96px 188px;
      display: flex; flex-direction: column; align-items: center; gap: 40px;
    }
    .how-head {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .how-head-titles {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .how-accordion {
      display: flex; flex-direction: column; gap: 12px;
      width: 100%; max-width: 700px;
    }
    .acc-item {
      background: white; border-radius: 28px;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: box-shadow var(--dur-md) var(--ease);
    }
    .acc-item:hover { box-shadow: var(--shadow-card), 0 6px 16px rgba(0,0,0,0.04); }
    .acc-head {
      display: flex; align-items: center; gap: 20px;
      padding: 28px; cursor: pointer; user-select: none;
    }
    .acc-num {
      width: 44px; height: 44px; border-radius: 96px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 500; letter-spacing: -0.176px; line-height: 24px;
      text-align: center; color: var(--text-sub); background: var(--bg-weak);
      transition: color 300ms var(--ease), background 300ms var(--ease);
      position: relative;
    }
    .acc-num::before {
      content: '';
      position: absolute; inset: 0; border-radius: 50%;
      padding: 2px;
      background: conic-gradient(from 90deg, white 0deg, #FA7319 360deg);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 300ms var(--ease);
    }
    .acc-item.open .acc-num {
      background: white; color: var(--primary);
    }
    .acc-item.open .acc-num::before {
      opacity: 1;
    }
    /* Roll micro-interaction — triggered by JS adding .acc-num-roll */
    @keyframes numRoll {
      0%   { transform: rotate(0deg) translateX(0); }
      40%  { transform: rotate(14deg) translateX(2px); }
      70%  { transform: rotate(-3deg) translateX(-0.5px); }
      100% { transform: rotate(0deg) translateX(0); }
    }
    .acc-num-roll {
      animation: numRoll 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .acc-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .acc-info-title {
      font-size: 16px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.176px; line-height: 24px;
    }
    .acc-item:not(.open) .acc-info-title { color: var(--text-sub); }
    .acc-info-desc {
      font-size: 14px; font-weight: 400; color: var(--text-sub);
      letter-spacing: -0.084px; line-height: 20px;
    }
    .acc-item:not(.open) .acc-info-desc { color: var(--text-soft); }
    .acc-toggle {
      width: 32px; height: 32px; border-radius: 96px; flex-shrink: 0;
      border: 1px solid var(--stroke-soft); background: white;
      display: flex; align-items: center; justify-content: center;
      box-shadow: var(--shadow-xs); transition: all var(--dur-md) var(--ease);
    }
    .acc-item.open .acc-toggle { background: var(--bg-weak); }
    .acc-toggle svg { width: 20px; height: 20px; color: var(--text-sub); transition: transform 380ms var(--ease); }
    .acc-item.open .acc-toggle svg { transform: rotate(180deg); }
    .acc-body {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      transition: grid-template-rows 520ms var(--ease);
    }
    .acc-item.open .acc-body {
      grid-template-rows: 1fr;
    }
    .acc-body-wrap {
      overflow: hidden;
    }
    .acc-body-inner {
      padding: 0 28px 28px;
      opacity: 0; transform: translateY(8px) scale(0.985);
      transition: opacity 320ms var(--ease) 80ms, transform 420ms var(--ease) 80ms;
    }
    .acc-item.open .acc-body-inner {
      opacity: 1; transform: translateY(0) scale(1);
    }
    .acc-scenario {
      background: var(--bg-weak); border-radius: 20px;
      overflow: hidden; position: relative;
    }
    .acc-scenario img {
      width: 100%; height: auto; display: block;
      border-radius: 20px;
    }
    .how-foot {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .how-foot-text {
      font-size: 14px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; text-align: center; max-width: 374px;
    }
    .how-foot-text strong { color: var(--text-sub); font-weight: 500; }

    /* ===== PRODUCTS ===== */
    .products-section {
      background: var(--bg-white); padding: 96px 0;
      display: flex; flex-direction: column; align-items: center; gap: 48px;
    }
    .products-head {
      padding: 0 292px;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .products-head-titles { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .products-carousel-wrap { position: relative; width: 100%; padding: 0 60px; }
    .products-carousel { overflow: visible; width: 100%; clip-path: inset(-12px 0 -12px 0); }
    .products-track {
      display: flex; gap: 24px; align-items: stretch;
      transition: transform var(--dur-lg) var(--ease);
    }
    .p-card {
      width: 608px; flex-shrink: 0;
      background: var(--bg-weak); border-radius: 28px;
      padding: 12px 4px 4px 4px;
      display: flex; flex-direction: column; gap: 12px;
      align-items: stretch;
      transition: transform var(--dur-md) var(--ease);
    }
    .p-card:hover { transform: translateY(-4px); }
    .p-card-top {
      display: flex; align-items: center; gap: 16px;
      padding: 0 20px; /* px-[24px] minus the 4px card padding */
    }
    .p-card-brand { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.084px; }
    .p-card-save {
      background: rgba(250,115,25,0.07); padding: 4px 10px 4px 8px; border-radius: 7px;
      font-size: 12px; font-weight: 500; color: var(--primary); line-height: 16px;
    }
    .p-card-body { display: flex; align-items: stretch; width: 100%; flex: 1; }
    .p-card-info {
      flex: 1; min-width: 0; padding: 32px; background: white;
      border-radius: 24px 0 0 24px;
      box-shadow: var(--shadow-card-sm);
      display: flex; flex-direction: column; gap: 24px;
    }
    .p-card-name { font-size: 20px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.12px; line-height: 28px; }
    .p-card-specs { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.084px; line-height: 20px; margin-top: 8px; }
    .p-card-price-row { display: flex; align-items: center; gap: 12px; }
    .p-card-price { font-size: 40px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.4px; line-height: 48px; }
    .p-card-price-detail { display: flex; flex-direction: column; gap: 2px; }
    .p-card-price-period { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.084px; }
    .p-card-price-billed { font-size: 12px; color: var(--text-soft); }
    .p-card-img {
      width: 300px; flex-shrink: 0;
      background: white; border-radius: 0 24px 24px 0;
      box-shadow: var(--shadow-card-sm);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; position: relative;
    }
    .p-card-img img { max-width: 80%; max-height: 80%; object-fit: contain; transition: transform var(--dur-md) var(--ease); }
    .p-card:hover .p-card-img img { transform: scale(1.06); }
    .carousel-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: white; border: 1px solid var(--stroke-soft);
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 5;
      transition: all var(--dur-sm) var(--ease);
    }
    .carousel-arrow:hover { background: var(--bg-weak); box-shadow: 0 6px 24px rgba(0,0,0,0.12); transform: translateY(-50%) scale(1.04); }
    .carousel-arrow:active { transform: translateY(-50%) scale(0.98); }
    .carousel-arrow.left { left: 12px; }
    .carousel-arrow.right { right: 12px; }
    .carousel-arrow svg { width: 20px; height: 20px; color: var(--text-sub); }
    .products-foot {
      font-size: 14px; color: var(--text-soft); text-align: center;
      letter-spacing: -0.084px; line-height: 20px; max-width: 258px;
    }
    .products-foot strong { color: var(--text-sub); font-weight: 500; }

    /* ===== STATS / FLEXIBLE FINANCING ===== */
    .stats-section {
      background: var(--bg-white);
      position: relative; overflow: hidden;
      min-height: 100vh;
      display: flex; align-items: center;
    }
    /* Background image — full bleed, inverted vertically, phone visible on right */
    .stats-bg {
      position: absolute; inset: -20px; z-index: 0; pointer-events: none;
    }
    .stats-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 65% center;
      filter: blur(12.5px);
      transform: scaleY(-1);
    }
    /* Strong white wash left side, fading to transparent right so phone shows */
    .stats-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.88) 22%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 72%
      );
    }
    .stats-inner {
      position: relative; z-index: 1;
      width: 100%;
      padding: 96px 292px;
      display: flex; gap: 24px; align-items: center;
    }
    .stats-left {
      flex: 1; display: flex; flex-direction: column; gap: 40px;
      min-width: 0;
    }
    .stats-left-top { display: flex; flex-direction: column; gap: 32px; flex: 1; }
    .stats-title-group { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
    .stats-desc {
      font-size: 16px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.176px; line-height: 24px; max-width: 333px;
    }
    .stats-desc strong { color: var(--text-sub); font-weight: 500; }
    .stats-link {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 14px; font-weight: 500; color: var(--primary);
      letter-spacing: -0.084px; transition: gap var(--dur-sm) var(--ease);
    }
    .stats-link:hover { gap: 8px; }
    .stats-link svg { width: 16px; height: 16px; }
    .stats-bottom { display: flex; flex-direction: column; gap: 28px; }
    .stats-bottom-text {
      font-size: 14px; font-weight: 500; color: var(--text-sub);
      letter-spacing: -0.084px; line-height: 20px; max-width: 288px;
    }
    .stats-rating-row { display: flex; align-items: center; gap: 4px; }
    .stats-rating-label {
      font-size: 14px; font-weight: 500; color: var(--text-soft); letter-spacing: -0.084px;
    }
    .stats-right {
      width: 600px; flex-shrink: 0;
      display: flex; flex-wrap: wrap; gap: 8px;
      align-content: flex-end; align-items: flex-end;
    }
    .stat-card {
      background: var(--bg-weak); border-radius: 32px; padding: 32px;
      display: flex; flex-direction: column; gap: 96px;
      transition: transform var(--dur-md) var(--ease);
    }
    .stat-card:hover { transform: translateY(-3px); }
    .stat-card--full { width: 600px; }
    .stat-card--half { width: 296px; }
    .stat-tag { display: flex; align-items: center; gap: 8px; }
    .stat-tag-icon { width: 20px; height: 20px; flex-shrink: 0; }
    .stat-tag-icon img { width: 100%; height: 100%; }
    .stat-tag-label { font-size: 16px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.176px; line-height: 24px; }
    .stat-value {
      font-size: 56px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.56px; line-height: 64px;
    }
    .stat-label { font-size: 16px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.176px; line-height: 24px; margin-top: 8px; }

    /* ===== CONTACT ===== */
    .contact-section {
      background: #fafafa; padding: 96px 188px;
      display: flex; flex-direction: column; align-items: center; gap: 40px;
    }
    .contact-head { display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .contact-head-titles { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .contact-title {
      font-size: 40px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.4px; line-height: 48px; text-align: center;
    }
    .contact-badges { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
    .c-badge {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-weak); padding: 6px 16px 6px 6px; border-radius: 96px;
    }
    .c-badge-icon {
      width: 32px; height: 32px; border-radius: 96px;
      background: white; display: flex; align-items: center; justify-content: center;
      box-shadow: var(--shadow-badge); flex-shrink: 0;
    }
    .c-badge-icon svg { width: 16px; height: 16px; color: var(--text-sub); }
    .c-badge-text { font-size: 14px; font-weight: 500; color: var(--text-strong); letter-spacing: -0.084px; }
    .contact-form-wrap {
      width: 440px; display: flex; flex-direction: column; align-items: center; gap: 32px;
    }
    .contact-form {
      background: white; border-radius: 32px; padding: 32px; width: 100%;
      box-shadow: var(--shadow-card);
      display: flex; flex-direction: column; gap: 24px;
      position: relative;
    }
    .contact-form::after {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0px -1px 1px -0.5px rgba(23,23,23,0.06);
    }
    .form-fields { display: flex; flex-direction: column; gap: 16px; }
    .f-group { display: flex; flex-direction: column; gap: 6px; }
    .f-label { font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.084px; line-height: 20px; }
    .f-input {
      background: white; border: none; border-radius: 12px; padding: 10px 12px;
      box-shadow: var(--shadow-card);
      font-size: 14px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.084px; outline: none;
      display: flex; align-items: center; gap: 10px;
      transition: box-shadow var(--dur-sm) var(--ease);
    }
    .f-input:focus-within { box-shadow: var(--shadow-card), 0 0 0 2px rgba(250,115,25,0.12); }
    .f-input input, .f-input textarea {
      border: none; outline: none; background: transparent; flex: 1; min-width: 0;
      font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.084px;
    }
    .f-input input::placeholder, .f-input textarea::placeholder,
    textarea.f-textarea::placeholder { color: var(--text-soft); font-weight: 500; }
    .f-input svg { width: 20px; height: 20px; color: var(--text-soft); flex-shrink: 0; }
    textarea.f-textarea {
      background: white; border: none; border-radius: 14px; padding: 12px 16px;
      box-shadow: var(--shadow-card); resize: none; height: 104px;
      font-size: 14px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.084px; outline: none;
      transition: box-shadow var(--dur-sm) var(--ease);
    }
    textarea.f-textarea:focus { box-shadow: var(--shadow-card), 0 0 0 2px rgba(250,115,25,0.12); }
    .f-checkbox { display: flex; align-items: center; gap: 12px; }
    .f-checkbox input[type="checkbox"] {
      appearance: none; width: 20px; height: 20px; flex-shrink: 0;
      border-radius: 4px; background: var(--primary); cursor: pointer;
      position: relative;
    }
    .f-checkbox input[type="checkbox"]::after {
      content: ''; position: absolute; left: 6px; top: 3px;
      width: 6px; height: 10px;
      border: solid white; border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .f-checkbox label {
      font-size: 14px; font-weight: 400; color: var(--text-sub);
      letter-spacing: -0.084px; line-height: 20px;
    }
    .f-checkbox label a { text-decoration: underline; }
    .contact-form-footer {
      font-size: 14px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; text-align: center;
    }
    .contact-form-footer strong { color: var(--text-sub); font-weight: 500; }

    /* ===== WHY NURMOBILE — editorial feature grid ===== */
    .cta-section {
      background: var(--bg-white);
      padding: 104px 188px;
      display: flex; flex-direction: column; gap: 48px; align-items: flex-start;
    }
    .cta-head {
      display: flex; flex-direction: column; align-items: center; gap: 16px;
      width: 100%;
    }
    .cta-head-titles {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .cta-title {
      font-size: 48px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.48px; line-height: 56px; text-align: center;
      max-width: 650px;
    }
    .cta-subtitle {
      font-size: 16px; font-weight: 400; color: var(--text-sub);
      letter-spacing: -0.176px; line-height: 24px; text-align: center;
      max-width: 556px;
    }
    /* Grid: asymmetric 2-row, 2-col */
    .cta-grid {
      display: flex; flex-wrap: wrap; gap: 6px; width: 100%;
    }
    /* Shared card base */
    .cta-card {
      border-radius: 40px; overflow: hidden; padding: 48px;
      display: flex; flex-direction: column; justify-content: space-between;
      position: relative;
    }
    /* Text-only cards */
    .cta-card--text {
      background: #f2f2f2;
      width: calc(33% - 3px); /* ~404px of 1224px */
      aspect-ratio: 1 / 1;
    }
    /* Image cards */
    .cta-card--img {
      width: calc(67% - 3px); /* ~814px of 1224px */
      min-height: 404px;
    }
    .cta-card-bg {
      position: absolute; inset: 0; z-index: 0;
    }
    .cta-card-bg img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform var(--dur-md) var(--ease);
    }
    .cta-card--img:hover .cta-card-bg img {
      transform: scale(1.05);
    }
    /* Per-card image positioning */
    .cta-card--bnpl .cta-card-bg img { object-position: 0% 14%; }
    .cta-card--brands .cta-card-bg img { object-position: 39% 2%; }
    /* Gradient overlays on image cards */
    .cta-card-bg::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
    }
    .cta-card-bg.overlay-right::after {
      background: linear-gradient(269deg, rgba(0,0,0,0) 36%, rgba(0,0,0,0.2) 87%);
    }
    .cta-card-bg.overlay-left::after {
      background: linear-gradient(269deg, rgba(0,0,0,0) 26%, rgba(0,0,0,0.6) 99%);
    }
    /* Icon badge */
    .cta-card-icon {
      width: 64px; height: 64px; border-radius: 20px;
      background: white;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 1px rgba(23,23,23,0.02), 0 1px 1px -0.5px rgba(23,23,23,0.06), 0 3px 3px -1.5px rgba(23,23,23,0.06);
      position: relative; z-index: 2; flex-shrink: 0;
    }
    .cta-card-icon img { width: 32px; height: 32px; }
    /* Card text */
    .cta-card-text {
      display: flex; flex-direction: column; gap: 8px;
      position: relative; z-index: 2; max-width: 308px;
    }
    .cta-card-text h3 {
      font-size: 20px; font-weight: 500; color: var(--text-strong);
      letter-spacing: -0.12px; line-height: 28px;
    }
    .cta-card-text p {
      font-size: 16px; font-weight: 500; color: var(--text-sub);
      letter-spacing: -0.176px; line-height: 24px;
    }
    /* White text for image cards */
    .cta-card--img .cta-card-text h3,
    .cta-card--img .cta-card-text p { color: white; }

    /* ===== FOOTER ===== */
    .footer {
      background: var(--bg-white); padding: 80px 188px 0;
      display: flex; flex-direction: column; gap: 26px;
    }
    .footer-inner { display: flex; flex-direction: column; gap: 48px; }
    .footer-top { display: flex; gap: 48px; align-items: flex-start; }
    .footer-brand-col { flex: 1; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
    .footer-brand-desc {
      font-size: 14px; font-weight: 500; color: var(--text-soft);
      letter-spacing: -0.084px; line-height: 20px; max-width: 238px;
    }
    .footer-brand-desc strong { color: var(--text-sub); font-weight: 500; }
    .footer-badges { display: flex; gap: 8px; }
    .footer-store-badge {
      background: black; border-radius: 8px; overflow: hidden;
      cursor: pointer; transition: opacity var(--dur-sm) var(--ease);
      display: flex; align-items: center; gap: 6px;
      padding: 4px 10px; height: 30px; text-decoration: none;
    }
    .footer-store-badge:hover { opacity: 0.8; }
    .footer-store-badge svg { flex-shrink: 0; }
    .footer-store-text { display: flex; flex-direction: column; }
    .footer-store-sm { font-size: 6.5px; color: white; line-height: 1.1; font-weight: 400; }
    .footer-store-lg { font-size: 11px; color: white; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
    .footer-links-area { display: flex; gap: 56px; align-items: flex-start; }
    .footer-link-col { display: flex; flex-direction: column; gap: 12px; }
    .footer-link-col-title { font-size: 14px; font-weight: 500; color: var(--text-soft); letter-spacing: -0.084px; line-height: 20px; }
    .footer-link-col a {
      font-size: 14px; font-weight: 500; color: var(--text-sub); letter-spacing: -0.084px; line-height: 20px;
      transition: color var(--dur-sm) var(--ease);
    }
    .footer-link-col a:hover { color: var(--text-strong); }
    .footer-hr { height: 1px; background: var(--stroke-soft); }
    .footer-bottom { display: flex; align-items: center; gap: 16px; }
    .footer-socials { display: flex; gap: 16px; align-items: center; }
    .footer-social {
      display: flex; align-items: center; justify-content: center;
      color: var(--text-sub); cursor: pointer; transition: color 0.2s;
    }
    .footer-social:hover { color: var(--text-strong); }
    .footer-social svg { width: 20px; height: 20px; }
    .footer-copyright { flex: 1; text-align: right; font-size: 12px; font-weight: 500; color: var(--text-soft); line-height: 16px; }
    .footer-big {
      position: relative; overflow: hidden;
      width: 100%; pointer-events: none; user-select: none;
    }
    .footer-big-logo {
      position: absolute; bottom: -96px; left: calc(50% + 3%);
      transform: translateX(-50%);
      width: 158%; height: auto;
      opacity: 0.04;
    }
    .footer-big-logo svg {
      width: 100%; height: auto; display: block;
      color: #000;
    }
    /* Invisible spacer so the parent has height for the absolute child to sit in */
    .footer-big::before {
      content: '';
      display: block;
      /* Aspect ratio of the SVG viewBox: 180/1224 ≈ 14.7%, scaled up by 1.6x */
      padding-top: 17%;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 1440px) {
      .nav, .hero, .how-section, .contact-section, .cta-section, .footer { padding-left: 80px; padding-right: 80px; }
      .partners-head, .partners-foot { padding-left: 80px; padding-right: 80px; }
      .products-head { padding-left: 80px; padding-right: 80px; }
      .stats-inner { padding-left: 80px; padding-right: 80px; }
      .p-card { width: 520px; }
      .stat-card--full { width: 100%; }
      .stat-card--half { flex: 1; min-width: 0; }
      .stats-right { width: 500px; }
    }
    @media (max-width: 1200px) {
      .hero-visual { height: 500px; }
      .hero-bg-card { height: 400px; border-radius: 28px; }
      .hero-phone-img { width: 300px; height: 530px; }
      .hero-corner { display: none; }
      .stats-inner { flex-direction: column; }
      .stats-left { height: auto; }
      .stats-right { width: 100%; }
    }
    @media (max-width: 1024px) {
      .nav { padding: 16px 24px; }
      .nav-links { display: none; }
      .nav-actions .btn-outline { display: none; }
      .hamburger { display: flex; }
      .hero { padding: 24px 24px 48px; }
      .hero-title { font-size: 36px; line-height: 44px; letter-spacing: -0.36px; }
      .sec-title-lg { font-size: 32px; line-height: 40px; }
      .sec-title-md, .contact-title, .cta-title, .stats-section .sec-title-md { font-size: 28px; line-height: 36px; }
      .how-section { padding: 64px 24px; }
      .partners-head, .partners-foot { padding: 0 24px; }
      .products-head { padding: 0 24px; }
      .products-carousel-wrap { padding: 0 24px; }
      .carousel-arrow.left { left: 4px; } .carousel-arrow.right { right: 4px; }
      .stats-inner { padding: 64px 24px; }
      .contact-section { padding: 64px 24px; }
      .contact-form-wrap { width: 100%; max-width: 440px; }
      .cta-section { padding: 64px 24px; }
      .cta-card--text { width: calc(40% - 3px); }
      .cta-card--img { width: calc(60% - 3px); }
      .footer { padding: 48px 24px 0; }
      .footer-top { flex-direction: column; gap: 32px; }
      .p-card { width: 440px; }
    }
    @media (max-width: 768px) {
      .hero-title { font-size: 30px; line-height: 38px; }
      .hero-actions { flex-direction: column; width: 100%; }
      .hero-actions .btn, .hero-actions a { width: 100%; justify-content: center; }
      .hero-visual { height: 400px; }
      .hero-phone-img { width: 220px; height: 420px; }
      .hero-bg-card { height: 300px; border-radius: 24px; }
      .sec-title-lg { font-size: 28px; line-height: 36px; }
      .p-card { width: 340px; }
      .p-card-body { flex-direction: column; }
      .p-card-info { border-radius: 24px 24px 0 0; }
      .p-card-img { width: 100%; height: 200px; border-radius: 0 0 24px 24px; }
      .stat-card--half { width: 100%; flex: none; }
      .stat-value { font-size: 40px; line-height: 48px; }
      .stat-card { gap: 48px; }
      .cta-card--text, .cta-card--img { width: 100%; aspect-ratio: auto; min-height: 300px; }
      .cta-card--text { aspect-ratio: auto; }
      .cta-grid { gap: 12px; }
      .contact-badges { flex-direction: column; }
      .footer-links-area { flex-wrap: wrap; gap: 24px; }
      .footer-links-area { gap: 24px; flex-wrap: wrap; }
    }
    @media (max-width: 480px) {
      .p-card { width: 300px; }
      .acc-scenario-inner { padding: 20px; }
      .carousel-arrow { width: 36px; height: 36px; }
      .partner-card { width: 200px; height: 200px; }
    }
