/* ============================================================
   Membership Wallet — Shared Site Stylesheet
   Used across: index.html, features.html, pricing.html,
   about.html, contact.html, consumer.html, ai.html
   ============================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
  /* Brand */
  --brand-50:  #F5F1FF;
  --brand-100: #EDE6FF;
  --brand-200: #DCCFFF;
  --brand-300: #C2ADFF;
  --brand-400: #A083FB;
  --brand-500: #8155FF;
  --brand-600: #6938EF;
  --brand-700: #5224C4;
  --brand-800: #3F1A99;

  /* Accent (success/upgrade) */
  --emerald-400: #34D399;
  --emerald-500: #10B981;

  /* Ink + neutrals */
  --ink-900: #0B0B19;
  --ink-800: #14132A;
  --ink-700: #1D2939;
  --ink-600: #344054;
  --ink-500: #4E4B66;
  --ink-400: #667085;
  --ink-300: #98A2B3;
  --ink-200: #D0D5DD;
  --ink-100: #E5E7EB;
  --ink-50:  #F2F4F7;

  /* Surfaces */
  --surface:    #FFFFFF;
  --surface-alt:#FAFAFE;
  --surface-tint: #F8F7FF;

  /* Brand gradients */
  --grad-brand:   linear-gradient(135deg,#8155FF 0%,#6938EF 100%);
  --grad-brand-r: linear-gradient(90deg,#8155FF 0%,#6938EF 100%);
  --grad-text:    linear-gradient(135deg,#A083FB 0%,#6938EF 60%,#5224C4 100%);
  --grad-soft:    linear-gradient(135deg,#F5F1FF 0%,#FFFFFF 50%,#EDE6FF 100%);
  --grad-night:   linear-gradient(135deg,#0B0B19 0%,#14132A 60%,#1B1640 100%);

  /* Shadows */
  --sh-xs:   0 1px 2px rgba(20,19,42,0.06);
  --sh-sm:   0 2px 8px rgba(20,19,42,0.06);
  --sh-md:   0 8px 24px rgba(20,19,42,0.08);
  --sh-lg:   0 18px 48px -12px rgba(20,19,42,0.18);
  --sh-xl:   0 30px 60px -20px rgba(105,56,239,0.28);
  --sh-glow: 0 12px 40px -12px rgba(129,85,255,0.45);
  --sh-ring: 0 0 0 1px rgba(129,85,255,0.10);

  /* Radii */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 9999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--surface-tint);
  color: var(--ink-700);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(129,85,255,0.22); color: var(--ink-800); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-tint); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#A083FB,#6938EF); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#8155FF,#5224C4); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== ANIMATIONS ===== */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(129,85,255,0.35); } 50% { box-shadow: 0 0 40px rgba(129,85,255,0.62); } }
@keyframes slide-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes bounce-dot { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-6px); } }
@keyframes orb-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.05); } }
@keyframes spark { 0%,100% { opacity:.35; transform: scale(1); } 50% { opacity:1; transform: scale(1.2); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes tilt-in { from { opacity:0; transform: perspective(1000px) rotateX(8deg) translateY(20px); } to { opacity:1; transform: perspective(1000px) rotateX(0) translateY(0); } }
.anim-float { animation: float 3s ease-in-out infinite; }
.anim-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.anim-slide-up { animation: slide-up 0.6s var(--ease) forwards; }
.anim-slide-right { animation: slide-in-right 0.6s var(--ease) forwards; }
.anim-fade-in { animation: fade-in 0.8s var(--ease) forwards; }
.anim-tilt-in { animation: tilt-in 0.9s var(--ease) forwards; }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(129,85,255,0.10);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.navbar.scrolled { background: rgba(255,255,255,0.88); box-shadow: 0 6px 24px rgba(20,19,42,0.06); border-bottom-color: rgba(129,85,255,0.16); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 0.625rem; transition: transform var(--dur-fast) var(--ease); }
.logo:hover { transform: translateY(-1px); }
.logo-icon { position: relative; width: 38px; height: 38px; background: var(--grad-brand); border-radius: 11px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(129,85,255,0.32), inset 0 1px 0 rgba(255,255,255,0.25); overflow: hidden; }
.logo-icon::after { content:''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 50%); pointer-events: none; }
.logo-icon svg { color: #fff; width: 20px; height: 20px; position: relative; z-index: 1; }
.logo-text { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.01em; background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.nav-links { display: flex; gap: 0.5rem; align-items: center; }
.nav-links a { font-size: 0.875rem; font-weight: 500; color: var(--ink-600); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); position: relative; padding: 0.55rem 0.85rem; border-radius: 9999px; }
.nav-links a:hover { color: var(--brand-600); background: rgba(129,85,255,0.07); }
.nav-links a.active { color: var(--brand-600); font-weight: 600; background: rgba(129,85,255,0.10); }
.nav-ctas { display: flex; gap: 0.625rem; align-items: center; }
.nav-ai-link { display: inline-flex !important; align-items: center; gap: 0.3rem; }
.nav-ai-link svg { width: 14px; height: 14px; }

/* ===== BUTTONS ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-radius: 0.7rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: none; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); text-decoration: none; letter-spacing: 0.01em; isolation: isolate; }
.btn svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.btn:hover svg:last-child { transform: translateX(2px); }
.btn-primary { background: var(--grad-brand-r); color: #fff; box-shadow: 0 6px 18px rgba(129,85,255,0.28), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-primary::before { content:''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg,#9468FF,#7B41FF); opacity: 0; transition: opacity var(--dur-base) var(--ease); z-index: -1; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(129,85,255,0.42), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border: 1.5px solid rgba(129,85,255,0.4); color: var(--brand-600); }
.btn-outline:hover { background: var(--brand-50); border-color: var(--brand-500); transform: translateY(-1px); box-shadow: var(--sh-sm); }
.btn-white { background: #fff; color: var(--brand-600); box-shadow: var(--sh-md); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--sh-lg); }
.btn-ghost { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.7); }
.btn-lg { padding: 1rem 1.875rem; font-size: 0.95rem; border-radius: 0.85rem; }
.btn-full { width: 100%; }
.partner-link { font-size: 0.875rem; font-weight: 600; color: var(--brand-500); }
.partner-link:hover { color: var(--brand-600); }

/* ===== MOBILE NAV ===== */
.mobile-toggle { display: none; background: none; border: none; padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; color: #6938EF; }
.mobile-menu { display: none; }
.mobile-menu.open { display: block; animation: slide-up 0.3s ease-out; padding-bottom: 1rem; }
.mobile-menu a { display: block; padding: 0.75rem 0; font-size: 0.875rem; font-weight: 500; color: #4E4B66; border-bottom: 1px solid #F0ECFF; }
.mobile-menu a.active { color: #6938EF; font-weight: 600; }
.mobile-menu .mobile-ctas { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }

/* ===== BADGES ===== */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.95rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; transition: all var(--dur-base) var(--ease); }
.badge-purple { background: linear-gradient(135deg,rgba(129,85,255,0.10),rgba(105,56,239,0.06)); color: var(--brand-600); border: 1px solid rgba(129,85,255,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset; }
.badge-purple:hover { box-shadow: 0 0 0 4px rgba(129,85,255,0.08); }
.badge-white { background: rgba(255,255,255,0.10); color: #DCCFFF; border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); }
.badge svg { width: 15px; height: 15px; }

/* ===== SECTION HEADERS ===== */
.section-header { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
.section-header h2 { font-size: clamp(1.875rem,4vw,3.125rem); font-weight: 800; color: var(--ink-700); margin-bottom: 1.25rem; line-height: 1.12; letter-spacing: -0.025em; }
.section-header p { font-size: 1.0625rem; color: var(--ink-400); line-height: 1.7; max-width: 42rem; margin: 0 auto; }
.gradient-text { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ===== PAGE HERO (sub-page header) ===== */
.page-hero { position: relative; padding: 9rem 0 4.5rem; background: var(--grad-soft); overflow: hidden; text-align: center; }
.page-hero::before { content:''; position: absolute; inset: 0; background-image: radial-gradient(rgba(129,85,255,0.08) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at center, black 30%, transparent 70%); pointer-events: none; }
.page-hero .hero-blob1 { position: absolute; top: 3rem; right: -4rem; width: 32rem; height: 32rem; background: radial-gradient(circle,rgba(129,85,255,0.18),transparent 70%); border-radius: 50%; filter: blur(50px); pointer-events: none; animation: orb-drift 16s ease-in-out infinite; }
.page-hero .hero-blob2 { position: absolute; bottom: -3rem; left: -3rem; width: 24rem; height: 24rem; background: radial-gradient(circle,rgba(173,144,254,0.18),transparent 70%); border-radius: 50%; filter: blur(50px); pointer-events: none; animation: orb-drift 18s ease-in-out infinite reverse; }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2.25rem,5vw,3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.25rem; color: var(--ink-800); }
.page-hero p { font-size: 1.125rem; color: var(--ink-400); max-width: 42rem; margin: 0 auto; line-height: 1.7; }

/* ===== HERO (home) ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 72px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 20% 0%, rgba(129,85,255,0.16) 0%, transparent 60%),
  radial-gradient(50% 40% at 100% 30%, rgba(173,144,254,0.18) 0%, transparent 65%),
  radial-gradient(40% 35% at 50% 100%, rgba(105,56,239,0.10) 0%, transparent 70%),
  linear-gradient(180deg,#FBFAFF 0%,#F4F0FF 60%,#EFE9FF 100%);
}
.hero-bg::after { content:''; position:absolute; inset:0; background-image: linear-gradient(rgba(129,85,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(129,85,255,0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); }
.hero-blob1 { position: absolute; top: 4rem; right: -6rem; width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(129,85,255,0.20), transparent 70%); border-radius: 50%; filter: blur(60px); animation: orb-drift 18s ease-in-out infinite; }
.hero-blob2 { position: absolute; bottom: -4rem; left: -4rem; width: 28rem; height: 28rem; background: radial-gradient(circle, rgba(173,144,254,0.22), transparent 70%); border-radius: 50%; filter: blur(60px); animation: orb-drift 22s ease-in-out infinite reverse; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding: 5rem 0; }
.hero-content h1 { font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; font-size: clamp(2.5rem,5.5vw,4.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 1.5rem; }
.hero-content h1 .dark { color: var(--ink-800); }
.hero-content h1 .hero-em { font-style: normal; position: relative; display: inline-block; padding: 0 0.15em; color: var(--brand-600); }
.hero-content h1 .hero-em::after { content:''; position: absolute; left: 0; right: 0; bottom: 0.07em; height: 0.32em; background: linear-gradient(90deg, rgba(129,85,255,0.20), rgba(173,144,254,0.30)); border-radius: 4px; z-index: -1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.95rem 0.4rem 0.4rem; border-radius: 9999px; background: rgba(255,255,255,0.75); backdrop-filter: blur(10px); border: 1px solid rgba(129,85,255,0.20); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 22px rgba(20,19,42,0.05); font-size: 0.8125rem; font-weight: 600; color: var(--ink-700); margin-bottom: 1.5rem; letter-spacing: 0.005em; cursor: default; transition: all var(--dur-base) var(--ease); }
.hero-eyebrow:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 30px rgba(105,56,239,0.16); border-color: rgba(129,85,255,0.32); }
.hero-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-500); box-shadow: 0 0 0 4px rgba(16,185,129,0.16); animation: spark 2s ease-in-out infinite; }
.hero-eyebrow-tag { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 9999px; background: var(--grad-brand-r); color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; box-shadow: 0 4px 12px rgba(129,85,255,0.32), inset 0 1px 0 rgba(255,255,255,0.22); }
.hero-eyebrow-arrow { color: var(--brand-600); transition: transform var(--dur-fast) var(--ease); }
.hero-eyebrow:hover .hero-eyebrow-arrow { transform: translateX(3px); }
.hero-eyebrow-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-brand); color: #fff; box-shadow: 0 4px 14px rgba(129,85,255,0.40), inset 0 1px 0 rgba(255,255,255,0.25); flex-shrink: 0; }
.hero-eyebrow-icon::before { content:''; position: absolute; inset: -3px; border-radius: 50%; background: radial-gradient(circle, rgba(129,85,255,0.35), transparent 65%); z-index: -1; animation: spark 2.4s ease-in-out infinite; }
.hero-eyebrow-icon svg { width: 14px; height: 14px; stroke-width: 2.5; }
.hero-logos { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px dashed rgba(129,85,255,0.18); }
.hero-logos-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-300); font-weight: 700; margin-bottom: 0.875rem; }
.hero-logos-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hero-logo-pill { padding: 0.375rem 0.875rem; border-radius: 9999px; background: rgba(255,255,255,0.65); backdrop-filter: blur(8px); border: 1px solid var(--ink-100); font-size: 0.75rem; font-weight: 600; color: var(--ink-500); transition: all var(--dur-base) var(--ease); }
.hero-logo-pill:hover { color: var(--brand-600); border-color: rgba(129,85,255,0.30); transform: translateY(-1px); }
.hero-content .desc { font-size: 1.125rem; color: var(--ink-400); line-height: 1.7; max-width: 36rem; margin-bottom: 2.25rem; }
.hero-ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.trust-indicators { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; }
.trust-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-500); }
.trust-item svg { width: 18px; height: 18px; color: var(--brand-500); }
.trust-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); animation: spark 2s ease-in-out infinite; }

/* ===== PHONE MOCKUP ===== */
.phone-area { display: flex; justify-content: center; position: relative; }
.phone-area::before { content:''; position: absolute; inset: -3rem; background: radial-gradient(circle at center, rgba(129,85,255,0.20), transparent 60%); filter: blur(40px); pointer-events: none; z-index: 0; }
.phone-wrap { position: relative; width: 288px; height: 580px; z-index: 1; animation: float 6s ease-in-out infinite; }
.phone-frame { position: absolute; inset: 0; background: linear-gradient(160deg,#1B1640 0%,#3F1A99 60%,#6938EF 100%); border-radius: 3rem; box-shadow: 0 36px 80px -20px rgba(105,56,239,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset; padding: 12px; }
.phone-frame::after { content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 18px; background: #0B0B19; border-radius: 0 0 14px 14px; }
.phone-screen { width: 100%; height: 100%; background: #fff; border-radius: 2.5rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset; }
.phone-statusbar { background: var(--grad-brand-r); padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; color: #fff; font-size: 0.75rem; font-weight: 500; }
.phone-notch { width: 5rem; height: 1.25rem; background: rgba(0,0,0,0.2); border-radius: 9999px; }
.phone-body { padding: 1.25rem; }
.phone-logo-area { text-align: center; margin-bottom: 1rem; }
.phone-icon-lg { width: 4rem; height: 4rem; margin: 0 auto; background: linear-gradient(135deg,#8155FF,#6938EF); border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; font-weight: 700; box-shadow: 0 8px 16px rgba(129,85,255,0.3); }
.wallet-card { border-radius: 0.75rem; padding: 0.75rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; color: #fff; }
.wallet-card .wc-name { font-size: 0.875rem; font-weight: 600; }
.wallet-card .wc-status { font-size: 0.75rem; opacity: 0.8; }
.wc-arrow { width: 2rem; height: 2rem; background: rgba(255,255,255,0.2); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.quick-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.quick-action { background: #F0ECFF; border-radius: 0.5rem; padding: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 500; color: #6938EF; }
.floating-card { position: absolute; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-radius: 1rem; box-shadow: 0 18px 40px -12px rgba(20,19,42,0.20), 0 0 0 1px rgba(129,85,255,0.08); padding: 0.75rem 0.875rem; display: flex; align-items: center; gap: 0.625rem; z-index: 2; }
.fc-left { width: 2.25rem; height: 2.25rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-left svg { width: 1.125rem; height: 1.125rem; }
.fc-title { font-size: 0.8125rem; font-weight: 700; color: var(--ink-700); }
.fc-sub { font-size: 0.6875rem; color: var(--ink-400); }
.fc1 { left: -4rem; top: 6rem; animation: float 4s ease-in-out infinite; }
.fc2 { right: -3rem; bottom: 8rem; animation: float 4s ease-in-out infinite 1.5s; }
.fc-green-bg { background: linear-gradient(135deg,#D1FAE5,#A7F3D0); }
.fc-green-bg svg { color: #059669; }
.fc-purple-bg { background: linear-gradient(135deg,#EDE6FF,#DCCFFF); }
.fc-purple-bg svg { color: var(--brand-600); }

/* ===== TRUST BAR ===== */
.trust-bar { padding: 4.5rem 0; background: #fff; border-bottom: 1px solid var(--ink-100); position: relative; }
.trust-bar::before { content:''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(248,247,255,0.6), transparent 30%); pointer-events: none; }
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; position: relative; }
.trust-stat { text-align: center; padding: 1.25rem 0.5rem; border-radius: 16px; transition: all var(--dur-base) var(--ease); }
.trust-stat:hover { background: var(--surface-tint); transform: translateY(-2px); }
.trust-stat-icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 0.875rem; background: linear-gradient(135deg, rgba(129,85,255,0.12), rgba(173,144,254,0.10)); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--brand-500); transition: all var(--dur-base) var(--ease); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset; }
.trust-stat:hover .trust-stat-icon { background: var(--grad-brand); color: #fff; transform: scale(1.05) rotate(-3deg); box-shadow: 0 10px 24px rgba(129,85,255,0.30); }
.trust-stat:hover .trust-stat-icon svg { color: #fff; }
.trust-stat-icon svg { width: 1.5rem; height: 1.5rem; transition: color var(--dur-base) var(--ease); }
.trust-stat-val { font-size: 2.125rem; font-weight: 800; color: var(--ink-700); letter-spacing: -0.02em; line-height: 1; }
.trust-stat-label { font-size: 0.875rem; color: var(--ink-400); margin-top: 0.4rem; }

/* ===== FEATURES ===== */
.features { padding: 6rem 0; background: #fff; position: relative; }
.features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.feature-card { position: relative; padding: 1.75rem 1.5rem; border-radius: 18px; border: 1px solid var(--ink-100); background: #fff; transition: all var(--dur-base) var(--ease); overflow: hidden; isolation: isolate; }
.feature-card::before { content:''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(129,85,255,0.06), transparent 55%); opacity: 0; transition: opacity var(--dur-base) var(--ease); z-index: -1; }
.feature-card::after { content:''; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--grad-brand-r); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease); }
.feature-card:hover { border-color: rgba(129,85,255,0.30); transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(105,56,239,0.18); }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after { transform: scaleX(1); }
.feature-icon { width: 3.25rem; height: 3.25rem; background: linear-gradient(135deg,rgba(129,85,255,0.12),rgba(173,144,254,0.10)); border: 1px solid rgba(129,85,255,0.10); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.125rem; transition: all var(--dur-base) var(--ease); }
.feature-icon svg { width: 1.5rem; height: 1.5rem; color: var(--brand-500); transition: color var(--dur-base) var(--ease); }
.feature-card:hover .feature-icon { background: var(--grad-brand); border-color: transparent; box-shadow: 0 10px 24px rgba(129,85,255,0.32); transform: scale(1.05); }
.feature-card:hover .feature-icon svg { color: #fff; }
.feature-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink-700); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.feature-card p { font-size: 0.875rem; color: var(--ink-400); line-height: 1.65; }

/* ===== HOW IT WORKS ===== */
.how-it-works { padding: 5rem 0; background: #F8F7FF; }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; }
.step { text-align: center; position: relative; }
.step-num { font-size: 3rem; font-weight: 700; color: rgba(129,85,255,0.1); margin-bottom: 1rem; }
.step-icon { width: 5rem; height: 5rem; margin: -2rem auto 0; background: linear-gradient(135deg,#8155FF,#6938EF); border-radius: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(129,85,255,0.3); transition: transform 0.3s; }
.step:hover .step-icon { transform: scale(1.1); }
.step-icon svg { width: 2.25rem; height: 2.25rem; color: #fff; }
.step h3 { font-size: 1.125rem; font-weight: 600; color: #1D2939; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.step p { font-size: 0.875rem; color: #667085; line-height: 1.6; }

/* ===== COMPARISON ===== */
.comparison { padding: 5rem 0; background: #fff; }
.comparison-table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.comparison-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.comparison-table thead { background: #F8F7FF; }
.comparison-table th { padding: 1.25rem 1.5rem; text-align: center; font-size: 0.875rem; font-weight: 600; }
.comparison-table th:first-child { text-align: left; color: #1D2939; }
.comparison-table th.highlight { color: #8155FF; background: #fff; }
.comparison-table td { padding: 1rem 1.5rem; text-align: center; font-size: 0.875rem; }
.comparison-table td:first-child { text-align: left; color: #344054; font-weight: 500; }
.comparison-table tr:nth-child(even) { background: #FAFBFC; }
.comparison-table tr:hover { background: #F8F7FF; }
.check-yes { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #8155FF; color: #fff; }
.check-yes svg { width: 1rem; height: 1rem; }
.check-yes-alt { background: #dcfce7; color: #16a34a; }
.check-no { color: #D0D5DD; }
.check-no svg { width: 1rem; height: 1rem; }

/* ===== ROI CALCULATOR ===== */
.roi-section { padding: 5rem 0; background: linear-gradient(135deg,#1D2939,#101828); }
.roi-section .section-header h2 { color: #fff; }
.roi-section .section-header p { color: #BEC2C1; }
.roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.roi-inputs { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border-radius: 1rem; padding: 2rem; border: 1px solid rgba(255,255,255,0.1); }
.roi-slider-group { margin-bottom: 2rem; }
.roi-slider-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.roi-slider-label label { font-size: 0.875rem; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
.roi-slider-label label svg { width: 1rem; height: 1rem; color: #8155FF; }
.roi-slider-label span { font-size: 1.5rem; font-weight: 700; color: #8155FF; }
.roi-slider { width: 100%; height: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 9999px; appearance: none; cursor: pointer; outline: none; }
.roi-slider::-webkit-slider-thumb { appearance: none; width: 1.25rem; height: 1.25rem; background: #8155FF; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px rgba(129,85,255,0.5); }
.roi-slider-range { display: flex; justify-content: space-between; font-size: 0.75rem; color: #BEC2C1; margin-top: 0.25rem; }
.roi-results { display: flex; flex-direction: column; gap: 1.5rem; }
.roi-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border-radius: 1rem; padding: 2rem; border: 1px solid rgba(255,255,255,0.1); }
.roi-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.roi-row + .roi-row { border-top: 1px solid rgba(255,255,255,0.1); }
.roi-row-label { font-size: 0.875rem; color: #BEC2C1; }
.roi-row-value { font-size: 1.5rem; font-weight: 700; }
.roi-row-value.white { color: #fff; }
.roi-row-value.purple { color: #8155FF; }
.roi-row-value.green { color: #4ade80; }
.roi-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.roi-mini-card { border-radius: 1rem; padding: 1.5rem; text-align: center; }
.roi-mini-card.primary { background: linear-gradient(135deg,#8155FF,#6938EF); }
.roi-mini-card.secondary { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.roi-mini-card .val { font-size: 1.875rem; font-weight: 700; color: #fff; }
.roi-mini-card.secondary .val { color: #AD90FE; }
.roi-mini-card .lbl { font-size: 0.875rem; color: rgba(255,255,255,0.8); margin-top: 0.25rem; }
.roi-mini-card.secondary .lbl { color: #BEC2C1; }

/* ===== PRICING ===== */
.pricing { padding: 5rem 0; background: #F8F7FF; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; max-width: 64rem; margin: 0 auto; }
.pricing-card { border-radius: 1rem; padding: 2rem; background: #fff; border: 1px solid #E5E7EB; transition: all 0.3s; position: relative; }
.pricing-card.popular { background: linear-gradient(to bottom,#8155FF,#6938EF); color: #fff; transform: scale(1.05); z-index: 1; box-shadow: 0 20px 40px rgba(129,85,255,0.3); }
.pricing-badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 1rem; background: #fff; border-radius: 9999px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 0.875rem; font-weight: 600; color: #1D2939; }
.pricing-badge svg { width: 1rem; height: 1rem; color: #f59e0b; fill: #f59e0b; }
.pricing-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.pricing-card .pricing-desc { font-size: 0.875rem; opacity: 0.8; margin-bottom: 1.5rem; }
.pricing-price { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.pricing-price span { font-size: 0.875rem; font-weight: 400; opacity: 0.7; }
.pricing-annual { font-size: 0.75rem; opacity: 0.6; margin-bottom: 2rem; }
.pricing-card .btn { margin-bottom: 2rem; }
.popular .btn { background: #fff; color: #6938EF; }
.pricing-features { list-style: none; }
.pricing-features li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; }
.pricing-features li svg { width: 1rem; height: 1rem; margin-top: 0.125rem; flex-shrink: 0; }
.popular .pricing-features li svg { color: #fff; }
.pricing-features li svg { color: #8155FF; }
.pricing-card:not(.popular) .pricing-features li { color: #4E4B66; }

/* ===== TESTIMONIALS ===== */
.testimonials { padding: 5rem 0; background: #fff; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 5rem; }
.testimonial-card { padding: 1.5rem; border-radius: 1rem; background: #F8F7FF; border: 1px solid #E5E7EB; transition: all 0.3s; }
.testimonial-card:hover { border-color: rgba(129,85,255,0.3); box-shadow: 0 8px 20px rgba(0,0,0,0.04); }
.testimonial-quote-icon { color: rgba(129,85,255,0.2); margin-bottom: 1rem; }
.testimonial-quote-icon svg { width: 2rem; height: 2rem; }
.testimonial-text { font-size: 0.875rem; color: #4E4B66; line-height: 1.6; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid #E5E7EB; }
.testimonial-avatar { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg,#8155FF,#AD90FE); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; }
.testimonial-name { font-size: 0.875rem; font-weight: 600; color: #1D2939; }
.testimonial-role { font-size: 0.75rem; color: #667085; }
.testimonial-stars { display: flex; gap: 2px; margin-left: auto; }
.testimonial-stars svg { width: 0.875rem; height: 0.875rem; color: #f59e0b; fill: #f59e0b; }
.case-studies-title { font-size: 1.875rem; font-weight: 700; color: #1D2939; text-align: center; margin-bottom: 2.5rem; }
.case-studies-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.case-study { border-radius: 1rem; overflow: hidden; border: 1px solid #E5E7EB; transition: all 0.3s; }
.case-study:hover { border-color: rgba(129,85,255,0.3); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.case-study-header { background: linear-gradient(to right,#8155FF,#6938EF); padding: 1.5rem; text-align: center; color: #fff; }
.case-study-metric { font-size: 2.25rem; font-weight: 700; }
.case-study-metric-label { font-size: 0.875rem; opacity: 0.8; }
.case-study-body { padding: 1.5rem; }
.case-study-tag { display: inline-block; font-size: 0.75rem; padding: 0.25rem 0.625rem; background: #F0ECFF; color: #6938EF; border-radius: 9999px; font-weight: 500; margin-bottom: 0.5rem; }
.case-study h4 { font-size: 1.125rem; font-weight: 600; color: #1D2939; margin-bottom: 0.75rem; }
.case-study p { font-size: 0.875rem; color: #667085; line-height: 1.6; }

/* ===== CTA SECTION ===== */
.cta-section { padding: 6rem 0; background:
  radial-gradient(60% 70% at 0% 0%, rgba(173,144,254,0.45) 0%, transparent 60%),
  radial-gradient(50% 60% at 100% 100%, rgba(63,26,153,0.55) 0%, transparent 60%),
  linear-gradient(135deg,#5224C4 0%,#6938EF 50%,#8155FF 100%);
  position: relative; overflow: hidden; }
.cta-section::before { content:''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); pointer-events: none; }
.cta-blobs { position: absolute; inset: 0; opacity: 0.12; }
.cta-blob { position: absolute; background: #fff; border-radius: 50%; filter: blur(50px); animation: orb-drift 20s ease-in-out infinite; }
.cta-blob:nth-child(1) { width: 28rem; height: 28rem; top: -6rem; left: -6rem; }
.cta-blob:nth-child(2) { width: 22rem; height: 22rem; bottom: -4rem; right: -4rem; animation-delay: -8s; }
.cta-blob:nth-child(3) { width: 18rem; height: 18rem; top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -14s; }
.cta-content { position: relative; text-align: center; max-width: 48rem; margin: 0 auto; }
.cta-content h2 { font-size: clamp(1.875rem,4.2vw,3.25rem); font-weight: 800; color: #fff; margin-bottom: 1.5rem; line-height: 1.12; letter-spacing: -0.025em; }
.cta-content h2 .light { background: linear-gradient(135deg,#fff,#DCCFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cta-content p { font-size: 1.125rem; color: rgba(255,255,255,0.86); max-width: 40rem; margin: 0 auto 2.5rem; line-height: 1.7; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===== MOBILE APP SECTION ===== */
.mobile-app { padding: 5rem 0; background: #fff; }
.mobile-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.app-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.app-feature-card { padding: 1rem; border-radius: 0.75rem; background: #F8F7FF; border: 1px solid #E5E7EB; }
.app-feature-card h4 { font-size: 0.875rem; font-weight: 600; color: #1D2939; }
.app-feature-card p { font-size: 0.75rem; color: #667085; }

/* ===== FAQ ===== */
.faq { padding: 5rem 0; background: #F8F7FF; }
.faq-list { max-width: 48rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { border-radius: 0.75rem; border: 1px solid #E5E7EB; background: #fff; transition: all 0.2s; overflow: hidden; }
.faq-item.open { border-color: rgba(129,85,255,0.3); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 0.875rem; font-weight: 600; color: #1D2939; }
.faq-question svg { width: 1.25rem; height: 1.25rem; color: #8155FF; flex-shrink: 0; transition: transform 0.2s; }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem 1.25rem; font-size: 0.875rem; color: #667085; line-height: 1.7; animation: fade-in 0.3s ease-out; }
.faq-item:not(.open) .faq-answer { display: none; }

/* ===== NEWSLETTER ===== */
.newsletter { padding: 4rem 0; background: #fff; border-top: 1px solid #E5E7EB; }
.newsletter-form { display: flex; gap: 0.75rem; max-width: 28rem; margin: 0 auto; }
.newsletter-input { flex: 1; height: 3rem; padding: 0 1rem; border: 1px solid #E5E7EB; border-radius: 0.5rem; font-size: 0.875rem; outline: none; transition: border-color 0.2s; }
.newsletter-input:focus { border-color: #8155FF; }
.newsletter-success { display: flex; flex-direction: column; align-items: center; gap: 1rem; animation: fade-in 0.5s ease-out; }
.newsletter-success-icon { width: 4rem; height: 4rem; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #16a34a; }
.newsletter-success-icon svg { width: 2rem; height: 2rem; }

/* ===== CONTACT FORM ===== */
.contact-section { padding: 5rem 0; background: #F8F7FF; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.contact-info-card { background: #fff; border-radius: 1rem; border: 1px solid #E5E7EB; padding: 2rem; }
.contact-info-card h3 { font-size: 1.25rem; font-weight: 700; color: #1D2939; margin-bottom: 0.5rem; }
.contact-info-card .desc { font-size: 0.9375rem; color: #667085; line-height: 1.6; margin-bottom: 2rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: linear-gradient(135deg,rgba(129,85,255,0.1),rgba(173,144,254,0.1)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #8155FF; }
.contact-info-icon svg { width: 1.125rem; height: 1.125rem; }
.contact-info-label { font-size: 0.75rem; font-weight: 600; color: #98A2B3; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.125rem; }
.contact-info-value { font-size: 0.9375rem; font-weight: 500; color: #1D2939; line-height: 1.5; }
.contact-info-value a { color: #6938EF; }
.contact-info-value a:hover { text-decoration: underline; }
.contact-form-card { background: #fff; border-radius: 1rem; border: 1px solid #E5E7EB; padding: 2.5rem; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-size: 0.8125rem; font-weight: 600; color: #344054; margin-bottom: 0.4rem; }
.form-field label span { color: #EF4444; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #D0D5DD; border-radius: 0.5rem; font-size: 0.9rem; font-family: inherit; color: #1D2939; background: #fff; transition: all 0.2s; outline: none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #8155FF; box-shadow: 0 0 0 3px rgba(129,85,255,0.1); }
.form-field textarea { resize: vertical; min-height: 7rem; }
.form-success { display: none; padding: 1rem 1.25rem; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 0.5rem; color: #065F46; font-size: 0.875rem; margin-bottom: 1.25rem; gap: 0.5rem; align-items: center; }
.form-success.show { display: flex; }
.form-success svg { width: 1.125rem; height: 1.125rem; }

/* ===== FOOTER ===== */
.footer { background: var(--grad-night); color: #fff; position: relative; overflow: hidden; }
.footer::before { content:''; position: absolute; top: -10rem; left: 50%; transform: translateX(-50%); width: 50rem; height: 20rem; background: radial-gradient(ellipse, rgba(129,85,255,0.20), transparent 70%); pointer-events: none; }
.footer-partners { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 2.5rem 0; position: relative; }
.footer-partners-label { text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; }
.footer-partners-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.footer-partner { padding: 0.55rem 1.25rem; border-radius: 9999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); font-size: 0.825rem; font-weight: 500; color: rgba(255,255,255,0.7); transition: all var(--dur-base) var(--ease); }
.footer-partner:hover { color: #fff; background: rgba(129,85,255,0.18); border-color: rgba(129,85,255,0.45); transform: translateY(-1px); }
.footer-main { padding: 4rem 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand-desc { font-size: 0.875rem; color: #BEC2C1; line-height: 1.6; max-width: 20rem; margin-top: 1rem; }
.footer-contact { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #BEC2C1; margin-top: 0.5rem; }
.footer-contact svg { width: 1rem; height: 1rem; color: #8155FF; flex-shrink: 0; }
.footer-column h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; color: #fff; }
.footer-column ul { list-style: none; }
.footer-column li { margin-bottom: 0.625rem; }
.footer-column a { font-size: 0.875rem; color: #BEC2C1; transition: color 0.2s; }
.footer-column a:hover { color: #AD90FE; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.5rem 0; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.75rem; color: #BEC2C1; }
.footer-bottom a { font-size: 0.75rem; color: #BEC2C1; margin-left: 1.5rem; transition: color 0.2s; }
.footer-bottom a:hover { color: #AD90FE; }

/* ===== CHAT WIDGET ===== */
.chat-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s; }
.chat-fab.open { background: #344054; }
.chat-fab.closed { background: linear-gradient(135deg,#8155FF,#6938EF); animation: pulse-glow 2s ease-in-out infinite; }
.chat-fab:hover { transform: scale(1.1); }
.chat-fab svg { width: 1.5rem; height: 1.5rem; }
.chat-badge { position: fixed; bottom: 4.5rem; right: 1.5rem; z-index: 200; background: #8155FF; color: #fff; font-size: 0.75rem; font-weight: 500; padding: 0.375rem 0.75rem; border-radius: 9999px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: slide-up 0.3s ease-out; }
.chat-panel { position: fixed; bottom: 6rem; right: 1.5rem; z-index: 200; width: 380px; max-width: calc(100vw - 3rem); height: 520px; background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px rgba(0,0,0,0.2); border: 1px solid #E5E7EB; display: none; flex-direction: column; overflow: hidden; animation: slide-up 0.3s ease-out; }
.chat-panel.open { display: flex; }
.chat-header { background: linear-gradient(to right,#8155FF,#6938EF); padding: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.chat-header-avatar { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.chat-header-avatar svg { width: 1.25rem; height: 1.25rem; }
.chat-header-info { flex: 1; }
.chat-header-name { font-size: 0.875rem; font-weight: 600; color: #fff; }
.chat-header-status { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.8); }
.chat-header-dot { width: 0.5rem; height: 0.5rem; background: #4ade80; border-radius: 50%; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; background: #F8F7FF; display: flex; flex-direction: column; gap: 1rem; }
.chat-msg { display: flex; gap: 0.5rem; }
.chat-msg.user { justify-content: flex-end; }
.chat-msg.bot { justify-content: flex-start; }
.chat-msg-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.25rem; }
.chat-msg.bot .chat-msg-avatar { background: linear-gradient(135deg,#8155FF,#6938EF); color: #fff; }
.chat-msg.user .chat-msg-avatar { background: #EDE9FE; color: #6938EF; }
.chat-msg-avatar svg { width: 0.875rem; height: 0.875rem; }
.chat-msg-bubble { max-width: 75%; border-radius: 1rem; padding: 0.625rem 1rem; font-size: 0.875rem; line-height: 1.5; }
.chat-msg.bot .chat-msg-bubble { background: #fff; color: #344054; border: 1px solid #E5E7EB; border-radius: 1rem 1rem 1rem 0.25rem; }
.chat-msg.user .chat-msg-bubble { background: linear-gradient(to right,#8155FF,#6938EF); color: #fff; border-radius: 1rem 1rem 0.25rem 1rem; }
.chat-msg-time { font-size: 0.625rem; margin-top: 0.25rem; }
.chat-msg.bot .chat-msg-time { color: #BEC2C1; }
.chat-msg.user .chat-msg-time { color: rgba(255,255,255,0.6); }
.chat-typing { display: flex; gap: 0.5rem; align-items: center; }
.chat-typing .chat-msg-avatar { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg,#8155FF,#6938EF); display: flex; align-items: center; justify-content: center; color: #fff; }
.chat-typing .chat-msg-avatar svg { width: 0.875rem; height: 0.875rem; }
.chat-typing-dots { background: #fff; border-radius: 1rem 1rem 1rem 0.25rem; border: 1px solid #E5E7EB; padding: 0.75rem 1rem; display: flex; gap: 4px; }
.chat-typing-dot { width: 0.5rem; height: 0.5rem; background: #8155FF; border-radius: 50%; animation: bounce-dot 1.2s infinite; }
.chat-typing-dot:nth-child(2) { animation-delay: 0.1s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.2s; }
.chat-quick-replies { padding: 0.5rem 1rem; background: #fff; border-top: 1px solid #E5E7EB; }
.chat-quick-replies-label { font-size: 0.75rem; color: #BEC2C1; margin-bottom: 0.5rem; }
.chat-quick-replies-grid { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chat-quick-reply { font-size: 0.75rem; padding: 0.375rem 0.75rem; background: #F0ECFF; color: #6938EF; border-radius: 9999px; border: none; cursor: pointer; transition: background 0.2s; }
.chat-quick-reply:hover { background: #EDE9FE; }
.chat-input-area { padding: 0.75rem; background: #fff; border-top: 1px solid #E5E7EB; display: flex; gap: 0.5rem; }
.chat-input { flex: 1; height: 2.5rem; padding: 0 0.75rem; border: 1px solid #E5E7EB; border-radius: 0.5rem; font-size: 0.875rem; outline: none; }
.chat-input:focus { border-color: #8155FF; }
.chat-send { width: 2.5rem; height: 2.5rem; background: linear-gradient(to right,#8155FF,#6938EF); border: none; border-radius: 0.5rem; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.chat-send:hover { opacity: 0.9; }
.chat-send svg { width: 1rem; height: 1rem; }

/* ===== BACK TO TOP ===== */
.back-to-top { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 50; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg,#8155FF,#6938EF); color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(129,85,255,0.3); transition: all 0.3s; }
.back-to-top.visible { display: flex; }
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(129,85,255,0.4); }
.back-to-top svg { width: 1.25rem; height: 1.25rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content .desc { margin: 0 auto 2rem; }
  .hero-ctas { justify-content: center; }
  .trust-indicators { justify-content: center; }
  .phone-area { display: none; }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); gap: 2.5rem; }
  .roi-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 24rem; }
  .pricing-card.popular { transform: none; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .case-studies-grid { grid-template-columns: 1fr 1fr; }
  .mobile-app-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: span 2; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links, .nav-ctas { display: none; }
  .mobile-toggle { display: block; }
  .features-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .case-studies-grid { grid-template-columns: 1fr; }
  .app-features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: span 1; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .newsletter-form { flex-direction: column; }
  .chat-panel { bottom: 5rem; right: 0.75rem; left: 0.75rem; width: auto; max-width: none; height: 480px; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .contact-form-card { padding: 1.5rem; }
  .contact-info-card { padding: 1.5rem; }
  .contact-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SKILLS DEVELOPMENT PAGE
   ============================================================ */
.skills-stats-bar { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; padding: 0.625rem 0.375rem; background: rgba(255,255,255,0.9); border: 1px solid #E9E3FF; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-top: 1.25rem; }
.skills-stat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: #667085; padding: 0.25rem 1.25rem; border-right: 1px solid #EDE9FE; white-space: nowrap; }
.skills-stat:last-child { border-right: none; }
.skills-stat svg { width: 1.125rem; height: 1.125rem; color: #8155FF; }
.skills-stat strong { color: #1D2939; font-weight: 600; }

.filters-section { padding: 1.5rem 0; background: #fff; border-bottom: 1px solid #EDE9FE; position: sticky; top: 64px; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.filters-inner { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.search-box { position: relative; flex: 1; min-width: 240px; }
.search-box svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: #98A2B3; pointer-events: none; }
.search-box input { width: 100%; height: 2.625rem; padding: 0 1rem 0 2.75rem; border: 1.5px solid #E5E7EB; border-radius: 0.75rem; font-size: 0.875rem; outline: none; background: #F8F7FF; transition: all 0.2s; font-family: inherit; }
.search-box input:focus { border-color: #8155FF; background: #fff; box-shadow: 0 0 0 3px rgba(129,85,255,0.1); }
.filter-select { height: 2.625rem; padding: 0 2rem 0 1rem; border: 1.5px solid #E5E7EB; border-radius: 0.75rem; font-size: 0.875rem; outline: none; background: #F8F7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center; appearance: none; cursor: pointer; transition: all 0.2s; min-width: 165px; font-family: inherit; color: #1D2939; }
.filter-select:focus { border-color: #8155FF; background-color: #fff; box-shadow: 0 0 0 3px rgba(129,85,255,0.1); }
.results-info { font-size: 0.875rem; color: #667085; margin-top: 0.625rem; }
.results-info strong { color: #8155FF; font-weight: 600; }

.category-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.cat-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; border: 1.5px solid #E5E7EB; background: #fff; color: #4E4B66; transition: all 0.2s; font-family: inherit; }
.cat-pill:hover { border-color: #8155FF; color: #8155FF; }
.cat-pill.active { border-color: #8155FF; background: #F0ECFF; color: #6938EF; font-weight: 600; }
.cat-pill svg { width: 1rem; height: 1rem; }
.cat-pill .count { background: rgba(129,85,255,0.1); color: #6938EF; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.cat-pill.active .count { background: rgba(129,85,255,0.2); }

.courses-section { padding: 2rem 0 4rem; background: #F8F7FF; }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

.course-card { background: #fff; border-radius: 1rem; border: 1px solid #E5E7EB; overflow: hidden; transition: all 0.3s; position: relative; display: flex; flex-direction: column; }
.course-card:hover { border-color: rgba(129,85,255,0.4); box-shadow: 0 12px 32px rgba(129,85,255,0.12); transform: translateY(-4px); }
.course-card-img { height: 160px; background: linear-gradient(135deg,#8155FF,#6938EF); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.course-card-img::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18) 0, transparent 60%); }
.course-card-img .cat-icon { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.25); border: 2px solid rgba(255,255,255,0.3); position: relative; z-index: 2; }
.course-card-img .cat-icon svg { width: 2rem; height: 2rem; }
.course-card-img .level-badge { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: #fff; backdrop-filter: blur(8px); background: rgba(0,0,0,0.25); z-index: 3; }
.course-card-img .ref-badge { position: absolute; bottom: 0.75rem; left: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 600; background: rgba(255,255,255,0.92); color: #4E4B66; z-index: 3; }
.course-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.course-card-route { display: inline-block; font-size: 0.6875rem; font-weight: 600; color: #6938EF; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.course-card-title { font-size: 1rem; font-weight: 600; color: #1D2939; line-height: 1.4; margin-bottom: 0.5rem; }
.course-card-desc { font-size: 0.8125rem; color: #667085; line-height: 1.6; margin-bottom: 1rem; flex: 1; }
.course-card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.meta-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: #667085; }
.meta-item svg { width: 0.875rem; height: 0.875rem; color: #8155FF; flex-shrink: 0; }
.course-card-actions { display: flex; gap: 0.5rem; }
.course-card-actions .btn { flex: 1; justify-content: center; padding: 0.5rem 0.875rem; font-size: 0.8125rem; }

.no-results { text-align: center; padding: 4rem 2rem; }
.no-results svg { width: 4rem; height: 4rem; color: #D0D5DD; margin-bottom: 1rem; }
.no-results h3 { font-size: 1.25rem; font-weight: 600; color: #1D2939; margin-bottom: 0.5rem; }
.no-results p { font-size: 0.875rem; color: #667085; }

@media (max-width: 768px) {
  .filters-section { position: static; }
  .filters-inner { flex-direction: column; align-items: stretch; }
  .search-box { min-width: 100%; }
  .filter-select { min-width: 100%; width: 100%; }
  .courses-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEGAL PAGES (Terms / Privacy)
   ============================================================ */
.legal-section { padding: 4rem 0 5rem; background: #fff; }
.legal-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; max-width: 1080px; margin: 0 auto; align-items: start; }
.legal-toc { position: sticky; top: 88px; background: #F8F7FF; border: 1px solid #EDE9FE; border-radius: 1rem; padding: 1.25rem; }
.legal-toc-label { font-size: 0.6875rem; font-weight: 700; color: #98A2B3; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; margin-bottom: 0.375rem; }
.legal-toc a { display: block; padding: 0.4rem 0.5rem; border-radius: 0.5rem; font-size: 0.8125rem; color: #4E4B66; transition: all 0.15s; line-height: 1.4; }
.legal-toc a::before { content: counter(toc) ". "; color: #8155FF; font-weight: 600; }
.legal-toc a:hover { background: #fff; color: #6938EF; }
.legal-content { font-size: 0.9375rem; color: #4E4B66; line-height: 1.75; }
.legal-content > p:first-of-type { font-size: 0.875rem; color: #98A2B3; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid #EDE9FE; }
.legal-content section { margin-bottom: 2.5rem; scroll-margin-top: 88px; }
.legal-content h2 { font-size: 1.375rem; font-weight: 700; color: #1D2939; margin-bottom: 0.875rem; padding-bottom: 0.625rem; border-bottom: 2px solid #F0ECFF; }
.legal-content h3 { font-size: 1.0625rem; font-weight: 700; color: #1D2939; margin-top: 1.5rem; margin-bottom: 0.625rem; }
.legal-content p { margin-bottom: 1rem; }
.legal-content ul { margin: 0.5rem 0 1rem 1.25rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content strong { color: #1D2939; font-weight: 600; }
.legal-content a { color: #6938EF; text-decoration: underline; }
.legal-content a:hover { color: #8155FF; }
.legal-callout { background: linear-gradient(135deg,#F8F7FF,#F0ECFF); border: 1px solid #EDE9FE; border-radius: 0.75rem; padding: 1.25rem 1.5rem; margin: 1rem 0 1.5rem; }
.legal-callout p { margin-bottom: 0; }
.legal-callout strong { color: #6938EF; }

@media (max-width: 900px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .legal-toc { position: static; }
}

/* ============================================================
   LIVE DEMO — Card Builder + Member Experience
   ============================================================ */
.demo-section { padding: 5rem 0; background: linear-gradient(135deg,#1D2939,#101828); position: relative; overflow: hidden; }
.demo-section .section-header h2 { color: #fff; }
.demo-section .section-header p { color: #BEC2C1; }
.demo-blobs { position: absolute; inset: 0; opacity: 0.05; pointer-events: none; }
.demo-blob { position: absolute; background: #8155FF; border-radius: 50%; }
.demo-blob:nth-child(1) { width: 31.25rem; height: 31.25rem; top: -6rem; right: -4rem; }
.demo-blob:nth-child(2) { width: 25rem; height: 25rem; bottom: -4rem; left: -4rem; }
.demo-tabs { display: flex; justify-content: center; margin-bottom: 2.5rem; position: relative; z-index: 2; }
.demo-tabs-inner { display: inline-flex; background: rgba(255,255,255,0.1); border-radius: 0.75rem; padding: 4px; }
.demo-tab { padding: 0.625rem 1.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #BEC2C1; background: none; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; font-family: inherit; }
.demo-tab.active { background: linear-gradient(to right,#8155FF,#6938EF); color: #fff; box-shadow: 0 4px 12px rgba(129,85,255,0.3); }
.demo-tab svg { width: 1rem; height: 1rem; }
.demo-panel { display: none; position: relative; z-index: 2; }
.demo-panel.active { display: block; animation: fade-in 0.4s ease-out; }
.demo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.demo-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; }
.demo-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(8px); border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.1); }
.demo-label { display: block; font-size: 0.875rem; font-weight: 500; color: #fff; margin-bottom: 0.75rem; }
.demo-input { width: 100%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.75rem; padding: 0.75rem 1rem; color: #fff; font-size: 0.875rem; outline: none; transition: border-color 0.2s; font-family: inherit; }
.demo-input:focus { border-color: #8155FF; }
.demo-input::placeholder { color: #BEC2C1; }
.demo-colors { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; }
.demo-color-btn { height: 4rem; border-radius: 0.75rem; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; position: relative; }
.demo-color-btn:hover { transform: scale(1.05); }
.demo-color-btn.active { border-color: #fff; transform: scale(1.05); }
.demo-color-name { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 500; color: #fff; opacity: 0; transition: opacity 0.2s; }
.demo-color-btn:hover .demo-color-name { opacity: 1; }
.demo-color-check { position: absolute; top: -4px; right: -4px; width: 1.25rem; height: 1.25rem; background: #fff; border-radius: 50%; display: none; align-items: center; justify-content: center; }
.demo-color-btn.active .demo-color-check { display: flex; }
.demo-color-check svg { width: 0.75rem; height: 0.75rem; color: #8155FF; }
.demo-feature-list { list-style: none; padding: 0; margin: 0; }
.demo-feature-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #BEC2C1; padding: 0.25rem 0; }
.demo-feature-list li svg { width: 1rem; height: 1rem; color: #8155FF; flex-shrink: 0; }

/* Demo Phone */
.demo-phone { display: flex; justify-content: center; }
.demo-phone-inner { position: relative; width: 20.5rem; height: 32rem; background: linear-gradient(to bottom,#344054,#1D2939); border-radius: 2.5rem; box-shadow: 0 25px 50px rgba(0,0,0,0.3); padding: 1rem; display: flex; flex-direction: column; }
.demo-phone-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.5rem; margin-bottom: 0.5rem; }
.demo-phone-statusbar span { font-size: 10px; color: #BEC2C1; }
.demo-phone-notch { width: 4rem; height: 1rem; background: #344054; border-radius: 9999px; }
.demo-phone-header { text-align: center; margin-bottom: 1rem; }
.demo-phone-icon { width: 3rem; height: 3rem; margin: 0 auto; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.demo-phone-header h4 { font-size: 0.875rem; font-weight: 600; color: #fff; margin-top: 0.5rem; }
.demo-phone-header p { font-size: 10px; color: #BEC2C1; }
.demo-wallet-card { border-radius: 1rem; padding: 1.25rem; color: #fff; position: relative; overflow: hidden; flex-shrink: 0; }
.demo-wallet-pattern { position: absolute; inset: 0; opacity: 0.1; }
.demo-wallet-pattern div { position: absolute; background: #fff; border-radius: 50%; }
.demo-wallet-pattern div:nth-child(1) { width: 10rem; height: 10rem; top: -3rem; right: -2rem; }
.demo-wallet-pattern div:nth-child(2) { width: 8rem; height: 8rem; bottom: -2rem; left: -2rem; }
.demo-wallet-content { position: relative; }
.demo-wallet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.demo-wallet-name { font-size: 1rem; font-weight: 700; }
.demo-wallet-tier { display: flex; align-items: center; gap: 0.25rem; background: rgba(255,255,255,0.2); border-radius: 9999px; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; }
.demo-wallet-tier svg { width: 0.75rem; height: 0.75rem; color: #fff; fill: #fff; }
.demo-wallet-bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.demo-wallet-label { font-size: 10px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; }
.demo-wallet-value { font-size: 0.875rem; font-family: monospace; color: #fff; margin-top: 0.125rem; }
.demo-wallet-points { font-size: 1.5rem; font-weight: 700; color: #fff; }
.demo-stamp-section { margin-top: 1rem; background: rgba(255,255,255,0.05); border-radius: 0.75rem; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.1); }
.demo-stamp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.demo-stamp-header span { font-size: 0.75rem; }
.demo-stamp-header .stamp-label { color: #fff; font-weight: 500; }
.demo-stamp-header .stamp-count { color: #BEC2C1; }
.demo-stamps { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.demo-stamp { aspect-ratio: 1; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; transition: all 0.3s; background: rgba(255,255,255,0.1); color: #4E4B66; }
.demo-stamp.filled { color: #fff; }
.demo-stamp-complete { text-align: center; font-size: 0.75rem; color: #4ade80; margin-top: 0.5rem; font-weight: 500; }
.demo-qr { margin-top: auto; padding-top: 1rem; display: flex; justify-content: center; }
.demo-qr-inner { width: 5rem; height: 5rem; border-radius: 0.5rem; padding: 4px; background: rgba(129,85,255,0.1); border: 1px solid rgba(129,85,255,0.2); }
.demo-qr-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; width: 100%; height: 100%; }
.demo-qr-cell { border-radius: 1px; }

/* Demo Purchase Simulator */
.demo-product { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-radius: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.demo-product:hover { background: rgba(255,255,255,0.1); border-color: rgba(129,85,255,0.3); }
.demo-product-left { display: flex; align-items: center; gap: 0.75rem; }
.demo-product-emoji { font-size: 1.25rem; }
.demo-product-name { font-size: 0.875rem; font-weight: 500; color: #fff; }
.demo-product-price { font-size: 0.75rem; color: #BEC2C1; }
.demo-product-pts { font-size: 0.75rem; font-weight: 600; color: #AD90FE; }
.demo-reset-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem; border-radius: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #BEC2C1; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; margin-top: 1rem; font-family: inherit; }
.demo-reset-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.demo-reset-btn svg { width: 1rem; height: 1rem; }

/* Demo Stats */
.demo-points-display { text-align: center; }
.demo-points-label { font-size: 0.75rem; color: #BEC2C1; text-transform: uppercase; letter-spacing: 0.05em; }
.demo-points-value { font-size: 3rem; font-weight: 700; color: #fff; margin: 0.25rem 0; }
.demo-tier-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; }
.demo-tier-badge svg { width: 1rem; height: 1rem; }
.demo-reward-section { margin-top: 0; }
.demo-reward-label { font-size: 0.875rem; font-weight: 500; color: #fff; margin-bottom: 0.5rem; }
.demo-reward-name { font-size: 1.125rem; font-weight: 600; color: #fff; }
.demo-progress-bar { width: 100%; height: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 9999px; overflow: hidden; margin-top: 0.75rem; }
.demo-progress-fill { height: 100%; background: linear-gradient(to right,#8155FF,#6938EF); border-radius: 9999px; transition: width 0.5s; }
.demo-reward-remaining { font-size: 0.75rem; color: #BEC2C1; margin-top: 0.5rem; }

/* Activity Feed */
.demo-activity-item { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-radius: 0.75rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); animation: slide-up 0.3s ease-out; margin-bottom: 0.5rem; }
.demo-activity-name { font-size: 0.875rem; font-weight: 500; color: #fff; }
.demo-activity-time { font-size: 0.75rem; color: #BEC2C1; }
.demo-activity-pts { font-size: 0.875rem; font-weight: 600; color: #4ade80; }
.demo-empty-activity { text-align: center; padding: 2rem; }
.demo-empty-activity svg { width: 2.5rem; height: 2.5rem; color: rgba(255,255,255,0.2); margin: 0 auto 0.75rem; }
.demo-empty-activity p { font-size: 0.875rem; color: #BEC2C1; }

/* Milestones */
.demo-milestone { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem; border-radius: 0.5rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); margin-bottom: 0.5rem; }
.demo-milestone.achieved { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.2); }
.demo-milestone-left { display: flex; align-items: center; gap: 0.5rem; }
.demo-milestone-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.demo-milestone-dot.locked { background: rgba(255,255,255,0.1); }
.demo-milestone-dot.locked span { font-size: 10px; color: #BEC2C1; }
.demo-milestone-dot.unlocked { background: #4ade80; }
.demo-milestone-dot svg { width: 0.75rem; height: 0.75rem; color: #fff; }
.demo-milestone-name { font-size: 0.875rem; font-weight: 500; }
.demo-milestone-name.achieved { color: #4ade80; }
.demo-milestone-name.locked { color: #BEC2C1; }
.demo-milestone-pts { font-size: 0.75rem; color: #BEC2C1; }

/* Tier Upgrade Banner */
.demo-tier-upgrade { position: fixed; inset: 0; pointer-events: none; z-index: 300; display: flex; align-items: center; justify-content: center; animation: fade-in 0.3s ease-out; }
.demo-tier-upgrade-inner { background: linear-gradient(135deg,#8155FF,#6938EF); color: #fff; padding: 1.5rem 2rem; border-radius: 1rem; box-shadow: 0 25px 50px rgba(0,0,0,0.3); animation: slide-up 0.3s ease-out; pointer-events: auto; }
.demo-tier-upgrade-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.demo-tier-upgrade-sub { font-size: 0.875rem; color: rgba(255,255,255,0.8); }
.demo-cta-text { text-align: center; font-size: 0.875rem; color: #BEC2C1; margin-bottom: 1rem; }
.demo-tier-colors { --bronze: #CD7F32; --silver: #C0C0C0; --gold: #FFD700; --platinum: #E5E4E2; }

@media (max-width: 900px) {
  .demo-grid-3 { grid-template-columns: 1fr !important; }
  .demo-grid-2 { grid-template-columns: 1fr !important; }
  .demo-phone { display: none !important; }
  .demo-grid-2 > div:last-child { display: block; }
}