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

    :root {
      --font-title: 'BricolageGrotesque', 'Inter Tight', 'Inter', sans-serif;
      --bg: #03050e;
      --surface: rgba(255,255,255,0.06);
      --surface-hover: rgba(255,255,255,0.09);
      --card-surface: #202124;
      --card-surface-hover: #202124;
      --card-surface-raised: #202124;
      --card-border: rgba(255,255,255,0.12);
      --card-shadow: 0 14px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.025);
      --gradient-cta: linear-gradient(135deg, #00C2FF, #8B5CF6);
      --red-panic: #CC2200;
      --red-glow: rgba(204,34,0,0.5);
      --text-primary: #FFFFFF;
      --text-secondary: rgba(255,255,255,0.55);
      --text-tertiary: rgba(255,255,255,0.3);
      --cyan: #00C2FF;
      --purple: #8B5CF6;
      --border: rgba(255,255,255,0.08);
    }

    html {
      background: var(--bg);
      scroll-behavior: smooth;
      overflow-x: clip; /* clips overflow without creating scroll container — safe for position:fixed */
      overscroll-behavior-y: none;
      width: 100%;
      scroll-padding-top: 80px; /* offset anchor-scroll for fixed nav */
    }

    body {
      background:
        radial-gradient(ellipse 118% 56% at 50% -28%, rgba(89,60,190,0.22) 0%, rgba(35,25,103,0.10) 42%, transparent 72%),
        radial-gradient(ellipse 116% 56% at 50% 128%, rgba(0,91,164,0.18) 0%, rgba(1,37,76,0.08) 48%, transparent 76%),
        linear-gradient(180deg, #0d0c2c 0%, #03050e 50%, #031225 100%);
      background-attachment: fixed;
      color: var(--text-primary);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      -webkit-font-smoothing: antialiased;
      min-height: 100%;
      overflow-x: clip;
      width: 100%;
    }

    /* ─── STARFIELD ─────────────────────────────────────── */
    #starfield {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    @supports (height: 100lvh) {
      #starfield { height: 100lvh; }
    }

    /* ─── LAYOUT WRAPPER ────────────────────────────────── */
    .page {
      position: relative;
      z-index: 1;
      width: 100%;
    }

    /* ─── NAV ───────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 16px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo img {
      height: 120px;
      width: auto;
      display: block;
    }

    /* ── Tubelight pill navbar ── */
    .nav-pill {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 680px;
      height: 42px;
      box-sizing: border-box;
      gap: 2px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: 4px;
      border-radius: 100px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    }

    .nav-pill-item {
      position: relative;
      padding: 8px 12px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.2s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 1;
    }
    .nav-pill-item:hover { color: rgba(255,255,255,0.9); }

    .nav-pill-item.active {
      color: #ffffff;
    }

    /* The sliding background pill */
    .nav-pill-bg {
      position: absolute;
      top: 4px;
      height: calc(100% - 8px);
      background: rgba(255,255,255,0.08);
      border-radius: 100px;
      transition: left 0.35s cubic-bezier(0.34,1.56,0.64,1), width 0.35s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
      z-index: 0;
    }

    /* Tubelight glow indicator above active item */
    .nav-pill-lamp {
      position: absolute;
      top: 0;
      height: 3px;
      border-radius: 0 0 4px 4px;
      background: var(--cyan);
      transition: left 0.35s cubic-bezier(0.34,1.56,0.64,1), width 0.35s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
      z-index: 2;
    }
    .nav-pill-lamp::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 200%;
      height: 20px;
      background: radial-gradient(ellipse at 50% 0%, rgba(0,194,255,0.35) 0%, transparent 70%);
      filter: blur(4px);
    }
    .nav-pill-lamp::after {
      content: '';
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      width: 120%;
      height: 10px;
      background: radial-gradient(ellipse at 50% 0%, rgba(0,194,255,0.6) 0%, transparent 80%);
    }

    /* Icons only on mobile */
    .nav-pill-label { display: inline; }
    .nav-pill-icon { display: none; }
    @media (max-width: 1280px) {
      .nav-pill-label { display: none; }
      .nav-pill-icon { display: block; }
      .nav-pill-item { padding: 8px 14px; }
      .nav-pill { gap: 0; }
      .nav-pill { width: auto; height: auto; }
    }

    .nav-store-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }
    .nav-store-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 48px;
      padding: 7px 13px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      color: #fff;
      background: rgba(19,21,31,0.92);
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .nav-store-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.24);
      transform: translateY(-1px);
    }
    .nav-store-btn > span {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
      white-space: nowrap;
    }
    .nav-store-btn small {
      color: rgba(255,255,255,0.38);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .nav-store-btn strong {
      margin-top: 3px;
      font-family: 'BricolageGrotesque', 'Inter Tight', 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 700;
    }
    @media (max-width: 1120px) {
      .nav-store-btn {
        min-height: 42px;
        padding: 7px 10px;
      }
      .nav-store-btn small { display: none; }
      .nav-store-btn strong { margin-top: 0; font-size: 12px; }
    }
    @media (max-width: 860px) {
      .nav-store-btn {
        width: 42px;
        justify-content: center;
        padding: 8px;
      }
      .nav-store-btn > span { display: none; }
    }

    .mobile-nav-actions,
    .mobile-nav-menu {
      display: none;
    }

    .mobile-download-btn {
      display: inline-flex;
      min-height: 38px;
      padding: 9px 16px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #7c3aed;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .mobile-download-btn:hover {
      background: #8b5cf6;
      transform: translateY(-1px);
    }

    .mobile-menu-toggle {
      display: inline-flex;
      width: 40px;
      height: 40px;
      padding: 0;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
    }
    .mobile-menu-toggle svg {
      width: 24px;
      height: 24px;
    }
    .mobile-menu-toggle .mobile-menu-close-icon,
    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-open-icon {
      display: none;
    }
    .mobile-menu-toggle[aria-expanded="true"] .mobile-menu-close-icon {
      display: block;
    }

    .mobile-nav-link {
      display: flex;
      min-height: 48px;
      padding: 0 4px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.84);
      font-size: 15px;
      font-weight: 650;
      text-decoration: none;
    }
    .mobile-nav-link:last-child {
      border-bottom: 0;
    }
    .mobile-nav-link svg {
      width: 17px;
      height: 17px;
      color: rgba(255,255,255,0.42);
    }

    /* ─── HERO ──────────────────────────────────────────── */
    .hero-section {
      position: relative;
      width: 100%;
      min-height: 100svh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 130px 32px 80px;
    }

    /* Two-column hero on desktop. */
    .hero-grid {
      position: relative;
      z-index: 5;
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
    }
    @media (min-width: 900px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 60px;
      }
    }

    /* Text block: left column on desktop. */
    .hero-text {
      position: relative;
      z-index: 5;
      text-align: center;
      max-width: 720px;
      margin: 0 auto;
      padding: 0;
    }
    @media (min-width: 900px) {
      .hero-text {
        text-align: left;
        margin: 0;
      }
    }

    /* Loved-by pill — sits above headline. */
    .hero-loved {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 6px 14px 6px 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 100px;
      font-size: 13px;
      color: rgba(255,255,255,0.75);
      margin-bottom: 22px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .hero-loved-avatars {
      display: flex;
      align-items: center;
    }
    .hero-loved-avatars span {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 2px solid #0a0f1f;
      margin-right: -8px;
      display: block;
      background-size: cover;
      background-position: center;
      background-color: #1a1f2f;
    }
    .hero-loved-stars {
      color: #F59E0B;
      letter-spacing: -1px;
      font-size: 12px;
    }

    /* Phone column: right column on desktop, no longer absolute. */
    .hero-visual {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      width: 100%;
    }

    .hero-phone-img {
      height: auto;
      width: 100%;
      max-width: 480px;
      max-height: 640px;
      object-fit: contain;
      display: block;
      animation: hero-float 7s ease-in-out infinite, phone-shadow-pulse 2.5s ease-in-out infinite;
    }
    @media (min-width: 900px) {
      .hero-phone-img { max-width: 560px; max-height: 720px; }
    }
    @keyframes phone-shadow-pulse {
      0%, 100% { filter: none; }
      50%       { filter: none; }
    }

    /* Floating callout chip near phone — Cal AI style. */
    .hero-callout {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: rgba(15,20,38,0.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      box-shadow: 0 12px 28px -8px rgba(0,0,0,0.6);
      pointer-events: none;
      z-index: 6;
      font-family: 'Inter Tight','Inter',sans-serif;
    }
    .hero-callout-icon {
      width: 28px; height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, #00C2FF, #3B82F6);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }
    .hero-callout-icon img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-callout-icon svg { width: 14px; height: 14px; color: white; }
    .hero-callout-icon.green { background: linear-gradient(135deg, #4ADE80, #16A34A); }
    .hero-callout-icon.red   { background: linear-gradient(135deg, #FF4422, #B81E00); }
    .hero-callout-icon.plain { background: transparent; width: 36px; height: 36px; border-radius: 50%; }
    .hero-callout-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }
    .hero-callout-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
    }
    .hero-callout-value {
      font-size: 13px;
      font-weight: 700;
      color: white;
    }

    /* iOS-style notification banner variant for the trigger callout */
    .hero-callout.ios-notif {
      padding: 10px 14px 11px 10px;
      gap: 10px;
      min-width: 220px;
      background: rgba(28,28,32,0.88);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.07);
    }
    .hero-callout.ios-notif .ios-notif-icon {
      width: 38px; height: 38px;
      border-radius: 9px;
      flex-shrink: 0;
      background: #0a0f1f;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-callout.ios-notif .ios-notif-icon img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    /* Panic-button styled notification icon — matches the in-app PANIC button */
    .hero-callout.ios-notif .ios-notif-icon.panic {
      background: #000;
      position: relative;
      overflow: visible;
    }
    .hero-callout.ios-notif .ios-notif-icon.panic::before {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, #E81810 0%, #C81006 55%, #8C0800 100%);
      box-shadow:
        0 0 10px 2px rgba(232,24,16,0.55),
        0 0 22px 4px rgba(180,12,0,0.3),
        inset 0 1px 1px rgba(255,140,120,0.35),
        inset 0 -2px 3px rgba(0,0,0,0.4);
    }
    .hero-callout.ios-notif .ios-notif-icon.panic::after {
      content: 'PANIC';
      position: absolute;
      inset: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter Tight','Inter',sans-serif;
      font-weight: 800;
      font-size: 7px;
      letter-spacing: 0.05em;
      color: white;
      text-shadow: 0 1px 1px rgba(0,0,0,0.35);
      z-index: 1;
    }
    .hero-callout.ios-notif .ios-notif-body {
      display: flex; flex-direction: column;
      flex: 1; min-width: 0;
    }
    .hero-callout.ios-notif .ios-notif-head {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      font-weight: 500;
      letter-spacing: 0.02em;
      margin-bottom: 1px;
    }
    .hero-callout.ios-notif .ios-notif-head .app {
      color: rgba(255,255,255,0.78);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 10.5px;
    }
    .hero-callout.ios-notif .ios-notif-head .dot {
      width: 2px; height: 2px; border-radius: 50%;
      background: rgba(255,255,255,0.35);
    }
    .hero-callout.ios-notif .ios-notif-title {
      font-family: var(--font-title);
      font-size: 13px;
      font-weight: 700;
      color: white;
      letter-spacing: -0.1px;
      line-height: 1.25;
    }
    .hero-callout.ios-notif .ios-notif-msg {
      font-size: 12px;
      font-weight: 400;
      color: rgba(255,255,255,0.78);
      line-height: 1.3;
      letter-spacing: -0.05px;
    }

    .hero-callout-1 {
      top: 8%; left: -10%;
      animation: hero-float 5s ease-in-out infinite;
    }
    .hero-callout-2 {
      top: 32%; right: -12%;
      animation: hero-float 6.5s ease-in-out infinite reverse;
    }
    .hero-callout-3 {
      bottom: 12%; left: -6%;
      animation: hero-float 7.5s ease-in-out infinite;
      animation-delay: 0.5s;
    }
    @media (max-width: 700px) {
      .hero-callout-1, .hero-callout-2, .hero-callout-3 { display: none; }
    }

    /* ─── Store buttons (App Store + Google Play) ──────── */
    .store-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 28px;
      justify-content: center;
    }
    @media (min-width: 900px) {
      .store-row { justify-content: flex-start; }
    }
    .hero-live-flows {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      justify-content: center;
    }
    @media (min-width: 900px) { .hero-live-flows { justify-content: flex-start; } }
    .hero-live-flows strong { color: rgba(255,255,255,0.85); font-weight: 600; }
    .hero-live-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 8px rgba(74,222,128,0.7);
      flex-shrink: 0;
      animation: live-pulse 2s ease-in-out infinite;
    }
    @keyframes live-pulse {
      0%,100% { opacity:1; box-shadow: 0 0 8px rgba(74,222,128,0.7); }
      50%      { opacity:0.6; box-shadow: 0 0 14px rgba(74,222,128,0.4); }
    }
    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;
      border-radius: 99px;
      background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.35);
      color: #4ADE80;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1;
      animation: live-pill-glow 2s ease-in-out infinite;
    }
    @keyframes live-pill-glow {
      0%,100% { border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.12); }
      50%      { border-color: rgba(74,222,128,0.6);  background: rgba(74,222,128,0.2); }
    }
    .store-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px 10px 14px;
      background: #000;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 14px;
      text-decoration: none;
      color: white;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      min-height: 56px;
      box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5);
    }
    .store-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.3);
    }
    .store-btn-icon {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .store-btn-icon svg {
      width: 28px; height: 28px;
      display: block;
    }
    .store-btn-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      text-align: left;
    }
    .store-btn-top {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: rgba(255,255,255,0.85);
      margin-bottom: 2px;
    }
    .store-btn-bot {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.2px;
      color: white;
      font-family: 'Inter Tight','Inter',sans-serif;
    }
    .store-btn-soon {
      cursor: default;
      opacity: 0.62;
      pointer-events: none;
    }
    .store-btn-soon .store-btn-bot { font-size: 14px; }
    .hero-glow {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 640px;
      height: 320px;
      background: radial-gradient(ellipse 55% 55% at 70% 100%, rgba(80,90,120,0.10) 0%, rgba(80,90,120,0.03) 55%, transparent 75%);
      z-index: 1;
      pointer-events: none;
      opacity: 0.7;
    }
    @media (min-width: 900px) {
      .hero-glow { right: -10%; left: auto; }
    }
    @keyframes glow-breathe {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }
    @keyframes hero-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

    /* Fade the bottom edge into the page */
    .hero-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 120px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      z-index: 4;
      pointer-events: none;
    }

    /* Store badges row */
    .hero-stores {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
      justify-content: center;
    }
    @media (min-width: 900px) {
      .hero-stores { justify-content: flex-start; }
    }
    .store-badge {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 22px 11px 18px;
      background: #0a0f1f;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 14px;
      color: white;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
      font-family: 'Inter','Inter Tight',sans-serif;
    }
    .store-badge:hover {
      background: #131a30;
      border-color: rgba(255,255,255,0.28);
      transform: translateY(-2px);
    }
    .store-badge svg { width: 26px; height: 26px; flex-shrink: 0; }
    .store-badge-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
      text-align: left;
    }
    .store-badge-top {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.65);
    }
    .store-badge-bottom {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.2px;
    }
    .store-badge-soon {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
    }
    .store-badge-pill {
      position: absolute;
      top: -8px; right: -8px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #0a0f1f;
      background: linear-gradient(135deg, #00C2FF, #8B5CF6);
      padding: 3px 8px;
      border-radius: 100px;
      pointer-events: none;
    }

    /* Sub-CTA proof line under store badges */
    .hero-proof {
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: rgba(255,255,255,0.42);
      justify-content: center;
    }
    @media (min-width: 900px) {
      .hero-proof { justify-content: flex-start; }
    }
    .hero-proof strong { color: rgba(255,255,255,0.7); font-weight: 600; }
    .hero-proof-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4ADE80;
      flex-shrink: 0;
      box-shadow: 0 0 6px rgba(74,222,128,0.55);
      animation: pulse-dot 1.8s infinite;
    }

    .hero-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 14px;
      opacity: 0.9;
    }
    .hero-label::before {
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--cyan);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.7); }
    }

    .hero-headline {
      font-family: var(--font-title);
      font-size: clamp(40px, 5vw, 64px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: 0;
      color: var(--text-primary);
      margin-bottom: 24px;
      white-space: normal;
    }
    @media (max-width: 900px) {
      .hero-headline { font-size: clamp(36px, 8vw, 64px); letter-spacing: 0; }
    }

    .hero-headline .accent {
      /* No gradient — quiet muted tone, lets typography carry the weight */
      color: rgba(255,255,255,0.42);
      font-style: italic;
      letter-spacing: 0;
    }

    .hero-sub {
      font-size: clamp(14px, 1.4vw, 16px);
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 460px;
      margin: 0 auto 22px;
    }
    @media (min-width: 900px) {
      .hero-sub { margin: 0 0 22px; max-width: 480px; }
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    @media (min-width: 900px) {
      .hero-actions { justify-content: flex-start; }
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 700;
      color: white;
      background: var(--gradient-cta);
      text-decoration: none;
      box-shadow: 0 4px 32px rgba(0,194,255,0.25);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 48px rgba(0,194,255,0.35);
    }
    .btn-primary svg { width: 18px; height: 18px; }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 700;
      color: white;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.16);
      text-decoration: none;
      transition: transform 0.2s, background 0.2s, border-color 0.2s;
    }
    .btn-secondary:hover {
      transform: translateY(-2px);
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.28);
    }
    .btn-secondary svg { width: 18px; height: 18px; }

    .hero-meta {
      font-size: 13px;
      color: var(--text-tertiary);
      line-height: 1.5;
      text-align: center;
    }
    .hero-meta strong { color: var(--text-secondary); }

    /* legacy alias */
    .hero { display: contents; }

    .phone-frame {
      width: 280px;
      height: 560px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 44px;
      padding: 20px 16px;
      position: relative;
      box-shadow:
        0 40px 80px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }

    /* notch */
    .phone-frame::before {
      content: '';
      position: absolute;
      top: 14px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 8px;
      background: rgba(255,255,255,0.15);
      border-radius: 4px;
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      border-radius: 28px;
      overflow: hidden;
      background: #0C1020;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 32px 20px 28px;
    }

    .screen-top {
      width: 100%;
      text-align: center;
    }

    .screen-status {
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .screen-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-secondary);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* Breathing circle */
    .breath-circle-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 160px;
      height: 160px;
    }

    .breath-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid;
    }
    .breath-ring-1 {
      width: 160px; height: 160px;
      border-color: rgba(0,194,255,0.12);
      animation: breathe 4s ease-in-out infinite;
    }
    .breath-ring-2 {
      width: 130px; height: 130px;
      border-color: rgba(0,194,255,0.2);
      animation: breathe 4s ease-in-out infinite 0.2s;
    }
    .breath-ring-3 {
      width: 100px; height: 100px;
      border-color: rgba(0,194,255,0.35);
      animation: breathe 4s ease-in-out infinite 0.4s;
    }
    .breath-core {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, rgba(0,194,255,0.3), rgba(139,92,246,0.2));
      border: 1px solid rgba(0,194,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
      color: var(--cyan);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      animation: breathe 4s ease-in-out infinite;
    }
    @keyframes breathe {
      0%, 100% { transform: scale(1); opacity: 0.8; }
      50% { transform: scale(1.07); opacity: 1; }
    }

    .screen-wave-label {
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.06em;
      text-align: center;
      text-transform: uppercase;
    }

    /* PANIC BUTTON */
    .panic-btn {
      width: 100%;
      padding: 16px;
      border-radius: 18px;
      background: var(--red-panic);
      border: none;
      color: white;
      font-family: inherit;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      animation: panic-pulse 2.5s ease-in-out infinite;
      position: relative;
      overflow: hidden;
    }
    .panic-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
      border-radius: 18px;
    }

    @keyframes panic-pulse {
      0%, 100% {
        box-shadow:
          0 0 20px rgba(204,34,0,0.5),
          0 0 40px rgba(204,34,0,0.2);
      }
      50% {
        box-shadow:
          0 0 40px rgba(204,34,0,0.8),
          0 0 80px rgba(204,34,0,0.4),
          0 0 120px rgba(204,34,0,0.15);
      }
    }

    /* glow behind phone */
    .phone-glow {
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,194,255,0.06) 0%, transparent 70%);
      z-index: -1;
      pointer-events: none;
    }
    .phone-glow-red {
      position: absolute;
      width: 300px;
      height: 200px;
      bottom: -40px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(204,34,0,0.14) 0%, transparent 70%);
      z-index: -1;
      animation: glow-breathe 2.5s ease-in-out infinite;
    }

    /* ─── PROOF BAR ─────────────────────────────────────── */
    .proof-bar {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 28px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 32px 48px;
    }

    .proof-item {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }

    .proof-stars {
      display: flex;
      flex-shrink: 0;
      gap: 2px;
    }
    .proof-item--ratings { max-width: 100%; white-space: normal; }
    .proof-item--ratings > div:last-child { min-width: 0; }
    .proof-stars span {
      font-size: 14px;
      color: #F59E0B;
    }

    .proof-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .proof-sub {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .proof-divider {
      width: 1px;
      height: 28px;
      background: var(--border);
    }
    @media (max-width: 600px) { .proof-divider { display: none; } }

    .proof-quote {
      font-size: 13px;
      color: var(--text-secondary);
      font-style: italic;
    }
    .proof-quote strong {
      color: var(--text-primary);
      font-style: normal;
    }

    /* ─── RESEARCH INSTITUTIONS ─────────────────────────── */
    .research-strip {
      padding: 36px 0 20px;
      border-bottom: 1px solid var(--border);
      font-family: 'DM Sans', sans-serif;
    }
    .research-heading {
      padding: 0 24px;
      text-align: center;
    }
    .research-eyebrow {
      color: rgba(255,255,255,0.72);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1.5;
      text-transform: uppercase;
    }
    .research-carousel {
      margin-top: 16px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .research-carousel::-webkit-scrollbar { display: none; }
    .research-carousel:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: -2px;
    }
    .research-track {
      display: flex;
      width: max-content;
      margin-inline: auto;
    }
    .research-logos {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
      padding: 16px 20px;
    }
    .research-logos[hidden] { display: none; }
    .research-logo {
      display: flex;
      align-items: center;
      flex: 0 0 11.75rem;
      gap: 14px;
      color: rgba(255,255,255,0.88);
      font-size: 1.0625rem;
      font-weight: 600;
      line-height: 1.4;
    }
    .research-logo img {
      display: block;
      flex: 0 0 54px;
      width: 54px;
      height: 48px;
      object-fit: contain;
      filter: brightness(1.3);
    }
    .research-logo--light img { filter: brightness(0) invert(1); opacity: 0.88; }
    .research-footer {
      max-width: 1200px;
      margin: 12px auto 0;
      padding: 0 24px;
    }
    .research-note {
      color: rgba(255,255,255,0.64);
      font-size: 0.8125rem;
      line-height: 1.5;
      text-align: center;
    }
    @media (max-width: 600px) {
      .research-strip { padding-top: 28px; }
      .research-heading, .research-footer { padding-inline: 20px; }
      .research-logos { gap: 24px; padding-right: 4px; }
      .research-logo { flex-basis: 11rem; gap: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .research-logos[aria-hidden="true"] { display: none; }
    }
    @media print {
      .research-carousel { overflow: visible; }
      .research-track { width: auto; }
      .research-logos { flex-wrap: wrap; padding-inline: 24px; }
      .research-logos[aria-hidden="true"] { display: none; }
    }

    /* ─── SHARED BY STRIP ──────────────────────────────── */
    .shared-by-strip {
      border-bottom: 1px solid var(--border);
      padding: 18px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px 32px;
      flex-wrap: wrap;
    }
    .shared-by-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .shared-by-items {
      display: flex;
      align-items: center;
      gap: 20px 24px;
      flex-wrap: wrap;
    }
    .shared-by-item {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .shared-by-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid rgba(255,255,255,0.12);
    }
    .shared-by-avatar-fallback {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00C2FF, #8B5CF6);
      font-size: 13px;
      font-weight: 700;
      color: white;
      align-items: center;
      justify-content: center;
    }
    .shared-by-handle {
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
    }
    .shared-by-followers {
      font-size: 11px;
      color: var(--text-secondary);
    }
    .shared-by-divider {
      width: 1px;
      height: 24px;
      background: var(--border);
    }
    .shared-by-cta {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    @media (max-width: 600px) {
      .shared-by-strip { padding: 14px 16px; gap: 12px 16px; }
      .shared-by-divider { display: none; }
    }

    /* ─── EMPATHY ───────────────────────────────────────── */
    .section {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 100px clamp(24px, 4.5vw, 88px);
    }
    @media (min-width: 900px) {
      .section { padding: 120px clamp(48px, 5vw, 96px); }
    }

    .section-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.42);
      margin-bottom: 20px;
      opacity: 1;
    }

    .section-headline {
      font-family: var(--font-title);
      font-size: clamp(42px, 6vw, 72px);
      font-weight: 700;
      line-height: 1.0;
      letter-spacing: 0;
      color: var(--text-primary);
      margin-bottom: 24px;
    }

    .section-body {
      font-size: 18px;
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 580px;
    }
    .section-body p + p { margin-top: 16px; }

    /* ─── FEATURE STEPS (Empathy section) ───────────────── */
    .fsteps-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }
    @media (min-width: 800px) {
      .fsteps-wrap { grid-template-columns: 1fr 1fr; gap: 72px; }
      .fsteps-img-panel { order: 2; }
      .fsteps-list { order: 1; }
    }

    .fsteps-list { display: flex; flex-direction: column; gap: 16px; }

    .fstep {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      cursor: pointer;
      padding: 22px 24px;
      border-radius: 18px;
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      opacity: 0.82;
      transition: opacity 0.45s ease, background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    }
    .fstep:hover { opacity: 0.96; }
    .fstep.active {
      opacity: 1;
      background: rgba(0,194,255,0.14);
      border-color: rgba(0,194,255,0.25);
      box-shadow: 0 8px 30px rgba(0,194,255,0.08), inset 0 0 0 1px rgba(0,194,255,0.04);
    }
    .fstep.completed {
      opacity: 0.9;
      background: var(--card-surface);
      border-color: var(--card-border);
    }

    .fstep-dot {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
      color: rgba(255,255,255,0.4);
      transition: background 0.4s cubic-bezier(0.34,1.56,0.64,1),
                  border-color 0.4s ease,
                  transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.4s ease;
    }
    .fstep.active .fstep-dot {
      background: var(--cyan);
      border-color: var(--cyan);
      color: white;
      transform: scale(1.12);
      box-shadow: 0 0 18px rgba(0,194,255,0.45);
    }
    .fstep.completed .fstep-dot {
      background: rgba(0,194,255,0.15);
      border-color: rgba(0,194,255,0.35);
      color: var(--cyan);
    }

    .fstep-body { flex: 1; min-width: 0; }
    .fstep-body h3 {
      font-family: var(--font-title);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -0.2px;
      margin-bottom: 5px;
      color: rgba(255,255,255,0.9);
    }
    .fstep-body p {
      font-size: 14px;
      line-height: 1.65;
      color: var(--text-secondary);
    }

    .fstep-bar {
      display: none;
      height: 2px;
      background: rgba(255,255,255,0.07);
      border-radius: 1px;
      margin-top: 14px;
      overflow: hidden;
    }
    .fstep.active .fstep-bar { display: block; }
    .fstep-bar-fill {
      height: 100%;
      background: var(--cyan);
      border-radius: 1px;
      width: 100%;
      transform: scaleX(var(--step-progress, 0));
      transform-origin: left center;
      transition: transform 0.1s linear;
      will-change: transform;
    }

    .fsteps-img-panel {
      position: relative;
      height: 560px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      border-radius: 0;
      overflow: visible;
    }
    @media (max-width: 799px) { .fsteps-img-panel { height: 400px; } }

    .fstep-img {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.33,1,0.68,1);
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fstep-img.active  { opacity: 1; transform: translateY(0); }
    .fstep-img.exiting { opacity: 0; transform: translateY(-30px); }

    .fstep-img img {
      max-width: none;
      width: auto;
      height: 580px;
      object-fit: contain;
      display: block;
      border-radius: 0;
      filter: drop-shadow(0 0 40px rgba(0,194,255,0.06));
    }
    /* Elliptical glow shadow underneath each phone */
    .fstep-img::after {
      content: '';
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 42%;
      height: 22px;
      background: radial-gradient(ellipse at center, rgba(0,194,255,0.18) 0%, transparent 70%);
      filter: blur(10px);
      border-radius: 50%;
      pointer-events: none;
    }
    @media (max-width: 799px) { .fstep-img img { height: 420px; } }
    .fstep-img-overlay {
      display: none;
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 30%;
      background: linear-gradient(to top, rgba(4,8,20,0.85) 0%, transparent 100%);
      pointer-events: none;
    }

    /* ─── EMPATHY CARDS ─────────────────────────────────── */
    /* ─── MOMENT MARQUEE ───────────────────────────────────── */
    .moment-marquee {
      overflow: hidden;
      width: 100%;
      margin-top: 48px;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    }
    .marquee-track {
      display: flex;
      gap: 36px;
      width: max-content;
      animation: marquee-scroll 28s linear infinite;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: lowercase;
      color: rgba(255,255,255,0.18);
      padding: 6px 0;
    }
    .marquee-track span.dot { color: rgba(0,194,255,0.3); font-size: 10px; }
    @keyframes marquee-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─── SCENE STRIPS ─────────────────────────────────────── */
    .scene-strips {
      margin-top: 40px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .scene-strip {
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: center;
      gap: 40px;
      padding: 36px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: relative;
      transition: background 0.35s ease;
      cursor: default;
    }
    @media (max-width: 540px) {
      .scene-strip { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
    }
    .scene-strip::before {
      content: '';
      position: absolute;
      left: -1px; top: 0; bottom: 0;
      width: 2px;
      opacity: 0;
      border-radius: 2px;
      transition: opacity 0.35s ease;
    }
    .scene-anxiety::before  { background: var(--cyan); }
    .scene-craving::before  { background: #FF7A45; }
    .scene-both::before     { background: var(--purple); }
    .scene-strip:hover::before { opacity: 1; }
    .scene-strip:hover { background: rgba(255,255,255,0.015); }

    .scene-time {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.2);
      transition: color 0.35s;
      padding-left: 2px;
      line-height: 1;
    }
    .scene-strip:hover .scene-time { color: rgba(255,255,255,0.45); }
    .scene-anxiety:hover  .scene-time { color: rgba(0,194,255,0.6); }
    .scene-craving:hover  .scene-time { color: rgba(255,122,69,0.7); }
    .scene-both:hover     .scene-time { color: rgba(139,92,246,0.7); }

    .scene-content h3 {
      font-family: var(--font-title);
      font-size: clamp(20px, 2.8vw, 30px);
      font-weight: 800;
      color: rgba(255,255,255,0.88);
      margin-bottom: 8px;
      line-height: 1.18;
      letter-spacing: -0.4px;
      transition: color 0.35s;
    }
    .scene-strip:hover .scene-content h3 { color: #fff; }
    .scene-content p {
      font-size: 14px;
      line-height: 1.7;
      color: rgba(255,255,255,0.35);
      max-width: 520px;
      transition: color 0.35s;
    }
    .scene-strip:hover .scene-content p { color: rgba(255,255,255,0.55); }

    /* ─── WAVE DIAGRAM ──────────────────────────────────── */
    .wave-diagram { margin-top: 16px; }
    .wdiag-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
    }
    .wdiag-item {
      padding: 24px 22px 28px;
      border-right: 1px solid rgba(255,255,255,0.06);
      position: relative;
      background: var(--card-surface);
    }
    .wdiag-item:last-child { border-right: none; }
    .wdiag-marker {
      width: 8px; height: 8px;
      border-radius: 50%;
      margin-bottom: 14px;
    }
    .wdiag-anxiety .wdiag-marker { background: var(--cyan); box-shadow: 0 0 10px rgba(0,194,255,0.55); }
    .wdiag-craving .wdiag-marker { background: #FF7A45; box-shadow: 0 0 10px rgba(255,122,69,0.55); }
    .wdiag-both    .wdiag-marker { background: var(--purple); box-shadow: 0 0 10px rgba(139,92,246,0.55); }
    .wdiag-when {
      display: block;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(255,255,255,0.28);
      margin-bottom: 10px;
    }
    .wdiag-item h4 {
      font-size: 15px; font-weight: 700;
      line-height: 1.35; color: #fff;
      margin-bottom: 8px;
    }
    .wdiag-item p {
      font-size: 13px; line-height: 1.6;
      color: rgba(255,255,255,0.44);
    }
    .wdiag-footer {
      margin-top: 10px;
      display: flex; align-items: center; justify-content: center;
      padding: 10px 0 2px;
    }
    .wdiag-footer-label {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.07em; text-transform: uppercase;
      color: rgba(0,194,255,0.45);
    }
    @media (max-width: 640px) {
      .wdiag-grid { grid-template-columns: 1fr; }
      .wdiag-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
      .wdiag-item:last-child { border-bottom: none; }
    }

    /* ─── STATS REVEAL ──────────────────────────────────── */
    .stats-reveal-section { border-top: 1px solid var(--border); }
    .stats-reveal-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
    }
    .stats-reveal-copy .section-label { text-align: left; }
    .stats-reveal-copy .section-headline { text-align: left; margin-bottom: 20px; }
    .stats-reveal-body {
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.65;
      margin-bottom: 36px;
    }
    .stats-resilience-callout {
      background: rgba(74,222,128,0.08);
      border: 1px solid rgba(74,222,128,0.22);
      border-radius: 14px;
      padding: 18px 20px;
      margin-bottom: 36px;
      font-size: 15px;
      color: rgba(255,255,255,0.82);
      line-height: 1.6;
    }
    .stats-resilience-callout strong {
      color: #4ADE80;
      font-weight: 700;
    }
    .stats-features { display: flex; flex-direction: column; gap: 20px; }
    .stats-feature {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .stats-feature-icon {
      flex-shrink: 0;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 18px;
    }
    .stats-feature-title {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 3px;
      font-family: var(--font-title);
      letter-spacing: 0.02em;
    }
    .stats-feature-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.55;
    }
    /* Phone mockup */
    .stats-phone-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .stats-phone {
      position: relative;
      width: 268px;
      height: 576px;
      background: #0b0f1e;
      border-radius: 46px;
      border: 2px solid rgba(255,255,255,0.13);
      box-shadow:
        0 50px 120px rgba(0,0,0,0.65),
        inset 0 0 0 1px rgba(255,255,255,0.05),
        -5px 0 12px rgba(0,0,0,0.3),
        5px 0 12px rgba(0,0,0,0.3);
      overflow: hidden;
      /* Side buttons via box-shadow on pseudo */
    }
    .stats-phone-notch {
      position: absolute;
      top: 14px; left: 50%;
      transform: translateX(-50%);
      width: 88px; height: 26px;
      background: #000;
      border-radius: 20px;
      z-index: 10;
      pointer-events: none;
    }
    .stats-phone-screen {
      position: absolute;
      inset: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      border-radius: 44px;
      cursor: grab;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    .stats-phone-screen::-webkit-scrollbar { display: none; }
    .stats-phone-screen:active { cursor: grabbing; }
    .stats-phone-img {
      width: 100%;
      height: auto;
      display: block;
      pointer-events: none;
      user-select: none;
    }
    /* Gradient fade at bottom hinting scrollability */
    .stats-phone::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 90px;
      background: linear-gradient(to top, rgba(11,15,30,0.92), transparent);
      pointer-events: none;
      border-radius: 0 0 44px 44px;
      z-index: 5;
    }
    .stats-scroll-hint {
      position: absolute;
      bottom: 18px; left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      z-index: 10;
      pointer-events: none;
      white-space: nowrap;
      animation: stats-hint 2.8s ease-in-out infinite;
    }
    @keyframes stats-hint {
      0%,100% { opacity:0; transform:translateX(-50%) translateY(4px); }
      35%,65%  { opacity:1; transform:translateX(-50%) translateY(0); }
    }
    /* Ambient glow behind phone */
    .stats-phone-glow {
      position: absolute;
      width: 300px; height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99,102,241,0.18), transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: -1;
    }
    @media (max-width: 860px) {
      .stats-reveal-inner { grid-template-columns: 1fr; gap: 48px; }
      .stats-phone-wrap { order: -1; }
      .stats-phone { width: 230px; height: 494px; border-radius: 40px; }
      .stats-phone-notch { width: 76px; height: 22px; }
      .stats-phone::after { border-radius: 0 0 38px 38px; }
      .stats-phone-screen { border-radius: 38px; }
    }

    /* ─── HOW IT WORKS ──────────────────────────────────── */
    .how-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 60px;
      align-items: center;
    }
    @media (min-width: 900px) {
      .how-wrap { grid-template-columns: 1fr 1fr; gap: 80px; }
    }

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

    .step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      padding: 28px 0;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .step:last-child { border-bottom: none; }
    .step:hover { opacity: 0.85; }

    .step-num {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .step.active .step-num {
      background: linear-gradient(135deg, rgba(0,194,255,0.15), rgba(139,92,246,0.15));
      border-color: var(--cyan);
    }

    .step-content h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 6px;
      color: var(--text-primary);
    }
    .step-content p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
    }

    /* Simulated app screen for "how it works" */
    .how-screen {
      border-radius: 32px;
      aspect-ratio: 9/16;
      max-height: 520px;
      overflow: hidden;
      position: relative;
      padding: 0;
      background: none;
      border: none;
    }

    .how-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
      border-radius: 32px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
    }

    .how-screen-label { display: none; }

    .how-breath {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ─── FEATURES ──────────────────────────────────────── */
    /* ─── BENTO GRID — Linear/Vercel-style glassy cards ──── */
    .bento-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: minmax(0, auto);
      gap: 16px;
      margin-top: 56px;
    }

    /* Image-only bento cards: the artwork already contains its own card frame,
       title, body, and CTA. We crop the source image's outer padding so the
       inner-card edges sit flush with the wrapper — no card-on-a-card. */
    .bento-card-img {
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      cursor: default;
    }
    .bento-card-img::before { display: none; } /* kill inner highlight rim */
    .bento-card-img > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      /* Crop ~5% off each edge to remove the source image's outer padding,
         so the artwork's own rounded card frame becomes the visible edge. */
      transform: scale(1.11);
      transform-origin: center;
      transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
    }
    .bento-card-img:hover > img { transform: scale(1.13); }
    /* Wide plan card: show the full artwork — no scale crop. */
    .bento-card-img-wide > img,
    .bento-card-img-wide:hover > img {
      transform: scale(1);
    }
    /* Square-ish cards: 5:4 aspect to match source images */
    .bento-card-img:not(.bento-card-img-wide) {
      aspect-ratio: 5 / 4;
    }
    /* Wide plan card: spans full width with its native ~2.8:1 aspect */
    .bento-card-img-wide {
      aspect-ratio: 2098 / 749;
    }
    /* On mobile, the wide card keeps its native aspect ratio so the full
       artwork (with all the plan steps) fits without horizontal cropping. */
    @media (max-width: 699px) {
      .bento-card-img-wide > img {
        object-fit: contain;
      }
    }
    @media (min-width: 700px) {
      .bento-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 880px) {
      .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 16px;
      }
      .bento-panic, .bento-ai, .bento-circles, .bento-progress, .bento-plan {
        grid-column: auto; grid-row: auto;
      }
      .bento-plan { grid-column: 1 / -1; }
    }

    /* Glassy layered card with hairline border, micro-grid, and corner sheen.
       This is the Linear/Vercel signature: dark base + faint dot/grid noise + 
       inner highlight rim + radial top-left glow. */
    .bento-card {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 0%, rgba(0,194,255,0.08), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%),
        #0a0f1f;
      border: 1px solid rgba(255,255,255,0.07);
      display: flex;
      flex-direction: column;
      transition: border-color 0.5s ease, transform 0.5s cubic-bezier(.2,.6,.2,1);
      cursor: pointer;
      isolation: isolate;
    }
    /* Inner highlight rim — gives the glassy "edge-lit" feel. */
    .bento-card::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
    /* Illustration zone — used for SVGs and screenshots */
    .bento-illus {
      position: relative;
      width: 100%;
      height: 260px;
      overflow: hidden;
      background-color: transparent;
      background-image:
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 18px 18px;
      background-position: 0 0;
    }
    .bento-illus::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 50% 60%, rgba(0,194,255,0.06), transparent 70%),
        linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35));
      pointer-events: none;
    }
    .bento-illus svg {
      width: 100%; height: 100%; display: block;
      position: relative;
      z-index: 1;
    }

    /* Custom illustration zone — used when the hero is a sculptural composition,
       not a phone screenshot. Removes the dot grid for cleaner stage. */
    .bento-illus.is-shot {
      background-image: none;
      background-color: #06091a;
      height: 320px;
    }
    .bento-illus.is-shot::before {
      background:
        radial-gradient(ellipse 65% 50% at 50% 30%, rgba(0,194,255,0.06), transparent 70%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(150,90,255,0.05), transparent 70%);
    }
    .bento-stage {
      position: absolute; inset: 0;
      overflow: hidden;
      z-index: 1;
    }
    @keyframes amb-glow-pulse {
      0%, 100% { opacity: 0.7; }
      50%      { opacity: 1; }
    }

    /* ── PANIC CARD ── red orb hero with floating words behind ── */
    .panic-words {
      position: absolute; inset: 0;
      pointer-events: none;
    }
    .panic-words span {
      position: absolute;
      font-family: 'Inter Tight', 'Inter', sans-serif;
      font-weight: 800;
      letter-spacing: -0.04em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.06);
      white-space: nowrap;
      animation: panic-word-drift 14s ease-in-out infinite;
    }
    .panic-words span:nth-child(odd)  { animation-direction: reverse; }
    .panic-words span:nth-child(1) { top: 8%;  left: 4%;   font-size: 36px; animation-delay: 0s;   color: rgba(255,87,87,0.10); }
    .panic-words span:nth-child(2) { top: 14%; right: 4%;  font-size: 26px; animation-delay: -3s; }
    .panic-words span:nth-child(3) { top: 38%; left: -2%;  font-size: 56px; animation-delay: -6s; color: rgba(255,87,87,0.08);}
    .panic-words span:nth-child(4) { top: 52%; right: -2%; font-size: 44px; animation-delay: -9s; }
    .panic-words span:nth-child(5) { bottom: 12%; left: 10%; font-size: 30px; animation-delay: -12s; }
    .panic-words span:nth-child(6) { bottom: 18%; right: 8%; font-size: 22px; animation-delay: -2s; color: rgba(255,87,87,0.10);}
    @keyframes panic-word-drift {
      0%, 100% { transform: translate(0, 0); opacity: 1; }
      50%      { transform: translate(6px, -4px); opacity: 0.55; }
    }
    .panic-orb-wrap {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
    }
    .panic-orb {
      width: 180px; height: 180px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 30%, #FF8870 0%, #E81818 40%, #5A0000 100%);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 60px 10px rgba(232,24,24,0.35),
        inset 0 -20px 30px rgba(0,0,0,0.5),
        inset 0 12px 20px rgba(255,140,140,0.25);
      animation: panic-orb-breathe 6s ease-in-out infinite;
      position: relative;
    }
    .panic-orb::after {
      content: '';
      position: absolute;
      inset: -40px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232,24,24,0.20), transparent 60%);
      z-index: -1;
      animation: panic-orb-halo 6s ease-in-out infinite;
    }
    @keyframes panic-orb-breathe {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.04); }
    }
    @keyframes panic-orb-halo {
      0%, 100% { opacity: 0.7; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.08); }
    }

    /* ── AI CARD ── glowing aura source with concentric voice waves ── */
    .ai-aura {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, #F0ABFC 0%, #A78BFA 45%, #4C1D95 100%);
      box-shadow:
        0 0 50px rgba(167,139,250,0.6),
        inset 0 -8px 14px rgba(0,0,0,0.35),
        inset 0 6px 12px rgba(255,255,255,0.25);
      z-index: 3;
      animation: ai-aura-pulse 5s ease-in-out infinite;
    }
    @keyframes ai-aura-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50%      { transform: translate(-50%, -50%) scale(1.06); }
    }
    .ai-rings {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      pointer-events: none;
      z-index: 2;
    }
    .ai-rings span {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(167,139,250,0.4);
      animation: ai-ring-expand 4s linear infinite;
    }
    .ai-rings span:nth-child(2) { animation-delay: -1.3s; }
    .ai-rings span:nth-child(3) { animation-delay: -2.6s; }
    @keyframes ai-ring-expand {
      0%   { transform: scale(1);   opacity: 0.7; border-color: rgba(167,139,250,0.6); }
      100% { transform: scale(3.4); opacity: 0;   border-color: rgba(96,165,250,0.0); }
    }
    .ai-words {
      position: absolute; inset: 0;
      pointer-events: none;
      z-index: 4;
    }
    .ai-words span {
      position: absolute;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      background: rgba(13,18,36,0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 6px 12px;
      white-space: nowrap;
      animation: ai-word-orbit 8s ease-in-out infinite;
    }
    .ai-words span:nth-child(1) { top: 22%; left: 6%;  animation-delay: 0s;    }
    .ai-words span:nth-child(2) { top: 30%; right: 8%; animation-delay: -2s;  }
    .ai-words span:nth-child(3) { bottom: 26%; left: 10%; animation-delay: -4s; }
    .ai-words span:nth-child(4) { bottom: 18%; right: 6%; animation-delay: -6s; }
    @keyframes ai-word-orbit {
      0%, 100% { transform: translateY(0);   opacity: 0.85; }
      50%      { transform: translateY(-6px); opacity: 1;    }
    }

    /* ── CIRCLE CARD ── 5 glass orbs orbiting on a thin blue ring ── */
    .circle-stage {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .circle-orbit {
      position: relative;
      width: 220px; height: 220px;
      animation: circle-rotate 28s linear infinite;
    }
    @keyframes circle-rotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    .circle-ring {
      position: absolute; inset: 0;
      border-radius: 50%;
      border: 1px solid transparent;
      background:
        conic-gradient(from 200deg,
          rgba(125,211,252,0)    0deg,
          rgba(125,211,252,0.55) 90deg,
          rgba(167,139,250,0.55) 180deg,
          rgba(125,211,252,0)    280deg);
      -webkit-mask: radial-gradient(circle, transparent 50%, #000 51%, #000 52%, transparent 53%);
              mask: radial-gradient(circle, transparent 50%, #000 51%, #000 52%, transparent 53%);
    }
    .circle-orb {
      position: absolute;
      width: 56px; height: 56px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 28%, #6E83B5 0%, #2B3866 50%, #0E1632 100%);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        inset 0 -8px 14px rgba(0,0,0,0.5),
        inset 0 6px 10px rgba(180,200,240,0.18),
        0 8px 24px rgba(0,0,0,0.55);
      top: 50%; left: 50%;
      margin: -28px 0 0 -28px;
    }
    /* Position 5 orbs around the ring (radius 110px) */
    .circle-orb:nth-child(2) { transform: translate(0,        -110px); }
    .circle-orb:nth-child(3) { transform: translate(105px,    -34px);  }
    .circle-orb:nth-child(4) { transform: translate(65px,     89px);   }
    .circle-orb:nth-child(5) { transform: translate(-65px,    89px);   }
    .circle-orb:nth-child(6) { transform: translate(-105px,   -34px);  }
    /* Counter-rotate orbs so highlights stay top-left as ring spins */
    .circle-orb { animation: circle-counter 28s linear infinite; }
    @keyframes circle-counter {
      from { /* base translate kept by inline order */ }
    }
    /* Active orb glows (the user) */
    .circle-orb.active {
      background:
        radial-gradient(circle at 35% 28%, #C4B5FD 0%, #7C3AED 50%, #3B0764 100%);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        inset 0 -8px 14px rgba(0,0,0,0.4),
        inset 0 6px 10px rgba(220,210,255,0.30),
        0 0 24px rgba(167,139,250,0.55),
        0 8px 24px rgba(0,0,0,0.55);
      animation: circle-active-pulse 3s ease-in-out infinite;
    }
    @keyframes circle-active-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), inset 0 -8px 14px rgba(0,0,0,0.4), inset 0 6px 10px rgba(220,210,255,0.30), 0 0 18px rgba(167,139,250,0.45), 0 8px 24px rgba(0,0,0,0.55); }
      50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.14), inset 0 -8px 14px rgba(0,0,0,0.4), inset 0 6px 10px rgba(220,210,255,0.40), 0 0 32px rgba(167,139,250,0.70), 0 8px 24px rgba(0,0,0,0.55); }
    }

    /* ── PROGRESS CARD ── ascending sculptural wave/ribbon ── */
    .prog-stage {
      position: absolute; inset: 0;
    }
    .prog-stage svg { width: 100%; height: 100%; }
    .prog-curve-path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: prog-draw 4s ease-out forwards, prog-shimmer 6s ease-in-out infinite 4s;
    }
    @keyframes prog-draw {
      to { stroke-dashoffset: 0; }
    }
    @keyframes prog-shimmer {
      0%, 100% { filter: drop-shadow(0 0 6px rgba(110,231,183,0.4)); }
      50%      { filter: drop-shadow(0 0 12px rgba(110,231,183,0.7)); }
    }
    .prog-peak {
      animation: prog-peak-pulse 3s ease-in-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    @keyframes prog-peak-pulse {
      0%, 100% { transform: scale(1);   opacity: 1; }
      50%      { transform: scale(1.2); opacity: 0.85; }
    }
    .prog-streak {
      position: absolute;
      bottom: 18px; left: 22px;
      font-family: 'Inter Tight', sans-serif;
      z-index: 2;
    }
    .prog-streak .num {
      font-size: 64px;
      font-weight: 800;
      letter-spacing: -0.05em;
      color: white;
      line-height: 1;
      background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.5) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: prog-num-glow 5s ease-in-out infinite;
    }
    @keyframes prog-num-glow {
      0%, 100% { filter: drop-shadow(0 0 0 transparent); }
      50%      { filter: drop-shadow(0 0 12px rgba(110,231,183,0.4)); }
    }
    .prog-streak .lbl {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-top: 4px;
    }

    /* ── PLAN CARD (wide) ── inputs flow left → center card → outputs right ── */
    .plan-stage {
      position: absolute; inset: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 32px;
      padding: 0 28px;
      overflow: hidden;
    }
    .plan-col {
      position: relative;
      height: 100%;
      overflow: hidden;
    }
    .plan-col .plan-chip {
      position: absolute;
    }
    .plan-chip {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(20,26,42,0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 10px;
      padding: 8px 12px 8px 8px;
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.92);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      white-space: nowrap;
    }
    .plan-icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: white;
    }
    .plan-icon svg { width: 13px; height: 13px; }
    .plan-step {
      display: flex; flex-direction: column; gap: 4px;
      background:
        linear-gradient(180deg, rgba(28,32,52,0.92) 0%, rgba(14,18,32,0.92) 100%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 12px 14px;
      width: 220px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      font-family: 'Inter', sans-serif;
    }
    .plan-step-head {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: white;
      letter-spacing: -0.01em;
    }
    .plan-step-num {
      width: 18px; height: 18px;
      border-radius: 5px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .plan-step-body {
      font-size: 11px;
      line-height: 1.45;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0;
    }
    /* Left column — inputs sucked from outer-left toward the center card */
    .plan-col-in .plan-chip {
      right: 0;
      animation: plan-flow-in 5s linear infinite;
    }
    @keyframes plan-flow-in {
      0%   { transform: translateX(-160%); opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateX(20%);   opacity: 0; }
    }
    /* Right column — personalised outputs pushed from center outward */
    .plan-col-out .plan-chip {
      left: 0;
      animation: plan-flow-out 5s linear infinite;
    }
    @keyframes plan-flow-out {
      0%   { transform: translateX(-20%);  opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateX(160%);  opacity: 0; }
    }
    /* Center plan card — smaller "node" in the flow diagram */
    .plan-center {
      position: relative;
      width: 130px; height: 130px;
      flex-shrink: 0;
      background:
        radial-gradient(circle at 50% 35%, rgba(125,211,252,0.15), transparent 70%),
        linear-gradient(180deg, #14182c 0%, #0a0f1f 100%);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow:
        0 0 0 1px rgba(125,211,252,0.10),
        0 30px 60px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.08);
      animation: plan-center-glow 5s ease-in-out infinite;
      z-index: 2;
    }
    @keyframes plan-center-glow {
      0%, 100% {
        box-shadow:
          0 0 0 1px rgba(125,211,252,0.10),
          0 30px 60px rgba(0,0,0,0.55),
          0 0 30px rgba(125,211,252,0.10),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
      50% {
        box-shadow:
          0 0 0 1px rgba(125,211,252,0.20),
          0 30px 60px rgba(0,0,0,0.55),
          0 0 60px rgba(125,211,252,0.30),
          inset 0 1px 0 rgba(255,255,255,0.08);
      }
    }
    .plan-center-icon {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      color: #FBBF24;
      filter: drop-shadow(0 0 8px rgba(251,191,36,0.4));
      animation: plan-center-icon-pulse 3s ease-in-out infinite;
    }
    @keyframes plan-center-icon-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.1); }
    }
    .plan-center-icon svg { width: 100%; height: 100%; }
    .plan-center-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255,255,255,0.75);
      text-align: center;
      letter-spacing: 0.01em;
      max-width: 100px;
      line-height: 1.3;
    }
    .plan-center-label::after {
      content: '';
      display: inline-block;
      width: 16px;
      animation: plan-center-dots 1.4s steps(4, end) infinite;
      vertical-align: bottom;
      overflow: hidden;
    }
    @keyframes plan-center-dots {
      0%   { content: ''; }
      25%  { content: '.'; }
      50%  { content: '..'; }
      75%  { content: '...'; }
      100% { content: '...'; }
    }
    /* Connecting flow lines — curved SVG paths converging into the center node */
    .plan-flowline {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .plan-flowline svg { width: 100%; height: 100%; display: block; }
    .plan-flowline path {
      stroke: url(#planFlowGrad);
      stroke-width: 1;
      fill: none;
      stroke-dasharray: 4 6;
      animation: plan-flow-dash 2s linear infinite;
      opacity: 0.5;
    }
    @keyframes plan-flow-dash {
      to { stroke-dashoffset: -10; }
    }
    /* Hide all but the center on narrow widths */
    @media (max-width: 700px) {
      .plan-stage { grid-template-columns: 1fr; }
      .plan-col { display: none; }
      .plan-center { margin: 0 auto; }
    }
    /* Edge fade masks so chips dissolve at column boundaries */
    .plan-col-in {
      -webkit-mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
              mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
    }
    .plan-col-out {
      -webkit-mask: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
              mask: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
    }
    .bento-card:hover {
      border-color: rgba(255,255,255,0.16);
      transform: translateY(-3px);
    }

    .bento-learn-more {
      position: absolute;
      top: 18px; left: 20px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,0.32);
      text-transform: uppercase;
      z-index: 4;
      pointer-events: none;
      font-family: 'Inter', sans-serif;
    }
    .bento-learn-more::before {
      content: '';
      display: inline-block;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--cyan);
      margin-right: 8px;
      transform: translateY(-2px);
      box-shadow: 0 0 8px rgba(0,194,255,0.6);
    }

    /* Single, restrained accent — a small dot next to the eyebrow,
       not a top-edge gradient bar. */
    .bento-accent {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--cyan);
      flex-shrink: 0;
    }

    /* ─── SLOW AMBIENT MOTION (4–6s cycles) ────────────────── */
    @keyframes amb-float-y {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    @keyframes amb-float-y-rev {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(4px); }
    }
    @keyframes amb-fade-cycle {
      0%, 100% { opacity: 0.35; }
      50%      { opacity: 0.85; }
    }
    @keyframes amb-fade-soft {
      0%, 100% { opacity: 0.6; }
      50%      { opacity: 1; }
    }
    @keyframes amb-glow {
      0%, 100% { filter: drop-shadow(0 0 6px rgba(0,194,255,0.18)); }
      50%      { filter: drop-shadow(0 0 18px rgba(0,194,255,0.5)); }
    }
    @keyframes amb-glow-red {
      0%, 100% { filter: drop-shadow(0 0 8px rgba(204,34,0,0.35)); }
      50%      { filter: drop-shadow(0 0 24px rgba(204,34,0,0.7)); }
    }
    @keyframes amb-orbit {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes amb-bar-rise {
      0%, 100% { transform: scaleY(0.92); }
      50%      { transform: scaleY(1.04); }
    }
    @keyframes amb-step-highlight {
      0%, 24%   { opacity: 0.5; }
      25%, 49%  { opacity: 1; }
      50%, 100% { opacity: 0.5; }
    }
    @media (prefers-reduced-motion: reduce) {
      .amb-float, .amb-float-rev, .amb-fade, .amb-glow, .amb-glow-red,
      .amb-orbit, .amb-bar, .amb-step { animation: none !important; }
    }
    .amb-float       { animation: amb-float-y       6s ease-in-out infinite; }
    .amb-float-rev   { animation: amb-float-y-rev   6s ease-in-out infinite; }
    .amb-fade        { animation: amb-fade-cycle    5s ease-in-out infinite; }
    .amb-fade-soft   { animation: amb-fade-soft     5s ease-in-out infinite; }
    .amb-glow        { animation: amb-glow          5s ease-in-out infinite; }
    .amb-glow-red    { animation: amb-glow-red      5s ease-in-out infinite; }
    .amb-orbit       { animation: amb-orbit       28s linear infinite; transform-origin: center; transform-box: fill-box; }
    .amb-bar         { animation: amb-bar-rise      4.5s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
    .amb-step        { animation: amb-step-highlight 16s linear infinite; }

    /* Screenshot area — image is the subject, not decoration. */
    .bento-img-wrap {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      position: relative;
      background: #0b1020;
    }
    .bento-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
    }
    .bento-card:hover .bento-img-wrap img { transform: scale(1.025); }

    /* ── BENTO EXPLORE OVERLAY ──────────────────────────────── */
    .bento-card { cursor: pointer; }
    .bento-img-wrap svg { width: 100%; height: 100%; display: block; }
    .bento-explore {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0);
      transition: background 0.3s;
      z-index: 4;
    }
    .bento-explore::after {
      content: 'Explore →';
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.9);
      background: rgba(0,0,0,0.52);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 8px 18px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.15);
      opacity: 0;
      transform: translateY(6px) scale(0.94);
      transition: opacity 0.25s, transform 0.25s;
    }
    .bento-card:hover .bento-explore { background: rgba(0,0,0,0.2); }
    .bento-card:hover .bento-explore::after { opacity: 1; transform: translateY(0) scale(1); }

    /* ── FEATURE MODAL ──────────────────────────────────────── */
    .feat-modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }
    .feat-modal.open { opacity: 1; pointer-events: all; }
    .feat-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .feat-modal-box {
      position: relative;
      width: 100%;
      max-width: 520px;
      background: #0d1220;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px;
      overflow: hidden;
      transform: translateY(22px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
      z-index: 1;
      max-height: 90vh;
      overflow-y: auto;
    }
    .feat-modal.open .feat-modal-box { transform: translateY(0) scale(1); }
    .feat-modal-img {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .feat-modal-track {
      display: flex;
      height: 100%;
    }
    .feat-modal-slide {
      min-width: 100%;
      height: 100%;
      flex-shrink: 0;
    }
    .feat-modal-slide svg { width: 100%; height: 100%; display: block; }
    /* Stats row */
    .feat-modal-stats {
      display: flex;
      gap: 10px;
      margin: 18px 0 20px;
    }
    .feat-modal-stat {
      flex: 1;
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 14px 10px 12px;
      text-align: center;
    }
    .feat-modal-stat-val {
      font-size: 19px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.15;
      letter-spacing: -0.5px;
    }
    .feat-modal-stat-label {
      font-size: 9px;
      color: rgba(255,255,255,0.38);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      line-height: 1.35;
    }
    /* How it helps */
    .feat-modal-helps-title {
      font-family: var(--font-title);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 10px;
    }
    .feat-modal-helps {
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 24px;
    }
    .feat-modal-help-row {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.72);
      line-height: 1.5;
    }
    .feat-modal-help-icon {
      width: 22px; height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      margin-top: 1px;
      font-weight: 700;
    }
    /* hide slideshow chrome */
    .feat-modal-dots { display: none; }
    .feat-modal-prev, .feat-modal-next {
      display: none !important;
    }
    .feat-modal-prev-x, .feat-modal-next-x {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.75);
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 5;
      transition: background 0.2s;
    }
    .feat-modal-prev { left: 12px; }
    .feat-modal-next { right: 12px; }
    .feat-modal-prev:hover, .feat-modal-next:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .feat-modal-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: rgba(0,0,0,0.52);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.72);
      font-size: 15px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      z-index: 10;
      transition: background 0.2s, color 0.2s;
    }
    .feat-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
    .feat-modal-body { padding: 22px 24px 28px; }
    .feat-modal-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 7px;
    }
    .feat-modal-title {
      font-family: var(--font-title);
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.3px;
      color: #fff;
      margin: 0 0 9px;
      line-height: 1.2;
    }
    .feat-modal-desc {
      font-size: 13.5px;
      line-height: 1.65;
      color: rgba(255,255,255,0.5);
      margin: 0 0 14px;
    }
    .feat-modal-caption {
      font-size: 11.5px;
      color: rgba(255,255,255,0.32);
      min-height: 16px;
      margin-bottom: 18px;
      font-style: italic;
    }
    .feat-modal-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 100px;
      background: var(--cyan);
      color: #000;
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      transition: opacity 0.2s;
    }
    .feat-modal-cta:hover { opacity: 0.85; }

    /* ── SVG MOTION ──────────────────────────────────────────
       Premium = slow, ambient, almost-still. No bouncing dots,
       no expanding "loading" rings, no pulsing badges. Each card
       gets one quiet idle behaviour — closer to a held breath
       than a loading spinner. */

    /* Panic — single, slow held-breath on the orb only. */
    @keyframes orb-breath {
      0%, 100% { transform: scale(1);     opacity: 0.55; }
      50%      { transform: scale(1.035); opacity: 0.78; }
    }
    .pr-1, .pr-2, .pr-3 {
      transform-box: fill-box; transform-origin: center;
      animation: orb-breath 7s cubic-bezier(.4,0,.2,1) infinite;
    }
    .pr-2 { animation-delay: -2.3s; }
    .pr-3 { animation-delay: -4.6s; }

    /* Breathing fill — barely there. */
    @keyframes svg-breathe {
      0%, 100% { transform: scale(1);    opacity: 0.92; }
      50%      { transform: scale(1.04); opacity: 1;    }
    }
    .sv-br   { transform-box: fill-box; transform-origin: center; animation: svg-breathe 8s cubic-bezier(.4,0,.2,1) infinite; }
    .sv-br-2 { transform-box: fill-box; transform-origin: center; animation: svg-breathe 8s cubic-bezier(.4,0,.2,1) infinite -2.6s; }
    .sv-br-3 { transform-box: fill-box; transform-origin: center; animation: svg-breathe 8s cubic-bezier(.4,0,.2,1) infinite -5.2s; }

    /* AI "typing" dots — replaced with a steady, unhurried breath.
       No bouncing. They just glow on and off in sequence, like a
       slow heartbeat on a monitor. */
    @keyframes dot-glow {
      0%, 100% { opacity: 0.28; }
      50%      { opacity: 0.95; }
    }
    .td-1 { animation: dot-glow 3.6s ease-in-out infinite;          }
    .td-2 { animation: dot-glow 3.6s ease-in-out infinite -1.2s;    }
    .td-3 { animation: dot-glow 3.6s ease-in-out infinite -2.4s;    }

    /* Notification badge — no pulse, just a quiet glow. */
    @keyframes badge-glow {
      0%, 100% { opacity: 0.85; }
      50%      { opacity: 1;    }
    }
    .notif-badge { animation: badge-glow 4s ease-in-out infinite; }

    /* Wave — held-still by default, opacity drift only. */
    @keyframes wave-drift {
      0%, 100% { stroke-opacity: 0.85; }
      50%      { stroke-opacity: 1;    }
    }
    .wave-anim { animation: wave-drift 6s ease-in-out infinite; }

    /* Checkmark — draw once, hold. */
    @keyframes check-draw-once {
      0%   { stroke-dashoffset: 60; opacity: 0; }
      30%  { opacity: 1; }
      60%, 100% { stroke-dashoffset: 0; opacity: 1; }
    }
    .check-path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: check-draw-once 4s ease-out infinite; }

    /* Respect reduced-motion: hold everything still. */
    @media (prefers-reduced-motion: reduce) {
      .pr-1, .pr-2, .pr-3,
      .sv-br, .sv-br-2, .sv-br-3,
      .td-1, .td-2, .td-3,
      .notif-badge, .wave-anim, .check-path { animation: none; }
    }

    /* Thin colour accent line at top of image */
    .bento-img-wrap::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      z-index: 2;
    }
    /* Top accent rules removed — single-dot eyebrow accent
       carries the colour now, no gradient bar required. */
    .bento-img-wrap::before { display: none; }
    .bento-panic    .bento-accent { background: var(--red-panic); }
    .bento-ai       .bento-accent { background: var(--cyan); }
    .bento-circles  .bento-accent { background: #a78bfa; }
    .bento-progress .bento-accent { background: #4ADE80; }
    .bento-plan     .bento-accent { background: rgba(255,255,255,0.7); }

    /* Body — clean white headline, muted body, no eyebrow. */
    .bento-body {
      padding: 24px 28px 28px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
      position: relative;
      z-index: 3;
    }
    .bento-body h3 {
      font-family: var(--font-title);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      color: #FFFFFF;
      line-height: 1.18;
      margin: 0;
    }
    .bento-body p {
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,0.5);
      margin: 0;
      max-width: 50ch;
    }
    .bento-plan .bento-body h3 { font-size: 26px; letter-spacing: -0.7px; }

    /* Plan card — split layout: copy left, screenshot right. */
    .plan-split {
      display: grid;
      grid-template-columns: 1fr;
      min-height: 360px;
    }
    @media (min-width: 880px) {
      .plan-split { grid-template-columns: 1.05fr 1fr; }
    }
    .plan-copy {
      padding: 32px 32px 32px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      justify-content: center;
    }
    .plan-copy h3 {
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.8px;
      color: rgba(255,255,255,0.96);
      line-height: 1.1;
      margin: 0;
      text-wrap: balance;
    }
    .plan-copy p {
      font-size: 14.5px;
      line-height: 1.55;
      color: rgba(255,255,255,0.5);
      margin: 0;
      max-width: 46ch;
    }
    .plan-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .plan-step {
      display: flex;
      align-items: baseline;
      gap: 18px;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .plan-step-num {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: rgba(255,255,255,0.32);
      font-variant-numeric: tabular-nums;
    }
    .plan-step-label {
      font-size: 15px;
      font-weight: 500;
      color: rgba(255,255,255,0.86);
    }
    .plan-image {
      position: relative;
      min-height: 320px;
      overflow: hidden;
      background: #0b1020;
    }
    .plan-image img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
      transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
    }
    .bento-plan:hover .plan-image img { transform: scale(1.025); }
    .bento-cta-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      padding: 7px 12px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
    }
    .bento-cta-link:hover { color: #fff; background: rgba(255,255,255,0.08); }

    /* subtle hover overlay */
    .bento-hover-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      transition: background 0.3s;
      z-index: 3;
    }
    .bento-card:hover .bento-hover-overlay {
      background: rgba(255,255,255,0.012);
    }

    /* ── Panic card — same frame colour as siblings ── */

    /* Panic bg: concentric rings */
    .panic-bg-rings {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .panic-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(204,34,0,0.18);
    }
    .panic-ring:nth-child(1) { width: 280px; height: 280px; animation: ring-expand 3s ease-out infinite 0s; }
    .panic-ring:nth-child(2) { width: 200px; height: 200px; animation: ring-expand 3s ease-out infinite 0.7s; border-color: rgba(204,34,0,0.25); }
    .panic-ring:nth-child(3) { width: 130px; height: 130px; animation: ring-expand 3s ease-out infinite 1.4s; border-color: rgba(204,34,0,0.35); }

    @keyframes ring-expand {
      0%   { transform: scale(0.85); opacity: 0.8; }
      100% { transform: scale(1.25); opacity: 0; }
    }

    .panic-btn-bg {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: radial-gradient(circle, #CC2200 0%, #8B1500 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: white;
      text-transform: uppercase;
      box-shadow: 0 0 50px rgba(204,34,0,0.7), 0 0 100px rgba(204,34,0,0.25);
      animation: panic-pulse 2.5s ease-in-out infinite;
      position: relative;
      z-index: 2;
    }

    /* circles visual (reused in card bg) */
    .circles-visual {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }
    .circle-member {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--card-surface);
      border-radius: 12px;
      padding: 9px 12px;
      border: 1px solid var(--card-border);
    }
    .member-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .member-info { flex: 1; min-width: 0; }
    .member-name { font-size: 12px; font-weight: 600; }
    .member-stat { font-size: 10px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .member-badge {
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(0,194,255,0.12);
      color: var(--cyan);
      font-weight: 600;
      flex-shrink: 0;
    }

    /* ─── HOW THE AI WORKS ──────────────────────────────── */
    .ai-explainer-section {
      position: relative;
      isolation: isolate;
    }

    .ai-explainer-wrap {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 72px;
      align-items: center;
    }
    @media (min-width: 960px) {
      .ai-explainer-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 96px;
      }
    }

    /* ── LEFT: phone as hero ──────────────────────────── */
    .ai-explainer-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 520px;
      margin: 0 auto;
    }
    /* one soft, matte spotlight behind the phone — no rainbow */
    .ai-explainer-visual::before {
      content: '';
      position: absolute;
      inset: 12%;
      background: radial-gradient(
        circle at 50% 55%,
        rgba(120, 150, 200, 0.10) 0%,
        rgba(120, 150, 200, 0) 65%
      );
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
    }
    .ai-explainer-visual img.phone {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      animation: aiFloat 9s ease-in-out infinite;
      filter: drop-shadow(0 50px 80px rgba(0,0,0,0.55));
    }
    @keyframes aiFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }

    /* ── RIGHT: typography-led copy ──────────────────── */
    .ai-explainer-text { max-width: 560px; }

    .ai-explainer-text .section-label {
      margin-bottom: 28px;
    }

    .ai-explainer-headline {
      font-family: var(--font-title);
      font-size: clamp(38px, 4.8vw, 60px);
      font-weight: 500;
      line-height: 1.04;
      letter-spacing: -0.7px;
      color: var(--text-primary);
      margin-bottom: 24px;
      text-wrap: balance;
    }
    .ai-explainer-headline em {
      font-style: normal;
      color: rgba(255,255,255,0.45);
    }

    .ai-explainer-lead {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.55);
      margin-bottom: 56px;
      max-width: 460px;
      letter-spacing: 0.05px;
    }

    /* ── Editorial info panels, stacked vertically ───── */
    .ai-pillars {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 0;
    }

    .ai-pillar {
      position: relative;
      padding: 22px 24px;
      border-radius: 14px;
      background: #202124;
      border: 1px solid var(--card-border);
      transition: border-color 0.4s ease, background 0.4s ease;
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      column-gap: 18px;
      align-items: start;
    }
    .ai-pillar:hover {
      border-color: rgba(255,255,255,0.24);
      background: #202124;
    }

    .ai-pillar-icon {
      width: 56px;
      height: 56px;
      display: block;
      margin-top: 1px;
    }
    .ai-pillar-icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
    }

    .ai-pillar-content { min-width: 0; }
    .ai-pillar-title {
      font-family: var(--font-title);
      font-size: 1.25rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px;
      letter-spacing: -0.15px;
      line-height: 1.35;
    }
    .ai-pillar-desc {
      font-size: 1.0625rem;
      line-height: 1.55;
      color: #bcbcc5;
      letter-spacing: 0.05px;
    }

    .ai-explainer-media { min-width: 0; }
    .ai-memory-example {
      margin: 16px auto 0;
      max-width: 460px;
      padding-right: 4px;
      font-family: 'DM Sans', sans-serif;
    }
    .ai-memory-stage {
      display: grid;
      align-items: start;
      padding-top: 2px;
    }
    .ai-memory-size,
    .ai-chat-message {
      grid-area: 1 / 1;
      min-width: 0;
      padding: 14px 44px 14px 14px;
    }
    .ai-memory-example blockquote,
    .ai-memory-size {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 500;
      line-height: 1.5;
      color: var(--text-primary);
    }
    /* Reserve the finished reply's height while its compact loading bubble plays. */
    .ai-memory-size { visibility: hidden; }
    .ai-chat-message {
      position: relative;
      width: 100%;
      min-height: 40px;
      justify-self: end;
      isolation: isolate;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
      transition: width 0.24s ease-out;
    }
    .ai-chat-message::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: 24px;
      background: #36373a;
      border: 1px solid rgba(255,255,255,0.06);
      /* Mirror the app's circular avatar cutout to the requested right edge. */
      -webkit-mask-image: radial-gradient(circle at calc(100% - 15px) 17px, transparent 22px, #000 23px);
      mask-image: radial-gradient(circle at calc(100% - 15px) 17px, transparent 22px, #000 23px);
    }
    .ai-chat-avatar {
      position: absolute;
      top: -2px;
      right: -4px;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.14);
      background: #202124;
      box-shadow: 0 2px 4px rgba(0,0,0,0.24);
    }
    .ai-chat-avatar img {
      width: 88%;
      height: 88%;
      object-fit: contain;
    }
    .ai-chat-dots {
      display: none;
      height: 12px;
      align-items: center;
      gap: 6px;
    }
    .ai-chat-dots span {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.6;
      transform: translateY(2px) scale(0.6);
    }
    .ai-memory-example[data-state="pending"] .ai-chat-message,
    .ai-memory-example[data-state="loading"] .ai-chat-message {
      width: 86px;
      padding: 14px 44px 14px 12px;
    }
    .ai-memory-example[data-state="pending"] .ai-chat-message::before,
    .ai-memory-example[data-state="loading"] .ai-chat-message::before {
      border-radius: 20px;
      background: #3b3c3e;
    }
    .ai-memory-example[data-state="pending"] blockquote,
    .ai-memory-example[data-state="loading"] blockquote { display: none; }
    .ai-memory-example[data-state="pending"] .ai-chat-dots,
    .ai-memory-example[data-state="loading"] .ai-chat-dots { display: flex; }
    .ai-memory-example[data-state="loading"] .ai-chat-dots span {
      animation: ai-chat-dot 0.6s ease-in-out infinite alternate both;
    }
    .ai-memory-example[data-state="loading"] .ai-chat-dots span:nth-child(2) { animation-delay: 0.15s; }
    .ai-memory-example[data-state="loading"] .ai-chat-dots span:nth-child(3) { animation-delay: 0.3s; }
    .ai-memory-example[data-state="typing"] .ai-chat-avatar img { filter: brightness(1.06); }
    @keyframes ai-chat-dot {
      from { opacity: 0.6; transform: translateY(2px) scale(0.6); }
      to { opacity: 1; transform: translateY(-2px) scale(1); }
    }
    .ai-memory-accessible {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
    .ai-memory-example figcaption {
      margin-top: 12px;
      font-size: 0.8125rem;
      line-height: 1.5;
      color: rgba(255,255,255,0.76);
    }
    @media (prefers-reduced-motion: reduce) {
      .ai-chat-message { transition: none; }
      .ai-chat-dots span { animation: none !important; }
    }
    .ai-memory-details {
      margin: 24px 0 0;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--text-secondary);
    }
    .ai-memory-details a { color: inherit; text-underline-offset: 4px; }

    @media (max-width: 720px) {
      .ai-explainer-wrap { gap: 56px; }
      .ai-explainer-visual { max-width: 360px; }
      .ai-explainer-lead { margin-bottom: 40px; }
    }

    /* ─── STORY ─────────────────────────────────────────── */
    .story-card {
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 28px;
      padding: 48px 40px;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      overflow: visible; /* allow expanded content to show fully */
    }
    /* animated top-edge gradient — inset so it sits inside the rounded corners */
    .story-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 28px;
      right: 28px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(
        90deg,
        rgba(0,194,255,0) 0%,
        rgba(0,194,255,0.9) 18%,
        rgba(139,92,246,0.9) 50%,
        rgba(0,194,255,0.9) 82%,
        rgba(0,194,255,0) 100%
      );
      background-size: 220% 100%;
      animation: storyEdgeFlow 6s linear infinite;
      opacity: 0.85;
      filter: drop-shadow(0 0 6px rgba(0,194,255,0.35));
    }
    @keyframes storyEdgeFlow {
      0%   { background-position:   0% 50%; }
      100% { background-position: 220% 50%; }
    }

    .story-quote-mark {
      font-size: 80px;
      line-height: 0.6;
      color: rgba(0,194,255,0.2);
      font-family: Georgia, serif;
      margin-bottom: 24px;
      display: block;
    }

    .story-text {
      font-size: 20px;
      line-height: 1.65;
      color: var(--text-primary);
      font-weight: 400;
      margin-bottom: 32px;
    }
    .story-text em { color: var(--cyan); font-style: normal; }

    .story-author {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    .story-avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: var(--gradient-cta);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      flex-shrink: 0;
      object-fit: cover;
    }
    .story-avatar-founder {
      background-image: url('founder.jpg');
      background-size: 380%;
      background-position: 38% 76%;
      background-repeat: no-repeat;
    }
    .story-author-name { font-size: 15px; font-weight: 700; }
    .story-author-role { font-size: 13px; color: var(--text-secondary); }

    .story-expand {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.6s ease, opacity 0.4s ease;
      opacity: 0;
    }
    .story-expand.open {
      max-height: 3600px; /* generous — paragraphs wrap heavily on mobile */
      opacity: 1;
    }
    .story-expand-text {
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin-top: 28px;
    }
    .story-expand-text h3 {
      font-family: var(--font-title);
      font-size: 17px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 20px;
      letter-spacing: -0.3px;
    }
    .story-expand-text p {
      font-size: 16px;
      line-height: 1.75;
      color: rgba(255,255,255,0.72);
      margin-bottom: 16px;
    }
    .story-expand-text p:last-child { margin-bottom: 0; }
    .story-expand-text em { color: var(--cyan); font-style: normal; }
    /* ── Solid iOS-style story actions ───────────────────── */
    .story-read-more {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 24px;
      min-height: 44px;
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
      color: #ffffff;
      cursor: pointer;
      user-select: none;
      isolation: isolate;
      background: #006edc;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 8px 20px rgba(0,110,220,0.24);
      transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .story-read-more::before,
    .story-read-more::after { display: none; }

    .story-read-more:hover {
      transform: translateY(-1px);
      background: #0a7ce8;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 10px 24px rgba(0,110,220,0.3);
    }

    .story-read-more:active {
      transform: scale(0.97);
      background: #005fc2;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    }

    .story-read-more.open {
      background: #005fc2;
    }

    .story-read-more .arrow {
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
      display: inline-block;
      opacity: 0.9;
      font-weight: 400;
    }
    .story-read-more.open .arrow { transform: rotate(180deg); }

    .story-read-more:not(.story-summary-btn) {
      color: #ffffff;
    }

    .story-read-more:not(.story-summary-btn):hover {
      border-color: rgba(255,255,255,0.2);
    }

    /* Story action button row */
    .story-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 24px;
    }
    .story-actions .story-read-more {
      flex: 0 0 auto;
      max-width: none;
      margin-top: 0;
    }

    /* Purple companion action — equally solid, visually distinct. */
    .story-summary-btn {
      color: #ffffff;
      background: #7342d5;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 8px 20px rgba(115,66,213,0.26);
    }

    .story-summary-btn:hover {
      background: #8250df;
      border-color: rgba(255,255,255,0.2);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 10px 24px rgba(115,66,213,0.32);
    }

    .story-summary-btn:active,
    .story-summary-btn.open {
      background: #6033b8;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
    }

    .story-summary-btn .spark {
      display: inline-block;
      width: 14px; height: 14px;
      flex: 0 0 auto;
      margin-right: 0;
      opacity: 1;
    }

    /* Summary panel */
    .story-summary {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.55s ease, opacity 0.35s ease, margin-top 0.35s ease;
      margin-top: 0;
    }
    .story-summary.open {
      max-height: 1800px;
      opacity: 1;
      margin-top: 24px;
    }
    .story-summary-inner {
      position: relative;
      padding: 24px 24px 22px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0.04) 100%),
        rgba(255,255,255,0.02);
      border: 1px solid rgba(139,92,246,0.22);
    }
    .story-summary-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: #c4b5fd;
      margin-bottom: 14px;
    }
    .story-summary-label::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: #c4b5fd;
      box-shadow: 0 0 8px rgba(196,181,253,0.7);
    }
    .story-summary-inner ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .story-summary-inner li {
      position: relative;
      padding-left: 22px;
      font-size: 15.5px;
      line-height: 1.6;
      color: rgba(255,255,255,0.82);
    }
    .story-summary-inner li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 9px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00C2FF, #8B5CF6);
      box-shadow: 0 0 6px rgba(139,92,246,0.5);
    }
    .story-summary-inner li strong {
      color: #fff;
      font-weight: 700;
    }
    .story-summary-tldr {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(139,92,246,0.18);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(255,255,255,0.72);
    }
    .story-summary-tldr em { color: #c4b5fd; font-style: normal; font-weight: 600; }

    /* ─── SUPPORT PARTNERS ──────────────────────────────── */
    .partner-section {
      scroll-margin-top: 112px;
    }
    .partner-section .section-body {
      max-width: 760px;
    }
    .partners-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: stretch;
      max-width: 1180px;
      margin: 52px auto 0;
    }
    .partner-profile {
      min-width: 0;
      display: grid;
      grid-template-rows: 236px 1fr;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 8px;
      background: #101624;
      box-shadow: 0 24px 54px rgba(0,0,0,0.26);
    }
    .partner-visual-stage {
      display: grid;
      place-items: center;
      min-height: 0;
      border-bottom: 1px solid rgba(255,255,255,0.09);
      background: #0b101c;
    }
    .partner-visual-stage--tranquility,
    .partner-visual-stage--noledge {
      background: #fff;
    }
    .partner-logo-link {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      padding: 28px;
      text-decoration: none;
    }
    .partner-tranquility-logo {
      display: block;
      width: min(100%, 400px);
      height: auto;
    }
    .partner-noledge-logo {
      display: block;
      width: 158px;
      height: auto;
    }
    .partner-content {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px;
      text-align: center;
    }
    .partner-heading-row {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }
    .partner-heading-copy {
      min-width: 0;
      text-align: left;
    }
    .partner-heading-copy .partner-profile-kicker {
      margin-bottom: 6px;
    }
    .partner-title-avatar-shell {
      width: 76px;
      height: 76px;
      flex: 0 0 76px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      background: #f6eef6;
      box-shadow: 0 10px 26px rgba(0,0,0,0.28);
    }
    .partner-title-avatar {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: inherit;
    }
    .partner-profile-kicker {
      margin-bottom: 10px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.48);
    }
    .partner-name {
      margin: 0;
      font-family: var(--font-title);
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.08;
      letter-spacing: 0;
      color: var(--text-primary);
    }
    .partner-organisation-link {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 7px;
      margin: 8px auto 0;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      color: rgba(255,255,255,0.68);
      text-decoration: none;
    }
    .partner-organisation-link:hover {
      color: var(--text-primary);
    }
    .partner-organisation-link svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }
    .partner-credentials {
      display: flex;
      min-height: 82px;
      align-items: flex-start;
      align-content: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      margin: 20px 0 22px;
    }
    .partner-lead {
      margin: 0;
      max-width: 470px;
      font-size: 15px;
      line-height: 1.68;
      color: var(--text-secondary);
    }
    .partner-highlights {
      display: grid;
      gap: 0;
      width: 100%;
      margin: 26px 0 28px;
      padding: 0;
      border-top: 1px solid var(--border);
      list-style: none;
    }
    .partner-highlights li {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 12px;
      border-bottom: 1px solid var(--border);
      font-size: 13.5px;
      line-height: 1.5;
      text-align: left;
      color: rgba(255,255,255,0.78);
    }
    .partner-highlight-icon {
      display: inline-flex;
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      align-items: center;
      justify-content: center;
      color: #23c7ed;
      opacity: 0;
      transform: translateY(7px) scale(0.82);
      transform-origin: center;
    }
    .partner-highlight-icon svg {
      width: 22px;
      height: 22px;
      overflow: visible;
      transition: color 0.2s ease;
    }
    .partners-grid.visible .partner-highlight-icon {
      animation: partner-highlight-enter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .partners-grid.visible .partner-highlights li:nth-child(2) .partner-highlight-icon {
      animation-delay: 0.08s;
    }
    .partners-grid.visible .partner-highlights li:nth-child(3) .partner-highlight-icon {
      animation-delay: 0.16s;
    }
    .partner-highlights li:hover .partner-highlight-icon svg {
      color: #78e7ff;
      animation: partner-highlight-nudge 0.42s ease;
    }
    @keyframes partner-highlight-enter {
      from { opacity: 0; transform: translateY(7px) scale(0.82); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes partner-highlight-nudge {
      0%, 100% { transform: translateY(0) scale(1); }
      45% { transform: translateY(-2px) scale(1.08); }
    }
    .partner-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: auto;
    }
    .partner-actions .btn-primary,
    .partner-actions .btn-secondary {
      min-height: 46px;
      padding: 12px 20px;
      font-size: 13px;
    }
    .partner-note {
      margin: 16px 0 0;
      max-width: 470px;
      font-size: 11px;
      line-height: 1.5;
      text-align: center;
      color: rgba(255,255,255,0.38);
    }
    .partner-business-award,
    .partner-charity-status {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 50px;
      max-width: 100%;
      padding: 7px 14px 7px 9px;
      flex: 0 0 auto;
      border: 1px solid #30394a;
      border-radius: 999px;
      background: #171d29;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.22);
      font-size: 10px;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #f5f7fb;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .partner-business-award:hover,
    .partner-charity-status:hover {
      transform: translateY(-1px);
      border-color: #465166;
      background: #1b2230;
    }
    .partner-credential-icon {
      width: 32px;
      height: 32px;
      flex: 0 0 auto;
      overflow: visible;
      transform-origin: 50% 55%;
      filter: drop-shadow(0 5px 8px rgba(0,0,0,0.28));
      animation: partner-credential-float 3.6s ease-in-out infinite;
    }
    .partner-credential-icon--verified {
      animation-delay: -1.2s;
    }
    @keyframes partner-credential-float {
      0%, 100% { transform: translateY(0) rotate(-1.5deg); }
      50% { transform: translateY(-2px) rotate(1.5deg); }
    }
    .partner-business-award-copy {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .partner-business-award-detail {
      font-size: 9px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0;
      text-transform: none;
      color: #aeb6c5;
    }
    .partner-charity-status {
      color: #f5f7fb;
    }
    @media (prefers-reduced-motion: reduce) {
      .partner-credential-icon {
        animation: none;
      }
      .partner-highlight-icon,
      .partners-grid.visible .partner-highlight-icon {
        opacity: 1;
        transform: none;
        animation: none;
      }
      .partner-highlights li:hover .partner-highlight-icon svg {
        animation: none;
      }
    }
    .partner-google-rating {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      color: inherit;
      text-decoration: none;
      transition: opacity 0.2s ease;
    }
    .partner-google-rating:hover {
      opacity: 0.82;
    }
    .partner-google-wordmark {
      display: block;
      width: 54px;
      height: auto;
      flex: 0 0 auto;
    }
    .partner-google-stars {
      flex: 0 0 auto;
      font-size: 14px;
      line-height: 1;
      letter-spacing: 0;
      color: #f5a623;
    }
    .partner-google-score {
      flex: 0 0 auto;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      color: var(--text-primary);
    }
    .partner-google-review-count {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      color: rgba(255,255,255,0.82);
    }
    .partner-google-open-icon {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: rgba(255,255,255,0.66);
      transition: transform 0.2s ease, color 0.2s ease;
    }
    .partner-google-rating:hover .partner-google-open-icon {
      color: var(--text-primary);
      transform: translate(1px, -1px);
    }
    @media (min-width: 900px) {
      .partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
      }
    }

    /* ─── CREATORS (Vouched by) ─────────────────────────── */
    .creators-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      margin-top: 52px;
    }
    @media (min-width: 720px) {
      .creators-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    .creator-card {
      position: relative;
      display: flex; flex-direction: column;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #0d1220;
      box-shadow: 0 20px 50px rgba(0,0,0,0.4);
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .creator-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 64px rgba(0,0,0,0.55);
      border-color: rgba(0,194,255,0.25);
    }
    .creator-photo-wrap {
      position: relative;
      flex: 1 1 auto;
      aspect-ratio: 4 / 5;
      min-height: 0;
      overflow: hidden;
    }
    /* Dissolve the photo's bottom edge into the card bg — no hard line behind the glass */
    .creator-photo-wrap::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 84px;
      background: linear-gradient(to top, #0d1220 0%, rgba(13,18,32,0.55) 45%, rgba(13,18,32,0) 100%);
      pointer-events: none;
    }
    .creator-photo {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 26%;
      transition: transform .6s cubic-bezier(.2,.6,.2,1);
    }
    .creator-card:hover .creator-photo { transform: scale(1.045); }
    .creator-placeholder {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(160deg, #151c2e 0%, #0b0f1a 100%);
      font-family: var(--font-title);
      font-size: 88px; font-weight: 700;
      color: rgba(255,255,255,0.10);
      letter-spacing: 0;
    }
    /* Frosted, blurred band behind the name (fades up into the photo) */
    .creator-bottom-scrim {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: 34%;
      -webkit-backdrop-filter: blur(12px) saturate(1.1);
      backdrop-filter: blur(12px) saturate(1.1);
      background: linear-gradient(to top,
        rgba(6,9,16,0.68) 0%,
        rgba(6,9,16,0.28) 55%,
        rgba(6,9,16,0) 100%);
      -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%);
      mask-image: linear-gradient(to top, #000 55%, transparent 100%);
      pointer-events: none;
    }
    /* Liquid-glass quote card — overlaps the photo so the blur refracts it */
    .creator-quote-body {
      position: relative; z-index: 2;
      flex: 0 0 auto;
      display: flex; flex-direction: column;
      margin: -22px 14px 14px;
      padding: 15px 17px 12px;
      border-radius: 18px;
      background: linear-gradient(155deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.07));
      -webkit-backdrop-filter: blur(18px) saturate(1.6);
      backdrop-filter: blur(18px) saturate(1.6);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow:
        0 16px 36px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(255,255,255,0.05);
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .creator-card:hover .creator-quote-body {
      transform: translateY(-3px);
      box-shadow:
        0 22px 44px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(255,255,255,0.05);
    }
    /* Glass header: niche pill centered on its own row */
    .creator-glass-head {
      display: flex; justify-content: center;
      margin-bottom: 12px;
    }
    .creator-quote-mark {
      display: block;
      font-family: var(--font-title);
      font-size: 30px; font-weight: 700;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
      height: 18px;
      margin: 0 0 8px;
      overflow: visible;
    }
    .creator-quote {
      font-size: 13px; line-height: 1.55;
      color: rgba(255,255,255,0.9);
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    /* Footer row pinned to the bottom of the glass card */
    .creator-glass-footer {
      display: flex; align-items: center; gap: 8px;
      margin-top: auto;
      padding-top: 11px;
    }
    .creator-glass-footer::before {
      content: none;
    }
    .creator-ig-link {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.10);
      text-decoration: none;
      font-size: 11.5px; font-weight: 600;
      letter-spacing: 0.02em;
      color: rgba(255,255,255,0.55);
      transition: color .25s ease;
    }
    .creator-ig-link:hover { color: #8fe3ff; }
    .creator-ig-link .ig-chip {
      width: 22px; height: 22px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 75%, #4f5bd5);
      flex-shrink: 0;
    }
    .creator-ig-link .ig-arrow {
      margin-left: auto;
      opacity: 0.5;
      transition: transform .25s ease, opacity .25s ease;
    }
    .creator-ig-link:hover .ig-arrow { transform: translateX(3px); opacity: 1; }
    /* Niche tag — sits in the glass card header */
    .creator-niche {
      display: inline-block;
      padding: 4px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
      color: #FFFFFF;
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      text-align: center;
      max-width: 170px;
      line-height: 1.4;
      text-shadow: none;
    }
    /* Centered identity block */
    .creator-idblock {
      position: absolute; left: 0; right: 0; bottom: 36px;
      text-align: center; padding: 0 14px;
      z-index: 1;
    }
    .creator-name {
      font-family: var(--font-title);
      font-weight: 700; font-size: 19px; color: #fff;
      line-height: 1.15;
      text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    }
    .creator-handle {
      font-size: 12.5px; color: rgba(255,255,255,0.68);
      margin-top: 3px;
      text-shadow: 0 1px 6px rgba(0,0,0,0.55);
    }

    .creator-videos {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      max-width: 1080px;
      margin: clamp(38px, 5vw, 58px) auto 0;
    }
    .creator-video-card {
      position: relative;
      aspect-ratio: 9 / 16;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 22px;
      background: #05070d;
      box-shadow: 0 18px 46px rgba(0,0,0,0.38);
      transition: transform 0.3s var(--motion-ease), border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .creator-video-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,194,255,0.28);
      box-shadow: 0 24px 58px rgba(0,0,0,0.48);
    }
    .creator-video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #05070d;
    }
    .creator-video:focus-visible {
      outline: 3px solid var(--cyan);
      outline-offset: -4px;
    }

    @media (max-width: 760px) {
      .creator-videos {
        display: flex;
        width: calc(100% + 40px);
        max-width: none;
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 20px 10px;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .creator-videos::-webkit-scrollbar { display: none; }
      .creator-video-card {
        flex: 0 0 min(74vw, 280px);
        scroll-snap-align: center;
      }
    }

    @media (max-width: 480px) {
      .creator-videos {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
      }
    }

    /* ─── REVIEWS ───────────────────────────────────────── */
    .reviews-rating-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      margin-top: 48px;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    .reviews-score-block {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .reviews-score {
      font-size: 72px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -3px;
      color: #fff;
    }
    .reviews-score-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }
    .reviews-divider {
      width: 1px;
      height: 56px;
      background: rgba(255,255,255,0.1);
    }
    .reviews-stars-block {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .reviews-stars-row {
      display: flex;
      gap: 4px;
    }
    .reviews-stars-row span { font-size: 22px; color: #F59E0B; }
    .reviews-platform {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
    }
    .reviews-platform svg { opacity: 0.5; }

    /* ── Reviews marquee ── */
    .reviews-marquee-wrap {
      overflow: hidden;
      margin: 0 -24px;
      max-width: calc(100% + 48px);
      display: flex;
      flex-direction: column;
      gap: 18px;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .reviews-marquee-track {
      display: flex;
      align-items: stretch;
      gap: 18px;
      width: max-content;
      animation: rMarquee 72s linear infinite;
      padding: 8px 0 8px;
    }
    .reviews-marquee-track:hover { animation-play-state: paused; }
    @keyframes rMarquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .reviews-marquee-track--reverse {
      animation-name: rMarqueeReverse;
    }
    @keyframes rMarqueeReverse {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .review-card {
      width: 310px;
      height: 260px;
      flex-shrink: 0;
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 20px;
      padding: 20px 22px 18px;
      transition: transform 0.25s, border-color 0.25s, background 0.25s;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .review-card--wide { width: 310px; }
    .review-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,194,255,0.35), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .review-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,194,255,0.28);
      background: var(--card-surface-hover);
    }
    .review-card:hover::before { opacity: 1; }

    .review-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .review-stars { display: flex; gap: 3px; }
    .review-stars span { font-size: 14px; color: #F59E0B; }
    .review-appstore-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 600;
      color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 3px 9px 3px 7px;
    }
    .review-appstore-badge svg { flex-shrink: 0; opacity: 0.55; }
    .review-ig-badge {
      color: rgba(249,115,22,0.75);
      background: rgba(249,115,22,0.07);
      border-color: rgba(249,115,22,0.15);
    }
    .review-ig-badge svg { opacity: 0.8; color: rgba(249,115,22,0.75); }
    .review-card--featured {
      background: var(--card-surface-hover);
      border-color: rgba(255,255,255,0.22);
    }
    .review-card--featured:hover { border-color: rgba(249,115,22,0.25); }

    .review-title {
      font-family: var(--font-title);
      font-size: 15px;
      font-weight: 700;
      color: rgba(255,255,255,0.88);
      margin-bottom: 6px;
    }
    .review-text {
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255,255,255,0.5);
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .reviewer {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .reviewer-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--cyan), var(--purple));
      font-size: 12px;
      font-weight: 700;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .reviewer-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.7); }
    .reviewer-meta { font-size: 11px; color: var(--text-tertiary); }

    /* ─── BADGE MARQUEE ─────────────────────────────────── */
    .badges-marquee-wrap {
      overflow: hidden;
      margin: 0 -24px;
      max-width: calc(100% + 48px);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .badges-marquee-track {
      --badge-gap: 28px;
      display: flex;
      gap: var(--badge-gap);
      width: max-content;
      animation: bdgMarquee 38s linear infinite;
      animation-play-state: paused;
      padding: 12px var(--badge-gap) 12px 0;
      will-change: transform;
    }
    .badges-marquee-track:hover { animation-play-state: paused; }
    @keyframes bdgMarquee {
      0%   { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-33.333333%, 0, 0); }
    }
    .badge-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      cursor: default;
    }
    .badge-orb {
      width: 100px;
      height: 100px;
      border-radius: 28px;
      overflow: hidden;
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s, border-color 0.25s;
    }
    .badge-orb:hover { transform: scale(1.08); border-color: rgba(0,194,255,0.25); }
    .badge-orb img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }
    .badge-name {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      text-align: center;
      letter-spacing: 0.02em;
    }
    .badge-level {
      font-size: 10px;
      color: rgba(255,255,255,0.22);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* ─── PRICING ───────────────────────────────────────── */
    .pricing-section {
      position: relative;
      overflow: hidden;
    }

    .pricing-intro {
      position: relative;
      z-index: 2;
      min-height: 0;
    }

    .pricing-intro .section-label,
    .pricing-intro .section-headline,
    .pricing-intro .section-body,
    .pricing-region-row {
      position: relative;
      z-index: 3;
    }

    .pricing-region-row {
      display: flex;
      width: min(100%, 420px);
      margin: 22px auto 0;
      align-items: center;
      justify-content: center;
      gap: 7px;
      color: var(--text-tertiary);
    }

    .pricing-region-row > svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
      color: var(--cyan);
    }

    .pricing-region-label {
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 600;
    }

    .pricing-region-status {
      min-width: 0;
      color: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
    }

    .pricing-grid {
      position: relative;
      z-index: 5;
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      max-width: 720px;
      margin: 60px auto 0;
      align-items: stretch;
      grid-auto-rows: 1fr;
    }
    @media (min-width: 700px) {
      .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    }

    .pricing-card {
      display: flex;
      height: 100%;
      box-sizing: border-box;
      flex-direction: column;
      align-items: center;
      background: var(--card-surface);
      border: 1px solid var(--card-border);
      border-radius: 24px;
      padding: 32px 26px 28px;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      overflow: hidden;
    }
    .pricing-card:hover { transform: translateY(-3px); }

    .pricing-card-shell {
      position: relative;
      height: 100%;
      overflow: visible;
    }

    /* Featured (Yearly) — the centrepiece */
    .pricing-card.featured {
      background: rgba(0,194,255,0.14);
      border-color: rgba(0,194,255,0.28);
      box-shadow: 0 0 0 1px rgba(0,194,255,0.12), 0 24px 80px rgba(0,194,255,0.1), 0 8px 32px rgba(0,0,0,0.4);
      padding: 32px 26px 28px;
      border-radius: 24px;
      overflow: hidden;
    }
    .pricing-card.featured::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--gradient-cta);
      border-radius: 28px 28px 0 0;
    }
    /* Subtle inner glow top */
    .pricing-card.featured::after {
      content: '';
      position: absolute;
      top: 0; left: 10%; right: 10%;
      height: 80px;
      background: radial-gradient(ellipse at top, rgba(0,194,255,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Lifetime — amber/gold accent */
    .pricing-card.lifetime {
      background: rgba(251,191,36,0.12);
      border-color: rgba(251,191,36,0.14);
    }

    .pricing-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      background: var(--gradient-cta);
      color: white;
      margin: 0;
      white-space: nowrap;
    }
    .pricing-badge-row {
      position: absolute;
      z-index: 3;
      top: 0;
      left: 50%;
      display: flex;
      width: auto;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 8px;
      margin: 0;
      transform: translate(-50%, -50%);
    }
    .pricing-badge-lifetime {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      background: linear-gradient(135deg, #F59E0B, #EF4444);
      color: white;
      margin-bottom: 22px;
    }

    .pricing-plan {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 14px;
    }

    .pricing-price {
      font-size: 52px;
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 5px;
    }
    .pricing-card.featured .pricing-price { font-size: 58px; }
    .pricing-price[data-pricing-yearly] {
      font-variant-numeric: tabular-nums;
      letter-spacing: -1px;
      white-space: nowrap;
    }
    .pricing-price sup {
      font-size: 20px;
      font-weight: 700;
      vertical-align: top;
      margin-top: 10px;
      letter-spacing: 0;
    }

    .pricing-period {
      font-size: 12.5px;
      color: var(--text-tertiary);
      margin-bottom: 6px;
    }

    .pricing-save {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 0;
    }
    .pricing-save.cyan { color: var(--cyan); }
    .pricing-save.amber { color: #FBBF24; }
    .pricing-save.muted { color: var(--text-tertiary); }

    .pricing-storefront-note {
      max-width: 620px;
      margin: 22px auto 0;
      color: var(--text-tertiary);
      font-size: 11px;
      line-height: 1.6;
      text-align: center;
    }

    .pricing-divider {
      width: 100%;
      height: 1px;
      background: rgba(255,255,255,0.07);
      margin: 22px 0;
    }
    .pricing-card.featured .pricing-divider { background: rgba(0,194,255,0.15); }

    .pricing-features {
      list-style: none;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 11px;
      margin-bottom: 26px;
    }
    .pricing-features li {
      width: min(100%, 270px);
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      display: flex;
      align-items: center;
      gap: 12px;
      line-height: 1.3;
    }
    .pricing-feature-icon {
      flex-shrink: 0;
      display: block;
      width: 22px;
      height: 22px;
      overflow: visible;
    }
    .pricing-feature-icon--ai {
      width: 23px;
      height: 25px;
      object-fit: contain;
      filter: drop-shadow(0 0 5px rgba(135,60,255,0.34));
    }
    .pricing-feature-icon--stats { color: #00D9FF; }
    .pricing-feature-icon--panic { color: #FF3157; }
    .pricing-feature-icon--recovery { color: #00E676; }
    .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.85); }

    .btn-pricing {
      display: block;
      width: 100%;
      margin-top: auto;
      padding: 15px;
      border-radius: 100px;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      cursor: pointer;
      border: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      text-decoration: none;
      letter-spacing: 0.01em;
    }
    .btn-pricing:hover { transform: translateY(-2px); }
    .btn-pricing.grad {
      background: var(--gradient-cta);
      color: white;
      box-shadow: 0 8px 32px rgba(0,194,255,0.25);
    }
    .btn-pricing.grad:hover { box-shadow: 0 12px 40px rgba(0,194,255,0.35); }
    .btn-pricing.amber-grad {
      background: linear-gradient(135deg, #F59E0B, #EF4444);
      color: white;
      box-shadow: 0 8px 28px rgba(245,158,11,0.2);
    }
    .btn-pricing.amber-grad:hover { box-shadow: 0 12px 36px rgba(245,158,11,0.3); }
    .btn-pricing.outline {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.55);
    }
    .btn-pricing.outline:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }

    /* ─── FAQ ───────────────────────────────────────────── */
    .faq-list {
      max-width: 720px;
      margin: 60px auto 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .faq-item {
      border-bottom: 1px solid var(--border);
    }
    .faq-item:first-child { border-top: 1px solid var(--border); }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      color: var(--text-primary);
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: color 0.2s;
    }
    .faq-question:hover { color: var(--cyan); }

    .faq-icon {
      width: 24px; height: 24px;
      flex-shrink: 0;
      position: relative;
      box-sizing: border-box;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      font-size: 0;
      line-height: 1;
      color: var(--text-secondary);
      transition: transform 0.3s, background 0.2s, border-color 0.2s;
    }
    .faq-icon::before,
    .faq-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 1.5px;
      border-radius: 999px;
      background: currentColor;
      transform: translate(-50%, -50%);
    }
    .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }
    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: rgba(0,194,255,0.1);
      border-color: var(--cyan);
      color: var(--cyan);
    }

    .faq-answer {
      display: none;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease, padding 0.35s ease;
    }
    .faq-item.open .faq-answer { display: block; max-height: none; padding-bottom: 24px; }

    .faq-answer p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--text-secondary);
    }

    /* ─── FINAL CTA ─────────────────────────────────────── */
    .final-cta {
      padding: 120px 24px;
      text-align: center;
      position: relative;
    }

    .final-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 400px;
      background: radial-gradient(ellipse at center, rgba(120,140,180,0.04) 0%, transparent 70%);
      pointer-events: none;
    }

    .final-cta-app-icon {
      display: block;
      width: 128px;
      height: 128px;
      margin: 0 auto 24px;
      border-radius: 36px;
      box-shadow:
        0 18px 42px rgba(0,0,0,0.42),
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 34px rgba(0,194,255,0.16);
    }

    .final-cta .section-headline { max-width: 600px; margin: 0 auto 20px; }
    .final-cta .section-body { text-align: center; margin: 0 auto 40px; }
    .final-cta-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .final-cta-actions .store-btn {
      min-width: 0;
      min-height: 48px;
      padding: 8px 14px;
      gap: 9px;
      border-radius: 10px;
      flex: 0 0 auto;
    }
    .final-cta-actions .store-btn-icon svg {
      width: 19px;
      height: 19px;
    }
    .final-cta-actions .store-btn-top { font-size: 8px; }
    .final-cta-actions .store-btn-bot { font-size: 14px; }

    /* ─── FOOTER ────────────────────────────────────────── */
    footer {
      border-top: 1px solid var(--border);
      overflow: hidden;
    }

    /* Top grid row */
    .footer-top {
      display: grid;
      grid-template-columns: minmax(230px, 1.35fr) repeat(5, minmax(0, 1fr));
      gap: 42px;
      padding: 64px 48px 56px;
      align-items: start;
      max-width: 1400px;
      margin: 0 auto;
    }
    @media (max-width: 1120px) {
      .footer-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 40px 32px;
        padding: 48px 28px 40px;
      }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 620px) {
      .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 22px;
        padding: 40px 24px;
      }
      .footer-brand { grid-column: 1 / -1; }
    }

    /* Left brand column */
    .footer-brand > img {
      height: 44px;
      width: auto;
      display: block;
      margin-bottom: 14px;
      opacity: 0.92;
    }
    .footer-tagline {
      font-size: 13px;
      color: var(--text-tertiary);
      line-height: 1.55;
      max-width: 200px;
      margin-bottom: 24px;
    }
    .footer-appstore {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      padding: 10px 18px;
      text-decoration: none;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      transition: background 0.2s, border-color 0.2s;
    }
    .footer-appstore:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.22);
    }
    .footer-appstore svg { width: 17px; height: 17px; flex-shrink: 0; }
    .footer-appstore-sub {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }
    .footer-appstore-sub span:first-child {
      font-size: 10px;
      font-weight: 400;
      color: rgba(255,255,255,0.55);
    }

    /* Nav columns */
    .footer-col {}
    .footer-col-heading {
      font-family: var(--font-title);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #fff;
      margin-bottom: 18px;
    }
    .footer-col a {
      display: block;
      font-size: 13.5px;
      color: var(--text-tertiary);
      text-decoration: none;
      margin-bottom: 12px;
      transition: color 0.18s;
    }
    .footer-col a:hover { color: rgba(255,255,255,0.75); }

    /* Socials column — icon rows */
    .footer-social-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-social-item {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--text-tertiary);
      font-size: 13.5px;
      transition: color 0.18s;
    }
    .footer-social-item:hover { color: rgba(255,255,255,0.75); }
    .footer-social-item svg {
      width: 16px; height: 16px;
      flex-shrink: 0;
    }
    .footer-social-inline {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-social-inline a {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      color: var(--text-tertiary);
      text-decoration: none;
      transition: color .18s, border-color .18s, background .18s;
    }
    .footer-social-inline a:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.06);
    }
    .footer-social-inline svg { width: 15px; height: 15px; }

    /* Divider */
    .footer-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0 64px;
    }
    @media (max-width: 860px) { .footer-divider { margin: 0 28px; } }
    @media (max-width: 540px) { .footer-divider { margin: 0 24px; } }

    /* Copyright row */
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 20px 48px 28px;
      max-width: 1400px;
      margin: 0 auto;
    }
    @media (max-width: 860px) {
      .footer-bottom { padding: 20px 28px 0; flex-direction: column; gap: 8px; text-align: center; }
    }
    @media (max-width: 540px) { .footer-bottom { padding: 20px 24px 0; } }
    .footer-copy {
      font-size: 12px;
      color: var(--text-tertiary);
    }

    /* Full-width brand wordmark */
    .footer-wordmark {
      display: none;
      position: relative;
      width: 100%;
      aspect-ratio: 2.52 / 1;
      overflow: hidden;
    }
    .footer-wordmark a {
      position: absolute;
      inset: 0;
      display: block;
    }
    .footer-wordmark img {
      position: absolute;
      top: -37%;
      left: 50%;
      display: block;
      width: 135%;
      max-width: none;
      height: auto;
      opacity: 0.94;
      transform: translateX(-50%);
    }
    @media (max-width: 768px) {
      .footer-brand > img { display: none; }
      .footer-wordmark { display: block; }
    }

    /* ─── SCROLL FADE-IN ────────────────────────────────── */
    html.motion-ready .fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
    }
    html.motion-ready .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in-delay-1 { transition-delay: 0.1s; }
    .fade-in-delay-2 { transition-delay: 0.2s; }
    .fade-in-delay-3 { transition-delay: 0.3s; }
    .fade-in-delay-4 { transition-delay: 0.4s; }

    /* ─── UTILITY ───────────────────────────────────────── */
    .text-center { text-align: center; }
    .text-center .section-body { margin: 0 auto; }

    /* ─── EMPATHY: anatomy of a wave ─────────────────── */
    .empathy-section {
      position: relative;
      overflow: hidden;
      padding-bottom: 120px !important;
    }
    .empathy-header {
      text-align: center;
      max-width: 760px;
      margin: 0 auto;
    }
    .empathy-header .section-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .empathy-eyebrow-dot {
      width: 8px; height: 8px;
      border-radius: 99px;
      background: #FF2A12;
      box-shadow: 0 0 12px rgba(255,42,18,0.75);
      display: inline-block;
    }
    .empathy-header .section-headline em {
      font-style: italic;
      color: #5DD5FF;
    }
    .empathy-lead {
      font-size: 17px;
      line-height: 1.7;
      color: rgba(255,255,255,0.50);
      max-width: 540px;
      margin: 18px auto 0;
      text-wrap: pretty;
    }

    /* ── Anatomy stage — contained frame for the SVG wave + markers ── */
    .anatomy-stage {
      position: relative;
      width: 100%;
      max-width: 1320px;
      margin: 24px auto 0;
      height: 560px;
      padding-bottom: 64px;
      isolation: isolate;
      overflow: visible;
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .anatomy-ambient {
      position: absolute; inset: 0;
      background:
        radial-gradient(60% 50% at 50% 38%, rgba(255,80,40,0.10), transparent 70%),
        radial-gradient(50% 40% at 75% 60%, rgba(70,180,255,0.10), transparent 70%),
        radial-gradient(80% 60% at 50% 100%, rgba(8,12,24,0.9), transparent 70%);
      z-index: 0;
      pointer-events: none;
    }
    .anatomy-baseline {
      position: absolute;
      left: 60px; right: 60px;
      bottom: 100px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 10%, rgba(255,255,255,0.10) 90%, transparent);
      z-index: 1;
      pointer-events: none;
    }
    .anatomy-axis-left,
    .anatomy-axis-right {
      position: absolute;
      bottom: 76px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: rgba(255,255,255,0.35);
      font-variant-numeric: tabular-nums;
      z-index: 2;
    }
    .anatomy-axis-left  { left: max(40px, 4vw); }
    .anatomy-axis-right { right: max(40px, 4vw); }

    .anatomy-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      mask-image: linear-gradient(90deg, #000 0%, #000 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%);
    }

    /* Markers — labels along the wave with time + phrase */
    .anatomy-marker {
      position: absolute;
      pointer-events: none;
      text-align: center;
      white-space: nowrap;
      z-index: 2;
      transform: translateX(-50%);
    }
    .anatomy-marker-time {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.4);
      font-variant-numeric: tabular-nums;
      margin-bottom: 4px;
    }
    .anatomy-marker-label {
      font-size: 13px;
      font-style: italic;
      font-weight: 400;
    }
    /* Custom 3D artwork; labels carry the meaning for assistive technology. */
    .anatomy-icon {
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 6px;
      width: 44px; height: 44px;
    }
    .anatomy-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

    .anatomy-marker.is-calm     { color: rgba(255,170,140,0.65); }
    .anatomy-marker.is-rising   { color: rgba(255,140,100,0.95); }
    .anatomy-marker.is-recovery { color: rgba(140,215,255,0.95); }
    .anatomy-marker.is-baseline { color: rgba(180,210,235,0.75); }
    .anatomy-marker.is-peak     { color: #FF2200; }

    .anatomy-marker-peak {
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.22em;
      color: #FF2200;
      text-shadow: 0 0 16px rgba(255,30,0,0.6);
      margin-bottom: 4px;
    }
    .anatomy-marker-time-big {
      font-family: var(--font-title);
      font-size: 22px;
      font-weight: 500;
      color: #fff;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      line-height: 1;
    }

    /* Phone — centered on the curve, panic.png with red glow */
    .anatomy-phone {
      position: absolute;
      left: 56%;
      top: 36%;
      transform: translate(-50%, 0);
      width: 260px;
      text-align: center;
      z-index: 4;
    }
    .anatomy-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.005em;
      color: rgba(255,255,255,0.92);
      background: rgba(18,20,28,0.55);
      border: 0.5px solid rgba(255,255,255,0.16);
      padding: 7px 14px 7px 11px;
      border-radius: 999px;
      margin-bottom: 14px;
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 0 0 0.5px rgba(255,255,255,0.04) inset,
        0 6px 20px rgba(0,0,0,0.35),
        0 1px 2px rgba(0,0,0,0.2);
    }
    .anatomy-pill-dot {
      width: 6px; height: 6px;
      border-radius: 99px;
      background: #FF3320;
      box-shadow: 0 0 8px rgba(255,40,10,0.85);
    }
    .anatomy-phone-wrap {
      position: relative;
      width: 260px;
      margin: 0 auto;
    }
    .anatomy-phone-img {
      position: relative;
      display: block;
      width: 100%;
      height: auto;
    }
    .anatomy-phone-glow {
      position: absolute;
      inset: -20px;
      background: radial-gradient(ellipse at center, rgba(255,40,10,0.35), transparent 65%);
      filter: blur(24px);
      z-index: -1;
      pointer-events: none;
    }
    .anatomy-phone-caption {
      margin-top: 12px;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      font-style: italic;
      line-height: 1.4;
      max-width: 220px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Footer summary line under the wave */
    .anatomy-footer {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      width: 100%;
      max-width: 1320px;
      margin: 16px auto 0;
      padding: 0 8px 24px;
      z-index: 2;
      font-size: 12px;
      font-style: italic;
      color: rgba(255,255,255,0.42);
      flex-wrap: wrap;
    }
    .anatomy-footer-left,
    .anatomy-footer-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .anatomy-footer .dot-red {
      width: 6px; height: 6px;
      border-radius: 99px;
      background: #FF4D2A;
      box-shadow: 0 0 8px rgba(255,77,42,0.7);
    }
    .anatomy-footer .dot-cyan {
      width: 6px; height: 6px;
      border-radius: 99px;
      background: #5DD5FF;
      box-shadow: 0 0 8px rgba(93,213,255,0.7);
    }

    @media (max-width: 920px) {
      .anatomy-stage { height: 460px; padding-bottom: 56px; }
      .anatomy-marker-label { font-size: 11px; }
      .anatomy-marker-time { font-size: 10px; }
      .anatomy-marker-time-big { font-size: 18px; }
      .anatomy-phone { width: 200px; }
      .anatomy-phone-wrap { width: 200px; }
    }
    @media (max-width: 640px) {
      .anatomy-stage { height: 380px; padding-bottom: 80px; }
      .anatomy-phone { width: 140px; top: 36%; }
      .anatomy-phone-wrap { width: 140px; }
      .anatomy-pill { font-size: 10px; padding: 5px 10px 5px 8px; }
      .anatomy-marker-time { font-size: 9px; }
      .anatomy-marker-label { font-size: 9px; }
      .anatomy-marker-time-big { font-size: 16px; }
      .anatomy-axis-left, .anatomy-axis-right { display: none; }
      .anatomy-footer { display: none; }
      .anatomy-icon { width: 28px; height: 28px; margin-bottom: 3px; }
      .orb-breathe-label { font-size: 7px; margin-bottom: 2px; }
      .anatomy-phone-caption { display: none; }
    }

    /* legacy classes — kept so nothing else breaks ─────── */
    .wave-stage {
      position: relative;
      width: 100vw;
      left: 50%;
      right: 50%;
      margin: 56px -50vw 0;
      min-height: 620px;
      padding: 60px 0 0;
      isolation: isolate;
      overflow: hidden;
    }
    /* atmospheric backdrop — deep navy haze with warm core */
    .wave-stage::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(80% 70% at 50% 60%, rgba(40,55,90,0.20) 0%, transparent 70%),
        radial-gradient(30% 25% at 50% 50%, rgba(180,90,55,0.16) 0%, transparent 70%);
      filter: blur(24px);
      z-index: -1;
      pointer-events: none;
    }
    /* ground gradient — grounds the wave on a horizon */
    .wave-stage::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: 0;
      height: 220px;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(20,28,48,0.35) 40%,
        rgba(8,12,24,0.85) 100%
      );
      pointer-events: none;
      z-index: 0;
    }

    /* Subtle architectural grid lines — like atmosphere markers */
    .wave-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.5;
    }
    .wave-grid::before, .wave-grid::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.04) 75%,
        transparent 100%
      );
    }
    .wave-grid::before { top: 32%; }
    .wave-grid::after  { bottom: 28%; }

    /* Vertical light shaft — marks the peak "event" moment */
    .wave-shaft {
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      width: 280px;
      max-width: 30vw;
      transform: translateX(-50%);
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255,140,90,0.08) 30%,
        rgba(255,140,90,0.14) 55%,
        rgba(255,140,90,0.06) 75%,
        transparent 100%
      );
      filter: blur(20px);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      animation: shaftBuild 22s ease-in-out infinite;
    }
    @keyframes shaftBuild {
      0%, 22%  { opacity: 0; }
      40%      { opacity: 0.7; }
      55%      { opacity: 1; }
      68%      { opacity: 0.3; }
      80%      { opacity: 0; }
      100%     { opacity: 0; }
    }

    #anxiety-wave {
      position: relative;
      display: block;
      width: 100%;
      height: 500px;
      z-index: 1;
      /* fade canvas edges into the dark on left/right */
      mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    }

    /* Editorial timestamps */
    .wave-stamp {
      position: absolute;
      bottom: 32px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.32);
      font-variant-numeric: tabular-nums;
      z-index: 2;
      pointer-events: none;
    }
    .wave-stamp-left  { left: max(40px, 5vw); }
    .wave-stamp-right { right: max(40px, 5vw); text-align: right; }

    /* The emotional anchor — sits just above the peak crown */
    .wave-anchor {
      position: absolute;
      top: 12%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-title);
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 500;
      font-style: italic;
      line-height: 1.18;
      letter-spacing: -0.3px;
      color: rgba(255,255,255,0.92);
      text-align: center;
      z-index: 3;
      pointer-events: none;
      max-width: 480px;
      opacity: 0;
      animation: anchorReveal 22s ease-in-out infinite;
    }
    @keyframes anchorReveal {
      0%, 22%   { opacity: 0; transform: translate(-50%, -46%); }
      30%       { opacity: 0.85; transform: translate(-50%, -50%); }
      55%       { opacity: 1; }
      76%       { opacity: 0; transform: translate(-50%, -54%); }
      100%      { opacity: 0; }
    }

    /* Ambient drifting phrases — each tied to a story moment */
    .wave-phrase {
      position: absolute;
      font-size: 14px;
      font-style: italic;
      color: rgba(255,255,255,0.48);
      letter-spacing: 0.2px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      white-space: nowrap;
      animation: phraseFade 22s ease-in-out infinite;
      text-shadow: 0 0 14px rgba(0,0,0,0.7);
    }
    /* Stage tints — readable but never neon */
    .wave-phrase.is-calm    { color: rgba(220,225,240,0.55); }
    .wave-phrase.is-trigger { color: rgba(255,210,180,0.75); }
    .wave-phrase.is-spiral  {
      color: rgba(255,170,135,0.88);
      font-size: 15px;
      text-shadow: 0 0 18px rgba(255,100,60,0.25), 0 0 14px rgba(0,0,0,0.7);
    }
    .wave-phrase.is-relief  {
      color: rgba(180,225,255,0.98);
      font-size: 16px;
      font-style: italic;
      letter-spacing: 0.4px;
      text-shadow: 0 0 22px rgba(140,210,255,0.55), 0 0 14px rgba(0,0,0,0.7);
    }
    .wave-phrase.is-settle  { color: rgba(195,220,240,0.75); }

    /* Cinematic intervention bloom — radiates from where Ura steps in */
    .wave-bloom {
      position: absolute;
      top: 36%;
      left: 65%;
      width: 540px;
      height: 540px;
      max-width: 70vw;
      max-height: 70vw;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        circle at center,
        rgba(150,215,255,0.34) 0%,
        rgba(150,215,255,0.18) 22%,
        rgba(150,215,255,0.06) 45%,
        transparent 70%
      );
      filter: blur(36px);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      animation: bloomReveal 22s ease-in-out infinite;
    }
    @keyframes bloomReveal {
      0%, 45%  { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
      55%      { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); }
      62%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
      75%      { opacity: 0.6;  transform: translate(-50%, -50%) scale(1.15); }
      88%      { opacity: 0;    transform: translate(-50%, -50%) scale(1.25); }
      100%     { opacity: 0; }
    }

    /* Warm pressure halo over the peak — visualizes overload before Ura steps in */
    .wave-pressure {
      position: absolute;
      top: 32%;
      left: 48%;
      width: 460px;
      height: 380px;
      max-width: 70vw;
      transform: translate(-50%, -50%);
      background: radial-gradient(
        ellipse at center,
        rgba(255,110,70,0.22) 0%,
        rgba(255,110,70,0.10) 30%,
        transparent 70%
      );
      filter: blur(32px);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      animation: pressureBuild 22s ease-in-out infinite;
    }
    @keyframes pressureBuild {
      0%, 22%  { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
      35%      { opacity: 0.35; transform: translate(-50%, -50%) scale(0.95); }
      48%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.10); }
      58%      { opacity: 0.6;  transform: translate(-50%, -50%) scale(1.18); }
      70%      { opacity: 0;    transform: translate(-50%, -50%) scale(1.0); }
      100%     { opacity: 0; }
    }

    @keyframes phraseFade {
      0%   { opacity: 0; transform: translateY(10px); }
      6%   { opacity: 0; }
      11%  { opacity: var(--phraseOpacity, 0.55); transform: translateY(0); }
      36%  { opacity: var(--phraseOpacity, 0.55); }
      44%  { opacity: 0; transform: translateY(-10px); }
      100% { opacity: 0; }
    }

    @media (max-width: 720px) {
      .wave-stage { margin-top: 56px; min-height: 480px; padding: 60px 0 32px; }
      #anxiety-wave { height: 360px; }
      .wave-anchor { font-size: 19px; max-width: 280px; top: 6%; }
      .wave-phrase { font-size: 11px; }
      .empathy-isolated { margin-top: 64px; font-size: clamp(32px, 9vw, 48px); }
      .wave-stamp { bottom: 20px; font-size: 11px; }
    }

    /* ─── ANXIETY WAVE CANVAS ────────────────────────────── */
    /* legacy boxed wrap — replaced by .wave-stage */
    .wave-canvas-wrap { display: none; }
    #anxiety-wave {
      width: 100%;
      height: 170px;
      display: block;
    }
    .wave-chip {
      position: absolute;
      top: 14px; right: 16px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #4ADE80;
      background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.25);
      padding: 4px 10px 4px 8px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .wave-chip::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 6px rgba(74,222,128,0.8);
      animation: pulse-dot 1.8s infinite;
      flex-shrink: 0;
    }

    /* ─── BREATHING SECTION ──────────────────────────────── */
    .breathe-section {
      padding: 130px 32px 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-top: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }
    .breathe-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--cyan);
      margin-bottom: 20px;
    }
    .breathe-headline {
      font-family: var(--font-title);
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: 72px;
    }
    .breathe-wrap {
      position: relative;
      width: 260px;
      height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 60px;
    }
    .breathe-ring {
      position: absolute;
      border-radius: 50%;
      transition: transform 1.9s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 1.9s ease,
                  box-shadow 1.9s ease;
    }
    .breathe-ring:nth-child(1) {
      width: 260px; height: 260px;
      border: 1px solid rgba(0,194,255,0.18);
    }
    .breathe-ring:nth-child(2) {
      width: 196px; height: 196px;
      border: 1px solid rgba(0,194,255,0.3);
    }
    .breathe-ring:nth-child(3) {
      width: 142px; height: 142px;
      border: 1px solid rgba(0,194,255,0.48);
    }
    .breathe-core {
      position: relative;
      z-index: 2;
      width: 88px; height: 88px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 38%, rgba(0,194,255,0.38), rgba(139,92,246,0.22));
      border: 1px solid rgba(0,194,255,0.6);
      box-shadow: 0 0 36px rgba(0,194,255,0.22);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: box-shadow 1.9s ease;
    }
    .breathe-inner-text {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
      transition: opacity 0.35s ease;
    }
    .breathe-caption {
      font-size: 16px;
      color: var(--text-secondary);
      max-width: 360px;
      line-height: 1.7;
    }

    /* Inhale/exhale states — toggled by JS */
    .breathe-wrap.inhaling .breathe-ring:nth-child(1) {
      transform: scale(1.18);
      border-color: rgba(0,194,255,0.35);
      box-shadow: 0 0 60px rgba(0,194,255,0.08);
    }
    .breathe-wrap.inhaling .breathe-ring:nth-child(2) {
      transform: scale(1.15);
      border-color: rgba(0,194,255,0.5);
    }
    .breathe-wrap.inhaling .breathe-ring:nth-child(3) {
      transform: scale(1.12);
      border-color: rgba(0,194,255,0.7);
    }
    .breathe-wrap.inhaling .breathe-core {
      box-shadow: 0 0 60px rgba(0,194,255,0.4);
    }
    .breathe-wrap.exhaling .breathe-ring:nth-child(1) { transform: scale(0.88); border-color: rgba(0,194,255,0.1); }
    .breathe-wrap.exhaling .breathe-ring:nth-child(2) { transform: scale(0.9);  border-color: rgba(0,194,255,0.2); }
    .breathe-wrap.exhaling .breathe-ring:nth-child(3) { transform: scale(0.92); border-color: rgba(0,194,255,0.32); }
    .breathe-wrap.exhaling .breathe-core { box-shadow: 0 0 18px rgba(0,194,255,0.1); }

    /* ─── HERO CURSOR GLOW ───────────────────────────────── */
    .hero-cursor-glow { display: none; }

    /* ─── COUNT-UP ────────────────────────────────────────── */
    .count-up { font-variant-numeric: tabular-nums; }

    /* ═══════════════════════════════════════════════════════
       MOBILE-FIRST OVERRIDES  ≤ 768px
       ═══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Reviews marquee: keep auto-scrolling on mobile ── */
      .reviews-marquee-wrap {
        margin: 0 -20px;
      }
      .reviews-marquee-track {
        gap: 14px;
      }
      .review-card {
        width: 78vw;
        max-width: 320px;
      }
      .review-card--wide { width: 78vw; max-width: 320px; }

      /* ── Badges marquee: keep auto-scrolling on mobile ── */
      .badges-marquee-wrap {
        margin: 0 -20px;
      }
      .badges-marquee-track {
        --badge-gap: 18px;
      }
      .badge-item {
        flex-shrink: 0;
      }

      /* ── Nav ── */
      nav {
        min-height: 72px;
        padding: 0 16px;
        gap: 8px;
        background: rgba(7,8,12,0.97);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .nav-logo img { height: 50px; }
      .nav-pill { display: none; }
      .nav-store-actions { display: none; }
      .mobile-nav-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .mobile-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: grid;
        max-height: calc(100svh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px 16px 16px;
        background: rgba(7,8,12,0.98);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 18px 36px rgba(0,0,0,0.36);
      }
      .mobile-nav-menu[hidden] { display: none; }

      /* ── Hero ── */
      .hero-section { padding: 130px 20px 60px; min-height: auto; }
      .hero-text { padding: 0; }
      .hero-headline { font-size: clamp(40px, 10vw, 64px); letter-spacing: 0; }
      .hero-sub { font-size: 15px; max-width: 100%; }
      .btn-primary { width: 100%; justify-content: center; padding: 16px 20px; font-size: 15px; }
      .hero-actions { flex-direction: column; align-items: stretch; padding: 0 4px; }
      .hero-phone-img { height: 44vh; min-height: 240px; max-height: 480px; }
      .store-row { justify-content: center; }
      .store-btn { flex: 1 1 auto; min-width: 140px; }
      .hero-loved { font-size: 12px; padding: 5px 12px 5px 6px; }
      .hero-loved-avatars span { width: 22px; height: 22px; }

      /* ── Proof bar ── */
      .proof-bar { padding: 20px 16px; gap: 16px 24px; }
      .proof-item { gap: 8px; }
      .proof-label { font-size: 13px; }

      /* ── Sections ── */
      .section { padding: 64px 20px; }
      .section-headline { font-size: clamp(34px, 9vw, 52px); letter-spacing: 0; margin-bottom: 16px; }
      .section-body { font-size: 16px; }
      .section-label { margin-bottom: 12px; }

      /* ── Scene strips (empathy) ── */
      .moment-marquee { margin-top: 32px; }
      .scene-strips { margin-top: 28px; }
      .scene-strip { grid-template-columns: 80px 1fr; gap: 16px; padding: 24px 0; }
      .scene-content h3 { font-size: 20px; }
      .scene-content p { font-size: 13px; }

      /* ── How It Works ── */
      .fsteps-wrap { gap: 32px; }
      .fsteps-img-panel { height: 340px; order: -1; } /* image first on mobile */
      .fstep-img img { height: 360px; border-radius: 0; }
      .fstep { padding: 18px 18px; gap: 14px; border-radius: 16px; }
      .fstep-body h3 { font-size: 16px; }
      .fstep-body p { font-size: 13px; }

      /* ── Breathing section ── */
      .breathe-section { padding: 80px 20px 90px; }
      .breathe-headline { font-size: clamp(30px, 9vw, 48px); margin-bottom: 52px; }
      .breathe-wrap { width: 200px; height: 200px; margin-bottom: 40px; }
      .breathe-ring:nth-child(1) { width: 200px; height: 200px; }
      .breathe-ring:nth-child(2) { width: 150px; height: 150px; }
      .breathe-ring:nth-child(3) { width: 108px; height: 108px; }
      .breathe-core { width: 72px; height: 72px; font-size: 11px; }

      /* ── Bento grid ── */
      .bento-grid { margin-top: 40px; gap: 12px; }
      .bento-card { min-height: 280px; border-radius: 16px; }
      .bento-body h3 { font-size: 16px; }
      .bento-body p { font-size: 13px; }

      /* ── Story card ── */
      .story-card { padding: 32px 22px; }
      .story-text { font-size: 17px; }
      .story-expand-text p { font-size: 15px; }

      /* ── Support partners ── */
      .partners-grid { gap: 18px; margin-top: 36px; }
      .partner-profile { grid-template-rows: 210px 1fr; }
      .partner-tranquility-logo { width: min(100%, 290px); }
      .partner-noledge-logo { width: 144px; }
      .partner-content { padding: 24px 20px; text-align: center; }
      .partner-heading-row { gap: 12px; }
      .partner-title-avatar-shell { width: 60px; height: 60px; flex-basis: 60px; }
      .partner-organisation-link { margin-left: auto; margin-right: auto; }
      .partner-credentials { min-height: 0; justify-content: center; margin: 18px 0 20px; }
      .partner-google-rating { width: 100%; justify-content: center; gap: 4px; }
      .partner-google-wordmark { width: 47px; }
      .partner-google-score { font-size: 12px; }
      .partner-google-stars { font-size: 12px; }
      .partner-google-review-count { font-size: 11.5px; white-space: nowrap; }
      .partner-google-open-icon { width: 13px; height: 13px; margin-left: 2px; }
      .partner-lead { font-size: 14.5px; }
      .partner-highlights { margin: 22px 0 24px; }
      .partner-highlights li { gap: 10px; }
      .partner-highlight-icon { width: 22px; height: 22px; flex-basis: 22px; }
      .partner-highlight-icon svg { width: 20px; height: 20px; }
      .partner-actions { flex-direction: column; align-items: stretch; }
      .partner-actions .btn-primary,
      .partner-actions .btn-secondary { width: 100%; justify-content: center; }
      .partner-note { text-align: center; }

      /* ── Reviews ── */
      .reviews-grid { gap: 12px; margin-top: 40px; }
      .review-card { padding: 22px 18px; }

      /* ── Pricing ── */
      .pricing-grid { margin-top: 40px; gap: 12px; }
      .pricing-card { padding: 24px 20px; }
      .pricing-card.featured { padding: 24px 20px; }
      .pricing-price { font-size: 44px; }
      .pricing-card.featured .pricing-price { font-size: 48px; }
      .pricing-intro {
        min-height: 0;
      }
      .pricing-region-row {
        width: min(100%, 300px);
        flex-wrap: wrap;
        gap: 6px;
      }
      /* ── FAQ ── */
      .faq-question { font-size: 15px; padding: 20px 0; }

      /* ── Final CTA ── */
      .final-cta { padding: 80px 20px; }
      .final-cta-app-icon {
        width: 116px;
        height: 116px;
        border-radius: 32px;
        margin-bottom: 22px;
      }
      .final-cta-actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .final-cta-actions a {
        width: auto;
        flex: 0 1 auto;
        justify-content: center;
        text-align: left;
      }
      .final-cta .section-headline { font-size: clamp(34px, 9vw, 52px); }

      /* ── Footer ── */
      .footer-top { padding: 40px 20px 32px; }
      .footer-tagline { max-width: 100%; margin-bottom: 16px; }
    }

    /* ── Extra small (≤ 480px / iPhone SE, iPhone 12 mini, most phones in portrait) ── */
    @media (max-width: 480px) {
      nav { padding: 0 16px; }
      .hero-headline { font-size: 40px; }
      .section { padding: 52px 16px; }
      .scene-strip { grid-template-columns: 1fr; gap: 6px; }
      .scene-time { font-size: 9px; }
      .bento-card { min-height: 240px; }
      .bento-img-wrap { height: 220px; }
      .fsteps-img-panel { height: 300px; }
      .fstep-img img { height: 320px; }
      .proof-label { font-size: 12px; }
      .proof-sub { font-size: 11px; }
    }

    /* ── Very small (≤ 360px / Galaxy A, older Androids) ── */
    @media (max-width: 360px) {
      nav { padding: 0 14px; }
      .nav-logo img { height: 44px; }
      .mobile-download-btn { min-height: 36px; padding: 8px 13px; font-size: 13px; }
      .hero-section { padding: 120px 16px 40px; }
      .hero-text { padding: 0; }
      .hero-headline { font-size: 36px; letter-spacing: 0; }
      .hero-sub { font-size: 14px; }
      .section { padding: 44px 14px; }
      .section-headline { font-size: 32px; }
      .bento-img-wrap { height: 200px; }
      .bento-body { padding: 16px 16px 20px; }
      .proof-bar { padding: 16px 14px; gap: 12px 16px; }
      .fsteps-img-panel { height: 280px; }
      .fstep-img img { height: 300px; }
      .wave-canvas-wrap { margin: 32px auto 40px; }
    }

    /* ─── EMAIL CAPTURE MODAL ───────────────────────────── */
    /* ═══════════════════════════════════════════════
       iOS LIQUID GLASS MODAL
    ═══════════════════════════════════════════════ */
    .ec-overlay {
      position: fixed;
      inset: 0;
      background: rgba(4, 6, 14, 0.6);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    .ec-overlay.is-open {
      display: flex;
      opacity: 1;
    }

    /* ── The glass card ── */
    .ec-modal {
      position: relative;
      width: 100%;
      max-width: 390px;
      border-radius: 44px;
      overflow: hidden;
      isolation: isolate;
      transform: translateY(40px) scale(0.92);
      opacity: 0;
      transition: opacity 0.55s cubic-bezier(.2,.8,.3,1) 0.04s,
                  transform 0.7s cubic-bezier(.16,1,.3,1) 0.04s;
      /* Deep liquid glass */
      background:
        radial-gradient(ellipse 100% 50% at 50% -2%,  rgba(100,200,255,0.22) 0%, transparent 60%),
        radial-gradient(ellipse 80% 45% at 88% 108%, rgba(139,92,246,0.18) 0%, transparent 58%),
        radial-gradient(ellipse 60% 40% at 8% 95%,  rgba(0,194,255,0.10) 0%, transparent 55%),
        rgba(10, 16, 40, 0.62);
      backdrop-filter: blur(80px) saturate(220%) brightness(115%);
      -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(115%);
      box-shadow:
        /* outer border glow */
        0 0 0 1px rgba(255,255,255,0.14),
        /* ambient teal glow */
        0 0 120px -20px rgba(0,194,255,0.35),
        0 0 60px -30px rgba(139,92,246,0.25),
        /* deep lift shadow */
        0 60px 120px -28px rgba(0,0,0,0.90),
        /* inner top specular */
        inset 0 2px 0 rgba(255,255,255,0.32),
        /* inner bottom shadow */
        inset 0 -1px 0 rgba(0,0,0,0.30);
    }
    .ec-overlay.is-open .ec-modal {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Specular top-light — premium glass edge */
    .ec-modal::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(180deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.07) 25%,
        rgba(255,255,255,0.02) 60%,
        transparent 100%
      );
      border-radius: 44px 44px 0 0;
      pointer-events: none;
      z-index: 0;
    }

    /* Ambient colour orbs — slow aurora */
    .ec-modal::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 75% 55% at 8%  4%,  rgba(0,194,255,0.16), transparent 58%),
        radial-gradient(ellipse 65% 50% at 94% 96%, rgba(139,92,246,0.20), transparent 58%),
        radial-gradient(ellipse 50% 40% at 55% 50%, rgba(0,194,255,0.06), transparent 65%);
      pointer-events: none;
      z-index: 0;
      animation: ec-aurora 16s ease-in-out infinite;
    }
    @keyframes ec-aurora {
      0%, 100% { opacity: 1;   transform: scale(1); }
      33%      { opacity: 0.75; transform: scale(1.04) translateX(-8px); }
      66%      { opacity: 0.9;  transform: scale(0.97) translateX(6px); }
    }

    .ec-modal > * { position: relative; z-index: 2; }

    /* Close button — liquid glass pill */
    .ec-close {
      position: absolute;
      top: 16px; right: 16px;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.16);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: rgba(255,255,255,0.7);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(.2,.8,.2,1);
      z-index: 10 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .ec-close:hover {
      background: rgba(255,255,255,0.18);
      color: white;
      transform: rotate(90deg) scale(1.05);
    }

    /* ── SHOWCASE: phone mockups fill top of card ── */
    .ec-showcase {
      position: relative;
      width: 100%;
      height: 272px;
      overflow: hidden;
    }
    /* Bottom fade into card content */
    .ec-showcase::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 110px;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(10,16,40,0.65) 55%,
        rgba(10,16,40,0.95) 100%
      );
      z-index: 4;
      pointer-events: none;
    }
    /* Side fades so edge phones melt in naturally */
    .ec-showcase::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to right, rgba(10,16,40,0.70) 0%, transparent 20%),
        linear-gradient(to left,  rgba(10,16,40,0.70) 0%, transparent 20%);
      z-index: 4;
      pointer-events: none;
    }
    /* Ambient glow */
    .ec-showcase-glow {
      position: absolute;
      width: 340px; height: 240px;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse 65% 75% at 50% 55%,
        rgba(0,194,255,0.28) 0%,
        rgba(139,92,246,0.18) 48%,
        transparent 72%
      );
      filter: blur(30px);
      z-index: 0;
      animation: ec-glow-pulse 7s ease-in-out infinite;
    }
    @keyframes ec-glow-pulse {
      0%, 100% { opacity: 0.75; transform: translate(-50%,-50%) scale(1); }
      50%       { opacity: 1;    transform: translate(-50%,-50%) scale(1.08); }
    }
    .ec-phone {
      position: absolute;
      overflow: hidden;
      z-index: 2;
    }
    .ec-phone img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    /* Left — AI chat, tilted back */
    /* Left — AI chat, tucked behind centre */
    .ec-phone-1 {
      width: 108px; height: 204px;
      left: 50%;
      top: 30px;
      transform: translateX(-148px) rotate(-16deg);
      z-index: 1;
      filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)) brightness(0.62);
      animation: ec-phone-1 9s ease-in-out infinite;
    }
    /* Centre — PANIC, upright & pixel-perfect centred */
    .ec-phone-2 {
      width: 148px; height: 274px;
      left: calc(50% - 74px);
      top: 0px;
      transform: none;
      z-index: 3;
      filter: drop-shadow(0 30px 60px rgba(0,0,0,0.90));
      animation: ec-phone-2 9s ease-in-out infinite;
    }
    /* Right — Circles, tucked behind centre */
    .ec-phone-3 {
      width: 108px; height: 204px;
      left: 50%;
      top: 30px;
      transform: translateX(40px) rotate(16deg);
      z-index: 2;
      filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)) brightness(0.62);
      animation: ec-phone-3 9s ease-in-out infinite;
    }
    @keyframes ec-phone-1 {
      0%, 100% { transform: translateX(-148px) translateY(0)    rotate(-16deg); }
      50%      { transform: translateX(-148px) translateY(-8px)  rotate(-16deg); }
    }
    @keyframes ec-phone-2 {
      0%, 100% { transform: translateY(0px); }
      50%      { transform: translateY(7px);  }
    }
    @keyframes ec-phone-3 {
      0%, 100% { transform: translateX(40px) translateY(0)   rotate(16deg); }
      50%      { transform: translateX(40px) translateY(-8px) rotate(16deg); }
    }

    /* ── Content area below showcase ── */
    .ec-content {
      padding: 8px 28px 28px;
    }

    /* Social proof badge */
    .ec-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0 auto 16px;
      padding: 5px 12px 5px 8px;
      /* centering when inside block context */
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.13);
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      letter-spacing: 0.02em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .ec-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #4ADE80;
      box-shadow: 0 0 8px rgba(74,222,128,0.8);
      animation: ec-dot 2s ease-in-out infinite;
    }
    @keyframes ec-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.3); opacity: 0.7; }
    }
    .ec-badge-divider { width: 1px; height: 10px; background: rgba(255,255,255,0.18); }
    .ec-badge-stars { color: #F59E0B; font-size: 11px; letter-spacing: -0.5px; }

    .ec-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0;
    }

    /* Headline */
    .ec-eyebrow {
      font-family: 'Inter Tight','Inter',sans-serif;
      font-size: 27px;
      font-weight: 800;
      letter-spacing: -0.6px;
      color: white;
      text-align: center;
      line-height: 1.08;
      margin-bottom: 8px;
    }
    .ec-eyebrow .ec-accent {
      background: linear-gradient(135deg, #5DD5FF, #a78bfa);
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
    }
    .ec-sub {
      text-align: center;
      font-size: 13px;
      color: rgba(255,255,255,0.52);
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* Divider */
    .ec-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
      margin-bottom: 18px;
    }

    /* Form */
    .ec-form { display: flex; flex-direction: column; gap: 10px; }
    .ec-input-wrap { position: relative; }
    .ec-input-wrap svg {
      position: absolute;
      left: 16px; top: 50%;
      transform: translateY(-50%);
      width: 15px; height: 15px;
      color: rgba(255,255,255,0.32);
      pointer-events: none;
    }
    .ec-input {
      width: 100%;
      padding: 14px 16px 14px 42px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 16px;
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ec-input::placeholder { color: rgba(255,255,255,0.32); }
    .ec-input:focus {
      border-color: rgba(93,213,255,0.5);
      background: rgba(255,255,255,0.09);
      box-shadow: 0 0 0 4px rgba(0,194,255,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ec-input-wrap:focus-within svg { color: rgba(93,213,255,0.9); }

    .ec-fineprint {
      font-size: 11px;
      color: rgba(255,255,255,0.38);
      text-align: center;
      line-height: 1.5;
      margin: 2px 4px 0;
    }
    .ec-fineprint a { color: rgba(255,255,255,0.55); text-decoration: underline; text-underline-offset: 2px; }

    /* CTA button — liquid glass with gradient fill */
    .ec-submit {
      position: relative;
      width: 100%;
      padding: 16px 22px;
      background: linear-gradient(135deg, #00C2FF 0%, #3B82F6 60%, #7C3AED 100%);
      color: white;
      font-family: 'Inter Tight','Inter',sans-serif;
      font-weight: 700;
      font-size: 15px;
      border: none;
      border-radius: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.18s ease, box-shadow 0.2s ease;
      box-shadow:
        0 8px 28px -6px rgba(0,194,255,0.5),
        inset 0 1.5px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.15);
      overflow: hidden;
    }
    .ec-submit::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 55%; height: 100%;
      background: linear-gradient(110deg, transparent, rgba(255,255,255,0.38), transparent);
      animation: ec-shimmer 4.5s ease-in-out infinite;
      animation-delay: 2s;
    }
    @keyframes ec-shimmer {
      0%        { left: -100%; }
      45%, 100% { left: 210%; }
    }
    .ec-submit:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow:
        0 14px 40px -8px rgba(0,194,255,0.65),
        inset 0 1.5px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    }
    .ec-submit:active { transform: translateY(0) scale(0.99); }
    .ec-submit svg { width: 14px; height: 14px; }
    .ec-submit-arrow { transition: transform 0.2s ease; }
    .ec-submit:hover .ec-submit-arrow { transform: translateX(4px); }

    .ec-error {
      font-size: 12px;
      color: #FCA5A5;
      text-align: center;
      min-height: 16px;
    }

    @media (max-width: 480px) {
      .ec-modal { border-radius: 32px; }
      .ec-showcase { height: 230px; }
      .ec-phone-1 { width: 96px; height: 182px; transform: translateX(-128px) rotate(-16deg); }
      .ec-phone-2 { width: 128px; height: 242px; left: calc(50% - 64px); transform: none; }
      .ec-phone-3 { width: 96px; height: 182px; transform: translateX(32px) rotate(16deg); }
      .ec-content { padding: 6px 20px 24px; }
      .ec-eyebrow { font-size: 23px; }
      .ec-sub { font-size: 12px; overflow-wrap: break-word; }
      .ec-input { font-size: 14px; }
      .ec-fineprint { font-size: 10px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ec-modal { transition: opacity 0.2s ease; transform: none; }
      .ec-overlay.is-open .ec-modal { transform: none; }
      .ec-phone-1, .ec-phone-2, .ec-phone-3, .ec-showcase-glow,
      .ec-badge-dot, .ec-submit::before, .ec-modal::after { animation: none !important; }
    }

    /* ─── APP CARD MATERIAL ───────────────────────────────
       Match the app's solid charcoal selection cards. Content stays readable
       over the star field without relying on translucent white glass. */
    :is(
      .hero-callout,
      .fstep,
      .wdiag-grid,
      .bento-card,
      .ai-pillar,
      .story-card,
      .partner-profile,
      .creator-card,
      .review-card,
      .pricing-card
    ) {
      background: var(--card-surface);
      border-color: var(--card-border);
      box-shadow: var(--card-shadow);
    }

    :is(.hero-callout, .hero-callout.ios-notif, .creator-quote-body) {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .hero-callout.ios-notif {
      background: var(--card-surface-raised);
    }

    .fstep.active {
      background: var(--card-surface-raised);
      border-color: rgba(0,194,255,0.34);
      box-shadow: var(--card-shadow), inset 3px 0 0 rgba(0,194,255,0.72);
    }

    .fstep.completed {
      background: var(--card-surface);
      border-color: var(--card-border);
    }

    .wdiag-item,
    .feat-modal-stat,
    .circle-member,
    .badge-orb {
      background: var(--card-surface);
      border-color: var(--card-border);
    }

    .bento-card {
      background: var(--card-surface);
    }

    .bento-card::before {
      background: none;
    }

    .ai-pillar:hover,
    .review-card:hover,
    .review-card--featured {
      background: var(--card-surface-hover);
    }

    .story-summary-inner {
      background: var(--card-surface-raised);
      border-color: rgba(167,139,250,0.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }

    .creator-photo-wrap::after {
      background: linear-gradient(
        to top,
        var(--card-surface) 0%,
        rgba(32,33,36,0.72) 48%,
        rgba(32,33,36,0) 100%
      );
    }

    .creator-quote-body {
      background: var(--card-surface-raised);
      border-color: var(--card-border);
      box-shadow: 0 14px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.03);
    }

    .creator-card:hover .creator-quote-body {
      box-shadow: 0 18px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .pricing-card.featured {
      background: var(--card-surface-raised);
      border-color: rgba(0,194,255,0.32);
      box-shadow: 0 0 0 1px rgba(0,194,255,0.08), var(--card-shadow);
    }

    .pricing-card.featured::after {
      display: none;
    }

    /* ─── CINEMATIC MOTION UPGRADE ─────────────────────────
       Scroll-linked depth replaces decorative looping motion. The experience
       stays calm, performant and fully readable when motion is reduced. */
    :root {
      --bg: #03050e;
      --card-surface: #202124;
      --card-surface-hover: #202124;
      --card-surface-raised: #202124;
      --card-border: rgba(255,255,255,0.1);
      --card-shadow: 0 20px 54px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.025);
      --text-secondary: rgba(255,255,255,0.72);
      --text-tertiary: rgba(255,255,255,0.5);
      --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --page-scroll: 0;
    }

    body,
    button,
    input,
    textarea,
    select {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    body {
      background:
        radial-gradient(ellipse 118% 56% at 50% -28%, rgba(89,60,190,0.22) 0%, rgba(35,25,103,0.10) 42%, transparent 72%),
        radial-gradient(ellipse 116% 56% at 50% 128%, rgba(0,91,164,0.18) 0%, rgba(1,37,76,0.08) 48%, transparent 76%),
        linear-gradient(180deg, #0d0c2c 0%, #03050e 50%, #031225 100%);
      background-attachment: fixed;
    }

    .page {
      overflow: clip;
    }

    .page::before,
    .page::after {
      content: '';
      position: fixed;
      z-index: 0;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(24px);
      will-change: transform;
    }

    .page::before {
      top: -42vw;
      left: -34vw;
      width: min(76vw, 980px);
      height: min(76vw, 980px);
      background: radial-gradient(circle, rgba(135,60,255,0.045) 0%, rgba(135,60,255,0.012) 48%, transparent 70%);
      transform: translate3d(0, calc(var(--page-scroll) * -28px), 0);
    }

    .page::after {
      right: -40vw;
      bottom: -44vw;
      width: min(78vw, 1040px);
      height: min(78vw, 1040px);
      background: radial-gradient(circle, rgba(14,165,233,0.045) 0%, rgba(14,165,233,0.012) 50%, transparent 72%);
      transform: translate3d(0, calc(var(--page-scroll) * 24px), 0);
    }

    nav {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      will-change: transform;
      transition:
        transform 0.38s var(--motion-ease),
        opacity 0.24s ease,
        padding 0.35s var(--motion-ease),
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
    }

    nav.is-hidden {
      opacity: 0;
      transform: translate3d(0, calc(-100% - 12px), 0);
      pointer-events: none;
    }

    nav.is-hidden:focus-within {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
    }

    nav.is-scrolled {
      padding-top: 10px;
      padding-bottom: 10px;
      background: rgba(4,9,22,0.82);
      border-bottom: 1px solid rgba(255,255,255,0.075);
      box-shadow: 0 18px 46px rgba(0,0,0,0.22);
      backdrop-filter: blur(22px) saturate(125%);
      -webkit-backdrop-filter: blur(22px) saturate(125%);
    }

    /* Keep the desktop navigation floating over the page without a full-width
       header band. The pill and store buttons retain their own surfaces. */
    @media (min-width: 861px) {
      nav.is-scrolled {
        background: transparent;
        border-bottom-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
    }

    .hero-section {
      isolation: isolate;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 9%;
      right: -8%;
      width: min(62vw, 860px);
      height: min(62vw, 860px);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 48%, rgba(204,34,0,0.1) 0%, rgba(204,34,0,0.035) 27%, transparent 55%),
        radial-gradient(circle at 42% 46%, rgba(14,165,233,0.08) 0%, transparent 64%);
      filter: blur(12px);
      opacity: calc(0.9 - (var(--page-scroll) * 0.28));
      transform: translate3d(0, calc(var(--page-scroll) * -72px), 0) scale(calc(1 + (var(--page-scroll) * 0.035)));
      pointer-events: none;
    }

    .hero-headline {
      max-width: 760px;
      font-size: clamp(48px, 6vw, 78px);
      line-height: 0.98;
      text-wrap: balance;
    }

    .hero-headline .accent {
      color: rgba(255,255,255,0.68);
    }

    .hero-sub {
      font-size: clamp(16px, 1.45vw, 18px);
      line-height: 1.7;
      max-width: 520px;
    }

    .hero-loved {
      background: rgba(19,21,31,0.88);
      border-color: rgba(255,255,255,0.12);
      box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    }

    .hero-phone-img,
    .hero-callout-1,
    .hero-callout-2,
    .hero-callout-3,
    .ai-explainer-visual img.phone {
      animation: none;
    }

    .hero-phone-img {
      filter:
        drop-shadow(0 44px 70px rgba(0,0,0,0.58))
        drop-shadow(0 0 36px rgba(14,165,233,0.09));
    }

    .section,
    .breathe-section,
    .final-cta {
      position: relative;
      z-index: 1;
      scroll-margin-top: 88px;
    }

    .section-headline,
    .ai-explainer-headline,
    .breathe-headline {
      text-wrap: balance;
    }

    .section-body,
    .empathy-lead,
    .stats-reveal-body,
    .ai-explainer-lead,
    .faq-answer p {
      color: var(--text-secondary);
    }

    :is(
      .hero-callout,
      .fstep,
      .wdiag-grid,
      .bento-card,
      .ai-pillar,
      .story-card,
      .partner-profile,
      .creator-card,
      .review-card,
      .pricing-card
    ) {
      transition:
        translate 0.45s var(--motion-ease),
        border-color 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.45s var(--motion-ease);
    }

    html.motion-ready .hero-text > * {
      opacity: 0;
      transform: translate3d(-24px, 24px, 0);
      animation: ura-hero-copy-in 0.9s var(--motion-ease) forwards;
    }

    html.motion-ready .hero-text > :nth-child(1) { animation-delay: 0.08s; }
    html.motion-ready .hero-text > :nth-child(2) { animation-delay: 0.17s; }
    html.motion-ready .hero-text > :nth-child(3) { animation-delay: 0.28s; }
    html.motion-ready .hero-text > :nth-child(4) { animation-delay: 0.4s; }
    html.motion-ready .hero-text > :nth-child(n+5) { animation-delay: 0.5s; }

    html.motion-ready .hero-visual {
      opacity: 0;
      transform: translate3d(36px, 44px, 0) scale(0.955);
      animation: ura-hero-visual-in 1.15s 0.22s var(--motion-ease) forwards;
    }

    @keyframes ura-hero-copy-in {
      to { opacity: 1; transform: translate3d(0,0,0); }
    }

    @keyframes ura-hero-visual-in {
      to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    }

    html.motion-ready .motion-reveal {
      opacity: 0;
      transform: translate3d(0, 32px, 0) scale(0.985);
      transition:
        opacity 0.72s var(--motion-ease),
        transform 0.82s var(--motion-ease),
        clip-path 0.82s var(--motion-ease);
      transition-delay: var(--motion-delay, 0ms);
      will-change: opacity, transform;
    }

    html.motion-ready .motion-reveal.motion-title {
      transform: translate3d(0, 22px, 0);
      clip-path: inset(0 0 34% 0);
    }

    html.motion-ready .motion-reveal.motion-from-left {
      transform: translate3d(-28px, 10px, 0) scale(0.985);
    }

    html.motion-ready .motion-reveal.motion-from-right {
      transform: translate3d(28px, 10px, 0) scale(0.985);
    }

    html.motion-ready .motion-reveal.is-visible {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
    }

    html.motion-ready .motion-reveal.motion-title.is-visible {
      clip-path: inset(0 0 0 0);
    }

    html.motion-ready .motion-reveal.motion-settled {
      will-change: auto;
    }

    .motion-parallax {
      translate: 0 var(--motion-parallax-y, 0px);
      will-change: translate;
    }

    /* The wave is the page's signature motion moment: it draws once in story
       order, then becomes a calm static visual instead of looping forever. */

    html.motion-ready .anatomy-wave-fill {
      opacity: 0;
      transition: opacity 0.9s 0.45s ease;
    }

    html.motion-ready .anatomy-wave-line {
      stroke-dasharray: var(--anatomy-wave-length, 1800);
      stroke-dashoffset: var(--anatomy-wave-length, 1800);
    }

    html.motion-ready .anatomy-stage.story-visible .anatomy-wave-fill {
      opacity: 0.9;
    }

    html.motion-ready .anatomy-stage.story-visible .anatomy-wave-line {
      animation: ura-wave-draw 1.65s 0.1s var(--motion-ease) forwards;
    }

    html.motion-ready .anatomy-stage .anatomy-marker {
      opacity: 0;
      transform: translate(-50%, 14px) scale(0.94);
      transition:
        opacity 0.52s var(--motion-ease),
        transform 0.62s var(--motion-ease);
      transition-delay: var(--anatomy-delay, 0ms);
    }

    html.motion-ready .anatomy-stage.story-visible .anatomy-marker {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }

    html.motion-ready .anatomy-stage .anatomy-phone {
      opacity: 0;
      transform: translate(-50%, 24px) scale(0.94);
      transition:
        opacity 0.72s 1.15s var(--motion-ease),
        transform 0.82s 1.15s var(--motion-ease);
    }

    html.motion-ready .anatomy-stage.story-visible .anatomy-phone {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }

    @keyframes ura-wave-draw {
      to { stroke-dashoffset: 0; }
    }

    .reviews-marquee-track {
      animation-play-state: paused;
    }

    .reviews-marquee-wrap.motion-running .reviews-marquee-track {
      animation-play-state: running;
    }

    .badges-marquee-track {
      animation-play-state: paused;
    }

    .badges-marquee-wrap.motion-running .badges-marquee-track {
      animation-play-state: running;
    }

    .badges-marquee-wrap.motion-running .badges-marquee-track:hover,
    .badges-marquee-wrap.motion-running:focus-within .badges-marquee-track {
      animation-play-state: paused;
    }

    .story-card::before,
    .partner-credential-icon,
    .stats-scroll-hint {
      animation: none;
    }

    .empathy-eyebrow-dot,
    .story-card::before,
    .pricing-card.featured::before {
      display: none;
    }

    .reviews-marquee-wrap.motion-running .reviews-marquee-track:hover,
    .reviews-marquee-wrap.motion-running:focus-within .reviews-marquee-track {
      animation-play-state: paused;
    }

    @media (hover: hover) and (pointer: fine) {
      .motion-card:hover {
        translate: 0 -6px;
        border-color: rgba(255,255,255,0.18);
        box-shadow: 0 26px 66px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.04);
      }

      .bento-card.motion-card:hover,
      .pricing-card.motion-card:hover {
        transform: none;
      }

      .store-btn,
      .nav-store-btn,
      .btn-primary,
      .btn-secondary,
      .mobile-download-btn {
        transition:
          translate 0.25s var(--motion-ease),
          transform 0.25s var(--motion-ease),
          background-color 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.3s ease;
      }
    }

    :is(a, button, input, select, textarea):focus-visible {
      outline: 3px solid rgba(0,217,255,0.72);
      outline-offset: 4px;
    }

    body :is(
      p,
      li,
      button,
      input,
      textarea,
      select,
      .hero-loved,
      .hero-callout,
      .store-btn,
      .store-badge,
      .nav-pill-item,
      .nav-store-btn,
      .mobile-nav-link,
      .fstep,
      .ai-pillar,
      .stats-feature,
      .partner-profile,
      .review-card,
      .pricing-card,
      .faq-item,
      footer
    ) {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .mobile-download-btn,
    .mobile-menu-toggle,
    .feat-modal-close,
    .ec-close,
    .footer-social-inline a {
      min-width: 44px;
      min-height: 44px;
    }

    .ec-input { font-size: 17px; }

    .ec-modal,
    .feat-modal-box {
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* ─── HOW IT WORKS — SCROLL-AUTHORED STORY ────────────
       The four cards are chapters in one moment. Scrolling advances the phone
       and the narrative once; nothing loops or changes without the reader. */
    #section-how .how-story-intro {
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    #section-how .section-headline em {
      color: #ffffff;
      font-style: normal;
    }

    .fsteps-wrap {
      align-items: start;
      --step-enter-y: 20px;
      --step-exit-y: -14px;
    }

    .fsteps-wrap[data-step-direction="backward"] {
      --step-enter-y: -20px;
      --step-exit-y: 14px;
    }

    .fsteps-list {
      position: relative;
      isolation: isolate;
      list-style: none;
      margin: 0;
      padding: 0;
      --story-progress: 0;
      --story-rail-x: 42px;
    }

    .fsteps-list::before,
    .fsteps-list::after {
      content: '';
      position: absolute;
      left: var(--story-rail-x);
      top: 42px;
      bottom: 42px;
      width: 2px;
      border-radius: 999px;
      pointer-events: none;
      transform-origin: top center;
      z-index: 0;
    }

    .fsteps-list::before {
      background: rgba(255,255,255,0.09);
    }

    .fsteps-list::after {
      background: #00C2FF;
      transform: scaleY(var(--story-progress));
      transition: transform 0.68s var(--motion-ease);
      box-shadow: 0 0 12px rgba(0,194,255,0.34);
    }

    .fstep-chapter {
      position: relative;
      z-index: 1;
      list-style: none;
    }

    .fstep {
      position: relative;
      width: 100%;
      min-height: 48px;
      appearance: none;
      -webkit-appearance: none;
      text-align: left;
      color: inherit;
      font: inherit;
      touch-action: manipulation;
      overflow: hidden;
      translate: 0 0;
    }

    .fstep.active {
      translate: 8px 0;
    }

    .fstep.motion-card:hover {
      translate: 0 0;
    }

    .fstep.active.motion-card:hover {
      translate: 8px 0;
    }

    .fstep.past {
      opacity: 0.9;
      background: var(--card-surface);
      border-color: var(--card-border);
    }

    .fstep-dot {
      position: relative;
      z-index: 2;
      color: rgba(255,255,255,0.64);
    }

    .fstep.active .fstep-dot {
      color: #04101d;
      transform: scale(1.06);
      box-shadow: 0 0 0 5px rgba(0,194,255,0.1);
    }

    .fstep.past .fstep-dot {
      background: rgba(0,194,255,0.14);
      border-color: rgba(0,194,255,0.34);
      color: #5DD5FF;
      transform: none;
      box-shadow: none;
    }

    .fstep-body {
      display: block;
    }

    .fstep-scene {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .fstep-scene-index {
      color: #5DD5FF;
    }

    .fstep-scene-name {
      color: rgba(255,255,255,0.56);
      letter-spacing: 0.07em;
    }

    .fstep-title {
      display: block;
      margin-bottom: 6px;
      color: #ffffff;
      font-family: var(--font-title);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.2px;
    }

    .fstep-copy {
      display: block;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.58;
    }

    .fstep-bar {
      display: none;
      height: 3px;
      margin-top: 16px;
    }

    .fstep.active .fstep-bar {
      display: block;
    }

    .fstep-bar-fill {
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      transition: none;
      will-change: auto;
    }

    .fstep.active .fstep-bar-fill {
      animation: fstep-confirm 0.68s var(--motion-ease) both;
    }

    @keyframes fstep-confirm {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    .fsteps-visual {
      min-width: 0;
      align-self: start;
    }

    .fstory-stage-copy {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 14px;
      width: min(100%, 430px);
      margin: 0 auto 4px;
      padding: 16px 18px;
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 18px;
      background: var(--card-surface);
      box-shadow: 0 14px 34px rgba(0,0,0,0.24);
    }

    .fstory-stage-count {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: start;
      min-height: 36px;
      padding: 0 8px;
      border-radius: 11px;
      background: rgba(0,194,255,0.1);
      color: #5DD5FF;
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
    }

    .fstory-stage-text {
      min-width: 0;
    }

    .fstory-stage-text.story-shift {
      animation: fstory-copy-in 0.48s var(--motion-ease) both;
    }

    .fstory-stage-label {
      display: block;
      margin-bottom: 3px;
      color: #5DD5FF;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .fstory-stage-title {
      display: block;
      color: #ffffff;
      font-family: var(--font-title);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.25;
    }

    .fstory-stage-impact {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,0.72);
      font-size: 15px;
      line-height: 1.45;
    }

    @keyframes fstory-copy-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fstep-img {
      transform: translateY(var(--step-enter-y)) scale(0.985);
      transition: opacity 0.32s ease, transform 0.58s var(--motion-ease);
    }

    .fstep-img.active {
      transform: translateY(0) scale(1);
    }

    .fstep-img.exiting {
      transform: translateY(var(--step-exit-y)) scale(0.99);
    }

    @media (min-width: 800px) {
      .fsteps-wrap {
        gap: clamp(64px, 7vw, 96px);
      }

      .fsteps-list {
        order: 1;
        gap: 24px;
      }

      .fstep {
        min-height: clamp(170px, 23vh, 222px);
        align-items: center;
        padding: 26px 26px;
      }

      .fsteps-visual {
        position: sticky;
        top: clamp(92px, 12vh, 120px);
        order: 2;
      }

      .fsteps-img-panel {
        height: 540px;
      }
    }

    @media (max-width: 799px) {
      .fsteps-wrap {
        gap: 24px;
      }

      .fsteps-list {
        --story-rail-x: 36px;
        gap: 16px;
      }

      .fsteps-list::before,
      .fsteps-list::after {
        top: 36px;
        bottom: 36px;
      }

      .fsteps-visual {
        position: sticky;
        top: 76px;
        order: -1;
        z-index: 4;
        padding: 8px 0 10px;
        background: #03050e;
      }

      .fstory-stage-copy {
        width: 100%;
        padding: 14px 16px;
      }

      .fsteps-img-panel {
        height: min(34svh, 270px);
      }

      .fstep-img img {
        height: min(34svh, 270px);
      }

      .fstep {
        padding: 20px 18px;
        gap: 14px;
        translate: 0 0;
      }

      .fstep.active,
      .fstep.active.motion-card:hover {
        translate: 0 0;
      }

      .fstep-title {
        font-size: 20px;
      }

      .fstep-copy {
        font-size: 15px;
      }
    }

    @media (max-width: 480px) {
      .fstory-stage-copy {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 11px;
      }

      .fstory-stage-title {
        font-size: 18px;
      }

      .fstory-stage-impact {
        font-size: 13px;
      }

      .fsteps-img-panel {
        height: min(31svh, 230px);
      }

      .fstep-img img {
        height: min(31svh, 230px);
      }
    }

    @media (max-width: 799px) and (max-height: 600px) {
      .fsteps-visual {
        position: relative;
        top: auto;
      }
    }

    /* ─── HOW IT WORKS — COMPACT PRODUCT TOUR ─────────────
       One phone, one quiet list and one user-led state change. The structure
       mirrors the supplied reference without borrowing its light palette. */
    #section-how {
      padding-top: clamp(72px, 8vw, 96px);
      padding-bottom: clamp(76px, 8vw, 104px);
    }

    #section-how .how-story-intro {
      max-width: 900px;
      margin: 0 auto clamp(34px, 4vw, 48px);
    }

    #section-how .section-headline {
      margin-bottom: 0;
      font-size: clamp(36px, 4.7vw, 58px);
      line-height: 1.04;
    }

    .fsteps-wrap {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      gap: 30px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .fsteps-list {
      order: 2;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .fsteps-list::before,
    .fsteps-list::after {
      display: none;
    }

    .fstep-chapter {
      list-style: none;
    }

    .fstep {
      display: block;
      width: 100%;
      min-height: 0;
      padding: 20px 24px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      background: #12151f;
      color: inherit;
      font: inherit;
      text-align: left;
      opacity: 1;
      translate: 0 0;
      box-shadow: none;
      cursor: pointer;
      overflow: hidden;
      transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }

    .fstep:hover,
    .fstep.motion-card:hover {
      opacity: 1;
      translate: 0 0;
      border-color: rgba(255,255,255,0.22);
    }

    .fstep.active,
    .fstep.active.motion-card:hover {
      background: #191c27;
      border-color: rgba(93,213,255,0.68);
      translate: 0 0;
      box-shadow: none;
    }

    .fstep.past {
      background: #12151f;
      border-color: rgba(255,255,255,0.12);
      opacity: 1;
    }

    .fstep-body {
      display: block;
    }

    .fstep-title {
      display: block;
      margin-bottom: 7px;
      color: #ffffff;
      font-family: var(--font-title);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.2px;
    }

    .fstep-copy {
      display: block;
      color: rgba(255,255,255,0.68);
      font-size: 15px;
      line-height: 1.5;
    }

    .fstep-dot,
    .fstep-scene,
    .fstep-bar,
    .fstory-stage-copy {
      display: none !important;
    }

    .fsteps-visual {
      position: relative;
      top: auto;
      order: 1;
      align-self: center;
      z-index: auto;
      width: 100%;
      min-width: 0;
      padding: 0;
      background: transparent;
    }

    .fsteps-img-panel {
      position: relative;
      height: 350px;
      overflow: visible;
    }

    .fstep-img {
      transform: none;
      transition: opacity 0.22s ease;
    }

    .fstep-img.active {
      transform: none;
    }

    .fstep-img.exiting {
      transform: none;
    }

    .fstep-img img {
      height: 370px;
      filter: drop-shadow(0 20px 30px rgba(0,0,0,0.28));
    }

    .fstep-img::after {
      display: none;
    }

    @media (min-width: 900px) {
      .fsteps-wrap {
        grid-template-columns: minmax(480px, 1.2fr) minmax(300px, 0.8fr);
        gap: clamp(54px, 6vw, 84px);
      }

      .fsteps-visual {
        order: 2;
      }

      .fsteps-list {
        order: 1;
      }

      .fsteps-img-panel {
        height: 590px;
      }

      .fstep-img img {
        height: 620px;
      }

      .fstep {
        min-height: 118px;
      }
    }

    @media (max-width: 899px) {
      #section-how .how-story-intro {
        margin-bottom: 32px;
      }

      .fsteps-wrap {
        max-width: 680px;
      }

      .fstep-title {
        font-size: 18px;
      }

      .fstep-copy {
        font-size: 14.5px;
      }
    }

    @media (max-width: 480px) {
      #section-how .section-headline {
        font-size: clamp(32px, 9vw, 40px);
      }

      .fsteps-wrap {
        gap: 22px;
      }

      .fsteps-img-panel {
        height: 286px;
      }

      .fstep-img img {
        height: 304px;
      }

      .fstep {
        padding: 18px;
        border-radius: 16px;
      }
    }

    @media (max-width: 899px) {
      .hero-section::before {
        top: 34%;
        right: -44%;
        width: 120vw;
        height: 120vw;
      }

      .hero-headline {
        font-size: clamp(42px, 11vw, 62px);
      }

      html.motion-ready .motion-reveal {
        transform: translate3d(0, 22px, 0) scale(0.99);
      }

      .motion-parallax {
        --motion-parallax-y: 0px !important;
        will-change: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .page::before,
      .page::after,
      .hero-section::before {
        transform: none;
      }

      html.motion-ready .hero-text > *,
      html.motion-ready .hero-visual,
      html.motion-ready .motion-reveal,
      html.motion-ready .motion-reveal.motion-title,
      .fade-in,
      .fade-in.visible,
      .motion-parallax {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
      }

      .reviews-marquee-track,
      .badges-marquee-track,
      .hero-live-dot,
      .live-pill,
      .wave-phrase,
      .breathe-ring,
      .breathe-core {
        animation: none !important;
        transition: none !important;
      }

      .badges-marquee-wrap {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .badges-marquee-wrap::-webkit-scrollbar { display: none; }

      .badges-marquee-track {
        padding-right: 0;
        transform: none !important;
        will-change: auto;
      }

      .badges-marquee-track > .badge-item:nth-child(n + 9) {
        display: none;
      }

      .anatomy-wave-line {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
      }

      .anatomy-wave-fill,
      .anatomy-marker,
      .anatomy-phone {
        opacity: 1 !important;
      }

      .fstep-img,
      .fstep-dot,
      .fstep-bar-fill,
      .fstory-stage-text,
      .fsteps-list::after {
        animation: none !important;
        transition: none !important;
      }

      .fstep.active .fstep-bar-fill {
        transform: scaleX(1) !important;
      }

      .fstep,
      .fstep.active {
        translate: 0 0 !important;
      }
    }

  

    /* Hide only page chrome; wheel, touch and keyboard scrolling stay native. */
    html { scrollbar-width: none; }
    html::-webkit-scrollbar { display: none; width: 0; height: 0; }

    .partners-grid { align-items: stretch; }
    .partner-content { gap: 0; }
    :is(.fstep, .fstep.active, .fstep.past, .fstep.active.motion-card:hover, .feat-modal-box) {
      background: var(--card-surface);
    }
    .partner-details { width: 100%; margin-top: auto; padding-top: 24px; text-align: left; }
    .partner-details > summary {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      min-height: 52px; padding: 14px 18px; list-style: none; cursor: pointer;
      color: #fafafa; font-size: 17px; font-weight: 600;
      background: #202124; border: 1px solid #ffffff17; border-radius: 14px;
    }
    .partner-details > summary::-webkit-details-marker { display: none; }
    .partner-details > summary svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .2s ease; }
    .partner-details[open] > summary svg { transform: rotate(180deg); }
    .partner-details > summary:focus-visible { outline: 3px solid #ab8cff; outline-offset: 4px; }
    .partner-details .partner-credentials { justify-content: center; margin-top: 24px; }
    .partner-details .partner-lead, .partner-details .partner-note { text-align: center; }

    /* Restore the original dark, rounded review cards and readable source marks. */
    .review-card, .review-card--featured, .review-card:hover, .review-card--featured:hover {
      background: var(--card-surface); color: var(--text-primary);
      border-color: var(--card-border); border-radius: 20px;
    }
    .review-card-header { flex-wrap: wrap; gap: 8px; align-items: center; }
    .review-appstore-badge, .review-ig-badge {
      gap: 7px; padding: 0; border: 0; border-radius: 0; background: none;
      color: #c5c5cb; font-size: 11px; line-height: 1.4;
    }
    .review-appstore-badge .platform-icon {
      display: inline-flex; flex: 0 0 26px; align-items: center; justify-content: center;
      width: 26px; height: 26px; border-radius: 7px; overflow: hidden;
    }
    .platform-icon--instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
    .platform-icon--appstore { background: #007aff; }
    .platform-icon--googleplay { background: #fff; }
    .review-appstore-badge .platform-icon svg { width: 17px; height: 17px; opacity: 1; color: #fff; }
    .review-text { color: #bcbcc5; }
    .reviewer-name { color: #ededf0; }
    .reviewer-meta { color: #bcbcc5; }
    .creator-ig-link .ig-chip { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; }
    .creator-ig-link .ig-chip svg { width: 18px; height: 18px; }
    .creator-ig-link .platform-icon--tiktok svg { filter: drop-shadow(-1px 0 #25f4ee) drop-shadow(1px 1px #fe2c55); }


    .creator-carousel-controls { display: none; }

    @media (max-width: 719px) {
      .creators-grid {
        display: flex; gap: 16px; margin: 30px -24px 0; padding: 4px 24px 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
        overscroll-behavior-x: contain; scrollbar-width: none; align-items: start;
      }
      .creators-grid::-webkit-scrollbar { display: none; }
      .creators-grid:focus-visible { outline: 2px solid #ab8cff; outline-offset: -4px; }
      .creator-card { flex: 0 0 min(80vw, 310px); scroll-snap-align: start; border-radius: 20px; }
      .creator-photo-wrap { flex: none; aspect-ratio: 4 / 3; }
      .creator-idblock { bottom: 18px; padding-inline: 12px; }
      .creator-name { font-size: 20px; }
      .creator-handle { font-size: 13px; }
      .creator-quote-body { margin: 0 10px 10px; padding: 14px; border-radius: 14px; }
      .creator-niche { font-size: 11px; max-width: 100%; letter-spacing: .045em; }
      .creator-quote { font-size: 15px; line-height: 1.55; }
      .creator-ig-link { font-size: 13px; overflow-wrap: anywhere; min-height: 44px; }
      .creator-card:hover, .creator-card:hover .creator-photo, .creator-card:hover .creator-quote-body { transform: none; }
      .creator-carousel-controls:not([hidden]) {
        display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 12px;
      }
      .creator-carousel-controls button {
        display: grid; place-items: center; width: 44px; height: 44px;
        color: #fafafa; background: #202124; border: 1px solid #ffffff25; border-radius: 50%; cursor: pointer;
      }
      .creator-carousel-controls button:disabled { opacity: .35; cursor: default; }
      .creator-carousel-controls button:focus-visible { outline: 3px solid #ab8cff; outline-offset: 3px; }
      .creator-carousel-controls svg { width: 20px; height: 20px; }
      .creator-carousel-status { color: #bcbcc5; font-size: 15px; min-width: 42px; text-align: center; }
      .creator-video-card { flex-basis: min(62vw, 230px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .partner-details > summary svg { transition: none; }
      .creators-grid { scroll-behavior: auto; }
    }