<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upgrade to Pro | vCard Generator</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <style>
        /* ═══════════ RESET ═══════════ */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        /* ═══════════ BASE ═══════════ */
        :root {
            --cyan: #00c4cc;
            --cyan-hover: #00a9b0;
            --cyan-glow: rgba(0, 196, 204, .25);
            --cyan-soft: rgba(0, 196, 204, .08);
            --gold: #d4af37;
            --gold-soft: #f5e6a8;
            --gold-glow: rgba(212, 175, 55, .22);
            --green: #22c55e;
            --amber: #f59e0b;
            --dark: #0a0e14;
            --ink: #050810;
            --surface: #fafbfc;
            --card: #ffffff;
            --border: #e8ecf1;
            --border-soft: rgba(148, 163, 184, .14);
            --text-primary: #0a0f1c;
            --text-secondary: #475569;
            --text-tertiary: #94a3b8;
            --serif: 'Instrument Serif', 'Times New Roman', serif;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --radius-sm: 10px;
            --shadow-sm: 0 1px 2px rgba(10, 15, 28, .04), 0 2px 8px rgba(10, 15, 28, .04);
            --shadow-md: 0 4px 14px rgba(10, 15, 28, .06), 0 12px 32px rgba(10, 15, 28, .06);
            --shadow-lg: 0 8px 28px rgba(10, 15, 28, .08), 0 24px 60px rgba(10, 15, 28, .1);
            --noise: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--surface);
            color: var(--text-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-feature-settings: 'ss01', 'cv11';
        }
        ::selection { background: var(--cyan); color: #fff; }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
            vertical-align: middle;
            line-height: 1;
        }

        /* ═══════════ SCROLL REVEAL ═══════════ */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        .reveal-stagger > * {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
            transition-delay: calc(var(--i, 0) * 80ms);
        }
        .reveal-stagger.visible > * {
            opacity: 1;
            transform: translateY(0);
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .001ms !important;
            }
        }

        /* ═══════════ URGENCY BANNER ═══════════ */
        .urgency-banner {
            background: linear-gradient(90deg, #050810 0%, #0f172a 50%, #050810 100%);
            padding: 11px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-bottom: 1px solid rgba(212, 175, 55, .15);
        }
        .urgency-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .14), transparent);
            animation: shimmer 4s ease-in-out infinite;
        }
        @keyframes shimmer {
            0%, 100% { transform: translateX(-100%); }
            50% { transform: translateX(100%); }
        }
        .urgency-banner p {
            position: relative;
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,.85);
            letter-spacing: .04em;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .urgency-banner em {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            color: var(--gold-soft);
            font-size: 14px;
            letter-spacing: 0;
        }
        .urgency-banner .dot {
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: var(--gold);
            box-shadow: 0 0 0 4px rgba(212, 175, 55, .15);
            animation: pulse-dot 2s ease-in-out infinite;
        }
        @keyframes pulse-dot {
            0%, 100% { box-shadow: 0 0 0 4px rgba(212, 175, 55, .15); }
            50% { box-shadow: 0 0 0 8px rgba(212, 175, 55, .05); }
        }

        /* ═══════════ HEADER ═══════════ */
        .page-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(255,255,255,.88);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid var(--border);
            padding: 14px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header-left h1 {
            font-size: 16px;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text-primary);
        }
        .header-left p {
            font-size: 11px;
            color: var(--text-tertiary);
            margin-top: 1px;
        }
        .header-cta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 999px;
            background: var(--cyan);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            transition: all .2s ease;
            box-shadow: 0 2px 12px var(--cyan-glow);
        }
        .header-cta:hover {
            background: var(--cyan-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 18px rgba(0,196,204,.35);
        }
        .header-cta .material-symbols-outlined { font-size: 16px; }

        /* ═══════════ MAIN ═══════════ */
        .page-main {
            flex: 1;
            overflow-y: auto;
            padding: 0 20px 32px;
        }
        .page-inner {
            max-width: 1120px;
            margin: 0 auto;
        }

        /* ═══════════ HERO ═══════════ */
        .hero {
            position: relative;
            overflow: hidden;
            border-radius: 0 0 var(--radius-xl) var(--radius-xl);
            padding: 56px 44px 48px;
            margin: 0 -20px 40px;
            background:
                radial-gradient(1200px 600px at 80% -10%, rgba(212, 175, 55, .12), transparent 60%),
                radial-gradient(800px 500px at 0% 100%, rgba(0, 196, 204, .14), transparent 60%),
                linear-gradient(135deg, #050810 0%, #0a0f1c 50%, #050810 100%);
            border: 1px solid rgba(212, 175, 55, .08);
            border-top: none;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -30%;
            width: 80%;
            height: 160%;
            background: radial-gradient(ellipse, rgba(0,196,204,.16) 0%, transparent 60%);
            animation: hero-glow 12s ease-in-out infinite alternate;
            pointer-events: none;
        }
        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--noise);
            opacity: .35;
            mix-blend-mode: overlay;
            pointer-events: none;
        }
        @keyframes hero-glow {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(30px, -20px) scale(1.1); }
        }
        .hero-inner {
            position: relative;
            z-index: 1;
            max-width: 1120px;
            margin: 0 auto;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 14px 7px 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(212, 175, 55, .14), rgba(212, 175, 55, .06));
            border: 1px solid rgba(212, 175, 55, .25);
            color: var(--gold-soft);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 24px;
            backdrop-filter: blur(8px);
        }
        .hero-badge-dot {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--gold), #b8941f);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 12px rgba(212, 175, 55, .4);
        }
        .hero-badge-dot .material-symbols-outlined {
            font-size: 11px;
            color: #050810;
            font-variation-settings: 'FILL' 1, 'wght' 700;
        }
        .hero-badge .material-symbols-outlined {
            font-size: 14px;
            font-variation-settings: 'FILL' 1;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            gap: 36px;
            align-items: center;
        }
        .hero-title {
            font-size: clamp(32px, 4.8vw, 54px);
            line-height: 1.02;
            letter-spacing: -0.045em;
            font-weight: 800;
            color: #fff;
        }
        .hero-title em {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 50%, #b8941f 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            padding-right: 4px;
        }
        .hero-copy {
            font-size: 15px;
            line-height: 1.7;
            color: rgba(255,255,255,.65);
            max-width: 52ch;
            margin-top: 16px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px;
        }
        .hero-btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 15px 28px;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--cyan) 0%, #06b6d4 100%);
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: -0.01em;
            transition: all .3s cubic-bezier(.16,1,.3,1);
            box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 28px var(--cyan-glow);
            position: relative;
            overflow: hidden;
        }
        .hero-btn-primary::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
            transform: translateX(-100%);
            transition: transform .5s ease;
        }
        .hero-btn-primary:hover::after { transform: translateX(100%); }
        .hero-btn-primary:hover {
            background: var(--cyan-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,196,204,.4);
        }
        .hero-btn-ghost {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 24px;
            border-radius: var(--radius-sm);
            border: 1.5px solid rgba(255,255,255,.15);
            color: rgba(255,255,255,.8);
            background: transparent;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            transition: all .2s ease;
        }
        .hero-btn-ghost:hover {
            border-color: var(--cyan);
            color: var(--cyan);
            background: rgba(0,196,204,.06);
        }

        /* Hero right - social proof */
        .hero-stats {
            display: grid;
            gap: 12px;
        }
        .stat-card {
            border-radius: 18px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.08);
            backdrop-filter: blur(12px);
            padding: 18px 20px;
            transition: all .3s ease;
        }
        .stat-card:hover {
            background: rgba(255,255,255,.1);
            border-color: rgba(0,196,204,.2);
            transform: translateY(-2px);
        }
        .stat-number {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #fff;
            line-height: 1;
        }
        .stat-number span { color: var(--cyan); }
        .stat-label {
            font-size: 12px;
            color: rgba(255,255,255,.5);
            font-weight: 600;
            margin-top: 4px;
        }
        .stat-stars {
            display: flex;
            gap: 2px;
            margin-top: 6px;
        }
        .stat-stars .material-symbols-outlined {
            font-size: 16px;
            color: var(--amber);
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        }

        /* Hero bottom proof pills */
        .proof-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,.06);
        }
        .proof-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.08);
            font-size: 12px;
            font-weight: 600;
            color: rgba(255,255,255,.6);
        }
        .proof-pill .material-symbols-outlined {
            font-size: 15px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        }

        /* ═══════════ FEATURES SHOWCASE ═══════════ */
        .features-showcase {
            margin-bottom: 36px;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }
        .feature-item {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 20px 16px;
            text-align: center;
            transition: all .3s ease;
        }
        .feature-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(15,23,42,.08);
            border-color: rgba(0,196,204,.3);
        }
        .feature-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .feature-icon .material-symbols-outlined {
            font-size: 22px;
            font-variation-settings: 'FILL' 1;
        }
        .fi-cyan { background: rgba(0,196,204,.1); }
        .fi-cyan .material-symbols-outlined { color: var(--cyan); }
        .fi-purple { background: rgba(139,92,246,.1); }
        .fi-purple .material-symbols-outlined { color: #8b5cf6; }
        .fi-green { background: rgba(34,197,94,.1); }
        .fi-green .material-symbols-outlined { color: #22c55e; }
        .fi-amber { background: rgba(245,158,11,.1); }
        .fi-amber .material-symbols-outlined { color: #f59e0b; }
        .feature-item strong {
            display: block;
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .feature-item p {
            font-size: 12px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-top: 4px;
        }

        /* ═══════════ SECTION HEADER ═══════════ */
        .section-header {
            text-align: center;
            margin-bottom: 32px;
        }
        .section-header h2 {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -0.04em;
            color: var(--text-primary);
            line-height: 1.1;
        }
        .section-header h2 em {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            color: var(--cyan);
            letter-spacing: -0.02em;
        }
        .section-header p {
            font-size: 14px;
            color: var(--text-secondary);
            margin-top: 8px;
            max-width: 52ch;
            margin-left: auto;
            margin-right: auto;
        }
        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            background: var(--cyan-soft);
            font-size: 11px;
            font-weight: 800;
            color: var(--cyan);
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: 10px;
        }

        /* ═══════════ GUARANTEE BAR ═══════════ */
        .guarantee-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .guarantee-bar .material-symbols-outlined {
            font-size: 18px;
            color: var(--green);
            font-variation-settings: 'FILL' 1;
        }
        .guarantee-bar p {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* ═══════════ CARD BASE ═══════════ */
        .pricing-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            align-items: stretch;
            gap: 20px;
        }
        .plan-card {
            background: var(--card);
            border: 1.5px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            display: flex;
            flex-direction: column;
            gap: 18px;
            min-height: 100%;
            transition: all .35s cubic-bezier(.16,1,.3,1);
            position: relative;
            overflow: hidden;
        }
        .plan-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--border);
            transition: background .3s ease;
        }
        .plan-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 48px rgba(15,23,42,.1);
        }

        /* ═══════════ FREE CARD (monthly) ═══════════ */
        .plan-card.free::before { background: var(--text-tertiary); }
        .plan-card.free:hover {
            box-shadow: 0 12px 32px rgba(0,0,0,.08);
        }

        /* ═══════════ PRO CARD ═══════════ */
        .plan-card.pro {
            border: 2px solid var(--cyan);
            background: linear-gradient(180deg, #f0fdfd 0%, #ffffff 40%);
            box-shadow: 0 8px 32px var(--cyan-glow), 0 2px 8px rgba(0,0,0,.04);
        }
        .plan-card.pro::before {
            height: 4px;
            background: linear-gradient(90deg, var(--cyan), #06b6d4);
        }
        .plan-card.pro:hover {
            box-shadow: 0 16px 48px var(--cyan-glow), 0 4px 12px rgba(0,0,0,.06);
        }

        /* ═══════════ FEATURED CARD (one-time) ═══════════ */
        .plan-card.featured {
            border: 1px solid rgba(212, 175, 55, .25);
            background:
                radial-gradient(600px 300px at 100% 0%, rgba(212, 175, 55, .12), transparent 60%),
                linear-gradient(180deg, #0a0f1c 0%, #050810 100%);
            box-shadow: 0 20px 60px rgba(10, 15, 28, .35), 0 1px 0 rgba(212, 175, 55, .15) inset;
            transform: scale(1.04);
            z-index: 2;
        }
        .plan-card.featured::before {
            height: 4px;
            background: linear-gradient(90deg, var(--gold-soft), var(--gold), #b8941f, var(--gold));
            background-size: 200% 100%;
            animation: gradient-shift 4s ease infinite;
        }
        .plan-card.featured::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--noise);
            opacity: .25;
            mix-blend-mode: overlay;
            pointer-events: none;
        }
        @keyframes gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .plan-card.featured:hover {
            box-shadow: 0 28px 64px rgba(15, 23, 42, .32);
            transform: translateY(-6px) scale(1.04);
        }
        .plan-card.featured .plan-name h3,
        .plan-card.featured .price-amount,
        .plan-card.featured .plan-card-note,
        .plan-card.featured .price-caption,
        .plan-card.featured .feature-chip {
            color: #fff;
        }
        .plan-card.featured .plan-subtitle,
        .plan-card.featured .micro-copy {
            color: rgba(255,255,255,.6);
        }
        .plan-card.featured .divider {
            background: rgba(255,255,255,.1);
        }
        .plan-card.featured .feature-chip {
            background: rgba(255,255,255,.07);
            border-color: rgba(255,255,255,.1);
        }
        .plan-card.featured .btn-primary {
            background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
            color: #050810;
            box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 28px var(--gold-glow);
        }
        .plan-card.featured .btn-primary:hover {
            background: linear-gradient(135deg, #fff5cf 0%, var(--gold-soft) 100%);
            color: #050810;
            box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 36px rgba(212, 175, 55, .35);
        }
        .plan-card.featured .savings-tag {
            background: rgba(212, 175, 55, .15);
            color: var(--gold-soft);
        }
        .plan-card.featured .plan-name .star-icon {
            color: var(--gold);
        }

        /* ═══════════ BADGE ═══════════ */
        .badge {
            position: absolute;
            top: -1px;
            right: 20px;
            padding: 5px 16px 7px;
            border-radius: 0 0 10px 10px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .06em;
        }
        .badge-cyan {
            background: var(--cyan);
            color: #fff;
            box-shadow: 0 4px 12px var(--cyan-glow);
        }
        .badge-dark {
            background: linear-gradient(135deg, #0f172a, #334155);
            color: #fff;
            box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
        }
        .badge-gradient {
            background: linear-gradient(135deg, var(--gold-soft), var(--gold), #b8941f);
            color: #050810;
            box-shadow: 0 4px 16px rgba(212, 175, 55, .35);
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .badge-gradient::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: #050810;
            box-shadow: 0 0 0 2px rgba(5, 8, 16, .15);
        }

        /* ═══════════ PLAN HEADER ═══════════ */
        .plan-name {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .plan-name h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--text-primary);
        }
        .plan-name .star-icon {
            font-size: 18px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
        }
        .plan-subtitle {
            font-size: 12px;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .plan-card-note {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
            line-height: 1.5;
        }

        /* ═══════════ PRICE ═══════════ */
        .price-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .price-amount {
            font-size: 42px;
            font-weight: 800;
            letter-spacing: -0.05em;
            line-height: 1;
            color: var(--text-primary);
            font-feature-settings: 'tnum';
        }
        .price-period {
            font-size: 13px;
            color: var(--text-tertiary);
            font-weight: 500;
        }
        .price-caption {
            font-size: 12px;
            color: var(--text-secondary);
            margin-top: -6px;
        }
        .savings-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(34,197,94,.15);
            color: #16a34a;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .feature-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .feature-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, .16);
            background: rgba(148, 163, 184, .05);
            font-size: 11px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .feature-chip .material-symbols-outlined {
            font-size: 14px;
            font-variation-settings: 'FILL' 1;
        }
        .micro-copy {
            font-size: 12px;
            color: var(--text-tertiary);
            line-height: 1.6;
        }

        /* ═══════════ FEATURES LIST ═══════════ */
        .features-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }
        .features-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .features-list li .material-symbols-outlined {
            font-size: 18px;
            color: var(--green);
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
            flex-shrink: 0;
        }
        .plan-card.pro .features-list li {
            color: var(--text-primary);
            font-weight: 600;
        }
        .plan-card.featured .features-list li {
            color: rgba(255,255,255,.75);
        }
        .plan-card.featured .features-list li .material-symbols-outlined {
            color: var(--cyan);
        }

        /* ═══════════ BUTTONS ═══════════ */
        .btn {
            display: block;
            width: 100%;
            padding: 14px 16px;
            border-radius: var(--radius-sm);
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            border: none;
            transition: all .25s ease;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            margin-top: auto;
        }
        .btn-secondary {
            background: transparent;
            border: 1.5px solid var(--border);
            color: var(--text-secondary);
        }
        .btn-secondary:hover {
            border-color: var(--cyan);
            color: var(--cyan);
            background: rgba(0, 196, 204, .04);
            transform: translateY(-1px);
        }
        .btn-primary {
            background: var(--cyan);
            color: #fff;
            box-shadow: 0 4px 16px var(--cyan-glow);
        }
        .btn-primary:hover {
            background: var(--cyan-hover);
            box-shadow: 0 8px 28px rgba(0, 196, 204, .4);
            transform: translateY(-2px);
        }
        .btn-glow {
            animation: btn-pulse 2.5s ease-in-out infinite;
        }
        @keyframes btn-pulse {
            0%, 100% { box-shadow: 0 4px 16px var(--cyan-glow); }
            50% { box-shadow: 0 4px 28px rgba(0, 196, 204, .45); }
        }

        /* ═══════════ DIVIDER ═══════════ */
        .divider {
            height: 1px;
            background: var(--border);
        }

        /* ═══════════ TESTIMONIALS ═══════════ */
        .testimonials {
            margin-top: 44px;
            margin-bottom: 40px;
        }
        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .testimonial-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 22px;
            transition: all .3s ease;
        }
        .testimonial-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(15,23,42,.06);
        }
        .testimonial-stars {
            display: flex;
            gap: 2px;
            margin-bottom: 12px;
        }
        .testimonial-stars .material-symbols-outlined {
            font-size: 16px;
            color: var(--amber);
            font-variation-settings: 'FILL' 1;
        }
        .testimonial-card blockquote {
            font-family: var(--serif);
            font-size: 18px;
            color: var(--text-primary);
            line-height: 1.45;
            letter-spacing: -0.01em;
            font-style: italic;
            font-weight: 400;
        }
        .testimonial-card blockquote::before {
            content: '“';
            font-family: var(--serif);
            color: var(--cyan);
            font-size: 28px;
            line-height: 0;
            margin-right: 2px;
            vertical-align: -6px;
        }
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
        }
        .testimonial-avatar {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 800;
            color: #fff;
        }
        .ta-1 { background: linear-gradient(135deg, var(--cyan), #06b6d4); }
        .ta-2 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
        .ta-3 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
        .testimonial-author strong {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .testimonial-author strong .material-symbols-outlined {
            font-size: 14px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1;
        }
        .testimonial-author span {
            font-size: 11px;
            color: var(--text-tertiary);
        }

        /* ═══════════ COMPARISON TABLE ═══════════ */
        .comparison-section {
            margin-bottom: 36px;
        }
        .comparison-table {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }
        .comparison-row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            border-bottom: 1px solid rgba(226,232,240,.6);
        }
        .comparison-row:last-child { border-bottom: none; }
        .comparison-row.header-row {
            background: #f8fafc;
        }
        .comparison-cell {
            padding: 14px 18px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
        }
        .comparison-cell:not(:first-child) {
            justify-content: center;
            text-align: center;
        }
        .comparison-row.header-row .comparison-cell {
            font-weight: 800;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--text-primary);
            padding: 12px 18px;
        }
        .comparison-cell .material-symbols-outlined {
            font-size: 20px;
            font-variation-settings: 'FILL' 1;
        }
        .check-yes { color: var(--green); }
        .check-no { color: #e2e8f0; }

        /* ═══════════ SUPPORT & TRUST PANEL ═══════════ */
        .support-panel {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 18px;
            margin-top: 8px;
            margin-bottom: 28px;
        }
        .support-card,
        .trust-card {
            background: #fff;
            border: 1px solid rgba(148, 163, 184, .18);
            border-radius: 22px;
            padding: 24px;
            box-shadow: 0 8px 28px rgba(15, 23, 42, .04);
            transition: all .3s ease;
        }
        .support-card:hover,
        .trust-card:hover {
            box-shadow: 0 14px 40px rgba(15,23,42,.08);
        }
        .support-card h3,
        .trust-card h3,
        .faq-section h3 {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: var(--text-primary);
        }
        .support-card p,
        .trust-card p,
        .faq-section p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.65;
            margin-top: 8px;
        }
        .support-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px;
        }
        .support-meta span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 12px;
            border-radius: 999px;
            background: rgba(0, 196, 204, .06);
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
        }
        .support-meta .material-symbols-outlined {
            font-size: 16px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        }
        .support-link {
            margin-top: 16px;
            width: fit-content;
        }
        .trust-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 16px;
        }
        .trust-point {
            border-radius: 14px;
            padding: 14px;
            background: #f8fafc;
            border: 1px solid rgba(148, 163, 184, .14);
            transition: all .3s ease;
        }
        .trust-point:hover {
            background: #fff;
            border-color: rgba(0,196,204,.2);
        }
        .trust-point strong {
            display: block;
            font-size: 13px;
            font-weight: 800;
            color: var(--text-primary);
            margin-top: 8px;
        }
        .trust-point p {
            margin-top: 4px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .trust-point .material-symbols-outlined {
            font-size: 20px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        }

        /* ═══════════ FAQ ═══════════ */
        .faq-section {
            margin-top: 4px;
            margin-bottom: 32px;
        }
        .faq-list {
            display: grid;
            gap: 10px;
            margin-top: 16px;
        }
        .faq-item {
            background: #fff;
            border: 1px solid rgba(148, 163, 184, .18);
            border-radius: 16px;
            overflow: hidden;
            transition: all .3s ease;
        }
        .faq-item:hover {
            border-color: rgba(0,196,204,.2);
        }
        .faq-item.open {
            border-color: rgba(0,196,204,.3);
            box-shadow: 0 4px 16px rgba(0,196,204,.06);
        }
        .faq-question {
            width: 100%;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 20px;
            text-align: left;
            cursor: pointer;
            font-size: 14px;
            font-weight: 800;
            color: var(--text-primary);
            font-family: inherit;
        }
        .faq-question .material-symbols-outlined {
            font-size: 20px;
            color: var(--text-tertiary);
            transition: transform .3s cubic-bezier(.16,1,.3,1);
        }
        .faq-item.open .faq-question .material-symbols-outlined {
            transform: rotate(180deg);
            color: var(--cyan);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s cubic-bezier(.16,1,.3,1), padding .35s ease;
            padding: 0 20px;
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.7;
        }
        .faq-item.open .faq-answer {
            max-height: 300px;
            padding: 0 20px 18px;
        }

        /* ═══════════ FOOTER ═══════════ */
        .page-footer {
            text-align: center;
            padding: 20px 0 12px;
        }
        .page-footer p {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        .page-footer a {
            color: var(--cyan);
            font-weight: 600;
            text-decoration: none;
        }
        .page-footer a:hover { text-decoration: underline; }

        /* ═══════════ WHATSAPP WIDGET ═══════════ */
        .wa-widget {
            position: fixed;
            bottom: 28px;
            right: 24px;
            z-index: 200;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }
        .wa-tooltip {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 10px 14px;
            box-shadow: 0 8px 28px rgba(15,23,42,.12);
            font-size: 13px;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transform: translateY(6px) scale(.96);
            transform-origin: bottom right;
            transition: opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
        }
        .wa-tooltip span {
            display: block;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .wa-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            right: 22px;
            width: 10px;
            height: 10px;
            background: #fff;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transform: rotate(45deg);
        }
        .wa-tooltip { position: relative; }
        .wa-widget:hover .wa-tooltip,
        .wa-widget.open .wa-tooltip {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .wa-btn {
            width: 56px;
            height: 56px;
            border-radius: 999px;
            background: #25d366;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 24px rgba(37,211,102,.38);
            transition: all .25s cubic-bezier(.16,1,.3,1);
            text-decoration: none;
            position: relative;
        }
        .wa-btn::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 999px;
            background: rgba(37,211,102,.25);
            animation: wa-ring 2.4s ease-out infinite;
        }
        .wa-btn::after {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 999px;
            background: rgba(37,211,102,.12);
            animation: wa-ring 2.4s ease-out .5s infinite;
        }
        @keyframes wa-ring {
            0% { transform: scale(.9); opacity: .8; }
            80%, 100% { transform: scale(1.35); opacity: 0; }
        }
        .wa-btn:hover {
            background: #1ebe5d;
            transform: scale(1.08);
            box-shadow: 0 10px 32px rgba(37,211,102,.48);
        }
        .wa-btn svg {
            width: 28px;
            height: 28px;
            fill: #fff;
            position: relative;
            z-index: 1;
        }
        @media (max-width: 720px) {
            .wa-widget {
                bottom: 82px;
                right: 16px;
            }
            .wa-btn { width: 50px; height: 50px; }
            .wa-btn svg { width: 24px; height: 24px; }
        }

        /* ═══════════ STICKY MOBILE CTA ═══════════ */
        .sticky-cta {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: rgba(255,255,255,.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            padding: 12px 20px;
            box-shadow: 0 -4px 20px rgba(15,23,42,.08);
        }
        .sticky-cta a {
            display: block;
            width: 100%;
            padding: 14px;
            border-radius: var(--radius-sm);
            background: var(--cyan);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 4px 16px var(--cyan-glow);
        }

        /* ═══════════ ANIMATIONS ═══════════ */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        @keyframes orb-drift-1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, -30px) scale(1.1); }
            66% { transform: translate(-20px, 40px) scale(.95); }
        }
        @keyframes orb-drift-2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-50px, 30px) scale(1.15); }
        }
        @keyframes orb-drift-3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            40% { transform: translate(30px, 40px) scale(1.05); }
            80% { transform: translate(-30px, -20px) scale(.9); }
        }
        @keyframes price-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes scroll-marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        @keyframes card-glow-pulse {
            0%, 100% { box-shadow: 0 20px 60px rgba(10, 15, 28, .35), 0 1px 0 rgba(212, 175, 55, .15) inset, 0 0 0 0 rgba(212, 175, 55, 0); }
            50% { box-shadow: 0 20px 60px rgba(10, 15, 28, .35), 0 1px 0 rgba(212, 175, 55, .25) inset, 0 0 60px rgba(212, 175, 55, .12); }
        }
        @keyframes border-rotate {
            from { --angle: 0deg; }
            to { --angle: 360deg; }
        }
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes shine {
            0% { transform: translateX(-100%) skewX(-20deg); }
            60%, 100% { transform: translateX(220%) skewX(-20deg); }
        }
        @keyframes underline-grow {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        /* ═══════════ FLOATING ORBS ═══════════ */
        .orbs {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 0;
        }
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: .55;
            will-change: transform;
        }
        .orb-1 {
            top: -10%;
            left: 10%;
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, rgba(0, 196, 204, .55), transparent 70%);
            animation: orb-drift-1 18s ease-in-out infinite;
        }
        .orb-2 {
            top: 30%;
            right: 5%;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(212, 175, 55, .45), transparent 70%);
            animation: orb-drift-2 22s ease-in-out infinite;
        }
        .orb-3 {
            bottom: -10%;
            left: 35%;
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, rgba(139, 92, 246, .35), transparent 70%);
            animation: orb-drift-3 26s ease-in-out infinite;
        }

        /* ═══════════ ANIMATED GRADIENT TEXT ═══════════ */
        .hero-title em {
            background-size: 200% 200%;
            animation: gradient-shift 8s ease infinite;
        }

        /* ═══════════ HERO CTA SHINE ═══════════ */
        .hero-btn-primary {
            isolation: isolate;
        }
        .hero-btn-primary > span {
            position: relative;
            z-index: 1;
        }

        /* ═══════════ MAGNETIC HOVER (handled in JS, but smoothed here) ═══════════ */
        [data-magnetic] {
            transition: transform .35s cubic-bezier(.16, 1, .3, 1);
            will-change: transform;
        }

        /* ═══════════ CARD CURSOR GLOW (featured) ═══════════ */
        .plan-card.featured {
            animation: card-glow-pulse 4s ease-in-out infinite;
        }
        .plan-card.featured .card-cursor-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, .18), transparent 50%);
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
            z-index: 0;
        }
        .plan-card.featured:hover .card-cursor-glow {
            opacity: 1;
        }
        .plan-card.featured > *:not(.card-cursor-glow):not(.badge):not(.shine-overlay) {
            position: relative;
            z-index: 1;
        }
        .plan-card .shine-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
            transform: translateX(-100%) skewX(-20deg);
            pointer-events: none;
            z-index: 2;
        }
        .plan-card:hover .shine-overlay {
            animation: shine 1.2s ease forwards;
        }

        /* ═══════════ ANIMATED PRICE SHIMMER ═══════════ */
        .price-amount {
            background: linear-gradient(90deg, currentColor 0%, currentColor 40%, rgba(0, 196, 204, .85) 50%, currentColor 60%, currentColor 100%);
            background-size: 200% 100%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: price-shimmer 3.5s ease-in-out infinite;
            animation-delay: 1s;
        }
        .plan-card.featured .price-amount {
            background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--gold-soft) 50%, #fff 60%, #fff 100%);
            background-size: 200% 100%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* ═══════════ TRUSTED-BY MARQUEE ═══════════ */
        .marquee-section {
            margin: 8px 0 36px;
            padding: 18px 0;
            position: relative;
            overflow: hidden;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background: linear-gradient(90deg, #fff 0%, #fafbfc 50%, #fff 100%);
        }
        .marquee-section::before,
        .marquee-section::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }
        .marquee-section::before {
            left: 0;
            background: linear-gradient(90deg, var(--surface), transparent);
        }
        .marquee-section::after {
            right: 0;
            background: linear-gradient(-90deg, var(--surface), transparent);
        }
        .marquee-label {
            display: block;
            text-align: center;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--text-tertiary);
            margin-bottom: 14px;
        }
        .marquee {
            display: flex;
            gap: 56px;
            width: max-content;
            animation: scroll-marquee 32s linear infinite;
        }
        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-tertiary);
            white-space: nowrap;
            letter-spacing: -0.01em;
            transition: color .3s ease;
        }
        .marquee-item:hover { color: var(--text-primary); }
        .marquee-item .material-symbols-outlined {
            font-size: 18px;
            color: var(--cyan);
            font-variation-settings: 'FILL' 1;
        }

        /* ═══════════ AVATAR STACK ═══════════ */
        .avatar-stack {
            display: inline-flex;
            align-items: center;
            margin-top: 12px;
        }
        .avatar-stack-imgs {
            display: inline-flex;
        }
        .avatar-stack-imgs > div {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            border: 2px solid #0a0f1c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 800;
            color: #fff;
            margin-left: -8px;
            box-shadow: 0 2px 8px rgba(0,0,0,.3);
            transition: transform .3s cubic-bezier(.16,1,.3,1);
        }
        .avatar-stack-imgs > div:first-child { margin-left: 0; }
        .avatar-stack:hover .avatar-stack-imgs > div {
            transform: translateX(0);
        }
        .avatar-stack-imgs > div:nth-child(1) { background: linear-gradient(135deg, #00c4cc, #06b6d4); }
        .avatar-stack-imgs > div:nth-child(2) { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
        .avatar-stack-imgs > div:nth-child(3) { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
        .avatar-stack-imgs > div:nth-child(4) { background: linear-gradient(135deg, #ef4444, #f87171); }
        .avatar-stack-imgs > div:nth-child(5) {
            background: linear-gradient(135deg, var(--gold), #b8941f);
            color: #050810;
        }
        .avatar-stack-text {
            margin-left: 12px;
            font-size: 12px;
            color: rgba(255,255,255,.6);
            font-weight: 500;
        }
        .avatar-stack-text strong {
            color: #fff;
            font-weight: 700;
        }

        /* ═══════════ FEATURE ITEM ANIMATED BORDER ═══════════ */
        .feature-item {
            position: relative;
            isolation: isolate;
        }
        .feature-item::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            padding: 1px;
            background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(0, 196, 204, .35) 100%);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
        }
        .feature-item:hover::after { opacity: 1; }
        .feature-item .feature-icon {
            transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
        }
        .feature-item:hover .feature-icon {
            transform: scale(1.12) rotate(-4deg);
        }

        /* ═══════════ KICKER UNDERLINE ═══════════ */
        .section-kicker {
            position: relative;
        }

        /* ═══════════ SECTION HEADER ITALIC GROW ═══════════ */
        .section-header h2 em {
            display: inline-block;
            position: relative;
        }
        .section-header h2 em::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 2px;
            background: linear-gradient(90deg, var(--cyan), transparent);
            transform-origin: left;
            transform: scaleX(0);
            transition: transform .8s cubic-bezier(.16, 1, .3, 1);
        }
        .section-header.visible h2 em::after,
        .reveal.visible .section-header h2 em::after {
            transform: scaleX(1);
        }

        /* ═══════════ STAT NUMBER COUNTUP ═══════════ */
        .stat-number {
            font-feature-settings: 'tnum';
        }

        /* ═══════════ TESTIMONIAL CARD HOVER ACCENT ═══════════ */
        .testimonial-card {
            position: relative;
            overflow: hidden;
        }
        .testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--cyan), transparent);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .6s cubic-bezier(.16, 1, .3, 1);
        }
        .testimonial-card:hover::before { transform: scaleX(1); }

        /* ═══════════ FAQ refined ═══════════ */
        .faq-item {
            transition: all .4s cubic-bezier(.16, 1, .3, 1);
        }
        .faq-item:hover {
            transform: translateX(2px);
        }

        /* ═══════════ HEADER BLUR ON SCROLL ═══════════ */
        .page-header.scrolled {
            background: rgba(255, 255, 255, .95);
            box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(10, 15, 28, .04);
        }
        .page-header { transition: all .3s ease; }

        /* ═══════════ STAT CARD KEN BURNS ═══════════ */
        .stat-card { position: relative; overflow: hidden; }
        .stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 196, 204, .12), transparent 50%);
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
        }
        .stat-card:hover::before { opacity: 1; }

        /* ═══════════ DARK MODE TOKENS ═══════════ */
        html { transition: background-color .5s ease; }
        :root[data-theme="dark"] {
            --surface: #07090f;
            --card: #0f1320;
            --border: #1f2535;
            --border-soft: rgba(148, 163, 184, .12);
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-tertiary: #64748b;
            --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
            --shadow-md: 0 4px 14px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
            --shadow-lg: 0 8px 28px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
        }
        :root[data-theme="dark"] body { background: var(--surface); color: var(--text-primary); }
        :root[data-theme="dark"] .page-header {
            background: rgba(7, 9, 15, .85);
            border-bottom-color: var(--border);
        }
        :root[data-theme="dark"] .page-header.scrolled {
            background: rgba(7, 9, 15, .95);
            box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0, 0, 0, .4);
        }
        :root[data-theme="dark"] .header-left h1 { color: var(--text-primary); }
        :root[data-theme="dark"] .feature-item,
        :root[data-theme="dark"] .testimonial-card,
        :root[data-theme="dark"] .comparison-table,
        :root[data-theme="dark"] .support-card,
        :root[data-theme="dark"] .trust-card,
        :root[data-theme="dark"] .faq-item {
            background: var(--card);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .feature-item strong,
        :root[data-theme="dark"] .testimonial-card blockquote,
        :root[data-theme="dark"] .testimonial-author strong,
        :root[data-theme="dark"] .support-card h3,
        :root[data-theme="dark"] .trust-card h3,
        :root[data-theme="dark"] .faq-section h3,
        :root[data-theme="dark"] .faq-question,
        :root[data-theme="dark"] .plan-card .plan-name h3,
        :root[data-theme="dark"] .plan-card .price-amount,
        :root[data-theme="dark"] .plan-card .plan-card-note,
        :root[data-theme="dark"] .comparison-row.header-row .comparison-cell {
            color: var(--text-primary);
        }
        :root[data-theme="dark"] .comparison-row.header-row { background: #131826; }
        :root[data-theme="dark"] .trust-point { background: #131826; border-color: var(--border); }
        :root[data-theme="dark"] .trust-point strong { color: var(--text-primary); }
        :root[data-theme="dark"] .plan-card { background: var(--card); border-color: var(--border); }
        :root[data-theme="dark"] .plan-card.pro {
            background: linear-gradient(180deg, rgba(0,196,204,.06) 0%, var(--card) 40%);
            border-color: var(--cyan);
        }
        :root[data-theme="dark"] .marquee-section {
            background: linear-gradient(90deg, var(--card) 0%, #0a0e18 50%, var(--card) 100%);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .marquee-section::before { background: linear-gradient(90deg, var(--surface), transparent); }
        :root[data-theme="dark"] .marquee-section::after { background: linear-gradient(-90deg, var(--surface), transparent); }
        :root[data-theme="dark"] .feature-chip { background: rgba(148,163,184,.08); border-color: var(--border); }
        :root[data-theme="dark"] .features-list li { color: var(--text-secondary); }
        :root[data-theme="dark"] .plan-card.pro .features-list li { color: var(--text-primary); }
        :root[data-theme="dark"] .btn-secondary { color: var(--text-secondary); border-color: var(--border); }
        :root[data-theme="dark"] .sticky-cta {
            background: rgba(7, 9, 15, .95);
            border-top-color: var(--border);
        }
        :root[data-theme="dark"] .wa-tooltip {
            background: var(--card);
            color: var(--text-primary);
            border-color: var(--border);
        }
        :root[data-theme="dark"] .wa-tooltip::after {
            background: var(--card);
            border-right-color: var(--border);
            border-bottom-color: var(--border);
        }

        /* All cells inside containers respect theme */
        :root[data-theme="dark"] body,
        :root[data-theme="dark"] .feature-item p,
        :root[data-theme="dark"] .support-card p,
        :root[data-theme="dark"] .trust-card p,
        :root[data-theme="dark"] .trust-point p,
        :root[data-theme="dark"] .faq-answer,
        :root[data-theme="dark"] .testimonial-author span,
        :root[data-theme="dark"] .comparison-cell,
        :root[data-theme="dark"] .plan-subtitle,
        :root[data-theme="dark"] .price-caption,
        :root[data-theme="dark"] .section-header p,
        :root[data-theme="dark"] .header-left p,
        :root[data-theme="dark"] .page-footer p {
            color: var(--text-secondary);
        }

        /* Smooth color transitions across theme switch */
        body, .page-header, .feature-item, .testimonial-card, .comparison-table,
        .support-card, .trust-card, .faq-item, .plan-card, .marquee-section,
        .feature-chip, .trust-point, .btn-secondary, .sticky-cta, .wa-tooltip,
        .faq-question, .faq-answer, .features-list li, .comparison-cell,
        .plan-subtitle, .price-caption, .section-header p, .header-left p,
        .header-left h1, .page-footer p {
            transition: background-color .5s ease, color .4s ease, border-color .5s ease, box-shadow .5s ease;
        }

        /* ═══════════ THEME TOGGLE BUTTON ═══════════ */
        .theme-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--card);
            cursor: pointer;
            margin-right: 10px;
            transition: all .3s ease;
            position: relative;
            overflow: hidden;
        }
        .theme-toggle:hover {
            border-color: var(--cyan);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--cyan-glow);
        }
        .theme-toggle .material-symbols-outlined {
            font-size: 18px;
            color: var(--text-secondary);
            transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
            font-variation-settings: 'FILL' 1;
        }
        .theme-toggle .icon-sun { position: absolute; }
        .theme-toggle .icon-moon { position: absolute; }
        :root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); color: var(--gold); }
        :root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
        :root:not([data-theme="dark"]) .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
        :root:not([data-theme="dark"]) .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); color: var(--text-secondary); }
        .header-actions {
            display: inline-flex;
            align-items: center;
        }

        /* ═══════════ SCROLL PROGRESS BAR ═══════════ */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: transparent;
            z-index: 999;
            pointer-events: none;
        }
        .scroll-progress-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--cyan) 0%, #06b6d4 30%, var(--gold-soft) 70%, var(--gold) 100%);
            box-shadow: 0 0 14px rgba(212, 175, 55, .5), 0 0 8px rgba(0, 196, 204, .4);
            transform-origin: left;
            transition: transform .15s ease-out;
            will-change: transform;
        }

        /* ═══════════ MEMBERS TICKER ═══════════ */
        .members-ticker {
            position: fixed;
            left: 24px;
            bottom: 28px;
            z-index: 200;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px 10px 10px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 999px;
            box-shadow: 0 8px 28px rgba(10, 15, 28, .12), 0 1px 0 rgba(255,255,255,.6) inset;
            transform: translateY(20px) scale(.95);
            opacity: 0;
            transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s ease;
            max-width: 320px;
        }
        :root[data-theme="dark"] .members-ticker {
            box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
        }
        .members-ticker.show {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .members-ticker.hide {
            transform: translateY(20px) scale(.95);
            opacity: 0;
        }
        .members-ticker-avatar {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            color: #fff;
            background: linear-gradient(135deg, var(--cyan), #06b6d4);
            position: relative;
            flex-shrink: 0;
        }
        .members-ticker-avatar::after {
            content: '';
            position: absolute;
            bottom: -1px;
            right: -1px;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--green);
            border: 2px solid var(--card);
            animation: pulse-dot 2s ease-in-out infinite;
        }
        .members-ticker-text {
            font-size: 12px;
            line-height: 1.35;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .members-ticker-text strong {
            display: block;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 13px;
            letter-spacing: -0.01em;
        }
        .members-ticker-time {
            font-size: 10px;
            color: var(--text-tertiary);
            margin-top: 1px;
        }
        @media (max-width: 720px) {
            .members-ticker {
                left: 12px;
                right: 12px;
                bottom: 82px;
                max-width: none;
            }
        }

        /* ═══════════ CONFETTI CANVAS ═══════════ */
        .confetti-canvas {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
        }

        /* ═══════════ INK FADE PAGE TRANSITION ═══════════ */
        @keyframes ink-fade-in {
            0% {
                -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 0%);
                        mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 0%);
            }
            70% {
                -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 90%, transparent 100%);
                        mask-image: radial-gradient(circle at 50% 45%, #000 90%, transparent 100%);
            }
            100% {
                -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 150%, transparent 200%);
                        mask-image: radial-gradient(circle at 50% 45%, #000 150%, transparent 200%);
            }
        }
        body.ink-fade {
            animation: ink-fade-in 1.4s cubic-bezier(.65, 0, .35, 1) forwards;
        }
        body.ink-fade .ink-veil {
            position: fixed;
            inset: 0;
            background: var(--ink, #050810);
            z-index: 99999;
            pointer-events: none;
            opacity: 1;
            animation: veil-clear .6s ease .55s forwards;
        }
        @keyframes veil-clear {
            to { opacity: 0; }
        }
        body.ink-fade .ink-veil::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 45%, transparent 0%, transparent 30%, var(--ink, #050810) 70%);
            animation: veil-grow 1.4s cubic-bezier(.65, 0, .35, 1) forwards;
        }
        @keyframes veil-grow {
            from { transform: scale(2); }
            to { transform: scale(0); }
        }

        /* ═══════════ RESPONSIVE ═══════════ */
        @media (max-width: 920px) {
            .hero { padding: 32px 24px; }
            .hero-grid,
            .support-panel { grid-template-columns: 1fr; }
            .trust-grid { grid-template-columns: 1fr; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonial-grid { grid-template-columns: 1fr; }
            .comparison-row { grid-template-columns: 1.2fr 1fr 1fr; }
            .comparison-cell { padding: 12px 14px; font-size: 12px; }
        }

        @media (max-width: 720px) {
            .page-main { padding: 0 16px 100px; }
            .page-inner { max-width: 480px; }
            .pricing-cards { grid-template-columns: 1fr; }
            .hero {
                border-radius: 0 0 22px 22px;
                padding: 28px 20px;
                margin: 0 -16px 28px;
            }
            .hero-title { max-width: none; font-size: 28px; }
            .hero-actions { flex-direction: column; }
            .hero-btn-primary, .hero-btn-ghost, .btn { width: 100%; }
            .features-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .feature-item { padding: 16px 12px; }
            .plan-card.featured { transform: none; }
            .plan-card.featured:hover { transform: translateY(-4px); }
            .header-cta { display: none; }
            .sticky-cta { display: block; }
            .comparison-cell:first-child { font-size: 11px; }
        }
    </style>
</head>
<body class="ink-fade">

    <!-- Ink fade veil (removed by JS after animation) -->
    <div class="ink-veil" id="ink-veil" aria-hidden="true"></div>

    <!-- Scroll progress bar -->
    <div class="scroll-progress" aria-hidden="true"><div class="scroll-progress-bar" id="scroll-progress-bar"></div></div>

    <!-- Urgency Banner -->
    <div class="urgency-banner">
        <p><span class="dot"></span>Limited release. <em>Lifetime access</em> for the first 500 members. Don't miss out.</p>
    </div>

    <!-- Header -->
    <header class="page-header">
        <div class="header-left">
            <h1>vCard Generator</h1>
            <p>Pro Plans &amp; Pricing</p>
        </div>
        <div class="header-actions">
            <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle dark mode">
                <span class="material-symbols-outlined icon-moon">dark_mode</span>
                <span class="material-symbols-outlined icon-sun">light_mode</span>
            </button>
            <a href="#pricing-cards" class="header-cta">
                <span class="material-symbols-outlined">bolt</span>
                View Plans
            </a>
        </div>
    </header>

    <!-- Main -->
    <main class="page-main">
        <div class="page-inner">

            <!-- ══════ HERO ══════ -->
            <section class="hero">
                <div class="orbs" aria-hidden="true">
                    <div class="orb orb-1"></div>
                    <div class="orb orb-2"></div>
                    <div class="orb orb-3"></div>
                </div>
                <div class="hero-inner">
                    <div class="hero-badge">
                        <span class="hero-badge-dot"><span class="material-symbols-outlined">diamond</span></span>
                        Premium add-on for Canva
                    </div>

                    <div class="hero-grid">
                        <div>
                            <h2 class="hero-title">Digital business cards your contacts <em>actually save</em></h2>
                            <p class="hero-copy">
                                Add your logo, customize fields, pick premium templates, and export shareable vCards in high resolution. All without ever leaving Canva. Trusted by thousands of professionals worldwide.
                            </p>

                            <div class="hero-actions">
                                <a href="#pricing-cards" class="hero-btn-primary" data-magnetic>
                                    <span class="material-symbols-outlined">bolt</span>
                                    <span>Get Pro Access</span>
                                </a>
                                <a href="#faq" class="hero-btn-ghost" data-magnetic>
                                    <span class="material-symbols-outlined">help</span>
                                    <span>Common Questions</span>
                                </a>
                            </div>

                            <div class="proof-strip">
                                <div class="proof-pill">
                                    <span class="material-symbols-outlined">verified_user</span>
                                    Secure checkout
                                </div>
                                <div class="proof-pill">
                                    <span class="material-symbols-outlined">bolt</span>
                                    Instant activation
                                </div>
                                <div class="proof-pill">
                                    <span class="material-symbols-outlined">autorenew</span>
                                    Cancel anytime
                                </div>
                            </div>

                            <div class="avatar-stack">
                                <div class="avatar-stack-imgs">
                                    <div>A</div>
                                    <div>M</div>
                                    <div>K</div>
                                    <div>R</div>
                                    <div>+</div>
                                </div>
                                <span class="avatar-stack-text"><strong>10,000+ creators</strong> already onboard</span>
                            </div>
                        </div>

                        <div class="hero-stats">
                            <div class="stat-card">
                                <div class="stat-number" data-count="10000">10,000<span>+</span></div>
                                <div class="stat-label">Canva creators trust us</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-number">4.8<span>/5</span></div>
                                <div class="stat-label">Average rating</div>
                                <div class="stat-stars">
                                    <span class="material-symbols-outlined">star</span>
                                    <span class="material-symbols-outlined">star</span>
                                    <span class="material-symbols-outlined">star</span>
                                    <span class="material-symbols-outlined">star</span>
                                    <span class="material-symbols-outlined">star</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-number"><span>&lt;</span>4 min</div>
                                <div class="stat-label">Average support reply time</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ══════ TRUSTED-BY MARQUEE ══════ -->
            <section class="marquee-section reveal" aria-label="Trusted by">
                <span class="marquee-label">Trusted by professionals at</span>
                <div class="marquee" id="marquee">
                    <span class="marquee-item"><span class="material-symbols-outlined">workspace_premium</span>Studio &amp; Co.</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">stars</span>NorthLane Agency</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">diamond</span>Atelier Bloom</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">flare</span>Pixel Forge</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">campaign</span>Brandwell Media</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">bolt</span>Northstar Labs</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">apartment</span>Hartman &amp; Co.</span>
                    <span class="marquee-item"><span class="material-symbols-outlined">grade</span>Zenith Digital</span>
                </div>
            </section>

            <!-- ══════ FEATURES SHOWCASE ══════ -->
            <section class="features-showcase reveal">
                <div class="section-header">
                    <div class="section-kicker">What's included</div>
                    <h2>Everything you need, <em>nothing you don't</em></h2>
                </div>
                <div class="features-grid">
                    <div class="feature-item">
                        <div class="feature-icon fi-cyan">
                            <span class="material-symbols-outlined">contact_page</span>
                        </div>
                        <strong>Custom Fields</strong>
                        <p>Add phone, email, social &amp; more</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon fi-purple">
                            <span class="material-symbols-outlined">add_business</span>
                        </div>
                        <strong>Logo Upload</strong>
                        <p>Personalize with your branding</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon fi-green">
                            <span class="material-symbols-outlined">dashboard_customize</span>
                        </div>
                        <strong>Premium Templates</strong>
                        <p>Start with beautiful presets</p>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon fi-amber">
                            <span class="material-symbols-outlined">qr_code_2</span>
                        </div>
                        <strong>Shareable QR &amp; .vcf</strong>
                        <p>Instant scan-to-save contact</p>
                    </div>
                </div>
            </section>

            <!-- ══════ PRICING SECTION ══════ -->
            <section class="reveal">
                <div class="section-header">
                    <div class="section-kicker">Simple Pricing</div>
                    <h2>Choose the plan that <em>fits your workflow</em></h2>
                    <p>All plans include every Pro feature. Pick monthly for flexibility, annual to save, or lifetime to pay once forever.</p>
                </div>

                <div class="guarantee-bar">
                    <span class="material-symbols-outlined">verified</span>
                    <p>All plans unlock every Pro feature instantly after checkout</p>
                </div>

                <!-- Loading State -->
                <div id="loading-state" style="text-align:center;padding:40px 0;">
                    <span class="material-symbols-outlined" style="font-size:32px;color:var(--cyan);animation:spin 1s linear infinite;">progress_activity</span>
                    <p style="font-size:13px;color:var(--text-tertiary);margin-top:12px;">Loading plans...</p>
                </div>

                <!-- Cards (populated via JS) -->
                <div class="pricing-cards" id="pricing-cards" style="display:none;"></div>

                <!-- Error State -->
                <div id="error-state" style="display:none;text-align:center;padding:40px 0;">
                    <span class="material-symbols-outlined" style="font-size:32px;color:#ef4444;">error</span>
                    <p style="font-size:13px;color:var(--text-secondary);margin-top:12px;">Failed to load plans. Please try again.</p>
                    <button class="btn btn-primary" style="max-width:200px;margin:16px auto 0;" onclick="loadPricing()">Retry</button>
                </div>
            </section>

            <!-- ══════ TESTIMONIALS ══════ -->
            <section class="testimonials reveal">
                <div class="section-header">
                    <div class="section-kicker">Loved by Creators</div>
                    <h2>What our <em>members</em> say</h2>
                </div>
                <div class="testimonial-grid">
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                        </div>
                        <blockquote>The best vCard tool for Canva, hands down. I use it for every client handoff now.</blockquote>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar ta-1">S</div>
                            <div>
                                <strong>Sarah M. <span class="material-symbols-outlined">verified</span></strong><br>
                                <span>Freelance Designer</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                        </div>
                        <blockquote>Lifetime access was a no-brainer. I was tired of subscriptions for everything.</blockquote>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar ta-2">J</div>
                            <div>
                                <strong>James K. <span class="material-symbols-outlined">verified</span></strong><br>
                                <span>Marketing Agency Owner</span>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card">
                        <div class="testimonial-stars">
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                            <span class="material-symbols-outlined">star</span>
                        </div>
                        <blockquote>Support replied in 2 minutes. The vCards look amazing on print and digital.</blockquote>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar ta-3">R</div>
                            <div>
                                <strong>Rita P. <span class="material-symbols-outlined">verified</span></strong><br>
                                <span>Small Business Owner</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ══════ COMPARISON TABLE ══════ -->
            <section class="comparison-section reveal">
                <div class="section-header">
                    <div class="section-kicker">Free vs Pro</div>
                    <h2>See what <em>Pro unlocks</em></h2>
                </div>
                <div class="comparison-table">
                    <div class="comparison-row header-row">
                        <div class="comparison-cell">Feature</div>
                        <div class="comparison-cell">Free</div>
                        <div class="comparison-cell">Pro</div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">Basic vCard generation</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">Custom colors &amp; branding</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-no">cancel</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">Logo upload</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-no">cancel</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">Premium design templates</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-no">cancel</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">High-resolution export</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-no">cancel</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                    <div class="comparison-row">
                        <div class="comparison-cell">Priority WhatsApp support</div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-no">cancel</span></div>
                        <div class="comparison-cell"><span class="material-symbols-outlined check-yes">check_circle</span></div>
                    </div>
                </div>
            </section>

            <!-- ══════ SUPPORT & TRUST ══════ -->
            <div class="support-panel reveal">
                <section class="support-card">
                    <h3>Need help choosing?</h3>
                    <p>Not sure which plan is right for you? Chat with us and we'll help you pick the best option.</p>
                    <div class="support-meta">
                        <span>
                            <span class="material-symbols-outlined">chat</span>
                            <span id="whatsapp-display-text">Chat with us on WhatsApp</span>
                        </span>
                        <span>
                            <span class="material-symbols-outlined">schedule</span>
                            <span id="whatsapp-display-subtext">Typically replies in 4 mins!</span>
                        </span>
                    </div>
                    <a id="whatsapp-link" class="btn btn-primary support-link" href="#">Talk to Support</a>
                </section>

                <section class="trust-card">
                    <h3>You're in safe hands</h3>
                    <p>Thousands of Canva creators already use vCard Generator.</p>
                    <div class="trust-grid">
                        <div class="trust-point">
                            <span class="material-symbols-outlined">shield</span>
                            <strong>Secure checkout</strong>
                            <p>Encrypted payment page</p>
                        </div>
                        <div class="trust-point">
                            <span class="material-symbols-outlined">support_agent</span>
                            <strong>Fast support</strong>
                            <p>Reply within minutes</p>
                        </div>
                        <div class="trust-point">
                            <span class="material-symbols-outlined">block</span>
                            <strong>Cancel anytime</strong>
                            <p>No lock-in contracts</p>
                        </div>
                    </div>
                </section>
            </div>

            <!-- ══════ FAQ ══════ -->
            <section class="faq-section reveal" id="faq">
                <div class="section-header">
                    <div class="section-kicker">FAQ</div>
                    <h2>Frequently <em>asked questions</em></h2>
                    <p>Quick answers to help you decide.</p>
                </div>

                <div class="faq-list">
                    <div class="faq-item open">
                        <button class="faq-question" type="button">
                            <span>Which plan should I choose?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">Go with monthly if you'd like the lowest upfront cost. Choose annual to save compared to monthly. Or grab the one-time purchase to pay once and use it forever - no renewals needed.</div>
                    </div>

                    <div class="faq-item">
                        <button class="faq-question" type="button">
                            <span>Is checkout secure?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">Yes. When you click a plan button, you'll be taken to a secure, encrypted checkout page to complete your payment safely.</div>
                    </div>

                    <div class="faq-item">
                        <button class="faq-question" type="button">
                            <span>Can I get help before purchasing?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">Absolutely! You can reach us on WhatsApp right from this page. We typically reply within a few minutes and are happy to help you choose the right plan.</div>
                    </div>

                    <div class="faq-item">
                        <button class="faq-question" type="button">
                            <span>What makes the one-time plan special?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">You pay once and get lifetime access - no monthly or yearly charges ever again. If you plan to keep using vCard Generator, it's the best long-term value.</div>
                    </div>

                    <div class="faq-item">
                        <button class="faq-question" type="button">
                            <span>Do all plans include the same features?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">Yes! Every Pro plan - monthly, annual, and one-time - gives you access to all premium features including custom fields, logo upload, templates, and shareable QR/.vcf export.</div>
                    </div>

                    <div class="faq-item">
                        <button class="faq-question" type="button">
                            <span>How fast will I get access after paying?</span>
                            <span class="material-symbols-outlined">expand_more</span>
                        </button>
                        <div class="faq-answer">Instantly. Once your payment is confirmed, Pro features are activated right away - no waiting, no manual steps.</div>
                    </div>
                </div>
            </section>

            <!-- ══════ FINAL CTA ══════ -->
            <section class="reveal" style="text-align:center;padding:40px 0 12px;">
                <h2 style="font-size:30px;font-weight:800;letter-spacing:-0.04em;color:var(--text-primary);line-height:1.1;">Ready to create stunning <em style="font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cyan);">digital business cards</em>?</h2>
                <p style="font-size:14px;color:var(--text-secondary);margin-top:10px;max-width:46ch;margin-left:auto;margin-right:auto;">Join 10,000+ Canva creators who already upgraded to Pro.</p>
                <a href="#pricing-cards" class="hero-btn-primary" style="margin:24px auto 0;display:inline-flex;">
                    <span class="material-symbols-outlined">bolt</span>
                    Choose Your Plan
                </a>
            </section>

            <!-- Footer -->
            <footer class="page-footer">
                <p>Questions? email us at <a href="mailto:support@swiftools.com">support@swiftools.com</a></p>
            </footer>

        </div>
    </main>

    <!-- Members joined today ticker -->
    <div class="members-ticker" id="members-ticker" role="status" aria-live="polite">
        <div class="members-ticker-avatar" id="ticker-avatar">A</div>
        <div>
            <div class="members-ticker-text">
                <strong id="ticker-name">Aarav S.</strong>
                <span id="ticker-action">just unlocked Lifetime Pro</span>
            </div>
            <div class="members-ticker-time" id="ticker-time">just now</div>
        </div>
    </div>

    <!-- Confetti canvas -->
    <canvas class="confetti-canvas" id="confetti-canvas" aria-hidden="true"></canvas>

    <!-- Sticky Mobile CTA -->
    <div class="sticky-cta">
        <a href="#pricing-cards">Get Pro Access &rarr;</a>
    </div>

    <!-- WhatsApp Widget -->
    <div class="wa-widget" id="wa-widget">
        <div class="wa-tooltip">
            Chat with us on WhatsApp
            <span id="wa-widget-subtext">Typically replies in 4 mins!</span>
        </div>
        <a class="wa-btn" id="wa-widget-btn" href="#" target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
            </svg>
        </a>
    </div>

    <script>
        var FLAGS_URL = 'https://configs.swiftools.com/flags/projects/canva/vcard-generator/flags.json';

        /* ═══════════ Scroll Reveal ═══════════ */
        (function() {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

            document.querySelectorAll('.reveal').forEach(function(el) {
                observer.observe(el);
            });
        })();

        /* ═══════════ Header scroll state ═══════════ */
        (function() {
            var header = document.querySelector('.page-header');
            if (!header) return;
            var lastScroll = 0;
            window.addEventListener('scroll', function() {
                var s = window.scrollY;
                if (s > 8 && lastScroll <= 8) header.classList.add('scrolled');
                else if (s <= 8 && lastScroll > 8) header.classList.remove('scrolled');
                lastScroll = s;
            }, { passive: true });
        })();

        /* ═══════════ Marquee duplication for seamless loop ═══════════ */
        (function() {
            var m = document.getElementById('marquee');
            if (!m) return;
            m.innerHTML = m.innerHTML + m.innerHTML;
        })();

        /* ═══════════ Animated counter ═══════════ */
        function animateCounter(el) {
            var target = parseInt(el.getAttribute('data-count'), 10);
            if (!target || isNaN(target)) return;
            var suffix = el.querySelector('span') ? el.querySelector('span').outerHTML : '';
            var start = 0;
            var duration = 1800;
            var startTime = null;
            function tick(now) {
                if (!startTime) startTime = now;
                var p = Math.min((now - startTime) / duration, 1);
                var eased = 1 - Math.pow(1 - p, 3);
                var val = Math.floor(start + (target - start) * eased);
                el.innerHTML = val.toLocaleString() + suffix;
                if (p < 1) requestAnimationFrame(tick);
            }
            requestAnimationFrame(tick);
        }
        (function() {
            var els = document.querySelectorAll('[data-count]');
            var io = new IntersectionObserver(function(entries) {
                entries.forEach(function(e) {
                    if (e.isIntersecting) {
                        animateCounter(e.target);
                        io.unobserve(e.target);
                    }
                });
            }, { threshold: 0.4 });
            els.forEach(function(el) { io.observe(el); });
        })();

        /* ═══════════ Magnetic buttons ═══════════ */
        (function() {
            var prefersReduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            if (prefersReduce) return;
            function attach(el) {
                var rect;
                el.addEventListener('mouseenter', function() { rect = el.getBoundingClientRect(); });
                el.addEventListener('mousemove', function(e) {
                    if (!rect) rect = el.getBoundingClientRect();
                    var x = e.clientX - rect.left - rect.width / 2;
                    var y = e.clientY - rect.top - rect.height / 2;
                    el.style.transform = 'translate(' + x * 0.18 + 'px,' + y * 0.25 + 'px)';
                });
                el.addEventListener('mouseleave', function() {
                    el.style.transform = '';
                    rect = null;
                });
            }
            document.querySelectorAll('[data-magnetic]').forEach(attach);
        })();

        /* ═══════════ Cursor glow on cards (delegated) ═══════════ */
        (function() {
            document.addEventListener('mousemove', function(e) {
                var targets = document.querySelectorAll('.plan-card.featured, .stat-card');
                targets.forEach(function(card) {
                    var r = card.getBoundingClientRect();
                    if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) {
                        card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
                        card.style.setProperty('--my', (e.clientY - r.top) + 'px');
                    }
                });
            }, { passive: true });
        })();

        /* ═══════════ Subtle parallax on hero orbs ═══════════ */
        (function() {
            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
            var hero = document.querySelector('.hero');
            if (!hero) return;
            var orbs = hero.querySelectorAll('.orb');
            hero.addEventListener('mousemove', function(e) {
                var r = hero.getBoundingClientRect();
                var x = (e.clientX - r.left) / r.width - 0.5;
                var y = (e.clientY - r.top) / r.height - 0.5;
                orbs.forEach(function(orb, i) {
                    var depth = (i + 1) * 12;
                    orb.style.transform = 'translate(' + (x * depth) + 'px,' + (y * depth) + 'px)';
                });
            });
        })();

        /* ═══════════ Plan Helpers ═══════════ */
        function getPlanType(title) {
            var normalized = (title || '').toLowerCase();
            if (normalized.indexOf('one-time') !== -1 || normalized.indexOf('lifetime') !== -1) return 'one-time';
            if (normalized.indexOf('annual') !== -1 || normalized.indexOf('year') !== -1) return 'annual';
            if (normalized.indexOf('month') !== -1) return 'monthly';
            return 'other';
        }

        function sortPlans(plans) {
            var order = { monthly: 1, 'one-time': 2, annual: 3, other: 4 };
            return plans.slice().sort(function(a, b) {
                return order[getPlanType(a.title)] - order[getPlanType(b.title)];
            });
        }

        function getPlanPresentation(plan) {
            var type = getPlanType(plan.title);

            if (type === 'one-time') {
                return {
                    cardClass: 'plan-card featured',
                    badge: 'Best Value',
                    badgeClass: 'badge badge-gradient',
                    note: 'Pay once. Use forever. No renewals, no surprises.',
                    chips: [
                        { text: 'Lifetime access', icon: 'all_inclusive' },
                        { text: 'All Pro features', icon: 'workspace_premium' }
                    ],
                    features: [
                        'Every Pro feature included',
                        'Unlimited vCard designs',
                        'Priority WhatsApp support',
                        'All future updates included'
                    ],
                    cta: 'Get Lifetime Access',
                    ctaClass: 'btn btn-primary btn-glow',
                    caption: 'Best for creators who want permanent access.',
                    savings: ''
                };
            }

            if (plan.isHighlighted === true) {
                return {
                    cardClass: 'plan-card pro',
                    badge: 'Save More',
                    badgeClass: 'badge badge-cyan',
                    note: 'Best recurring deal - save vs monthly billing.',
                    chips: [
                        { text: 'Save vs monthly', icon: 'savings' },
                        { text: 'All Pro features', icon: 'workspace_premium' }
                    ],
                    features: [
                        'Every Pro feature included',
                        'Unlimited vCard designs',
                        'Priority WhatsApp support'
                    ],
                    cta: 'Choose Annual',
                    ctaClass: 'btn btn-primary',
                    caption: 'Best for creators who want ongoing value.',
                    savings: 'Save 50%'
                };
            }

            return {
                cardClass: 'plan-card free',
                badge: '',
                badgeClass: '',
                note: 'Start with the lowest upfront commitment.',
                chips: [
                    { text: 'Low upfront cost', icon: 'payments' },
                    { text: 'Flexible billing', icon: 'autorenew' }
                ],
                features: [
                    'Every Pro feature included',
                    'Unlimited vCard designs',
                    'Cancel anytime'
                ],
                cta: 'Start Monthly',
                ctaClass: 'btn btn-secondary',
                caption: 'Best for trying Pro before committing.',
                savings: ''
            };
        }

        function updateSupportInfo(data) {
            var support = data['other-info'] && data['other-info']['whatsapp-support'];
            if (!support || support.isEnabled !== true) return;

            var link = document.getElementById('whatsapp-link');
            var text = document.getElementById('whatsapp-display-text');
            var subText = document.getElementById('whatsapp-display-subtext');
            var widgetBtn = document.getElementById('wa-widget-btn');
            var widgetSubtext = document.getElementById('wa-widget-subtext');

            if (support.whatsapp_link) {
                link.href = support.whatsapp_link;
                link.target = '_blank';
                link.rel = 'noopener';
                widgetBtn.href = support.whatsapp_link;
            }
            if (support.display_text) text.textContent = support.display_text;
            if (support.display_sub_text) {
                subText.textContent = support.display_sub_text;
                widgetSubtext.textContent = support.display_sub_text;
            }
        }

        function initFaq() {
            document.querySelectorAll('.faq-question').forEach(function(button) {
                button.addEventListener('click', function() {
                    var item = button.parentElement;
                    item.classList.toggle('open');
                });
            });
        }

        function escapeHtml(str) {
            var div = document.createElement('div');
            div.textContent = str;
            return div.innerHTML;
        }

        function renderCards(plans) {
            var container = document.getElementById('pricing-cards');
            container.innerHTML = '';

            sortPlans(plans).forEach(function(plan) {
                var p = getPlanPresentation(plan);
                var title = escapeHtml(plan.title || '');
                var subtitle = escapeHtml(plan.subtitle || '');
                var price = escapeHtml(plan.price || '');
                var url = plan.url || '#';

                var badgeHtml = p.badge
                    ? '<div class="' + p.badgeClass + '">' + escapeHtml(p.badge) + '</div>'
                    : '';

                var savingsHtml = p.savings
                    ? '<span class="savings-tag">' + escapeHtml(p.savings) + '</span>'
                    : '';

                var chipsHtml = p.chips.map(function(chip) {
                    return '<span class="feature-chip"><span class="material-symbols-outlined">' + chip.icon + '</span>' + escapeHtml(chip.text) + '</span>';
                }).join('');

                var featuresHtml = p.features.map(function(f) {
                    return '<li><span class="material-symbols-outlined">check_circle</span>' + escapeHtml(f) + '</li>';
                }).join('');

                var starHtml = p.cardClass.indexOf('pro') !== -1
                    ? '<span class="material-symbols-outlined star-icon">stars</span>'
                    : '';

                var card = document.createElement('div');
                card.className = p.cardClass;

                card.innerHTML =
                    badgeHtml +
                    '<div class="card-cursor-glow"></div>' +
                    '<div class="shine-overlay"></div>' +
                    '<div>' +
                        '<div class="plan-name">' +
                            '<h3>' + title + '</h3>' +
                            starHtml +
                        '</div>' +
                        '<p class="plan-subtitle">' + subtitle + '</p>' +
                    '</div>' +
                    '<div class="plan-card-note">' + escapeHtml(p.note) + '</div>' +
                    '<div class="price-row">' +
                        '<span class="price-amount">' + price + '</span>' +
                        savingsHtml +
                    '</div>' +
                    '<div class="price-caption">' + escapeHtml(p.caption) + '</div>' +
                    '<div class="divider"></div>' +
                    '<div class="feature-row">' + chipsHtml + '</div>' +
                    '<ul class="features-list">' + featuresHtml + '</ul>' +
                    '<a href="' + encodeURI(url) + '" target="_blank" rel="noopener" class="' + p.ctaClass + '">' +
                        escapeHtml(p.cta) +
                    '</a>';

                container.appendChild(card);
            });

            document.getElementById('loading-state').style.display = 'none';
            document.getElementById('error-state').style.display = 'none';
            container.style.display = '';
        }

        function loadPricing() {
            document.getElementById('loading-state').style.display = '';
            document.getElementById('error-state').style.display = 'none';
            document.getElementById('pricing-cards').style.display = 'none';

            fetch(FLAGS_URL)
                .then(function(res) {
                    if (!res.ok) throw new Error('Network error');
                    return res.json();
                })
                .then(function(data) {
                    var plans = data['pricing-page-details'] && data['pricing-page-details']['pricing-info'];
                    if (!Array.isArray(plans) || plans.length === 0) {
                        throw new Error('No plans found');
                    }
                    updateSupportInfo(data);
                    renderCards(plans);
                    initFaq();
                })
                .catch(function() {
                    document.getElementById('loading-state').style.display = 'none';
                    document.getElementById('error-state').style.display = '';
                });
        }

        loadPricing();

        /* ═══════════ Ink fade cleanup ═══════════ */
        (function() {
            window.addEventListener('load', function() {
                setTimeout(function() {
                    var veil = document.getElementById('ink-veil');
                    if (veil && veil.parentNode) veil.parentNode.removeChild(veil);
                    document.body.classList.remove('ink-fade');
                }, 1500);
            });
        })();

        /* ═══════════ Scroll progress bar ═══════════ */
        (function() {
            var bar = document.getElementById('scroll-progress-bar');
            if (!bar) return;
            var ticking = false;
            function update() {
                var h = document.documentElement;
                var scrolled = h.scrollTop;
                var max = h.scrollHeight - h.clientHeight;
                var p = max > 0 ? scrolled / max : 0;
                bar.style.transform = 'scaleX(' + p + ')';
                ticking = false;
            }
            window.addEventListener('scroll', function() {
                if (!ticking) {
                    requestAnimationFrame(update);
                    ticking = true;
                }
            }, { passive: true });
            update();
        })();

        /* ═══════════ Theme toggle ═══════════ */
        (function() {
            var btn = document.getElementById('theme-toggle');
            if (!btn) return;
            var STORAGE_KEY = 'vcg-theme';
            function apply(theme) {
                document.documentElement.setAttribute('data-theme', theme);
                try { localStorage.setItem(STORAGE_KEY, theme); } catch (e) {}
            }
            var saved;
            try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
            var initial = saved || 'light';
            apply(initial);
            btn.addEventListener('click', function() {
                var current = document.documentElement.getAttribute('data-theme');
                apply(current === 'dark' ? 'light' : 'dark');
            });
        })();

        /* ═══════════ Members joined ticker ═══════════ */
        (function() {
            var ticker = document.getElementById('members-ticker');
            if (!ticker) return;
            var nameEl = document.getElementById('ticker-name');
            var actionEl = document.getElementById('ticker-action');
            var timeEl = document.getElementById('ticker-time');
            var avatarEl = document.getElementById('ticker-avatar');

            var EVENTS = [
                { name: 'Aarav S.',   city: 'Mumbai',     plan: 'Lifetime Pro',  mins: 1 },
                { name: 'Priya R.',   city: 'Bengaluru',  plan: 'Annual Pro',    mins: 3 },
                { name: 'Daniel K.',  city: 'Berlin',     plan: 'Lifetime Pro',  mins: 6 },
                { name: 'Sofia M.',   city: 'Madrid',     plan: 'Annual Pro',    mins: 9 },
                { name: 'Liam C.',    city: 'Toronto',    plan: 'Lifetime Pro',  mins: 12 },
                { name: 'Nora H.',    city: 'Oslo',       plan: 'Monthly Pro',   mins: 16 },
                { name: 'Yuki T.',    city: 'Tokyo',      plan: 'Lifetime Pro',  mins: 21 },
                { name: 'Carlos D.',  city: 'Mexico City',plan: 'Annual Pro',    mins: 27 },
                { name: 'Mei L.',     city: 'Singapore',  plan: 'Lifetime Pro',  mins: 33 },
                { name: 'Hassan A.',  city: 'Dubai',      plan: 'Annual Pro',    mins: 41 },
                { name: 'Olivia B.',  city: 'London',     plan: 'Lifetime Pro',  mins: 48 },
                { name: 'Rohan P.',   city: 'Pune',       plan: 'Monthly Pro',   mins: 55 }
            ];
            var GRADIENTS = [
                'linear-gradient(135deg, #00c4cc, #06b6d4)',
                'linear-gradient(135deg, #8b5cf6, #a78bfa)',
                'linear-gradient(135deg, #f59e0b, #fbbf24)',
                'linear-gradient(135deg, #ef4444, #f87171)',
                'linear-gradient(135deg, #22c55e, #4ade80)',
                'linear-gradient(135deg, #d4af37, #b8941f)'
            ];

            var idx = 0;
            function timeLabel(m) {
                if (m < 1) return 'just now';
                if (m === 1) return '1 min ago';
                if (m < 60) return m + ' mins ago';
                var h = Math.floor(m / 60);
                return h === 1 ? '1 hr ago' : h + ' hrs ago';
            }
            function show() {
                var e = EVENTS[idx % EVENTS.length];
                idx++;
                nameEl.textContent = e.name;
                actionEl.textContent = 'from ' + e.city + ' got ' + e.plan;
                timeEl.textContent = timeLabel(e.mins);
                avatarEl.textContent = e.name.charAt(0);
                avatarEl.style.background = GRADIENTS[(idx - 1) % GRADIENTS.length];
                ticker.classList.remove('hide');
                ticker.classList.add('show');
                setTimeout(function() {
                    ticker.classList.remove('show');
                    ticker.classList.add('hide');
                }, 5500);
            }
            // First show after a small delay so the page settles
            setTimeout(show, 4500);
            setInterval(show, 11000);
        })();

        /* ═══════════ Confetti micro-burst on Lifetime CTA hover ═══════════ */
        (function() {
            var canvas = document.getElementById('confetti-canvas');
            if (!canvas) return;
            var ctx = canvas.getContext('2d');
            var dpr = window.devicePixelRatio || 1;
            function resize() {
                canvas.width = window.innerWidth * dpr;
                canvas.height = window.innerHeight * dpr;
                canvas.style.width = window.innerWidth + 'px';
                canvas.style.height = window.innerHeight + 'px';
                ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
            }
            resize();
            window.addEventListener('resize', resize);

            var particles = [];
            var COLORS = ['#d4af37', '#f5e6a8', '#b8941f', '#fff5cf', '#ffffff', '#00c4cc'];

            function burst(x, y) {
                var count = 70;
                for (var i = 0; i < count; i++) {
                    var angle = Math.random() * Math.PI * 2;
                    var speed = 4 + Math.random() * 9;
                    particles.push({
                        x: x,
                        y: y,
                        vx: Math.cos(angle) * speed,
                        vy: Math.sin(angle) * speed - 4,
                        g: 0.22 + Math.random() * 0.15,
                        size: 4 + Math.random() * 5,
                        rot: Math.random() * Math.PI,
                        vr: (Math.random() - 0.5) * 0.4,
                        color: COLORS[Math.floor(Math.random() * COLORS.length)],
                        life: 0,
                        maxLife: 80 + Math.random() * 40,
                        shape: Math.random() < 0.5 ? 'rect' : 'circle'
                    });
                }
                if (!running) loop();
            }

            var running = false;
            function loop() {
                running = true;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                for (var i = particles.length - 1; i >= 0; i--) {
                    var p = particles[i];
                    p.vy += p.g;
                    p.x += p.vx;
                    p.y += p.vy;
                    p.rot += p.vr;
                    p.life++;
                    var alpha = Math.max(0, 1 - p.life / p.maxLife);
                    ctx.save();
                    ctx.globalAlpha = alpha;
                    ctx.translate(p.x, p.y);
                    ctx.rotate(p.rot);
                    ctx.fillStyle = p.color;
                    if (p.shape === 'rect') {
                        ctx.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
                    } else {
                        ctx.beginPath();
                        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
                        ctx.fill();
                    }
                    ctx.restore();
                    if (p.life >= p.maxLife || p.y > window.innerHeight + 40) {
                        particles.splice(i, 1);
                    }
                }
                if (particles.length > 0) {
                    requestAnimationFrame(loop);
                } else {
                    running = false;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                }
            }

            // Attach to lifetime CTA after pricing renders (CTA text "Get Lifetime Access")
            var burstedOnce = false;
            function attach() {
                var btns = document.querySelectorAll('.plan-card.featured a, .btn-glow');
                if (btns.length === 0) {
                    setTimeout(attach, 400);
                    return;
                }
                btns.forEach(function(btn) {
                    btn.addEventListener('mouseenter', function() {
                        var r = btn.getBoundingClientRect();
                        var cx = r.left + r.width / 2;
                        var cy = r.top + r.height / 2;
                        burst(cx, cy);
                        if (!burstedOnce) {
                            burstedOnce = true;
                            // Slightly bigger first-time delight
                            setTimeout(function() { burst(cx, cy); }, 120);
                        }
                    });
                    btn.addEventListener('click', function() {
                        var r = btn.getBoundingClientRect();
                        burst(r.left + r.width / 2, r.top + r.height / 2);
                    });
                });
            }
            attach();
        })();
    </script>

</body>
</html>