/* ---------- TOKENS ---------- */
      :root {
        --coral: #e0654a;
        --coral-deep: #c24f36;
        --coral-soft: #f0a189;
        --coral-glow: #fdd9cb;
        --cream: #fbf1e6;
        --cream-2: #f6e8d8;
        --cream-3: #f1dfcb;
        --paper: #fff8f0;
        --ink: #1f140e;
        --ink-2: #3a2a20;
        --muted: #80675a;
        --muted-2: #b19a8b;
        --line: rgba(31, 20, 14, 0.08);
        --line-2: rgba(31, 20, 14, 0.14);
        --gold: #e8c58a;
        --jade: #5bb385;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05),
          0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.06),
          0 2px 6px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.18),
          0 8px 24px rgba(0, 0, 0, 0.08);
        --shadow-orb: 0 30px 80px -20px color-mix(in oklab, var(--coral-deep)
              50%, transparent);
        --r-sm: 12px;
        --r-md: 18px;
        --r-lg: 24px;
        --r-xl: 32px;
        --container: 1240px;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }

      /* Smoothly transition theme-driven properties when palette swaps */
      body,
      body * {
        transition: background-color 0.55s ease, border-color 0.55s ease,
          color 0.35s ease, box-shadow 0.55s ease, fill 0.35s ease,
          stroke 0.35s ease;
      }
      /* But not the orb-stage / phone screens — those use complex gradients we change directly */
      .orb,
      .emily-orb,
      .balance-card,
      .phone,
      .phone .screen {
        transition: none;
      }
      body {
        font-family: "Inter", system-ui, sans-serif;
        color: var(--ink);
        background: var(--cream);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        overflow-x: hidden;
      }
      ::selection {
        background: var(--coral);
        color: white;
      }

      .serif {
        font-family: "Fraunces", "Instrument Serif", Georgia, serif;
        font-weight: 500;
        letter-spacing: -0.01em;
      }
      .display {
        font-family: "Fraunces", serif;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.02;
      }
      .eyebrow {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--coral);
      }
      .container {
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 28px;
      }

      /* ---------- NAV ---------- */
      nav.top {
        position: sticky;
        top: 0;
        z-index: 60;
        background: color-mix(in oklab, var(--cream) 78%, transparent);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid var(--line);
      }
      nav.top .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--ink);
      }
      .brand .mark {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        overflow: hidden;
        display: block;
        flex-shrink: 0;
      }
      .brand .mark img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .brand .name {
        font-family: "Fraunces", serif;
        font-size: 24px;
        font-weight: 500;
        color: var(--coral);
        letter-spacing: -0.02em;
      }
      .nav-links {
        display: flex;
        gap: 32px;
      }
      .nav-links a {
        color: var(--ink-2);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color 0.2s;
      }
      .nav-links a:hover {
        color: var(--coral);
      }
      .nav-cta {
        display: flex;
        gap: 10px;
        align-items: center;
      }

      /* ---------- BUTTONS ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
        font-family: inherit;
      }
      .btn-primary {
        background: var(--coral);
        color: white;
        box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--coral-deep) 50%, transparent);
      }
      .btn-primary:hover {
        background: var(--coral-deep);
        transform: translateY(-1px);
      }
      .btn-ghost {
        background: transparent;
        color: var(--ink-2);
        border: 1px solid var(--line-2);
      }
      .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.5);
        border-color: var(--coral);
        color: var(--coral);
      }
      .btn-light {
        background: white;
        color: var(--coral);
        box-shadow: var(--shadow-sm);
      }
      .btn-light:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }
      .btn-lg {
        padding: 16px 30px;
        font-size: 15px;
      }

      /* ---------- HERO ---------- */
      .hero {
        position: relative;
        padding: 56px 0 110px;
        overflow: hidden;
        background:
      /* Top-right warm sun */ radial-gradient(
            70% 55% at 85% -5%,
            color-mix(in oklab, var(--coral-glow) 80%, transparent) 0%,
            transparent 65%
          ),
          /* Left golden wash */
            radial-gradient(
              55% 45% at 5% 25%,
              color-mix(in oklab, var(--gold) 35%, transparent) 0%,
              transparent 70%
            ),
          /* Soft bottom-left fade */
            radial-gradient(
              60% 40% at 0% 100%,
              color-mix(in oklab, var(--coral-soft) 22%, transparent) 0%,
              transparent 70%
            ),
          linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
      }
      /* Subtle grain overlay — adds tactile warmth at all themes */
      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle at 25% 110%,
          color-mix(in oklab, var(--coral) 10%, transparent),
          transparent 50%
        );
        pointer-events: none;
        z-index: 0;
      }
      /* Decorative blob — sits behind the headline column */
      .hero-blob {
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          color-mix(in oklab, var(--coral-soft) 30%, transparent),
          transparent 65%
        );
        filter: blur(40px);
        top: 35%;
        left: -120px;
        z-index: 0;
        pointer-events: none;
        animation: blob-drift 18s ease-in-out infinite;
      }
      .hero-blob.b2 {
        top: -80px;
        right: -100px;
        left: auto;
        width: 320px;
        height: 320px;
        background: radial-gradient(
          circle,
          color-mix(in oklab, var(--gold) 35%, transparent),
          transparent 65%
        );
        animation-delay: 4s;
        animation-duration: 22s;
      }
      @keyframes blob-drift {
        0%,
        100% {
          transform: translate(0, 0) scale(1);
        }
        50% {
          transform: translate(20px, -15px) scale(1.05);
        }
      }
      .hero .container {
        position: relative;
        z-index: 1;
      }
      .hero .grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 60px;
        align-items: center;
      }
      .hero h1 {
        font-size: clamp(44px, 6.4vw, 84px);
        margin: 18px 0 20px;
      }
      .hero h1 em {
        font-style: italic;
        color: var(--coral);
        font-weight: 500;
      }
      .hero .lede {
        font-size: 19px;
        line-height: 1.55;
        color: var(--ink-2);
        max-width: 540px;
        margin-bottom: 32px;
      }
      .hero-cta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .hero-rating {
        margin-top: 22px;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 8px 14px 8px 12px;
        background: color-mix(in oklab, var(--paper) 70%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid color-mix(in oklab, var(--coral) 12%, var(--line));
        border-radius: 99px;
        box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--coral-deep) 25%, transparent);
      }
      .hr-stars {
        display: inline-flex;
        gap: 1px;
        color: var(--gold);
      }
      .hr-stars svg {
        width: 14px;
        height: 14px;
      }
      .hr-text {
        font-size: 13.5px;
        color: var(--ink-2);
        line-height: 1.3;
      }
      .hr-text strong {
        color: var(--ink);
        font-weight: 700;
      }
      .trust-row {
        margin-top: 28px;
        display: flex;
        align-items: center;
        gap: 14px 22px;
        color: var(--muted);
        font-size: 13px;
        flex-wrap: wrap;
      }
      .trust-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--ink-2);
        font-size: 13.5px;
        font-weight: 500;
      }
      .trust-pill svg {
        width: 14px;
        height: 14px;
        color: var(--coral);
        background: var(--coral-glow);
        padding: 3px;
        border-radius: 50%;
        box-sizing: content-box;
      }
      .stars {
        color: var(--coral);
        letter-spacing: 2px;
      }
      .avatars {
        display: flex;
      }
      .avatars span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid var(--cream);
        margin-left: -8px;
        background: linear-gradient(
          135deg,
          var(--coral) 0%,
          var(--coral-soft) 100%
        );
      }
      .avatars span:nth-child(1) {
        background: linear-gradient(135deg, var(--coral-soft), var(--coral));
        margin-left: 0;
      }
      .avatars span:nth-child(2) {
        background: linear-gradient(
          135deg,
          var(--coral-glow),
          var(--coral-deep)
        );
      }
      .avatars span:nth-child(3) {
        background: linear-gradient(135deg, var(--coral), var(--coral-deep));
      }
      .avatars span:nth-child(4) {
        background: linear-gradient(
          135deg,
          var(--coral-glow),
          var(--coral-soft)
        );
      }

      /* ---------- ORB ---------- */
      .orb-stage {
        position: relative;
        aspect-ratio: 1/1;
        max-width: 520px;
        margin: 0 auto;
      }
      /* Soft halo behind everything — pure theme colors */
      .orb-stage::before {
        content: "";
        position: absolute;
        inset: -18%;
        background: radial-gradient(
          circle at 50% 50%,
          var(--coral-glow) 0%,
          transparent 60%
        );
        opacity: 0.55;
        z-index: 0;
        animation: halo-pulse 8s ease-in-out infinite;
        pointer-events: none;
      }
      @keyframes halo-pulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.5;
        }
        50% {
          transform: scale(1.08);
          opacity: 0.7;
        }
      }
      .orbit {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px dashed color-mix(in oklab, var(--coral) 28%, transparent);
        animation: spin 40s linear infinite;
        z-index: 1;
      }
      .orbit.o2 {
        inset: 8%;
        border-color: color-mix(in oklab, var(--coral) 20%, transparent);
        animation-duration: 28s;
        animation-direction: reverse;
      }
      .orbit.o3 {
        inset: 18%;
        border-color: color-mix(in oklab, var(--coral) 14%, transparent);
        animation-duration: 50s;
      }
      .orbit .moon {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--coral);
        top: -7px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 0 24px color-mix(in oklab, var(--coral) 70%, transparent);
      }
      .orbit.o2 .moon {
        background: var(--gold);
        width: 10px;
        height: 10px;
        top: auto;
        bottom: -5px;
        box-shadow: 0 0 18px color-mix(in oklab, var(--gold) 70%, transparent);
      }
      .orbit.o3 .moon {
        background: var(--coral-soft);
        width: 8px;
        height: 8px;
        top: 50%;
        left: -4px;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .orb {
        position: absolute;
        inset: 25%;
        border-radius: 50%;
        /* All gradient stops use theme variables — no hardcoded colors */
        background: radial-gradient(
          circle at 35% 30%,
          color-mix(in oklab, var(--coral-soft) 55%, white) 0%,
          var(--coral-soft) 22%,
          var(--coral) 50%,
          var(--coral-deep) 82%,
          color-mix(in oklab, var(--coral-deep) 65%, black) 100%
        );
        box-shadow: 0 30px 80px -10px color-mix(in oklab, var(--coral-deep) 55%, transparent),
          0 0 80px color-mix(in oklab, var(--coral) 28%, transparent),
          inset -20px -30px 60px
            color-mix(in oklab, var(--coral-deep) 45%, transparent),
          inset 10px 18px 40px color-mix(in oklab, var(--coral-soft) 65%, white);
        display: grid;
        place-items: center;
        animation: float 6s ease-in-out infinite;
        z-index: 2;
      }
      .orb::before {
        content: "";
        position: absolute;
        inset: -2%;
        border-radius: 50%;
        border: 1.5px solid
          color-mix(in oklab, var(--coral-soft) 55%, transparent);
        transform: rotate(-12deg) scaleY(0.32);
      }
      /* Specular highlight — neutral, theme-safe */
      .orb::after {
        content: "";
        position: absolute;
        top: 10%;
        left: 16%;
        width: 42%;
        height: 30%;
        border-radius: 50%;
        background: radial-gradient(
          ellipse at center,
          rgba(255, 255, 255, 0.5),
          transparent 70%
        );
        filter: blur(2px);
        transform: rotate(-25deg);
        pointer-events: none;
      }
      .orb .glyph {
        color: color-mix(in oklab, var(--coral-soft) 45%, white);
        font-family: "Fraunces", serif;
        font-size: 72px;
        font-weight: 400;
        font-style: italic;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1;
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }

      /* Currency glyphs that drift around the orb */
      .currency-orbit {
        position: absolute;
        inset: -8%;
        pointer-events: none;
        z-index: 1;
      }
      .currency-orbit span {
        position: absolute;
        font-family: "Fraunces", serif;
        font-style: italic;
        font-weight: 400;
        color: color-mix(in oklab, var(--coral) 32%, transparent);
        animation: cur-drift 14s ease-in-out infinite;
      }
      .currency-orbit span:nth-child(1) {
        top: 6%;
        left: 10%;
        animation-delay: 0s;
        font-size: 26px;
      }
      .currency-orbit span:nth-child(2) {
        top: 18%;
        right: 4%;
        animation-delay: 1.8s;
        font-size: 34px;
      }
      .currency-orbit span:nth-child(3) {
        bottom: 16%;
        left: 4%;
        animation-delay: 3.6s;
        font-size: 30px;
      }
      .currency-orbit span:nth-child(4) {
        bottom: 6%;
        right: 12%;
        animation-delay: 5.4s;
        font-size: 24px;
      }
      .currency-orbit span:nth-child(5) {
        top: 50%;
        left: -1%;
        animation-delay: 7.2s;
        font-size: 28px;
      }
      @keyframes cur-drift {
        0%,
        100% {
          transform: translateY(0) rotate(0);
          opacity: 0.35;
        }
        50% {
          transform: translateY(-14px) rotate(8deg);
          opacity: 0.75;
        }
      }

      .chip-float {
        position: absolute;
        background: color-mix(in oklab, var(--paper) 88%, transparent);
        backdrop-filter: blur(14px) saturate(1.1);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        border: 1px solid color-mix(in oklab, var(--coral) 14%, var(--line));
        border-radius: 999px;
        padding: 10px 16px;
        font-size: 13px;
        color: var(--ink-2);
        font-weight: 500;
        box-shadow: 0 12px 32px -10px color-mix(in oklab, var(--coral-deep) 30%, transparent),
          0 2px 6px rgba(0, 0, 0, 0.04);
        animation: bobble 5s ease-in-out infinite;
        z-index: 3;
        white-space: nowrap;
      }
      .chip-float .dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--jade);
        margin-right: 8px;
        vertical-align: 1px;
        box-shadow: 0 0 8px currentColor;
      }
      .chip-1 {
        top: 14%;
        right: -10%;
        animation-delay: 0.2s;
      }
      .chip-2 {
        bottom: 18%;
        left: -12%;
        animation-delay: 1.5s;
      }
      .chip-3 {
        top: 52%;
        right: -16%;
        animation-delay: 0.8s;
      }
      @keyframes bobble {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }

      /* ---------- SECTION SCAFFOLD ---------- */
      section {
        padding: 110px 0;
        position: relative;
      }
      .section-head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 64px;
      }
      .section-head h2 {
        font-size: clamp(36px, 4.6vw, 60px);
        margin: 12px 0 16px;
      }
      .section-head h2 em {
        font-style: italic;
        color: var(--coral);
        font-weight: 500;
      }
      .section-head p {
        color: var(--muted);
        font-size: 17px;
        line-height: 1.6;
        margin: 0;
      }

      /* ---------- FEATURES ---------- */
      .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .feat-card {
        background: white;
        border-radius: var(--r-lg);
        padding: 30px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .feat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
      }
      .feat-card .ico {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
        background: var(--coral-glow);
        color: var(--coral);
      }
      .feat-card.tone-jade .ico {
        background: #d4ecdd;
        color: #3a8c61;
      }
      .feat-card.tone-gold .ico {
        background: #f4e2be;
        color: #a37a2c;
      }
      .feat-card.tone-plum .ico {
        background: #e5d5ee;
        color: #7a4fa0;
      }
      .feat-card.tone-sky .ico {
        background: #d9e3f1;
        color: #3f6ba1;
      }
      .feat-card.tone-rose .ico {
        background: #f5dae0;
        color: #b05572;
      }
      .feat-card h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 20px;
        margin: 0 0 8px;
      }
      .feat-card p {
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.55;
        margin: 0;
      }

      /* ---------- EMILY (DARK SHOWCASE) ---------- */
      .emily {
        background: radial-gradient(
            50% 60% at 50% 30%,
            color-mix(in oklab, var(--coral) 38%, transparent),
            transparent 70%
          ),
          linear-gradient(180deg, #1a100a 0%, #261810 100%);
        color: #f8e9d8;
        overflow: hidden;
      }
      .emily .grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 80px;
        align-items: center;
      }
      .emily .eyebrow {
        color: var(--gold);
        background: rgba(232, 197, 138, 0.12);
        border: 1px solid rgba(232, 197, 138, 0.3);
        padding: 8px 14px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .emily h2 {
        font-size: clamp(40px, 5vw, 64px);
        margin: 18px 0 22px;
      }
      .emily h2 em {
        color: var(--gold);
        font-style: italic;
        font-weight: 500;
      }
      .emily p.lede {
        color: rgba(248, 233, 216, 0.75);
        font-size: 17px;
        line-height: 1.6;
        max-width: 520px;
        margin-bottom: 28px;
      }
      .emily .pills {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .emily .pill {
        padding: 10px 18px;
        border-radius: 999px;
        border: 1px solid rgba(248, 233, 216, 0.18);
        background: rgba(248, 233, 216, 0.04);
        color: rgba(248, 233, 216, 0.92);
        font-size: 13.5px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }
      .emily-features {
        display: flex;
        flex-direction: column;
        gap: 22px;
        margin-top: 8px;
      }
      .ef-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }
      .ef-ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        flex-shrink: 0;
        background: rgba(232, 197, 138, 0.12);
        border: 1px solid rgba(232, 197, 138, 0.25);
        color: var(--gold);
        display: grid;
        place-items: center;
      }
      .ef-text h4 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 18px;
        margin: 2px 0 4px;
        color: #f8e9d8;
      }
      .ef-text p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.45;
        color: rgba(248, 233, 216, 0.7);
      }
      .emily-pills {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
      }
      .emily-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border-radius: 999px;
        background: rgba(248, 233, 216, 0.04);
        border: 1px solid rgba(248, 233, 216, 0.18);
        color: rgba(248, 233, 216, 0.92);
        font-size: 13.5px;
        font-weight: 500;
        transition: background 0.2s, border-color 0.2s, transform 0.15s;
      }
      .emily-pill:hover {
        background: rgba(248, 233, 216, 0.08);
        border-color: rgba(232, 197, 138, 0.4);
        transform: translateY(-1px);
      }
      .emily-pill svg {
        color: var(--gold);
      }

      /* Emily orb visual */
      .emily-stage {
        position: relative;
        max-width: 520px;
        margin: 0 auto;
      }
      .emily-orb-wrap {
        position: relative;
        aspect-ratio: 1/1;
        max-width: 320px;
        margin: 0 auto 32px;
      }
      .emily-orb {
        position: absolute;
        inset: 18%;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 30%,
          var(--coral-soft) 0%,
          var(--coral) 50%,
          var(--coral-deep) 100%
        );
        box-shadow: 0 30px 100px
            color-mix(in oklab, var(--coral) 50%, transparent),
          inset -20px -30px 80px rgba(0, 0, 0, 0.3),
          inset 10px 18px 50px color-mix(in oklab, var(--coral-soft) 55%, white);
        display: grid;
        place-items: center;
      }
      .emily-orb .face {
        font-size: 96px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
      }
      .emily-stage .ring {
        position: absolute;
        inset: 4%;
        border-radius: 50%;
        border: 1px dashed rgba(232, 197, 138, 0.18);
        animation: spin 50s linear infinite;
      }
      .emily-stage .ring.r2 {
        inset: -2%;
        border-color: rgba(232, 197, 138, 0.1);
        animation-direction: reverse;
        animation-duration: 70s;
      }

      /* New: Emily chat mock */
      .emily-chat {
        background: rgba(248, 233, 216, 0.04);
        border: 1px solid rgba(248, 233, 216, 0.1);
        border-radius: 22px;
        padding: 18px 18px 16px;
        backdrop-filter: blur(20px);
        max-width: 460px;
        margin: 0 auto;
        box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
      }
      .emily-chat-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(248, 233, 216, 0.08);
      }
      .emily-chat-head .av {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 30%,
          var(--coral-soft),
          var(--coral) 60%,
          var(--coral-deep)
        );
        box-shadow: 0 0 16px color-mix(in oklab, var(--coral) 50%, transparent);
      }
      .emily-chat-head .nm {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--cream);
      }
      .emily-chat-head .nm small {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: rgba(248, 233, 216, 0.5);
        margin-top: 1px;
      }
      .emily-chat-head .live {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: color-mix(in oklab, var(--coral) 22%, transparent);
        color: var(--coral-soft);
        font-size: 11px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 99px;
      }
      .emily-chat-head .live::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--coral-soft);
        animation: cta-blink 1.5s ease-in-out infinite;
      }
      .emily-msgs {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .emily-msg {
        max-width: 78%;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 13.5px;
        line-height: 1.45;
        animation: msg-in 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
      }
      @keyframes msg-in {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .emily-msg.you {
        align-self: flex-end;
        background: var(--coral);
        color: white;
        border-bottom-right-radius: 4px;
      }
      .emily-msg.her {
        align-self: flex-start;
        background: rgba(248, 233, 216, 0.08);
        color: var(--cream);
        border-bottom-left-radius: 4px;
        border: 1px solid rgba(248, 233, 216, 0.06);
      }
      .emily-msg.her b {
        color: var(--gold);
        font-weight: 600;
      }
      .emily-msg.you {
        animation-delay: 0.15s;
      }
      .emily-msg.her:nth-of-type(2) {
        animation-delay: 0.9s;
      }
      .emily-msg.you:nth-of-type(3) {
        animation-delay: 1.7s;
      }
      .emily-msg.her:nth-of-type(4) {
        animation-delay: 2.4s;
      }

      .emily-typing {
        align-self: flex-start;
        display: inline-flex;
        gap: 4px;
        padding: 10px 14px;
        border-radius: 16px;
        background: rgba(248, 233, 216, 0.08);
        border: 1px solid rgba(248, 233, 216, 0.06);
        border-bottom-left-radius: 4px;
        animation: msg-in 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
        animation-delay: 3.1s;
      }
      .emily-typing span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(248, 233, 216, 0.5);
        animation: typing-bob 1.4s ease-in-out infinite;
      }
      .emily-typing span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .emily-typing span:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes typing-bob {
        0%,
        60%,
        100% {
          transform: translateY(0);
          opacity: 0.5;
        }
        30% {
          transform: translateY(-4px);
          opacity: 1;
        }
      }

      /* ---------- PHONE MOCK (used everywhere) ---------- */
      .phone {
        width: 290px;
        height: 600px;
        border-radius: 44px;
        background: #1a0f08;
        padding: 8px;
        box-shadow: var(--shadow-lg),
          0 40px 80px -20px color-mix(in oklab, var(--coral-deep) 35%, transparent);
        position: relative;
      }
      .phone .screen {
        width: 100%;
        height: 100%;
        border-radius: 36px;
        background: var(--cream);
        overflow: hidden;
        position: relative;
      }
      .phone .notch {
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: 92px;
        height: 24px;
        border-radius: 14px;
        background: #1a0f08;
        z-index: 5;
      }
      .phone .status {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
        padding: 14px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 11px;
        font-weight: 600;
        color: var(--ink);
        z-index: 4;
      }
      .phone .status .right {
        display: flex;
        gap: 5px;
        align-items: center;
      }
      .phone .status .right svg {
        width: 14px;
        height: 14px;
      }

      .phone .body {
        padding: 56px 18px 70px;
        height: 100%;
        overflow: hidden;
      }
      .phone .tabbar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: color-mix(in oklab, var(--paper) 70%, transparent);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 9.5px;
        color: var(--muted);
      }
      .phone .tabbar .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
      }
      .phone .tabbar .item.active {
        color: var(--coral);
      }
      .phone .tabbar .item.emily {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f08f70, #8b3520);
        color: white;
        margin-top: -12px;
        box-shadow: 0 6px 18px
          color-mix(in oklab, var(--coral-deep) 45%, transparent);
      }

      /* ---------- HOME SCREEN MOCK ---------- */
      .scr-home .greeting {
        font-size: 11px;
        letter-spacing: 0.12em;
        color: var(--muted);
        text-transform: uppercase;
      }
      .scr-home .name {
        font-family: "Fraunces", serif;
        font-size: 26px;
        margin: 2px 0 8px;
      }
      .scr-home .tag {
        font-size: 11px;
        color: var(--muted);
        line-height: 1.4;
        margin-bottom: 14px;
      }
      .scr-home .balance-card {
        background: linear-gradient(
          135deg,
          var(--coral-soft) 0%,
          var(--coral-deep) 100%
        );
        color: white;
        border-radius: 18px;
        padding: 16px;
        position: relative;
        overflow: hidden;
      }
      .scr-home .balance-card::after {
        content: "";
        position: absolute;
        right: -30px;
        bottom: -30px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
          0 0 0 24px rgba(255, 255, 255, 0),
          0 0 0 36px rgba(255, 255, 255, 0.05);
      }
      .scr-home .balance-card::before {
        content: "";
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.18);
      }
      .scr-home .balance-card .lab {
        font-size: 9.5px;
        letter-spacing: 0.14em;
        opacity: 0.85;
        text-transform: uppercase;
      }
      .scr-home .balance-card .amt {
        font-family: "Fraunces", serif;
        font-size: 30px;
        margin-top: 4px;
      }
      .scr-home .balance-card .sub {
        font-size: 10px;
        opacity: 0.85;
        margin-top: 4px;
      }
      .scr-home .within {
        font-size: 10px;
        letter-spacing: 0.14em;
        color: var(--muted);
        margin: 18px 0 4px;
        text-transform: uppercase;
      }
      .scr-home .into {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .scr-home .into h4 {
        font-family: "Fraunces", serif;
        font-size: 14px;
        margin: 0;
        font-weight: 500;
      }
      .scr-home .into a {
        font-size: 10px;
        color: var(--coral);
        text-decoration: none;
      }
      .scr-home .tiles {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }
      .scr-home .tile {
        aspect-ratio: 1/1;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 8.5px;
        color: var(--ink);
        padding: 4px;
        text-align: center;
        line-height: 1.2;
      }
      .scr-home .tile svg {
        width: 18px;
        height: 18px;
      }
      .scr-home .tile.t1 {
        background: #d4ecdd;
        color: #3a8c61;
      }
      .scr-home .tile.t2 {
        background: #f5dae0;
        color: #b05572;
      }
      .scr-home .tile.t3 {
        background: #e5d5ee;
        color: #7a4fa0;
      }
      .scr-home .tile.t4 {
        background: #d6e8e5;
        color: #3d7b73;
      }
      .scr-home .tile.t5 {
        background: #f4d9c2;
        color: #b5651d;
      }
      .scr-home .tile.t6 {
        background: #d9e3f1;
        color: #3f6ba1;
      }
      .scr-home .tile.t7 {
        background: #f5c8c0;
        color: #b45444;
      }
      .scr-home .tile.t8 {
        background: #e5d5ee;
        color: #7a4fa0;
      }

      /* ---------- TRANSACTIONS MOCK ---------- */
      .scr-tx h3 {
        font-family: "Fraunces", serif;
        font-size: 24px;
        margin: 0 0 12px;
        font-weight: 500;
      }
      .scr-tx .card {
        background: white;
        border-radius: 16px;
        padding: 14px;
        box-shadow: var(--shadow-sm);
        margin-bottom: 10px;
      }
      .scr-tx .stat-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .scr-tx .stat-row .lab {
        font-size: 9px;
        letter-spacing: 0.14em;
        color: var(--muted);
        text-transform: uppercase;
      }
      .scr-tx .stat-row .num {
        font-size: 9px;
        color: var(--muted-2);
      }
      .scr-tx .stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
      }
      .scr-tx .stats .col .l {
        font-size: 8.5px;
        color: var(--muted);
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .scr-tx .stats .col .v {
        font-family: "Fraunces", serif;
        font-size: 14px;
        margin-top: 2px;
      }
      .scr-tx .stats .col .v.pos {
        color: var(--jade);
      }
      .scr-tx .top-spend {
        margin-top: 10px;
      }
      .scr-tx .top-spend .l {
        font-size: 8.5px;
        color: var(--muted);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 6px;
      }
      .scr-tx .row-bar {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        margin-bottom: 3px;
      }
      .scr-tx .bar {
        height: 4px;
        border-radius: 2px;
        background: var(--cream-3);
        overflow: hidden;
        margin-bottom: 8px;
      }
      .scr-tx .bar > i {
        display: block;
        height: 100%;
        background: var(--coral);
        border-radius: 2px;
      }
      .scr-tx .tx {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-top: 1px solid var(--line);
      }
      .scr-tx .tx:first-child {
        border-top: none;
      }
      .scr-tx .tx .ico {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--cream-3);
        display: grid;
        place-items: center;
        font-size: 14px;
      }
      .scr-tx .tx .meta {
        flex: 1;
      }
      .scr-tx .tx .meta .t {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
      }
      .scr-tx .tx .meta .s {
        font-size: 9.5px;
        color: var(--muted);
      }
      .scr-tx .tx .amt {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--coral);
        text-align: right;
      }
      .scr-tx .tx .amt.pos {
        color: var(--jade);
      }
      .scr-tx .tx .amt small {
        display: block;
        font-size: 8.5px;
        color: var(--muted);
        font-weight: 400;
        margin-top: 1px;
      }

      /* ---------- EMILY CHAT MOCK ---------- */
      .scr-chat .header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
      }
      .scr-chat .header .av {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f08f70, #8b3520);
      }
      .scr-chat .header .nm {
        font-family: "Fraunces", serif;
        font-size: 13px;
        margin: 0;
        flex: 1;
      }
      .scr-chat .header .nm small {
        display: block;
        font-size: 9px;
        font-weight: 400;
        color: var(--muted);
      }
      .scr-chat .header .live {
        font-size: 9px;
        color: var(--coral);
        background: var(--coral-glow);
        padding: 3px 8px;
        border-radius: 99px;
      }
      .scr-chat .msg {
        max-width: 80%;
        padding: 8px 12px;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.4;
        margin-bottom: 8px;
      }
      .scr-chat .msg.ai {
        background: white;
        color: var(--ink);
        margin-right: auto;
        border-bottom-left-radius: 4px;
      }
      .scr-chat .msg.me {
        background: var(--coral);
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 4px;
        font-weight: 500;
      }
      .scr-chat .msg.av-row {
        display: flex;
        gap: 6px;
        align-items: flex-start;
        max-width: 88%;
      }
      .scr-chat .msg-row {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px;
      }
      .scr-chat .msg-row .av {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f08f70, #8b3520);
        flex-shrink: 0;
      }
      .scr-chat .msg-row .msg {
        margin: 0;
      }
      .scr-chat .end {
        position: absolute;
        bottom: 78px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        padding: 6px 12px;
        border-radius: 99px;
        background: white;
        box-shadow: var(--shadow-sm);
        color: var(--ink-2);
        display: flex;
        gap: 5px;
        align-items: center;
        white-space: nowrap;
      }

      /* ---------- REMINDERS SCREEN MOCK ---------- */
      .scr-rem {
        padding: 14px 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 14px;
      }
      .scr-rem .rem-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 6px 0 4px;
      }
      .scr-rem .rem-dots span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.15);
      }
      .scr-rem .rem-dots span.on {
        background: var(--coral);
        width: 14px;
        border-radius: 99px;
      }
      .scr-rem .rem-card {
        background: white;
        border-radius: 18px;
        padding: 16px;
        box-shadow: var(--shadow-sm);
        flex: 1;
      }
      .scr-rem .rem-card h4 {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 16px;
        margin: 0 0 4px;
        color: var(--ink);
      }
      .scr-rem .rem-card > p {
        margin: 0 0 14px;
        font-size: 10.5px;
        line-height: 1.4;
        color: var(--muted);
      }
      .scr-rem .rem-types {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 14px;
      }
      .scr-rem .rem-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.03);
        color: var(--ink-2);
        font-size: 9px;
        font-weight: 500;
      }
      .scr-rem .rem-type svg {
        width: 16px;
        height: 16px;
      }
      .scr-rem .rem-type.active {
        background: var(--coral-glow);
        color: var(--coral-deep);
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--coral) 22%, transparent);
      }
      .scr-rem .rem-input {
        background: rgba(0, 0, 0, 0.04);
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 10.5px;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .scr-rem .rem-input-empty {
        height: 30px;
        padding: 0;
      }
      .scr-rem .rem-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px 8px;
        font-size: 11px;
        color: var(--muted);
      }
      .scr-rem .rem-save {
        background: var(--coral);
        color: white;
        padding: 8px 22px;
        border-radius: 99px;
        font-weight: 600;
        font-size: 11px;
        box-shadow: 0 4px 10px
          color-mix(in oklab, var(--coral) 35%, transparent);
      }

      /* ---------- GALLERY (COVERFLOW SWIPE) ---------- */
      .gallery {
        position: relative;
        padding: 110px 0 130px;
        overflow: hidden;
        background: radial-gradient(
            ellipse 80% 60% at 50% 50%,
            color-mix(in oklab, var(--coral) 6%, transparent),
            transparent 70%
          ),
          var(--cream);
      }
      .gallery .section-head {
        margin-bottom: 50px;
      }
      .gallery-stage {
        position: relative;
        height: 540px;
        perspective: 1600px;
        perspective-origin: 50% 50%;
      }
      .gallery-track {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
      }
      .gal-slide {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 250px;
        height: 510px;
        margin: -255px 0 0 -125px;
        border-radius: 38px;
        background: #1a1a1a;
        padding: 9px;
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35),
          0 0 0 1.5px rgba(0, 0, 0, 0.1) inset;
        transition: transform 0.9s cubic-bezier(0.22, 0.85, 0.25, 1),
          opacity 0.7s ease, filter 0.7s ease;
        will-change: transform, opacity;
        cursor: pointer;
      }
      .gal-slide .gal-img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        background-size: cover;
        background-position: center top;
        background-color: var(--cream);
        overflow: hidden;
        position: relative;
      }
      /* Position classes — base far away/hidden */
      .gal-slide {
        transform: translate3d(0, 0, -1000px) scale(0.6);
        opacity: 0;
        pointer-events: none;
        filter: brightness(0.85) saturate(0.9);
      }
      .gal-slide.center {
        transform: translate3d(0, 0, 80px) scale(1.08);
        opacity: 1;
        pointer-events: auto;
        filter: none;
        z-index: 5;
      }
      .gal-slide.left-1 {
        transform: translate3d(-200px, 0, -40px) rotateY(18deg) scale(0.85);
        opacity: 0.85;
        pointer-events: auto;
        z-index: 4;
        filter: brightness(0.96);
      }
      .gal-slide.right-1 {
        transform: translate3d(200px, 0, -40px) rotateY(-18deg) scale(0.85);
        opacity: 0.85;
        pointer-events: auto;
        z-index: 4;
        filter: brightness(0.96);
      }
      .gal-slide.left-2 {
        transform: translate3d(-360px, 0, -160px) rotateY(28deg) scale(0.7);
        opacity: 0.55;
        pointer-events: auto;
        z-index: 3;
        filter: brightness(0.85) saturate(0.85);
      }
      .gal-slide.right-2 {
        transform: translate3d(360px, 0, -160px) rotateY(-28deg) scale(0.7);
        opacity: 0.55;
        pointer-events: auto;
        z-index: 3;
        filter: brightness(0.85) saturate(0.85);
      }

      .gal-caption {
        text-align: center;
        margin-top: 36px;
        min-height: 60px;
      }
      .gal-caption h4 {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 22px;
        margin: 0 0 6px;
        color: var(--ink);
      }
      .gal-caption p {
        margin: 0;
        font-size: 14px;
        color: var(--muted);
      }
      .gal-caption .gal-cap-inner {
        transition: opacity 0.35s ease;
      }
      .gal-caption.changing .gal-cap-inner {
        opacity: 0;
      }

      .gal-arrow {
        position: absolute;
        top: 50%;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        border-radius: 50%;
        background: white;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        display: grid;
        place-items: center;
        color: var(--ink);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        z-index: 10;
        border: none;
      }
      .gal-arrow:hover {
        transform: scale(1.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
      }
      .gal-arrow.prev {
        left: 4%;
      }
      .gal-arrow.next {
        right: 4%;
      }
      .gal-arrow svg {
        width: 18px;
        height: 18px;
      }

      .gal-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 28px;
      }
      .gal-dots button {
        width: 8px;
        height: 8px;
        border-radius: 99px;
        background: rgba(0, 0, 0, 0.15);
        border: none;
        cursor: pointer;
        padding: 0;
        transition: background 0.25s, width 0.25s;
      }
      .gal-dots button.active {
        background: var(--coral);
        width: 24px;
      }

      @media (max-width: 760px) {
        .gallery-stage {
          height: 460px;
        }
        .gal-slide {
          width: 200px;
          height: 410px;
          margin: -205px 0 0 -100px;
        }
        .gal-slide.left-1 {
          transform: translate3d(-140px, 0, -40px) rotateY(18deg) scale(0.85);
        }
        .gal-slide.right-1 {
          transform: translate3d(140px, 0, -40px) rotateY(-18deg) scale(0.85);
        }
        .gal-slide.left-2 {
          transform: translate3d(-240px, 0, -160px) rotateY(28deg) scale(0.7);
          opacity: 0.35;
        }
        .gal-slide.right-2 {
          transform: translate3d(240px, 0, -160px) rotateY(-28deg) scale(0.7);
          opacity: 0.35;
        }
        .gal-arrow.prev {
          left: 8px;
        }
        .gal-arrow.next {
          right: 8px;
        }
      }

      /* ---------- ALTERNATING SHOWCASE ROWS ---------- */
      .showcase-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
        padding: 60px 0;
      }
      .showcase-row + .showcase-row {
        border-top: none;
        position: relative;
      }
      .showcase-row + .showcase-row::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--coral-soft),
          var(--gold),
          var(--coral-soft),
          transparent
        );
      }
      .showcase-row.reverse .showcase-text {
        order: 2;
      }
      .showcase-row .showcase-phone {
        display: flex;
        justify-content: center;
      }
      .showcase-text .badge-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--coral-glow);
        color: var(--coral-deep);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 7px 14px;
        border-radius: 999px;
        margin-bottom: 22px;
      }
      .showcase-text .badge-eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--coral);
      }
      .showcase-text h2 {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: clamp(32px, 4vw, 48px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin: 0 0 18px;
      }
      .showcase-text > p {
        color: var(--muted);
        font-size: 16px;
        line-height: 1.6;
        margin: 0 0 30px;
        max-width: 480px;
      }
      .showcase-list {
        display: flex;
        flex-direction: column;
        gap: 22px;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .showcase-list li {
        display: flex;
        gap: 16px;
        align-items: flex-start;
      }
      .showcase-list .step {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--coral-glow);
        color: var(--coral-deep);
        font-size: 11px;
        font-weight: 700;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 2px;
      }
      .showcase-list .check {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--coral-glow);
        color: var(--coral);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        margin-top: 2px;
      }
      .showcase-list .check svg {
        width: 12px;
        height: 12px;
      }
      .showcase-list .ico-soft {
        width: 24px;
        height: 24px;
        color: var(--coral);
        flex-shrink: 0;
        margin-top: 1px;
      }
      .showcase-list h4 {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 4px;
        color: var(--ink);
      }
      .showcase-list p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--muted);
        max-width: 420px;
      }

      @media (max-width: 980px) {
        .showcase-row {
          grid-template-columns: 1fr;
          gap: 40px;
          padding: 40px 0;
        }
        .showcase-row.reverse .showcase-text {
          order: 0;
        }
      }
      .triptych {
        display: flex;
        gap: 36px;
        justify-content: center;
        align-items: center;
        perspective: 2000px;
      }
      .triptych .phone {
        transform-origin: center;
        transition: transform 0.4s;
      }
      .triptych .phone:nth-child(1) {
        transform: rotateY(8deg) translateY(20px) scale(0.95);
      }
      .triptych .phone:nth-child(2) {
        transform: translateY(-10px) scale(1.04);
        z-index: 2;
      }
      .triptych .phone:nth-child(3) {
        transform: rotateY(-8deg) translateY(20px) scale(0.95);
      }

      /* ---------- TOGETHER (FAMILY) SECTION ---------- */
      .together {
        padding: 100px 0 110px;
        background: var(--cream);
      }
      .together .section-head {
        margin-bottom: 50px;
      }
      .together-card {
        background: white;
        border-radius: 28px;
        padding: 56px 64px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: center;
        box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.18);
      }
      .together-visual {
        position: relative;
        min-height: 480px;
        display: grid;
        place-items: center;
      }
      .avatar-bubble {
        position: absolute;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: white;
        font-family: "Fraunces", serif;
        font-weight: 500;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
        transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1);
        animation: bobble 5s ease-in-out infinite;
        z-index: 2;
      }
      .avatar-bubble:hover {
        transform: translateY(-4px) scale(1.05);
      }
      .ab-1 {
        width: 70px;
        height: 70px;
        background: #b080d9;
        font-size: 26px;
        top: 30px;
        left: 0;
        animation-delay: 0.2s;
      }
      .ab-2 {
        width: 56px;
        height: 56px;
        background: #3d9d6e;
        font-size: 22px;
        bottom: 40px;
        right: 0;
        animation-delay: 1.4s;
      }

      /* Together phone mockup */
      .together-phone {
        position: relative;
        z-index: 1;
        width: 260px;
        border-radius: 36px;
        padding: 8px;
        background: linear-gradient(180deg, #1a1a1a, #2a2a2a);
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35),
          0 8px 24px rgba(0, 0, 0, 0.12);
      }
      .tp-frame {
        position: relative;
        border-radius: 28px;
        overflow: hidden;
        aspect-ratio: 9 / 18;
      }
      .tp-notch {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 64px;
        height: 18px;
        border-radius: 99px;
        background: #1a1a1a;
        z-index: 5;
      }
      .tp-screen {
        width: 100%;
        height: 100%;
        padding: 38px 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .tp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
      }
      .tp-back,
      .tp-add {
        color: var(--coral);
        font-weight: 600;
        font-size: 22px;
        width: 24px;
      }
      .tp-add {
        text-align: right;
      }
      .tp-title {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 17px;
        color: var(--ink);
      }
      .tp-card {
        background: white;
        border-radius: 16px;
        padding: 14px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
      }
      .tp-card-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
      }
      .tp-eyebrow {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .tp-pct {
        font-size: 10px;
        font-weight: 700;
        color: #3d9d6e;
        background: rgba(61, 157, 110, 0.1);
        padding: 3px 7px;
        border-radius: 99px;
      }
      .tp-amount {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 26px;
        color: var(--ink);
        letter-spacing: -0.02em;
        margin: 6px 0 10px;
      }
      .tp-amount span {
        font-size: 16px;
        color: var(--muted);
      }
      .tp-bar {
        height: 6px;
        border-radius: 99px;
        background: color-mix(in oklab, var(--coral) 14%, transparent);
        overflow: hidden;
      }
      .tp-bar-fill {
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--coral-soft), var(--coral));
      }
      .tp-bar-meta {
        display: flex;
        justify-content: space-between;
        font-size: 9.5px;
        color: var(--muted);
        margin-top: 6px;
      }
      .tp-section-head {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 4px 4px 0;
      }
      .tp-section-head span {
        color: var(--ink-2);
        font-weight: 500;
      }
      .tp-member {
        display: flex;
        align-items: center;
        gap: 10px;
        background: white;
        border-radius: 12px;
        padding: 8px 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .tp-av {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: white;
        font-size: 12px;
        font-weight: 600;
        font-family: "Fraunces", serif;
        flex-shrink: 0;
      }
      .tpv-1 {
        background: var(--coral);
      }
      .tpv-2 {
        background: #4a6fb8;
      }
      .tpv-3 {
        background: #e8c58a;
        color: var(--ink);
      }
      .tp-m-info {
        flex: 1;
        min-width: 0;
      }
      .tp-m-name {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.2;
      }
      .tp-m-sub {
        font-size: 9.5px;
        color: var(--muted);
        margin-top: 1px;
      }
      .tp-m-amt {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }

      .together-text h3 {
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 28px;
        margin: 0 0 14px;
        letter-spacing: -0.01em;
      }
      .together-text > p {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 26px;
      }
      .together-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .together-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--ink);
      }
      .together-list .check {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--coral-glow);
        color: var(--coral);
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .together-list .check svg {
        width: 12px;
        height: 12px;
      }

      @media (max-width: 880px) {
        .together-card {
          grid-template-columns: 1fr;
          padding: 40px 32px;
          gap: 30px;
        }
        .together-visual {
          min-height: 420px;
        }
        .together-phone {
          width: 220px;
        }
      }

      /* ---------- THEMES ---------- */
      .themes {
        background: linear-gradient(
          180deg,
          var(--cream) 0%,
          var(--cream-2) 100%
        );
      }
      .themes-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
        max-width: 1080px;
        margin: 0 auto;
      }
      .theme-card {
        background: white;
        border-radius: 16px;
        padding: 14px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
      }
      .theme-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--coral-soft);
      }
      .theme-card.active {
        border-color: var(--coral);
        box-shadow: 0 0 0 3px var(--coral-glow);
      }
      .theme-card .swatch {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-bottom: 10px;
        box-shadow: inset -2px -3px 6px rgba(0, 0, 0, 0.18),
          inset 2px 3px 6px rgba(255, 255, 255, 0.4);
      }
      .theme-card .nm {
        font-family: "Fraunces", serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
      }
      .theme-card .desc {
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
        line-height: 1.3;
      }
      .theme-card .pill {
        margin-top: 10px;
        height: 16px;
        border-radius: 99px;
        background: var(--coral-glow);
      }

      /* ---------- PRICING ---------- */
      .pricing-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        max-width: 880px;
        margin: 0 auto;
      }
      .price-card {
        background: white;
        border-radius: var(--r-xl);
        padding: 36px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        position: relative;
      }
      .price-card.featured {
        background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
        border-color: transparent;
        box-shadow: var(--shadow-md);
      }
      .price-card .badge {
        position: absolute;
        top: -12px;
        left: 30px;
        background: var(--coral);
        color: white;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding: 5px 12px;
        border-radius: 99px;
        text-transform: uppercase;
      }
      .price-card .lab {
        font-size: 11px;
        letter-spacing: 0.18em;
        color: var(--muted);
        text-transform: uppercase;
      }
      .price-card .price {
        font-family: "Fraunces", serif;
        font-size: 54px;
        margin: 8px 0 4px;
        line-height: 1;
        font-weight: 500;
      }
      .price-card .price small {
        font-size: 16px;
        color: var(--muted);
        font-weight: 400;
      }
      .price-card .sub {
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 28px;
      }
      .price-card ul {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
      }
      .price-card ul li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--line);
        font-size: 14px;
        color: var(--ink-2);
      }
      .price-card ul li:last-child {
        border-bottom: none;
      }
      .price-card ul li svg {
        width: 18px;
        height: 18px;
        color: var(--jade);
        flex-shrink: 0;
        margin-top: 1px;
      }
      .price-card .save {
        background: var(--coral-glow);
        color: var(--coral-deep);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        padding: 4px 10px;
        border-radius: 99px;
        display: inline-block;
        margin-bottom: 14px;
        text-transform: uppercase;
      }

      /* ---------- TESTIMONIALS ---------- */
      .testi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
      }
      .testi {
        background: white;
        border-radius: var(--r-lg);
        padding: 28px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
      }
      .testi .quote {
        font-family: "Fraunces", serif;
        font-size: 19px;
        line-height: 1.4;
        color: var(--ink);
        margin: 0 0 18px;
      }
      .testi .who {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .testi .who .av {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--coral) 0%,
          var(--coral-soft) 100%
        );
      }
      .testi .who .nm {
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
      }
      .testi .who .ti {
        font-size: 11px;
        color: var(--muted);
      }
      .testi .stars {
        margin-bottom: 12px;
        font-size: 14px;
      }

      /* ---------- FINAL CTA ---------- */
      .final-cta {
        /* Premium dark canvas — base stays dark in every theme so this section
       acts as visual punctuation. Theme color enters via radial glows on top. */
        background:
      /* Soft top spotlight in theme color */ radial-gradient(
            ellipse 55% 50% at 50% 0%,
            color-mix(in oklab, var(--coral) 35%, transparent),
            transparent 65%
          ),
          /* Bottom-left warm wash */
            radial-gradient(
              ellipse 70% 60% at 0% 110%,
              color-mix(in oklab, var(--coral-deep) 40%, transparent),
              transparent 60%
            ),
          /* Bottom-right gold accent */
            radial-gradient(
              ellipse 50% 50% at 100% 100%,
              color-mix(in oklab, var(--gold) 22%, transparent),
              transparent 60%
            ),
          /* Fixed dark base — same in every theme for consistency */
            linear-gradient(160deg, #14100c 0%, #1b1410 50%, #221814 100%);
        color: #fbf1e6;
        padding: 130px 28px 140px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      /* Fine-grain noise texture for premium feel */
      .final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
        opacity: 0.08;
        mix-blend-mode: overlay;
        pointer-events: none;
        z-index: 1;
      }
      /* Subtle vignette to anchor focus on the text */
      .final-cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse 80% 70% at 50% 50%,
          transparent 30%,
          rgba(0, 0, 0, 0.28) 100%
        );
        pointer-events: none;
        z-index: 1;
      }
      /* Decorative dotted orbits — pure theme color */
      .final-cta .cta-orbits {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 700px;
        height: 700px;
        margin: -350px 0 0 -350px;
        pointer-events: none;
        z-index: 1;
      }
      .final-cta .cta-orbits .ring {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px dashed
          color-mix(in oklab, var(--coral-soft) 22%, transparent);
        animation: spin 80s linear infinite;
      }
      .final-cta .cta-orbits .ring.r2 {
        inset: 12%;
        border-color: color-mix(in oklab, var(--gold) 20%, transparent);
        animation-direction: reverse;
        animation-duration: 60s;
      }
      .final-cta .cta-orbits .ring.r3 {
        inset: 24%;
        border-color: color-mix(in oklab, var(--coral-soft) 14%, transparent);
        animation-duration: 100s;
      }
      /* Central soft glow */
      .final-cta .cta-orb {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 420px;
        height: 420px;
        margin: -210px 0 0 -210px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          color-mix(in oklab, var(--coral) 60%, transparent) 0%,
          color-mix(in oklab, var(--coral-deep) 40%, transparent) 40%,
          transparent 70%
        );
        filter: blur(50px);
        opacity: 0.55;
        pointer-events: none;
        animation: cta-pulse 10s ease-in-out infinite;
      }
      @keyframes cta-pulse {
        0%,
        100% {
          transform: scale(1);
          opacity: 0.5;
        }
        50% {
          transform: scale(1.12);
          opacity: 0.7;
        }
      }
      .final-cta .cta-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: color-mix(in oklab, var(--gold) 15%, transparent);
        border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
        color: var(--gold);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        padding: 8px 16px;
        border-radius: 999px;
        margin-bottom: 28px;
        position: relative;
        z-index: 2;
        backdrop-filter: blur(8px);
      }
      .final-cta .cta-eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        box-shadow: 0 0 10px var(--gold);
        animation: cta-blink 2s ease-in-out infinite;
      }
      @keyframes cta-blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }
      .final-cta h2 {
        font-family: "Fraunces", serif;
        font-size: clamp(40px, 5.5vw, 68px);
        margin: 0 0 18px;
        font-weight: 500;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: #fbf1e6;
        position: relative;
        z-index: 2;
      }
      .final-cta h2 em {
        font-style: italic;
        background: linear-gradient(
          135deg,
          var(--gold) 0%,
          color-mix(in oklab, var(--gold) 60%, white) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .final-cta p {
        color: rgba(251, 241, 230, 0.7);
        font-size: 17px;
        line-height: 1.55;
        margin: 0 auto 36px;
        max-width: 540px;
        position: relative;
        z-index: 2;
      }
      .final-cta .ctas {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
      }
      .final-cta .btn-light {
        background: #fbf1e6;
        color: #1f140e;
        border: none;
        box-shadow: 0 12px 32px
            color-mix(in oklab, var(--coral-deep) 35%, transparent),
          0 0 0 1px rgba(251, 241, 230, 0.3);
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .final-cta .btn-light:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 40px
            color-mix(in oklab, var(--coral-deep) 50%, transparent),
          0 0 0 1px rgba(251, 241, 230, 0.4);
      }
      .final-cta .cta-trust {
        margin-top: 30px;
        font-size: 13px;
        color: rgba(251, 241, 230, 0.5);
        display: flex;
        gap: 18px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
      }
      .final-cta .cta-trust span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .final-cta .cta-trust svg {
        width: 13px;
        height: 13px;
        color: var(--gold);
      }

      /* ---------- FAQ ---------- */
      .faq {
        padding: 110px 0;
        background: var(--cream);
      }
      .faq .section-head {
        margin-bottom: 50px;
      }
      .faq-list {
        max-width: 760px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .faq-item {
        background: white;
        border-radius: 18px;
        padding: 4px 28px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.04);
        transition: box-shadow 0.25s, border-color 0.25s;
      }
      .faq-item:hover {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
        border-color: color-mix(in oklab, var(--coral) 22%, transparent);
      }
      .faq-q {
        width: 100%;
        background: none;
        border: none;
        padding: 22px 0;
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        font-family: "Fraunces", serif;
        font-weight: 500;
        font-size: 18px;
        color: var(--ink);
        letter-spacing: -0.01em;
      }
      .faq-q .faq-ico {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--coral-glow);
        color: var(--coral);
        display: grid;
        place-items: center;
        transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1),
          background 0.25s;
      }
      .faq-q .faq-ico svg {
        width: 12px;
        height: 12px;
      }
      .faq-item.open .faq-q .faq-ico {
        background: var(--coral);
        color: white;
        transform: rotate(45deg);
      }
      .faq-a {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .faq-item.open .faq-a {
        max-height: 320px;
      }
      .faq-a-inner {
        padding: 0 0 22px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.65;
        max-width: 620px;
      }

      /* ---------- FOOTER ---------- */
      footer {
        background: var(--paper);
        padding: 60px 0 30px;
      }
      footer .grid {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 40px;
      }
      footer h5 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 14px;
        margin: 0 0 14px;
      }
      footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      footer ul li {
        margin-bottom: 8px;
      }
      footer ul a {
        font-size: 13px;
        color: var(--muted);
        text-decoration: none;
      }
      footer ul a:hover {
        color: var(--coral);
      }
      footer .blurb {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.6;
        max-width: 280px;
        margin: 12px 0 16px;
      }
      footer .copy {
        display: flex;
        justify-content: space-between;
        padding-top: 24px;
        font-size: 12px;
        color: var(--muted-2);
      }
      footer .badges {
        display: flex;
        gap: 10px;
      }
      .store-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--ink);
        color: white;
        padding: 9px 14px;
        border-radius: 12px;
        text-decoration: none;
        font-size: 11px;
      }
      .store-btn small {
        display: block;
        opacity: 0.7;
        font-size: 9px;
      }
      .store-btn b {
        font-size: 13px;
        font-weight: 600;
      }

      /* ---------- REVEAL ---------- */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }

      /* ---------- RESPONSIVE ---------- */
      @media (max-width: 980px) {
        .hero .grid,
        .emily .grid {
          grid-template-columns: 1fr;
          gap: 50px;
        }
        .features-grid {
          grid-template-columns: 1fr 1fr;
        }
        .themes-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .pricing-wrap {
          grid-template-columns: 1fr;
        }
        .testi-grid {
          grid-template-columns: 1fr;
        }
        footer .grid {
          grid-template-columns: 1fr 1fr;
        }
        .triptych {
          flex-direction: column;
          gap: 30px;
        }
        .triptych .phone {
          transform: none !important;
        }
        .nav-links {
          display: none;
        }
        section {
          padding: 80px 0;
        }
        .final-cta {
          padding: 56px 28px;
        }
      }
      @media (max-width: 560px) {
        .features-grid {
          grid-template-columns: 1fr;
        }
        .themes-grid {
          grid-template-columns: 1fr 1fr;
        }
        .container {
          padding: 0 20px;
        }
        .hero {
          padding: 40px 0 60px;
        }
        .nav-cta .btn-ghost {
          display: none;
        }
      }

      /* ---------- #1 STAGGERED REVEAL ANIMATIONS ---------- */
      .reveal-stagger > * {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      .reveal-stagger.in > * {
        opacity: 1;
        transform: none;
      }
      .reveal-stagger.in > *:nth-child(1) {
        transition-delay: 0s;
      }
      .reveal-stagger.in > *:nth-child(2) {
        transition-delay: 0.1s;
      }
      .reveal-stagger.in > *:nth-child(3) {
        transition-delay: 0.2s;
      }
      .reveal-stagger.in > *:nth-child(4) {
        transition-delay: 0.3s;
      }
      .reveal-stagger.in > *:nth-child(5) {
        transition-delay: 0.4s;
      }
      .reveal-stagger.in > *:nth-child(6) {
        transition-delay: 0.5s;
      }

      .orb-stage {
        transition: transform 0.8s ease;
      }
      .reveal.in .orb-stage {
        animation: orb-zoom 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
      }
      @keyframes orb-zoom {
        from {
          transform: scale(0.85);
          opacity: 0;
        }
        to {
          transform: scale(1);
          opacity: 1;
        }
      }

      /* ---------- #2 HERO ITALIC ACCENT ---------- */

      /* ---------- #3 TESTIMONIAL ENHANCEMENTS ---------- */
      .testi {
        position: relative;
      }
      .testi::before {
        content: "\201C";
        position: absolute;
        top: 18px;
        left: 22px;
        font-family: "Fraunces", serif;
        font-size: 72px;
        line-height: 1;
        color: var(--coral-glow);
        pointer-events: none;
        z-index: 0;
      }
      .testi .quote {
        position: relative;
        z-index: 1;
      }
      .testi:nth-child(2) {
        transform: scale(1.03);
        border-color: color-mix(in oklab, var(--coral) 30%, transparent);
        box-shadow: 0 0 0 3px var(--coral-glow), var(--shadow-md);
      }
      .testi .who .av {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        color: white;
        font-weight: 700;
        font-size: 15px;
        font-family: "Fraunces", serif;
      }

      /* ---------- #5 PRICING ANIMATED BORDER ---------- */
      .price-card.featured {
        background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
        border: 2px solid transparent;
        background-clip: padding-box;
        position: relative;
      }
      .price-card.featured::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(var(--r-xl) + 2px);
        background: linear-gradient(
          135deg,
          var(--coral),
          var(--gold),
          var(--coral)
        );
        background-size: 300% 300%;
        animation: border-glow 4s ease infinite;
        z-index: -1;
      }
      @keyframes border-glow {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      /* ---------- #7 TOGETHER SECTION CONNECTION LINES ---------- */
      .avatar-bubble::after {
        content: "";
        position: absolute;
        border: 1.5px dashed color-mix(in oklab, var(--coral) 30%, transparent);
        pointer-events: none;
      }
      .ab-1::after {
        width: 80px;
        top: 50%;
        right: -80px;
        border-bottom: 1.5px dashed
          color-mix(in oklab, var(--coral) 30%, transparent);
        border-right: none;
        border-top: none;
        border-left: none;
      }
      .ab-2::after {
        width: 60px;
        top: 50%;
        left: -60px;
        border-bottom: 1.5px dashed
          color-mix(in oklab, var(--coral) 30%, transparent);
        border-right: none;
        border-top: none;
        border-left: none;
      }
      .avatar-bubble:hover {
        transform: translateY(-4px) scale(1.1);
      }
      .avatar-bubble {
        transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
      }

      /* ---------- #8 FOOTER SOCIAL ICONS ---------- */
      .social-links {
        display: flex;
        gap: 12px;
        margin-top: 16px;
      }
      .social-links a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--cream-2);
        display: grid;
        place-items: center;
        color: var(--muted);
        text-decoration: none;
        transition: background 0.2s, color 0.2s, transform 0.2s;
      }
      .social-links a:hover {
        background: var(--coral);
        color: white;
        transform: translateY(-2px);
      }
      .social-links a svg {
        width: 16px;
        height: 16px;
      }
      footer .gradient-divider {
        height: 2px;
        border: none;
        margin: 0;
        background: linear-gradient(
          90deg,
          transparent,
          var(--coral-soft),
          var(--gold),
          var(--coral-soft),
          transparent
        );
      }

      /* ---------- #9 HOW IT WORKS ---------- */
      .how-it-works {
        padding: 100px 0;
        background: var(--paper);
      }
      .hiw-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 960px;
        margin: 0 auto;
        position: relative;
      }
      .hiw-steps::before {
        content: "";
        position: absolute;
        top: 38px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient(
          90deg,
          var(--coral-glow),
          var(--coral-soft),
          var(--coral-glow)
        );
        z-index: 0;
      }
      .hiw-step {
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .hiw-num {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: white;
        border: 2px solid var(--coral-glow);
        display: grid;
        place-items: center;
        margin: 0 auto 20px;
        font-family: "Fraunces", serif;
        font-size: 28px;
        font-weight: 600;
        color: var(--coral);
        box-shadow: var(--shadow-sm);
        transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
      }
      .hiw-step:hover .hiw-num {
        transform: translateY(-4px) scale(1.06);
        box-shadow: var(--shadow-md);
        border-color: var(--coral);
      }
      .hiw-step h3 {
        font-family: "Fraunces", serif;
        font-weight: 600;
        font-size: 20px;
        margin: 0 0 8px;
      }
      .hiw-step p {
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.55;
        margin: 0;
        max-width: 280px;
        margin: 0 auto;
      }
      @media (max-width: 700px) {
        .hiw-steps {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .hiw-steps::before {
          display: none;
        }
      }

      /* ---------- #10 HAMBURGER MENU ---------- */
      .hamburger {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        width: 36px;
        height: 36px;
        position: relative;
        padding: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }
      .hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform 0.3s, opacity 0.3s;
      }
      .hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger.open span:nth-child(2) {
        opacity: 0;
      }
      .hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .mobile-menu {
        display: none;
        position: fixed;
        top: 68px;
        left: 0;
        right: 0;
        bottom: 0;
        background: color-mix(in oklab, var(--cream) 96%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 55;
        padding: 32px 28px;
        flex-direction: column;
        gap: 8px;
        animation: menu-in 0.3s ease;
      }
      .mobile-menu.open {
        display: flex;
      }
      @keyframes menu-in {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .mobile-menu a {
        font-size: 18px;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        transition: color 0.2s;
      }
      .mobile-menu a:hover {
        color: var(--coral);
      }
      .mobile-menu .btn {
        margin-top: 16px;
        justify-content: center;
      }

      @media (max-width: 980px) {
        .hamburger {
          display: flex;
        }
      }

      /* ---------- #11 SECTION HEADING ACCENT ---------- */

      /* ---------- #12 GLOBAL NOISE TEXTURE ---------- */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.025;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
        mix-blend-mode: overlay;
      }

      /* ---------- #2 HERO PARALLAX ---------- */
      .hero-blob {
        will-change: transform;
      }

      /* ---------- TEXTURE: DOT GRID (#1) ---------- */
      .dot-grid {
        position: relative;
      }
      .dot-grid::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.08;
        background-image: radial-gradient(
          circle,
          var(--ink) 0.8px,
          transparent 0.8px
        );
        background-size: 28px 28px;
      }
      .dot-grid > * {
        position: relative;
        z-index: 1;
      }

      /* ---------- TEXTURE: TOPOGRAPHIC LINES (#3) ---------- */
      .topo-bg {
        position: relative;
      }
      .topo-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.04;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='none' stroke='%231F140E' stroke-width='1.2'><ellipse cx='300' cy='300' rx='280' ry='180'/><ellipse cx='300' cy='300' rx='240' ry='150'/><ellipse cx='300' cy='300' rx='200' ry='120'/><ellipse cx='300' cy='300' rx='160' ry='90'/><ellipse cx='300' cy='300' rx='120' ry='60'/><ellipse cx='300' cy='300' rx='80' ry='35'/><ellipse cx='150' cy='150' rx='120' ry='80' transform='rotate(-25 150 150)'/><ellipse cx='150' cy='150' rx='85' ry='55' transform='rotate(-25 150 150)'/><ellipse cx='150' cy='150' rx='50' ry='30' transform='rotate(-25 150 150)'/><ellipse cx='480' cy='450' rx='100' ry='70' transform='rotate(15 480 450)'/><ellipse cx='480' cy='450' rx='65' ry='42' transform='rotate(15 480 450)'/><ellipse cx='480' cy='450' rx='30' ry='18' transform='rotate(15 480 450)'/></svg>");
        background-size: 600px 600px;
      }
      .topo-bg > * {
        position: relative;
        z-index: 1;
      }

      /* ---------- TEXTURE: GRADIENT MESH PER SECTION (#4) ---------- */
      #features {
        background: radial-gradient(
            ellipse 60% 50% at 10% 80%,
            color-mix(in oklab, var(--coral-glow) 40%, transparent),
            transparent 70%
          ),
          radial-gradient(
            ellipse 50% 60% at 90% 20%,
            color-mix(in oklab, var(--gold) 18%, transparent),
            transparent 70%
          ),
          var(--cream);
      }
      .how-it-works {
        background: radial-gradient(
            ellipse 55% 50% at 80% 90%,
            color-mix(in oklab, var(--coral-soft) 20%, transparent),
            transparent 65%
          ),
          radial-gradient(
            ellipse 50% 50% at 15% 30%,
            color-mix(in oklab, var(--gold) 15%, transparent),
            transparent 65%
          ),
          var(--paper);
      }
      .together {
        background: radial-gradient(
            ellipse 50% 55% at 85% 70%,
            color-mix(in oklab, var(--coral-glow) 35%, transparent),
            transparent 65%
          ),
          radial-gradient(
            ellipse 60% 45% at 10% 30%,
            color-mix(in oklab, var(--gold) 20%, transparent),
            transparent 70%
          ),
          var(--cream);
      }
      .gallery {
        background: radial-gradient(
            ellipse 55% 50% at 50% 50%,
            color-mix(in oklab, var(--coral) 8%, transparent),
            transparent 70%
          ),
          radial-gradient(
            ellipse 45% 50% at 5% 80%,
            color-mix(in oklab, var(--gold) 14%, transparent),
            transparent 60%
          ),
          var(--cream);
      }
      .themes {
        background: radial-gradient(
            ellipse 50% 60% at 90% 80%,
            color-mix(in oklab, var(--coral-soft) 22%, transparent),
            transparent 65%
          ),
          radial-gradient(
            ellipse 55% 40% at 20% 20%,
            color-mix(in oklab, var(--gold) 16%, transparent),
            transparent 65%
          ),
          linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
      }
      #pricing {
        background: radial-gradient(
            ellipse 50% 50% at 70% 80%,
            color-mix(in oklab, var(--coral-glow) 30%, transparent),
            transparent 65%
          ),
          radial-gradient(
            ellipse 45% 55% at 20% 20%,
            color-mix(in oklab, var(--gold) 15%, transparent),
            transparent 65%
          ),
          var(--cream);
      }
      .faq {
        background: radial-gradient(
            ellipse 60% 45% at 85% 30%,
            color-mix(in oklab, var(--coral-soft) 18%, transparent),
            transparent 60%
          ),
          radial-gradient(
            ellipse 50% 50% at 10% 80%,
            color-mix(in oklab, var(--gold) 14%, transparent),
            transparent 65%
          ),
          var(--cream);
      }