:root {
  --teal: #14B8A6;
  --teal-light: #5eead4;
  --teal-rgb: 20,184,166;
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --glass-bg: rgba(10,15,22,.95);
  --glass-border: rgba(255,255,255,.08);
  --text-primary: rgba(255,255,255,.95);
  --text-secondary: rgba(255,255,255,.55);
  --text-muted: rgba(255,255,255,.35);
}

:root {
  --teal-frost: #F0FDFA;
  --teal-mist: #CCFBF1;
  --teal-light: #99F6E4;
  --teal: #0F766E;
  --teal-bright: #14B8A6;
  --teal-deep: #115E59;
  --teal-pale: #CCFBF1;
  --amber: #0F766E;
  --amber-bright: #14B8A6;
  --amber-pale: #F0FDFA;
  --amber-deep: #0D6B64;
  --midnight: #1A1A1A;
  --charcoal: #2D2D2D;
  --stone: #6B7280;
  --stone-light: #9CA3AF;
  --warm-white: #FAFFFE;
  --coral: #F97066;
  --green: #22C55E;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-soft: 0 1px 3px rgba(15,118,110,.04), 0 8px 24px rgba(15,118,110,.03);
  --shadow-medium: 0 4px 12px rgba(15,118,110,.05), 0 16px 40px rgba(15,118,110,.04);
  --shadow-glow: 0 0 0 1px rgba(15,118,110,.12), 0 8px 30px rgba(15,118,110,.08);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body { font-family:var(--font-body); color:var(--midnight); background:#111114; line-height:1.6; overflow-x:clip; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes scaleIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes pulse { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1);opacity:1} }
@keyframes blob-drift { 0%,100%{transform:rotate(0) scale(1)} 33%{transform:rotate(3deg) scale(1.03)} 66%{transform:rotate(-2deg) scale(.97)} }
@keyframes grain { 0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)} 30%{transform:translate(3%,-15%)} 50%{transform:translate(12%,9%)} 70%{transform:translate(9%,4%)} 90%{transform:translate(-1%,7%)} }
@keyframes shimmer-line { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s } .reveal-delay-2 { transition-delay:.2s } .reveal-delay-3 { transition-delay:.3s } .reveal-delay-4 { transition-delay:.4s }

/* ========================= HEADER STYLES ========================= */
/* ========================= PAGE STYLES =========================== */
/* ===== HERO — Dark ===== */
.hero { position:relative; z-index:1; padding:90px 0 100px; background:#111114; overflow:clip; }
/* Mesh gradient background — dark aurora */
.hero::before { content:''; position:absolute; inset:0; background:
  radial-gradient(ellipse 70% 50% at 10% 15%, rgba(20,184,166,.03) 0%, transparent 55%),
  radial-gradient(ellipse 50% 40% at 90% 80%, rgba(139,92,246,.02) 0%, transparent 45%),
  radial-gradient(ellipse 40% 50% at 50% 0%, rgba(20,184,166,.02) 0%, transparent 50%),
  radial-gradient(ellipse 30% 30% at 70% 30%, rgba(245,180,50,.01) 0%, transparent 40%);
  pointer-events:none; }
/* Grain texture */
.hero::after { content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
  pointer-events:none; opacity:.5; }
/* Grid pattern overlay */
.hero-grid-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.02;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
}
/* Animated gradient orbs — dark */
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); }
.hero-orb-1 { width:700px; height:600px; top:-250px; right:-150px; background:rgba(20,184,166,.04); animation:orb-float 20s ease-in-out infinite; }
.hero-orb-2 { width:500px; height:500px; bottom:-200px; left:-120px; background:rgba(139,92,246,.03); animation:orb-float 16s ease-in-out infinite reverse; }
.hero-orb-3 { width:500px; height:500px; top:30%; left:20%; background:rgba(245,180,50,.02); animation:orb-float 24s ease-in-out infinite 4s; filter:blur(120px); }

/* Glows that bleed beyond hero into glass sections above/below */
.hero-bleed-glow{position:absolute;left:50%;pointer-events:none;z-index:1}
.hero-bleed-top{
  top:-60px;width:700px;height:160px;margin-left:-350px;
  background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(20,184,166,.06) 0%,rgba(139,92,246,.03) 40%,transparent 70%);
  filter:blur(40px);
}
.hero-bleed-bottom{
  bottom:-140px;width:1000px;height:350px;margin-left:-500px;
  background:
    radial-gradient(ellipse 50% 60% at 55% 30%,rgba(20,184,166,.08) 0%,transparent 70%),
    radial-gradient(ellipse 45% 55% at 45% 35%,rgba(139,92,246,.04) 0%,transparent 70%);
  filter:blur(50px);
  animation:orbFloat 12s ease-in-out infinite alternate;
}
@keyframes orbFloat{0%{transform:translateX(-10px)}100%{transform:translateX(10px)}}
@keyframes orb-float {
  0%,100% { transform:translate(0,0) scale(1); }
  25% { transform:translate(30px,-20px) scale(1.05); }
  50% { transform:translate(-20px,30px) scale(.95); }
  75% { transform:translate(15px,15px) scale(1.02); }
}
.hero-content { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px 6px 8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:50px; font-size:13px; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:24px; animation:fadeUp .8s cubic-bezier(.22,1,.36,1) both; }
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--teal-bright); animation:pulse 2s ease infinite; }
.hero h1 { font-family:var(--font-display); font-size:clamp(42px,5.5vw,66px); font-weight:700; line-height:1.1; letter-spacing:-.03em; color:#fff; animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .1s both; }
.hero h1 em {
  font-style:italic; position:relative; display:inline-block;
  background: linear-gradient(
    135deg,
    var(--teal) 0%,
    var(--teal-bright) 20%,
    var(--teal-bright) 40%,
    rgba(94,234,212,.8) 50%,
    var(--teal-bright) 60%,
    var(--teal) 80%,
    var(--teal-bright) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 6s ease infinite;
}
.hero h1 em::after {
  content:''; position:absolute; bottom:-2px; left:-6px; right:-6px; height:6px;
  border-radius:3px; z-index:-1;
  /* Multi-color aurora gradient */
  background:linear-gradient(
    90deg,
    rgba(20,184,166,.15) 0%,
    rgba(20,184,166,.4) 15%,
    rgba(94,234,212,.5) 30%,
    rgba(139,92,246,.35) 50%,
    rgba(59,130,246,.4) 65%,
    rgba(20,184,166,.5) 80%,
    rgba(20,184,166,.15) 100%
  );
  background-size:200% 100%;
  animation:auroraLine 4s ease infinite;
  /* Glow beneath the line */
  box-shadow:
    0 0 12px rgba(20,184,166,.3),
    0 0 30px rgba(20,184,166,.1),
    0 2px 8px rgba(139,92,246,.15);
}
/* Traveling light particle on the underline */
.hero h1 em::before {
  content:''; position:absolute; bottom:-4px; left:-6px; z-index:0;
  width:40px; height:10px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.35) 0%,rgba(94,234,212,.15) 40%,transparent 70%);
  filter:blur(3px);
  animation:lineParticle 5s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events:none;
}
@keyframes auroraLine {
  0% { background-position:0% 50%; box-shadow:0 0 12px rgba(20,184,166,.3),0 0 30px rgba(20,184,166,.1),0 2px 8px rgba(139,92,246,.15); }
  33% { box-shadow:0 0 16px rgba(139,92,246,.3),0 0 35px rgba(139,92,246,.1),0 2px 8px rgba(20,184,166,.15); }
  66% { box-shadow:0 0 14px rgba(59,130,246,.25),0 0 30px rgba(59,130,246,.08),0 2px 8px rgba(20,184,166,.12); }
  100% { background-position:200% 50%; box-shadow:0 0 12px rgba(20,184,166,.3),0 0 30px rgba(20,184,166,.1),0 2px 8px rgba(139,92,246,.15); }
}
@keyframes lineParticle {
  0% { left:-6px; opacity:0; }
  15% { opacity:.7; }
  85% { opacity:.7; }
  100% { left:calc(100% - 34px); opacity:0; }
}
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-sub { font-size:18px; line-height:1.7; color:rgba(255,255,255,.5); margin-top:20px; max-width:480px; animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .2s both; }
.hero-actions { display:flex; align-items:center; gap:16px; margin-top:36px; animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .3s both; }
.btn-primary { font-family:var(--font-body); }
.btn-primary svg { transition:transform .4s cubic-bezier(.22,1,.36,1); position:relative; z-index:2; }
.btn-primary:hover svg { transform:translateX(4px); }
.hero-note { font-size:13px; color:rgba(255,255,255,.3); margin-top:16px; display:flex; align-items:center; gap:6px; justify-content:flex-start; animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .4s both; }
.hero-note svg { flex-shrink:0; stroke:var(--teal-bright); opacity:.7; }

/* Hero Visual — Liquid Glass Dashboard */
.hero-visual { position:relative; animation:scaleIn 1s cubic-bezier(.22,1,.36,1) .3s both; opacity:.92; transition:opacity .6s ease; overflow:visible; }
.hero-visual:hover { opacity:1; }
@keyframes chartDraw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow-border{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes order-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Metallic shimmer animation */
@keyframes metal-shimmer {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
@keyframes metal-pulse {
  0%,100% { opacity:.7; }
  50% { opacity:1; }
}

/* ===== DASHBOARD — Floating in Space ===== */
@keyframes dashLevitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dashShadowPulse{0%,100%{opacity:.5;transform:scaleX(.92)}50%{opacity:.3;transform:scaleX(.85)}}

/* Outer ambient glow */
.hero-visual::before {
  content:'';position:absolute;inset:-10px;border-radius:30px;z-index:0;
  box-shadow:
    0 0 20px rgba(20,184,166,.05),
    0 0 50px rgba(20,184,166,.03);
  pointer-events:none;
  animation:metal-pulse 4s ease infinite;
}
/* Floor reflection — shows it's floating */
.hero-visual::after{
  content:'';position:absolute;bottom:-36px;left:12%;right:12%;height:30px;z-index:-1;
  background:radial-gradient(ellipse 100% 100% at 50% 0%,rgba(20,184,166,.07) 0%,transparent 70%);
  filter:blur(12px);
  animation:dashShadowPulse 8s ease-in-out infinite;
  pointer-events:none;
}

/* Rotating glass cube behind dashboard — same glass as hero-float cards */
.dash-rotate-cube{
  position:absolute;z-index:0;
  width:110%;height:110%;
  top:-5%;left:-5%;
  border-radius:24px;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.015) 0%,
    rgba(255,255,255,.005) 30%,
    rgba(255,255,255,.003) 50%,
    rgba(255,255,255,.005) 70%,
    rgba(255,255,255,.012) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 1px 0 0 rgba(255,255,255,.03) inset;
  border:1px solid rgba(255,255,255,.025);
  border-top-color:rgba(255,255,255,.05);
  border-bottom-color:rgba(255,255,255,.01);
  animation:metal-shimmer 18s linear infinite;
  pointer-events:none;
  overflow:hidden;
}
/* Top highlight — barely visible frost */
.dash-rotate-cube::before{
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.02) 0%,
    transparent 60%
  );
  pointer-events:none;z-index:1;
}
/* Moving shimmer — ghost-like */
.dash-rotate-cube::after{
  content:'';position:absolute;top:-50%;
  width:55%;height:200%;
  background:linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,.03) 46%,
    rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.03) 54%,
    transparent 62%, transparent 100%
  );
  pointer-events:none;z-index:2;
  animation:glass-shimmer 9s ease-in-out infinite;
}
/* Conic color refraction overlay */
.dash-glass-refraction{
  position:absolute;z-index:0;
  width:110%;height:110%;
  top:-5%;left:-5%;
  border-radius:24px;
  background:conic-gradient(
    from 0deg,
    rgba(20,184,166,.015) 0deg,
    rgba(139,92,246,.01) 60deg,
    rgba(20,184,166,.015) 120deg,
    rgba(255,220,100,.008) 180deg,
    rgba(59,130,246,.01) 240deg,
    rgba(20,184,166,.015) 300deg,
    rgba(20,184,166,.015) 360deg
  );
  animation:metal-shimmer 18s linear infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}

/* Visible border frame with soft glow */
.dash-border-glow {
  position:absolute;inset:-3px;border-radius:27px;z-index:1;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 30px rgba(20,184,166,.04),
    0 24px 70px rgba(0,0,0,.45),
    0 50px 120px rgba(0,0,0,.2);
  animation:dashLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Top highlight on frame */
.dash-border-glow::before {
  content:'';position:absolute;top:-1px;left:40px;right:40px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.08) 70%,transparent);
  pointer-events:none;
}
.dash-border-glow::after {
  content:'';position:absolute;inset:0;border-radius:27px;
  pointer-events:none;
}

/* Dash syncs with frame levitation */
.dash{animation:dashLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite}

/* === Epic background FX behind dashboard === */
.hero-vfx{
  position:absolute;inset:-100px -80px -180px -80px;z-index:-1;pointer-events:none;
  overflow:visible;
}
/* Main aurora nebula */
@keyframes nebulaShift{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  33%{transform:translate(20px,-15px) scale(1.05) rotate(2deg)}
  66%{transform:translate(-15px,20px) scale(.97) rotate(-1deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
.hero-vfx-nebula{
  position:absolute;inset:-60px;
  background:
    radial-gradient(ellipse 50% 60% at 25% 30%,rgba(20,184,166,.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 75% 65%,rgba(139,92,246,.06) 0%,transparent 55%),
    radial-gradient(ellipse 35% 35% at 60% 20%,rgba(59,130,246,.04) 0%,transparent 50%),
    radial-gradient(ellipse 45% 40% at 50% 95%,rgba(20,184,166,.06) 0%,transparent 55%);
  filter:blur(35px);
  animation:nebulaShift 18s ease-in-out infinite;
}

/* Pulsing rings */
@keyframes ringExpand{
  0%{transform:scale(.6);opacity:.3}
  50%{transform:scale(1);opacity:.08}
  100%{transform:scale(1.4);opacity:0}
}
.hero-vfx-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(20,184,166,.15);
  pointer-events:none;
}
.hero-vfx-ring-1{width:300px;height:300px;top:50%;left:50%;margin:-150px 0 0 -150px;animation:ringExpand 6s ease-out infinite}
.hero-vfx-ring-2{width:300px;height:300px;top:50%;left:50%;margin:-150px 0 0 -150px;animation:ringExpand 6s ease-out infinite 2s;border-color:rgba(139,92,246,.12)}
.hero-vfx-ring-3{width:300px;height:300px;top:50%;left:50%;margin:-150px 0 0 -150px;animation:ringExpand 6s ease-out infinite 4s;border-color:rgba(245,180,50,.1)}

/* Floating light sparks */
@keyframes sparkDrift{
  0%{transform:translate(0,0);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{opacity:0}
}
.hero-vfx-spark{
  position:absolute;border-radius:50%;
  animation:sparkDrift var(--dur) ease-in-out infinite;
  animation-delay:var(--del);
}
.hero-vfx-spark::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:inherit;filter:blur(6px);opacity:.7;
}

/* ===== GLASS PANEL — Transparent Dark Glass ===== */
.dash {
  position:relative;z-index:2;
  background:linear-gradient(175deg, rgba(18,18,24,.65) 0%, rgba(14,14,20,.55) 50%, rgba(10,10,16,.5) 100%);
  border-radius:24px;
  border:none;
  box-shadow:
    0 -1px 0 0 rgba(0,0,0,.2) inset,
    0 20px 60px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.25);
  overflow:hidden;
}
.dash-topbar {
  position:relative; z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.dash-topbar-left{display:flex;align-items:center;gap:10px}
.dash-logo{font-family:var(--font-display);font-size:15px;font-weight:700;color:#fff}
.dash-logo span{color:rgba(255,255,255,.4)}
.dash-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:50px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);letter-spacing:.02em;border:1px solid rgba(255,255,255,.06)}
.dash-topbar-right{display:flex;align-items:center;gap:8px}
.dash-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3a3a45,#52525b);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;overflow:hidden;border:2px solid rgba(255,255,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dash-avatar img{width:100%;height:100%;object-fit:cover}
.dash-status-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.4);animation:pulse 2s ease infinite}
.dash-user-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
.dash-body{padding:20px;position:relative;z-index:1}

/* Stat slider dots — mobile only */
.dash-stat-dots{display:none;justify-content:center;gap:6px;margin-bottom:12px}
.dash-stat-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.1);transition:all .4s}
.dash-stat-dots span.active{background:rgba(255,255,255,.3);width:16px;border-radius:3px}

/* Stats — dark glass cards */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dash-stat{
  padding:14px;border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation:countUp .6s cubic-bezier(.22,1,.36,1) both;
  transition:all .3s;
}
.dash-stat:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.dash-stat:nth-child(2){animation-delay:.1s} .dash-stat:nth-child(3){animation-delay:.2s}
.dash-stat-label{font-size:10px;font-weight:500;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.dash-stat-value{font-family:var(--font-mono);font-size:22px;font-weight:700;color:#fff;line-height:1.1;transition:color .3s}
.dash-stat-value.teal{color:#fff}
.dash-stat-value.stat-tick{animation:stat-tick-flash .5s ease}
@keyframes stat-tick-flash{0%{color:#5eead4;transform:scale(1.08)}60%{color:#a7f3d0}100%{color:#fff;transform:scale(1)}}
.dash-stat-change.change-up{animation:change-pop .4s ease}
@keyframes change-pop{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
.dash-stat-change{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;margin-top:4px;padding:2px 6px;border-radius:50px;color:#4ade80;background:rgba(34,197,94,.1)}

/* Chart — dark glass panel */
.dash-chart-wrap{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.03) inset;
  border-radius:14px; padding:18px 20px 14px;
  margin-bottom:14px; position:relative; overflow:visible;
}
.dash-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.dash-chart-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.dash-chart-period{display:flex;gap:3px}
.dash-chart-period span{font-size:10px;font-weight:500;padding:3px 8px;border-radius:50px;color:rgba(255,255,255,.35);cursor:pointer;transition:all .2s}
.dash-chart-period span.active{background:rgba(255,255,255,.1);color:#fff}
.dash-chart-live-value{
  font-family:var(--font-mono);font-size:20px;font-weight:700;color:#fff;line-height:1;
}
.dash-chart-live-change{
  font-size:11px;font-weight:600;color:#4ade80;
  background:rgba(34,197,94,.1);padding:2px 7px;border-radius:50px;
}
.dash-chart-svg-wrap{
  position:relative; width:100%; height:80px;
  margin:0 -4px; /* let line breathe at edges */
}
.dash-chart-svg{width:calc(100% + 8px);height:80px;display:block}
.dash-chart-line{fill:none;stroke:var(--teal-bright);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dash-chart-glow{fill:none;stroke:var(--teal-bright);stroke-width:8;stroke-linecap:round;opacity:.15;filter:blur(4px)}
.dash-chart-area{fill:url(#tealGrad)}
.dash-chart-dot{fill:var(--teal-bright);r:3.5}
.dash-chart-dot-ring{fill:none;stroke:var(--teal-bright);stroke-width:1.5;r:7;opacity:.4}
/* X-axis labels */
.dash-chart-labels{
  display:flex;justify-content:space-between;
  padding:6px 4px 0;
  font-size:9px;font-weight:500;color:rgba(255,255,255,.25);
}

/* Top Products — horizontal bars */
.dash-products-list{display:flex;flex-direction:column;gap:10px;padding:8px 0 4px}
.dash-product-row{display:flex;align-items:center;gap:8px}
.dash-product-rank{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);width:16px;flex-shrink:0}
.dash-product-name{font-size:10px;font-weight:600;color:rgba(255,255,255,.7);width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-product-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.dash-product-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(20,184,166,.4),#14B8A6 40%,rgba(94,234,212,.9) 60%,#14B8A6);background-size:200% 100%;animation:bar-shimmer 2.4s ease-in-out infinite;transition:width 1.2s cubic-bezier(.22,1,.36,1),filter .6s ease}
@keyframes bar-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.dash-product-sales{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#fff;width:42px;text-align:right;flex-shrink:0}

/* Orders feed — dark */
.dash-orders{display:flex;flex-direction:column;gap:8px;max-height:130px;overflow:hidden;position:relative}
.dash-order{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:11px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  transition:opacity .7s ease, transform .7s ease;
}
.dash-order.new-order { animation:order-in .5s cubic-bezier(.22,1,.36,1) both; }
.dash-order-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.dash-order-info{flex:1;min-width:0}
.dash-order-name{font-size:11px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-order-time{font-size:9px;color:rgba(255,255,255,.25)}
.dash-order-amount{font-family:var(--font-mono);font-size:13px;font-weight:700;color:#fff;white-space:nowrap}
.dash-order-status{font-size:8px;font-weight:600;padding:2px 6px;border-radius:50px;background:rgba(34,197,94,.1);color:#4ade80}

/* Floating trust — dark liquid glass */
@keyframes glass-shimmer {
  0% { left:-100%; }
  100% { left:200%; }
}
.hero-float {
  position:absolute;z-index:10;
  backdrop-filter:blur(16px) saturate(1.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.1) 0%,
    rgba(255,255,255,.05) 30%,
    rgba(255,255,255,.03) 50%,
    rgba(255,255,255,.05) 70%,
    rgba(255,255,255,.08) 100%
  );
  border-radius:18px;padding:12px 16px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1px 0 0 rgba(255,255,255,.1) inset,
    0 -1px 0 0 rgba(255,255,255,.03) inset,
    0 12px 40px rgba(0,0,0,.3),
    0 4px 12px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.15);
  border-bottom-color:rgba(255,255,255,.03);
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.8);
  animation:float 5s ease-in-out infinite;
  overflow:hidden;
}
/* Top highlight — frosted refraction */
.hero-float::before {
  content:'';position:absolute;top:0;left:0;right:0;height:50%;
  border-radius:18px 18px 0 0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.08) 0%,
    rgba(255,255,255,.02) 40%,
    transparent 100%
  );
  pointer-events:none; z-index:1;
}
/* Moving shimmer glare */
.hero-float::after {
  content:'';position:absolute;top:-50%;
  width:55%;height:200%;
  background:linear-gradient(
    105deg,
    transparent 0%,transparent 35%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.15) 55%,
    transparent 65%,transparent 100%
  );
  pointer-events:none;z-index:2;
  animation:glass-shimmer 7s ease-in-out infinite;
}
.hero-float-ssl::after { animation-delay:0s; animation-duration:7s; }
.hero-float-payout::after { animation-delay:2.5s; animation-duration:8s; }
.hero-float-review::after { animation-delay:4s; animation-duration:6.5s; }
.hero-float-ssl{top:10%;right:-28px}
.hero-float-payout{bottom:28%;left:-28px;animation-delay:2s}
.hero-float-review{bottom:-10px;right:-16px;animation-delay:3.5s;max-width:240px}

/* Content above effects */
.hero-float > * { position:relative; z-index:3; }
.float-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.float-text-sm{font-size:10px;font-weight:400;color:rgba(255,255,255,.4)}

/* Review float */
.review-float-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(255,255,255,.15);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.review-float-content{min-width:0}
.review-float-text{font-size:10px;font-weight:500;color:rgba(255,255,255,.7);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.review-float-name{font-size:9px;font-weight:600;color:rgba(255,255,255,.4);margin-top:2px}
.review-float-stars{font-size:9px;color:#F59E0B;letter-spacing:1px}

/* ===== LOGOS BAR — Liquid Glass ===== */
.logos-bar {
  position:relative; z-index:5;
  padding:48px 0;
  background:#111114;
  border:none;
  overflow:hidden;
}
/* Single top frost edge only */
.logos-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,.07) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.07) 70%,transparent 90%);
  pointer-events:none;z-index:2;
}

/* Blurred color lights behind the glass */
@keyframes lbFloat1{0%,100%{transform:translate(0,0);opacity:.5}50%{transform:translate(15px,-8px);opacity:.9}}
@keyframes lbFloat2{0%,100%{transform:translate(0,0);opacity:.4}50%{transform:translate(-12px,6px);opacity:.8}}
@keyframes lbFloat3{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(8px,10px);opacity:.7}}
.lb-light{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(40px);
}
.lb-light-1{
  width:120px;height:80px;top:20%;left:12%;
  background:rgba(20,184,166,.08);
  animation:lbFloat1 6s ease-in-out infinite;
}
.lb-light-2{
  width:100px;height:70px;top:30%;right:18%;
  background:rgba(139,92,246,.06);
  animation:lbFloat2 8s ease-in-out infinite 1s;
}
.lb-light-3{
  width:80px;height:60px;bottom:15%;left:35%;
  background:rgba(245,180,50,.05);
  animation:lbFloat3 7s ease-in-out infinite 2s;
}
.lb-light-4{
  width:90px;height:65px;top:15%;right:40%;
  background:rgba(59,130,246,.06);
  animation:lbFloat1 9s ease-in-out infinite 3s;
}
.lb-light-5{
  width:70px;height:55px;bottom:20%;right:10%;
  background:rgba(236,72,153,.05);
  animation:lbFloat2 7.5s ease-in-out infinite 1.5s;
}
.logos-bar p { position:relative;z-index:1;text-align:center; font-size:13px; font-weight:500; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:24px; }
.logos-row { position:relative;z-index:1;display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; opacity:.3; }
.logos-row span { font-family:var(--font-display); font-size:22px; font-weight:700; color:#fff; }
.logos-row img { height:28px; width:auto; opacity:.45; filter:brightness(10) grayscale(1); vertical-align:middle; }
.logos-row img:nth-child(2) { position:relative; top:6px; }

/* ===== STATS COUNTER — Dark ===== */
.stats-counter { position:relative;z-index:10;padding:60px 0; background:#111114; border-bottom:1px solid rgba(255,255,255,.04); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.stat-item-value { font-family:var(--font-display); font-size:clamp(32px,4vw,48px); font-weight:700; color:#fff; line-height:1; }
.stat-item-value span { color:var(--teal-bright); }
.stat-item-label { font-size:14px; color:rgba(255,255,255,.4); margin-top:6px; }
@media(max-width:768px) { .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px; } }

/* ===== PRESS BAR — Dark ===== */
.press-bar { padding:48px 0; background:#0f0f12; }
.press-bar p { text-align:center; font-size:13px; font-weight:500; color:rgba(255,255,255,.25); text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; }
.press-logos { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; opacity:.2; }
.press-logos span { font-family:var(--font-display); font-size:18px; font-weight:700; color:#fff; }

/* ===== PILLAR SECTIONS (3 feature showcases) ===== */
.pillar{padding:120px 0;position:relative;overflow:visible}
.pillar-store,.pillar-products,.pillar-marketing{overflow:hidden}
.pillar-inner{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center;overflow:visible}
.pillar-reverse .pillar-inner{direction:rtl}
.pillar-reverse .pillar-inner > *{direction:ltr}
.pillar-text{max-width:480px}
.pillar-num{font-family:var(--font-display);font-size:clamp(64px,8vw,96px);font-weight:700;line-height:1;letter-spacing:-.04em;color:rgba(0,0,0,.06);margin-bottom:16px}
.pillar-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-bright);margin-bottom:16px;padding:5px 14px;background:rgba(20,184,166,.1);border-radius:50px}
.pillar h2{font-family:var(--font-display);font-size:clamp(28px,3.5vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:16px;color:#111114}
.pillar-desc{font-size:17px;color:rgba(0,0,0,.55);line-height:1.7;margin-bottom:28px}
.pillar-features{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.pillar-features li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:rgba(0,0,0,.55);line-height:1.5}
.pillar-features li svg{flex-shrink:0;margin-top:3px;color:var(--teal-bright)}
.pillar-stat-row{display:flex;gap:32px}
.pillar-stat{text-align:left}
.pillar-stat-val{font-family:var(--font-mono);font-size:28px;font-weight:700;color:#111114;line-height:1}
.pillar-stat-label{font-size:11px;color:rgba(0,0,0,.4);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

/* Pillar visual panels */
.pillar-visual{position:relative;min-height:400px;overflow:visible;min-width:0}

/* --- Visual 1: Phone store mockup --- */
@keyframes storeCtaPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.3)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes btnShine{0%{left:-100%}100%{left:200%}}
@keyframes saleDrop{0%{opacity:0;transform:translateY(16px) scale(.97)}6%{opacity:1;transform:translateY(-2px) scale(1.01)}10%{opacity:1;transform:translateY(0) scale(1)}88%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes cartBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.4)}70%{transform:scale(.9)}}
@keyframes cartBadgeIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes cartBadgeBump{0%{transform:scale(1)}30%{transform:scale(1.35)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.pv-phone-wrap{display:flex;align-items:center;justify-content:center;position:relative}
.pv-phone{position:relative;width:280px;height:572px;background:#000;border-radius:48px;padding:4px;box-shadow:0 40px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.pv-phone-screen{width:100%;height:100%;border-radius:44px;overflow:hidden;position:relative}
.pv-store-scr{width:100%;height:100%;position:relative;font-family:'DM Sans',sans-serif}
.pv-store-scr img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;position:absolute;top:0;left:0}
.pv-store-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 15%,transparent 30%,transparent 45%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.7) 82%,rgba(0,0,0,.9) 100%);z-index:2}
.pv-store-brand{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:10;font-size:13px;font-weight:700;color:#fff;letter-spacing:6px;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.pv-store-nav{position:absolute;top:20px;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.pv-store-nav-icon{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);position:relative}
.pv-store-nav-icon svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:1.5}
.pv-cart-badge{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#4ade80;color:#0e0e0e;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 6px rgba(74,222,128,.5);opacity:0;transform:scale(0)}
.pv-cart-badge.visible{opacity:1;transform:scale(1);animation:cartBadgeIn .5s cubic-bezier(.34,1.56,.64,1) both}
.pv-cart-badge.bump{animation:cartBadgeBump .45s cubic-bezier(.34,1.56,.64,1)}
.pv-store-nav-icon.cart-ring{animation:cartBounce .45s cubic-bezier(.34,1.56,.64,1)}
.pv-store-herotext{position:absolute;bottom:18%;left:0;right:0;z-index:5;padding:0 22px;text-align:center}
.pv-store-herotext h3{font-family:'Fraunces',serif;font-size:26px;font-weight:700;color:#fff;line-height:1.15;margin-bottom:8px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.pv-store-herotext p{font-size:11px;color:rgba(255,255,255,.75);line-height:1.5;margin-bottom:16px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.pv-store-herobtn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0e0e0e;font-size:10px;font-weight:700;padding:10px 24px;border-radius:24px;letter-spacing:1.5px;text-transform:uppercase;animation:storeCtaPulse 2.5s ease-in-out infinite;position:relative;overflow:hidden}
.pv-store-herobtn::after{content:'';position:absolute;top:-50%;width:30px;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-20deg);animation:btnShine 3s ease-in-out infinite 1s}
.pv-store-sales{position:absolute;bottom:16px;left:12px;right:12px;z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.pv-store-sale{background:rgba(255,255,255,.15);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;animation:saleDrop 5.5s cubic-bezier(.22,1,.36,1) both}
.pv-store-sale-icon{width:32px;height:32px;border-radius:10px;background:rgba(74,222,128,.2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.pv-store-sale-text{flex:1}
.pv-store-sale-title{font-size:10px;font-weight:700;color:#fff}
.pv-store-sale-detail{font-size:8px;color:rgba(255,255,255,.5);margin-top:1px}
.pv-store-sale-amount{font-size:13px;font-weight:800;color:#4ade80;flex-shrink:0;text-shadow:0 0 8px rgba(74,222,128,.3)}
/* Outer glow for phone on dark bg */
@keyframes orbitSlow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes orbitReverse{0%{transform:rotate(360deg)}100%{transform:rotate(0deg)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes particleDrift{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:.6}
  50%{opacity:1}
  100%{transform:translateY(-60px) translateX(20px) scale(0);opacity:0}
}
@keyframes pulseRing{0%,100%{transform:scale(1);opacity:.12}50%{transform:scale(1.04);opacity:.25}}
@keyframes glowPulse{0%,100%{opacity:.4}50%{opacity:.7}}
.pv-phone-wrap{display:flex;align-items:center;justify-content:center;position:relative;min-height:640px;overflow:visible}

/* === GLOW LAYERS === */
.pv-phone-wrap::before{
  content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;
  margin-left:-300px;margin-top:-300px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(20,184,166,.2) 0%,rgba(20,184,166,.08) 35%,transparent 65%);
  pointer-events:none;animation:glowPulse 6s ease infinite;
}
.pv-phone-wrap::after{
  content:'';position:absolute;top:50%;left:50%;width:450px;height:650px;
  margin-left:-225px;margin-top:-325px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(99,91,255,.1) 0%,transparent 55%);
  pointer-events:none;
}

/* === ORBITAL RINGS (static) + FLYING DOTS (animated individually) === */
.pv-orbit{position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;z-index:1}
.pv-orbit-1{width:360px;height:360px;margin-left:-180px;margin-top:-180px;border:1px solid rgba(255,255,255,.07)}
.pv-orbit-2{width:480px;height:480px;margin-left:-240px;margin-top:-240px;border:1.5px dashed rgba(20,184,166,.1)}
.pv-orbit-3{width:580px;height:580px;margin-left:-290px;margin-top:-290px;border:1px solid rgba(20,184,166,.06)}

/* Dots fly on circular paths via offset-path */
@keyframes flyOrbit{0%{offset-distance:0%}100%{offset-distance:100%}}
@keyframes dotPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.pv-flying-dot{
  position:absolute;top:50%;left:50%;z-index:2;pointer-events:none;
  width:10px;height:10px;border-radius:50%;
  background:rgba(20,184,166,.8);
  box-shadow:0 0 14px rgba(20,184,166,.7),0 0 28px rgba(20,184,166,.3),0 0 6px #fff;
  animation:dotPulse 3s ease infinite;
  offset-rotate:0deg;
}
/* Orbit 1 dots — radius 180px */
.pv-fd-1a{offset-path:circle(180px);animation:flyOrbit 20s linear infinite, dotPulse 3s ease infinite}
.pv-fd-1b{offset-path:circle(180px);animation:flyOrbit 20s linear infinite, dotPulse 3s ease infinite 1.5s;offset-distance:50%;width:8px;height:8px;opacity:.7}

/* Orbit 2 dots — radius 240px */
.pv-fd-2a{offset-path:circle(240px);animation:flyOrbit 28s linear infinite reverse, dotPulse 3s ease infinite .5s}
.pv-fd-2b{offset-path:circle(240px);animation:flyOrbit 28s linear infinite reverse, dotPulse 3s ease infinite 1.2s;offset-distance:33%;background:rgba(99,91,255,.7);box-shadow:0 0 14px rgba(99,91,255,.6),0 0 28px rgba(99,91,255,.25),0 0 6px rgba(200,180,255,.5)}
.pv-fd-2c{offset-path:circle(240px);animation:flyOrbit 28s linear infinite reverse, dotPulse 3s ease infinite 2s;offset-distance:66%;width:6px;height:6px;background:rgba(20,184,166,.5);box-shadow:0 0 8px rgba(20,184,166,.4)}

/* Orbit 3 dots — radius 290px */
.pv-fd-3a{offset-path:circle(290px);animation:flyOrbit 38s linear infinite, dotPulse 3s ease infinite .8s;width:8px;height:8px;background:rgba(255,255,255,.6);box-shadow:0 0 12px rgba(255,255,255,.5),0 0 24px rgba(255,255,255,.2)}
.pv-fd-3b{offset-path:circle(290px);animation:flyOrbit 38s linear infinite, dotPulse 3s ease infinite 1s;offset-distance:55%;width:6px;height:6px;background:rgba(20,184,166,.4);box-shadow:0 0 10px rgba(20,184,166,.3)}

/* === PULSING RINGS behind phone === */
.pv-pulse-ring{position:absolute;top:50%;left:50%;border-radius:50%;pointer-events:none;z-index:1}
.pv-pulse-ring-1{width:320px;height:500px;margin-left:-160px;margin-top:-250px;animation:pulseRing 4s ease infinite;animation-delay:0s;border:1.5px solid rgba(20,184,166,.12)}
.pv-pulse-ring-2{width:380px;height:560px;margin-left:-190px;margin-top:-280px;animation:pulseRing 4s ease infinite;animation-delay:1.3s;border:1px solid rgba(20,184,166,.08)}
.pv-pulse-ring-3{width:440px;height:620px;margin-left:-220px;margin-top:-310px;animation:pulseRing 4s ease infinite;animation-delay:2.6s;border:1px solid rgba(20,184,166,.05)}

/* === FLOATING METRIC CARDS — Apple Liquid Glass === */
@keyframes cardShine{0%{left:-120%}100%{left:200%}}
@keyframes cardGlowPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.pv-float-card{
  position:absolute;z-index:5;
  background:linear-gradient(
    160deg,
    rgba(255,255,255,.08) 0%,
    rgba(255,255,255,.04) 40%,
    rgba(255,255,255,.02) 60%,
    rgba(255,255,255,.06) 100%
  );
  border:1px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.18);
  border-left-color:rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.04);
  border-radius:20px;padding:16px 20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.2),
    0 0 0 .5px rgba(255,255,255,.08) inset,
    0 1px 0 rgba(255,255,255,.1) inset,
    0 -1px 0 rgba(0,0,0,.05) inset;
  animation:floatCard 5s ease-in-out infinite;
  overflow:hidden;
}
/* Top frost — toned down */
.pv-float-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 50%,transparent 100%);
  border-radius:20px 20px 0 0;pointer-events:none;
}
/* Moving shine — toned down */
.pv-float-card::after{
  content:'';position:absolute;top:-50%;width:45px;height:200%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.05) 47%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 53%,transparent 65%);
  transform:skewX(-20deg);pointer-events:none;
  animation:cardShine 9s ease-in-out infinite;
}
.pv-float-card-val{
  font-family:var(--font-mono);font-size:22px;font-weight:700;
  color:#fff;line-height:1;position:relative;z-index:1;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.pv-float-card-label{
  font-size:9px;color:rgba(255,255,255,.5);margin-top:4px;
  text-transform:uppercase;letter-spacing:.06em;position:relative;z-index:1;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
}
.pv-float-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;position:relative;z-index:1}
.pv-float-card-icon{font-size:18px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.2))}
.pv-float-card-badge{
  font-size:9px;font-weight:700;padding:2px 8px;border-radius:50px;
  color:#4ade80;
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.1);
  text-shadow:0 0 6px rgba(74,222,128,.3);
}
/* Bottom glow lines — unique per card */
.pv-fc-1{top:4%;right:-60px;animation:pvFloat1 6s ease-in-out infinite}
.pv-fc-1::after{animation-delay:1s}
.pv-fc-2{bottom:8%;left:-70px;animation:pvFloat2 5s ease-in-out infinite 1.5s}
.pv-fc-2::after{animation-delay:3s}
.pv-fc-2 .pv-float-card-badge{color:#A78BFA;background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.1);text-shadow:0 0 6px rgba(167,139,250,.3)}
.pv-fc-3{top:38%;left:-80px;animation:pvFloat3 7s ease-in-out infinite 3s}
.pv-fc-3::after{animation-delay:5s}

/* === PARTICLES === */
.pv-particles{position:absolute;inset:-40px;pointer-events:none;overflow:visible;z-index:2}
.pv-particle{position:absolute;border-radius:50%;animation:particleDrift 4s ease-out infinite}
.pv-particle:nth-child(1){width:5px;height:5px;background:rgba(20,184,166,.7);box-shadow:0 0 8px rgba(20,184,166,.5);left:15%;bottom:20%;animation-delay:0s;animation-duration:3.5s}
.pv-particle:nth-child(2){width:6px;height:6px;background:rgba(99,91,255,.6);box-shadow:0 0 10px rgba(99,91,255,.4);left:80%;bottom:30%;animation-delay:1.2s;animation-duration:4.2s}
.pv-particle:nth-child(3){width:4px;height:4px;background:rgba(20,184,166,.6);box-shadow:0 0 6px rgba(20,184,166,.4);left:10%;bottom:50%;animation-delay:2.5s;animation-duration:3.8s}
.pv-particle:nth-child(4){width:4px;height:4px;background:rgba(255,255,255,.45);box-shadow:0 0 6px rgba(255,255,255,.3);left:85%;bottom:60%;animation-delay:0.8s;animation-duration:4.5s}
.pv-particle:nth-child(5){width:5px;height:5px;background:rgba(20,184,166,.6);box-shadow:0 0 8px rgba(20,184,166,.4);left:35%;bottom:10%;animation-delay:3.2s;animation-duration:3.2s}
.pv-particle:nth-child(6){width:6px;height:6px;background:rgba(74,222,128,.6);box-shadow:0 0 10px rgba(74,222,128,.4);left:65%;bottom:45%;animation-delay:1.8s;animation-duration:4s}

/* Phone z-index above orbits */
@keyframes phoneLevitate{
  0%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-10px) rotate(.3deg)}
  50%{transform:translateY(-4px) rotate(-.2deg)}
  75%{transform:translateY(-12px) rotate(.2deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
.pv-phone{
  position:relative;z-index:3;width:280px;height:572px;background:#000;border-radius:48px;padding:4px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 0 15px rgba(255,255,255,.12),
    0 0 35px rgba(255,255,255,.06),
    0 0 70px rgba(255,255,255,.03),
    0 40px 80px rgba(0,0,0,.5);
  animation:phoneLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* White edge glow ring — levitates with phone */
.pv-phone-glow{
  position:absolute;top:50%;left:50%;z-index:2;
  width:296px;height:588px;border-radius:54px;
  margin-left:-148px;margin-top:-294px;
  background:transparent;
  box-shadow:
    0 0 20px rgba(255,255,255,.14),
    0 0 45px rgba(255,255,255,.07),
    0 0 90px rgba(255,255,255,.03);
  pointer-events:none;
  animation:phoneGlowPulse 5s ease infinite, phoneLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes phoneGlowPulse{
  0%,100%{box-shadow:0 0 20px rgba(255,255,255,.14),0 0 45px rgba(255,255,255,.07),0 0 90px rgba(255,255,255,.03)}
  50%{box-shadow:0 0 28px rgba(255,255,255,.18),0 0 55px rgba(255,255,255,.1),0 0 110px rgba(255,255,255,.04)}
}

/* Shadow on "floor" — moves opposite to levitation */
@keyframes shadowBreath{
  0%{transform:translateY(0) scale(1);opacity:.35}
  25%{transform:translateY(6px) scale(1.05);opacity:.25}
  50%{transform:translateY(3px) scale(1.02);opacity:.3}
  75%{transform:translateY(8px) scale(1.06);opacity:.22}
  100%{transform:translateY(0) scale(1);opacity:.35}
}
.pv-phone-shadow{
  position:absolute;bottom:-30px;left:50%;z-index:1;
  width:220px;height:20px;
  margin-left:-110px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.08),transparent 70%);
  filter:blur(8px);
  pointer-events:none;
  animation:shadowBreath 8s cubic-bezier(.45,.05,.55,.95) infinite;
}

/* === LIGHT RAYS from behind phone === */
@keyframes rayRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes rayPulse{0%,100%{opacity:.5}50%{opacity:.8}}
.pv-rays{
  position:absolute;top:50%;left:50%;z-index:1;
  width:700px;height:700px;
  margin-left:-350px;margin-top:-350px;
  pointer-events:none;
  animation:rayRotate 120s linear infinite;
}
.pv-ray{
  position:absolute;top:50%;left:50%;
  width:2px;height:320px;
  transform-origin:bottom center;
  background:linear-gradient(0deg,rgba(255,255,255,.06),rgba(255,255,255,.01),transparent);
  border-radius:2px;
  animation:rayPulse 4s ease infinite;
}
.pv-ray:nth-child(1){transform:translate(-50%,-100%) rotate(0deg)}
.pv-ray:nth-child(2){transform:translate(-50%,-100%) rotate(45deg);animation-delay:.5s;height:280px;opacity:.7}
.pv-ray:nth-child(3){transform:translate(-50%,-100%) rotate(90deg);animation-delay:1s}
.pv-ray:nth-child(4){transform:translate(-50%,-100%) rotate(135deg);animation-delay:1.5s;height:260px;opacity:.6}
.pv-ray:nth-child(5){transform:translate(-50%,-100%) rotate(180deg);animation-delay:2s}
.pv-ray:nth-child(6){transform:translate(-50%,-100%) rotate(225deg);animation-delay:2.5s;height:290px;opacity:.8}
.pv-ray:nth-child(7){transform:translate(-50%,-100%) rotate(270deg);animation-delay:3s}
.pv-ray:nth-child(8){transform:translate(-50%,-100%) rotate(315deg);animation-delay:3.5s;height:270px;opacity:.7}

/* === AURORA BLOB — color-shifting nebula behind phone === */
@keyframes auroraShift{
  0%{background-position:0% 50%;transform:scale(1) rotate(0deg)}
  33%{background-position:100% 50%;transform:scale(1.05) rotate(2deg)}
  66%{background-position:50% 100%;transform:scale(.97) rotate(-1deg)}
  100%{background-position:0% 50%;transform:scale(1) rotate(0deg)}
}
.pv-aurora{
  position:absolute;top:50%;left:50%;z-index:0;
  width:500px;height:500px;
  margin-left:-250px;margin-top:-250px;
  background:radial-gradient(ellipse at 30% 40%,rgba(20,184,166,.12),transparent 50%),
             radial-gradient(ellipse at 70% 60%,rgba(99,91,255,.08),transparent 50%),
             radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.04),transparent 40%);
  background-size:200% 200%;
  filter:blur(40px);
  border-radius:50%;
  pointer-events:none;
  animation:auroraShift 15s ease infinite;
}

/* === CONNECTING LINES from cards to phone === */
@keyframes lineTrace{0%{stroke-dashoffset:200}100%{stroke-dashoffset:0}}
.pv-connectors{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible}
.pv-connectors svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}
.pv-connector-line{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1;stroke-dasharray:4,6}
.pv-connector-dot{fill:rgba(20,184,166,.5);r:3}
.pv-connector-glow{fill:rgba(20,184,166,.2);r:8;filter:blur(4px)}

/* Top highlight on phone frame */
.pv-phone::before{
  content:'';position:absolute;top:0;left:8%;right:8%;height:2px;z-index:50;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4) 25%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.4) 75%,transparent);
  border-radius:2px;pointer-events:none;
}
/* Side edge + right edge reflections */
.pv-phone::after{
  content:'';position:absolute;top:4%;bottom:4%;left:0;width:1px;z-index:50;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.15) 25%,rgba(255,255,255,.08) 75%,transparent);
  pointer-events:none;
}
@media(max-width:768px){
  .faq-section{padding:60px 0}
  .footer-cta{padding:60px 0 60px}
  .pv-phone-wrap{min-height:500px}
  .pv-phone{width:220px;height:450px;border-radius:40px;padding:3px;animation:phoneLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite}
  .pv-phone-screen{border-radius:37px}
  .pv-orbit,.pv-pulse-ring,.pv-flying-dot{display:none}
  .pv-float-card{display:none}
  .sl-float{display:none}
  .pv-particles{display:none}
  .pv-phone-glow{display:none}
  .pv-phone-shadow{display:none}
  .pv-rays{display:none}
  .pv-aurora{display:none}
  .pv-connectors{display:none}
  .pv-phone-wrap::before,.pv-phone-wrap::after{display:none}
  .pv-store-herotext h3{font-size:22px}
  .pv-store-herotext p{font-size:10px}
  .pv-store-herobtn{font-size:9px;padding:8px 18px}
  .pv-store-brand{font-size:11px;top:18px;letter-spacing:5px}
  .pv-store-nav{top:14px;padding:0 16px}
  .pv-store-nav-icon{width:26px;height:26px}
  .pv-store-sale{padding:8px 10px;border-radius:12px}
  .pv-store-sale-icon{width:28px;height:28px;font-size:12px;border-radius:8px}
  .pv-store-sale-title{font-size:9px}
  .pv-store-sale-amount{font-size:11px}
}

/* --- Visual 2: Product Slider + US Map --- */
@keyframes psMapFlash{0%{r:2;opacity:.8}50%{r:8;opacity:0}100%{r:2;opacity:0}}

/* US Map background */
@keyframes psMapRipple{0%{r:4;opacity:.6;stroke-width:2}100%{r:28;opacity:0;stroke-width:.5}}
@keyframes psMapRipple2{0%{r:4;opacity:.3;stroke-width:1.5}100%{r:42;opacity:0;stroke-width:.3}}
.ps-map-bg{
  position:absolute;inset:-40px -60px;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.ps-map-svg{
  width:100%;height:100%;
  opacity:.8;
}
.ps-map-dot{fill:rgba(20,184,166,.04)}
.ps-map-city{fill:rgba(20,184,166,.15);r:2}
.ps-map-flash{fill:#4ade80;animation:psMapFlash 3s ease forwards}
.ps-map-ripple{fill:none;stroke:rgba(74,222,128,.5);animation:psMapRipple 2s ease-out forwards}
.ps-map-ripple2{fill:none;stroke:rgba(74,222,128,.25);animation:psMapRipple2 2.5s ease-out forwards}
@media(max-width:1024px){
  .ps-map-bg{inset:-20px -30px}
}
@media(max-width:768px){
  .ps-map-bg{display:none}
}

/* Showcase container */
.ps-showcase{position:relative;display:flex;align-items:center;gap:24px;min-height:520px;width:100%}

/* Category icons — left strip */
.ps-icons{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.ps-cat-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);opacity:.4;overflow:hidden;padding:0}
.ps-cat-icon:hover{opacity:.7;background:rgba(255,255,255,.06)}
.ps-cat-icon.ps-icon-active{opacity:1;background:rgba(20,184,166,.12);border-color:rgba(20,184,166,.2);box-shadow:0 0 16px rgba(20,184,166,.1);transform:scale(1.08)}

/* Progress ring around active icon */
.ps-cat-icon .ps-ring{position:absolute;inset:-3px;pointer-events:none;opacity:0;transition:opacity .4s}
.ps-cat-icon.ps-icon-active .ps-ring{opacity:1}
.ps-ring circle{fill:none;stroke:rgba(20,184,166,.5);stroke-width:2;stroke-linecap:round;stroke-dasharray:164;stroke-dashoffset:164;transform:rotate(-90deg);transform-origin:center}
@keyframes ringFill{to{stroke-dashoffset:0}}
.ps-cat-icon.ps-icon-active .ps-ring circle{animation:ringFill 6s linear forwards}

/* Dot indicators under slider */
.ps-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.ps-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .5s cubic-bezier(.22,1,.36,1)}
.ps-dot.ps-dot-active{width:24px;border-radius:3px;background:rgba(20,184,166,.6)}

/* Sparkle burst on earn */
@keyframes sparkleOut{0%{transform:translate(0,0) scale(1);opacity:1}100%{opacity:0}}
.ps-sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:#4ade80;pointer-events:none;z-index:10}

/* Card slider — vertical carousel with glass peeks */
.ps-slider{position:relative;flex:1;min-width:0;height:540px;overflow:hidden;border-radius:28px}
.ps-card{
  position:absolute;left:0;right:0;height:420px;
  opacity:0;pointer-events:none;
  top:60px;
  transform:scale(.93);
  transition:all 1.2s cubic-bezier(.4,0,.2,1);
}

/* Active — center */
.ps-card.ps-active{
  opacity:1;pointer-events:auto;
  top:60px;
  transform:scale(1);
  z-index:10;
}
.ps-card.ps-active .ps-card-inner{
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.1) 100%), rgba(30,42,42,.45);
  border-color:rgba(255,255,255,.12);
  border-right-color:rgba(255,255,255,.04);
  box-shadow:0 24px 70px rgba(0,0,0,.35), 0 0 30px rgba(20,184,166,.06);
}

/* === Icon bounce on activation === */
@keyframes iconBounceIn{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.15)}70%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
.ps-card.ps-active .ps-card-emoji{
  animation:iconBounceIn .7s cubic-bezier(.22,1,.36,1) .2s both;
}

/* === Floating ambient particles around slider === */
@keyframes ambientFloat{
  0%,100%{transform:translate(0,0);opacity:0}
  20%{opacity:.6}
  80%{opacity:.4}
  50%{transform:translate(var(--fx),var(--fy))}
}
.ps-ambient{position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  animation:ambientFloat var(--dur) ease-in-out infinite;
  animation-delay:var(--del);
}
/* Previous — peeking from top */
.ps-card.ps-prev{
  opacity:.5;
  top:-260px;
  transform:scale(.97);
  z-index:5;
  filter:blur(3px) brightness(.55);
}
/* Next — peeking from bottom */
.ps-card.ps-next{
  opacity:.5;
  top:380px;
  transform:scale(.97);
  z-index:5;
  filter:blur(3px) brightness(.55);
}

/* Clear card borders */
.ps-card-inner{
  display:flex;height:100%;border-radius:24px;overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.06) 100%), rgba(30,42,42,.7);
  border:1.5px solid rgba(255,255,255,.1);
  border-right-color:rgba(255,255,255,.04);
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;
}
.ps-card.ps-prev .ps-card-inner,
.ps-card.ps-next .ps-card-inner{
  border-color:rgba(255,255,255,.08);
}

/* Softer edge masks */
.ps-slider::before,.ps-slider::after{
  content:'';position:absolute;left:0;right:0;height:40px;z-index:20;pointer-events:none;
}
.ps-slider::before{top:0;background:linear-gradient(180deg,#162020,transparent)}
.ps-slider::after{bottom:0;background:linear-gradient(0deg,#162020,transparent)}

/* Card image */
.ps-card-img{width:50%;position:relative;overflow:hidden}
.ps-card-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform 6s cubic-bezier(.25,.1,.25,1)}
.ps-card.ps-active .ps-card-img img{transform:scale(1.08)}
.ps-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.3) 0%,transparent 40%)}

/* Testimonial — Apple Liquid Glass */
@keyframes quoteSlideIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes quoteShine{0%{left:-120%}100%{left:120%}}
@keyframes quoteBorderPulse{0%,100%{border-color:rgba(255,255,255,.08)}50%{border-color:rgba(255,255,255,.18)}}
@keyframes quoteGlow{0%,100%{box-shadow:0 4px 24px rgba(0,0,0,.3),0 0 0 0 rgba(20,184,166,0),inset 0 1px 0 rgba(255,255,255,.06)}50%{box-shadow:0 4px 24px rgba(0,0,0,.3),0 0 20px rgba(20,184,166,.06),inset 0 1px 0 rgba(255,255,255,.1)}}
.ps-quote{
  position:absolute;bottom:12px;left:8px;right:8px;z-index:3;
  background:linear-gradient(165deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 50%,rgba(0,0,0,.1) 100%), rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.15);
  border-top-color:rgba(255,255,255,.25);
  border-radius:16px;
  padding:12px 14px 10px;
  opacity:0;
  transition:opacity .6s ease .3s;
  overflow:hidden;
  animation:quoteBorderPulse 6s ease infinite, quoteGlow 6s ease infinite;
}
.ps-card.ps-active .ps-quote{opacity:1;animation:quoteSlideIn .9s cubic-bezier(.22,1,.36,1) .4s both, quoteBorderPulse 6s ease infinite, quoteGlow 6s ease infinite}
/* Top frost highlight */
.ps-quote::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.25) 70%,transparent 95%);
}
/* Shine sweep */
.ps-quote::after{
  content:'';position:absolute;top:-50%;left:-120%;width:60%;height:200%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.05) 55%,transparent 70%);
  transform:skewX(-20deg);
  animation:quoteShine 8s ease infinite;
  pointer-events:none;
}
.ps-quote-text{
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.85);
  font-style:italic;letter-spacing:.01em;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.ps-quote-text strong{
  font-style:normal;font-weight:700;color:#fff;
  background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(20,184,166,.12));
  padding:2px 7px;border-radius:5px;
  box-shadow:0 0 10px rgba(74,222,128,.1);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  text-shadow:0 0 12px rgba(74,222,128,.3),0 1px 2px rgba(0,0,0,.2);
}
.ps-quote-author{
  display:flex;align-items:center;gap:6px;margin-top:7px;
  font-size:10px;color:rgba(255,255,255,.45);font-weight:500;
  letter-spacing:.02em;
}
.ps-quote-stars{color:rgba(250,190,60,.85);font-size:9px;letter-spacing:1.5px;margin-left:auto;text-shadow:0 0 8px rgba(250,190,60,.25)}

/* Card body */
.ps-card-body{width:50%;padding:24px clamp(16px,3vw,28px);display:flex;flex-direction:column;justify-content:center;min-width:0;overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 40%, rgba(255,255,255,.04) 100%);
}
.ps-card-emoji{width:48px;height:48px;margin-bottom:8px;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.ps-card-emoji img{width:100%;height:100%;object-fit:cover;display:block}
.ps-card-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);margin-bottom:4px}
.ps-card-name{font-family:var(--font-display);font-size:20px;font-weight:700;color:#fff;line-height:1.2;margin-bottom:12px}
.ps-card-price{font-family:var(--font-mono);font-size:26px;font-weight:700;color:#fff;margin-bottom:4px}
.ps-card-earn{font-size:13px;font-weight:600;color:#4ade80;margin-left:10px}

/* === "You earn" — hero element === */
@keyframes earnGlow{0%,100%{box-shadow:0 0 12px rgba(74,222,128,.15),0 0 0 0 rgba(74,222,128,0)}50%{box-shadow:0 0 20px rgba(74,222,128,.25),0 0 0 6px rgba(74,222,128,.06)}}
@keyframes earnShine{0%{left:-100%}100%{left:200%}}
@keyframes earnCountUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ps-card-earn{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  margin-top:12px;margin-left:0;padding:8px 16px 8px 10px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(74,222,128,.12) 0%,rgba(20,184,166,.08) 100%);
  border:1px solid rgba(74,222,128,.18);
  position:relative;overflow:hidden;
  animation:earnGlow 3s ease infinite;
  white-space:nowrap;
  flex-shrink:0;
  flex-shrink:0;
}
/* Shine sweep */
.ps-card-earn::after{
  content:'';position:absolute;top:-50%;width:30px;height:200%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-20deg);pointer-events:none;
  animation:earnShine 4s ease-in-out infinite 1s;
}
.ps-earn-label{
  font-size:11px;font-weight:500;color:rgba(74,222,128,.7);
  text-transform:uppercase;letter-spacing:.04em;
}
.ps-earn-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:#4ade80;
  box-shadow:0 0 8px rgba(74,222,128,.5);
  animation:pulse 2s ease infinite;
}
.ps-earn-val{
  font-family:var(--font-mono);font-size:clamp(20px,3vw,24px);font-weight:800;
  color:#4ade80;line-height:1;
  text-shadow:0 0 16px rgba(74,222,128,.3);
  white-space:nowrap;
}
.ps-card.ps-active .ps-earn-val{
  animation:earnCountUp .6s cubic-bezier(.22,1,.36,1) both;
}
.ps-card-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:20px;padding:12px 28px;border-radius:50px;
  background:#14B8A6;color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .3s;align-self:flex-start;
  box-shadow:0 4px 16px rgba(20,184,166,.25);
}
.ps-card-btn:hover{background:#0F766E;transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,184,166,.3)}
@media(max-width:1024px){
  .ps-showcase{flex-direction:column}
  .ps-icons{flex-direction:row;justify-content:center}
  .ps-slider{height:460px;width:100%;max-width:500px;margin:0 auto}
  .ps-card{height:340px}
  .ps-card.ps-active{top:60px}
  .ps-card.ps-prev{top:-220px}
  .ps-card.ps-next{top:340px}
}
@media(max-width:768px){
  .ps-slider{height:380px}
  .ps-card{height:280px}
  .ps-card.ps-active{top:50px}
  .ps-card.ps-prev{top:-180px}
  .ps-card.ps-next{top:280px}
  .ps-card-body{padding:20px 18px}
  .ps-slider::before,.ps-slider::after{height:30px}
  .ps-card-name{font-size:18px}
  .ps-card-price{font-size:22px}
  .ps-card-emoji{width:38px;height:38px;border-radius:10px}
  .ps-earn-val{font-size:18px}
  .ps-card-earn{padding:6px 12px 6px 10px;gap:6px;margin-top:8px}
  .ps-cat-icon{width:40px;height:40px;font-size:16px;border-radius:10px}
  .ps-map-bg{display:none}
}

/* === Scrolling lanes behind phone === */
.mn-lanes{
  position:absolute;top:50%;left:50%;z-index:0;
  width:160%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;justify-content:center;
  gap:14px;overflow:hidden;opacity:.75;
  /* Deep fog fade on both sides */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 5%,#000 18%,#000 82%,rgba(0,0,0,.15) 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 5%,#000 18%,#000 82%,rgba(0,0,0,.15) 95%,transparent 100%);
}
.mn-lane{overflow:hidden;height:62px;position:relative}
.mn-lane-track{display:flex;gap:12px;align-items:center;width:max-content}

/* Scroll directions — varied speeds */
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mn-scroll-left{animation:scrollLeft 25s linear infinite}
.mn-scroll-right{animation:scrollRight 30s linear infinite}
.mn-scroll-left-slow{animation:scrollLeft 36s linear infinite}

/* Parallax depth — different scales + offsets */
.mn-lane-1{transform:translateX(-40px) scale(1.02)}
.mn-lane-2{transform:translateX(25px) scale(1)}
.mn-lane-3{transform:translateX(-15px) scale(.98);opacity:.85}

/* Avatar circles — real photos */
.mn-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 4px 16px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05);
  position:relative;
}
.mn-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Online pulse indicator */
.mn-avatar::after{
  content:'';position:absolute;bottom:1px;right:1px;
  width:11px;height:11px;border-radius:50%;
  background:#22c55e;
  border:2.5px solid rgba(15,15,26,.9);
  box-shadow:0 0 8px rgba(34,197,94,.6);
  animation:pulse 2.5s ease infinite;
}

/* Stat cards — glass morphism */
.mn-stat-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:16px;flex-shrink:0;height:52px;
  background:linear-gradient(170deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04) inset;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease;
}
/* Stat card inner shine sweep */
.mn-stat-card::after{
  content:'';position:absolute;top:-50%;left:-100%;width:40%;height:200%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  transform:skewX(-20deg);pointer-events:none;
  animation:earnShine 8s ease-in-out infinite;
}
/* Green accent stat */
.mn-stat-card.mn-stat-green{
  background:linear-gradient(170deg,rgba(74,222,128,.14) 0%,rgba(20,184,166,.06) 100%);
  border-color:rgba(74,222,128,.18);
}
/* Flash effect when stat updates */
@keyframes statFlash{0%{border-color:rgba(74,222,128,.5);box-shadow:0 0 24px rgba(74,222,128,.15)}100%{border-color:rgba(255,255,255,.1);box-shadow:0 4px 20px rgba(0,0,0,.3)}}
.mn-stat-card.mn-flash{animation:statFlash .8s ease both}
.mn-stat-icon{font-size:18px;flex-shrink:0;line-height:1}
.mn-stat-num{
  font-family:var(--font-mono);font-size:17px;font-weight:800;
  color:rgba(255,255,255,.92);line-height:1;
  transition:transform .2s ease;
}
.mn-stat-num.mn-tick{transform:scale(1.12)}
.mn-stat-green .mn-stat-num{color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,.3)}
.mn-stat-lbl{
  font-size:10px;font-weight:500;color:rgba(255,255,255,.35);
  letter-spacing:.04em;text-transform:uppercase;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
}

/* === Flying purchase dots — converge toward phone === */
.mn-flydots{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mn-flydot{
  position:absolute;border-radius:50%;
  width:6px;height:6px;
  opacity:0;
  will-change:transform,opacity;
}
.mn-flydot::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:inherit;filter:blur(6px);opacity:.6;
}

/* === Ambient connection lines — radial from phone center === */
.mn-connectors{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;opacity:.15;
}
@keyframes connPulse{0%,100%{opacity:.08;r:2}50%{opacity:.4;r:4}}
@media(max-width:768px){
  .mn-lanes{gap:10px;width:180%}
  .mn-lane{height:48px}
  .mn-avatar{width:40px;height:40px}
  .mn-stat-card{padding:7px 12px;border-radius:12px;height:44px}
  .mn-stat-num{font-size:14px}
  .mn-stat-icon{font-size:15px}
}

/* === Phone wrap === */
.mn-phone-wrap{position:relative;display:flex;justify-content:center;align-items:center;min-height:600px;overflow:visible}

/* Warm ambient glow */
.mn-glow{position:absolute;width:420px;height:520px;left:50%;top:50%;margin-left:-210px;margin-top:-260px;
  background:radial-gradient(ellipse,rgba(245,180,50,.1) 0%,rgba(200,140,80,.05) 40%,transparent 70%);
  filter:blur(50px);pointer-events:none;z-index:0;
  animation:mnGlowDrift 14s ease-in-out infinite alternate}
@keyframes mnGlowDrift{0%{transform:translate(-8px,8px) scale(1)}100%{transform:translate(8px,-8px) scale(1.04)}}

/* Levitation */
@keyframes mnLevitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* === Phone outer shell — aluminum frame === */
.mn-phone-frame{
  position:relative;z-index:2;
  width:290px;height:590px;
  border-radius:44px;
  /* Aluminum metallic gradient */
  background:linear-gradient(165deg,#d4d4d8 0%,#a1a1aa 8%,#e4e4e7 15%,#a8a8b3 25%,#d1d1d6 40%,#b8b8c0 55%,#e2e2e6 70%,#a5a5ae 85%,#c8c8cf 100%);
  padding:3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 2px 4px rgba(0,0,0,.2),
    0 8px 24px rgba(0,0,0,.3),
    0 40px 80px rgba(0,0,0,.45);
  animation:mnLevitate 7s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* Smooth sunlight glow drifting across aluminum frame */
@keyframes frameSunA{
  0%{opacity:.3;top:-20%;left:-20%}
  50%{opacity:.7;top:25%;left:55%}
  100%{opacity:.3;top:65%;left:85%}
}
@keyframes frameSunB{
  0%{opacity:.2;bottom:-15%;right:-15%}
  50%{opacity:.5;bottom:35%;right:45%}
  100%{opacity:.2;bottom:75%;right:85%}
}
.mn-phone-frame::after{
  content:'';position:absolute;
  width:140px;height:200px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.7) 0%,rgba(255,255,255,.25) 35%,transparent 65%);
  filter:blur(12px);
  pointer-events:none;z-index:5;
  animation:frameSunA 8s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.mn-phone-frame::before{
  content:'';position:absolute;
  width:100px;height:150px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.45) 0%,rgba(255,255,255,.12) 35%,transparent 65%);
  filter:blur(10px);
  pointer-events:none;z-index:5;
  animation:frameSunB 11s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* Inner phone screen */
.mn-phone{
  position:relative;
  width:100%;height:100%;
  border-radius:41px;
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* Apple-style wallpaper — dark aurora gradient */
.mn-wallpaper{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(88,28,135,.6) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(30,58,138,.5) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(15,23,42,.9) 0%,rgba(2,6,23,1) 100%);
}
/* Soft light orb on wallpaper */
.mn-wallpaper::before{
  content:'';position:absolute;top:15%;left:20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(168,85,247,.15),transparent 70%);
  filter:blur(30px);pointer-events:none;
  animation:mnOrbFloat 10s ease-in-out infinite alternate}
.mn-wallpaper::after{
  content:'';position:absolute;bottom:20%;right:10%;width:160px;height:160px;
  background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);
  filter:blur(25px);pointer-events:none;
  animation:mnOrbFloat 12s ease-in-out infinite alternate-reverse}
@keyframes mnOrbFloat{0%{transform:translate(0,0)}100%{transform:translate(15px,-15px)}}

/* Status bar — Dynamic Island aligned with time/signal */
.mn-statusbar{
  position:relative;z-index:2;height:48px;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px 0;
}
.mn-dynamic-island{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:6px;
  width:84px;height:20px;background:#000;border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
}
.mn-status-left{font-size:14px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.02em;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif}
.mn-status-right{display:flex;align-items:center;gap:5px}

/* Lock screen */
.mn-lockscreen{text-align:center;padding:6px 0 12px;flex-shrink:0;position:relative;z-index:2}
.mn-date{font-size:14px;color:rgba(255,255,255,.45);font-weight:400;letter-spacing:.03em;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif}
.mn-time{
  font-size:72px;font-weight:700;line-height:1;letter-spacing:-4px;margin-top:2px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 20%,rgba(255,255,255,.45) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* Notification area — container for top-down slots */
.mn-notif-area{
  position:relative;z-index:2;
  flex:1;overflow:hidden;
  margin:0 12px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);
}

/* Each notification — positioned from top down */
.mn-notif{
  position:absolute;left:0;right:0;top:0;
  background:linear-gradient(170deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.22);
  border-radius:16px;padding:10px 12px;
  overflow:hidden;
  opacity:0;
  transform:translateY(-20px);
  transition:
    transform 1.3s cubic-bezier(.22,.61,.36,1),
    opacity 1.3s cubic-bezier(.22,.61,.36,1);
  will-change:transform,opacity;
}
/* Frost line */
.mn-notif::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.25) 70%,transparent 95%)}

/* Notification content — SF Pro style */
.mn-notif-header{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.mn-notif-icon{width:20px;height:20px;border-radius:5px;
  background:linear-gradient(135deg,#14B8A6,#0F766E);
  box-shadow:0 2px 6px rgba(20,184,166,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#fff;font-weight:800;flex-shrink:0}
.mn-notif-app{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.55);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;letter-spacing:.01em}
.mn-notif-time{font-size:10.5px;color:rgba(255,255,255,.3);margin-left:auto;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif}
.mn-notif-body{
  font-size:12px;line-height:1.45;color:rgba(255,255,255,.82);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
  letter-spacing:.01em;
}
.mn-notif-body strong{color:#fff;font-weight:600}
.mn-notif-amount{
  color:#4ade80;font-family:var(--font-mono);font-weight:800;font-size:13px;
  text-shadow:0 0 12px rgba(74,222,128,.3)}
.mn-notif-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4ade80;margin-right:5px;
  box-shadow:0 0 8px rgba(74,222,128,.5);animation:pulse 2s ease infinite;vertical-align:middle}

/* Floor shadow */
.mn-shadow{position:absolute;bottom:-24px;left:50%;width:220px;height:24px;margin-left:-110px;
  background:radial-gradient(ellipse,rgba(0,0,0,.3),transparent 70%);
  animation:mnLevitate 7s cubic-bezier(.45,.05,.55,.95) infinite;z-index:1;filter:blur(6px)}

/* Floating particles */
.mn-particle{position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  animation:ambientFloat var(--dur) ease-in-out infinite;animation-delay:var(--del)}
@media(max-width:768px){
  .mn-phone-frame{width:250px;height:510px;border-radius:38px}
  .mn-phone{border-radius:35px}
  .mn-time{font-size:60px}
  .mn-glow{width:300px;height:400px;margin-left:-150px;margin-top:-200px}
}

/* Pillar backgrounds */
.pillar-store{background:var(--midnight);padding-top:60px;overflow:visible;position:relative}

/* Twinkling stars */
@keyframes twinkle{
  0%{opacity:0;transform:scale(.3) rotate(0deg);filter:blur(1px)}
  30%{opacity:.4;transform:scale(.8) rotate(15deg);filter:blur(0px)}
  50%{opacity:.6;transform:scale(1) rotate(25deg);filter:blur(0px)}
  70%{opacity:.4;transform:scale(.8) rotate(35deg);filter:blur(0px)}
  100%{opacity:0;transform:scale(.3) rotate(50deg);filter:blur(1px)}
}
.pillar-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.pillar-star{
  position:absolute;
  width:8px;height:8px;
  opacity:0;
  animation:twinkle 4s ease-in-out infinite;
}
.pillar-star::before{
  content:'';position:absolute;inset:0;
  background:#fff;
  clip-path:polygon(
    50% 0%, 60% 35%, 100% 50%, 60% 65%,
    50% 100%, 40% 65%, 0% 50%, 40% 35%
  );
}
.pillar-star::after{
  content:'';position:absolute;
  top:50%;left:50%;
  width:14px;height:14px;
  margin-left:-7px;margin-top:-7px;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
  border-radius:50%;
}

/* Cool blue-white stars */
.pillar-star:nth-child(1){top:8%;left:5%;animation-duration:5s;animation-delay:0s;width:7px;height:7px}
.pillar-star:nth-child(1)::before{background:#d0e0ff}
.pillar-star:nth-child(1)::after{background:radial-gradient(circle,rgba(180,210,255,.12) 0%,transparent 70%)}

/* Warm white */
.pillar-star:nth-child(2){top:15%;left:22%;animation-duration:6.5s;animation-delay:1.2s;width:9px;height:9px}

/* Pale blue */
.pillar-star:nth-child(3){top:6%;left:42%;animation-duration:5.5s;animation-delay:2.4s;width:7px;height:7px}
.pillar-star:nth-child(3)::before{background:#c8d8f0}
.pillar-star:nth-child(3)::after{background:radial-gradient(circle,rgba(170,200,240,.1) 0%,transparent 70%)}

/* Warm yellow tint */
.pillar-star:nth-child(4){top:22%;left:68%;animation-duration:7s;animation-delay:3.6s;width:6px;height:6px}
.pillar-star:nth-child(4)::before{background:#fff0d0}
.pillar-star:nth-child(4)::after{width:10px;height:10px;margin-left:-5px;margin-top:-5px;background:radial-gradient(circle,rgba(255,230,180,.1) 0%,transparent 70%)}

/* Pale white */
.pillar-star:nth-child(5){top:10%;left:85%;animation-duration:5.8s;animation-delay:.8s;width:8px;height:8px}

/* Soft amber */
.pillar-star:nth-child(6){top:35%;left:3%;animation-duration:6.8s;animation-delay:2s;width:6px;height:6px}
.pillar-star:nth-child(6)::before{background:#ffe8c0}
.pillar-star:nth-child(6)::after{width:10px;height:10px;margin-left:-5px;margin-top:-5px;background:radial-gradient(circle,rgba(255,220,170,.1) 0%,transparent 70%)}

/* Cool blue */
.pillar-star:nth-child(7){top:45%;left:15%;animation-duration:5.3s;animation-delay:4.2s;width:7px;height:7px}
.pillar-star:nth-child(7)::before{background:#d5e5ff}
.pillar-star:nth-child(7)::after{background:radial-gradient(circle,rgba(185,215,255,.12) 0%,transparent 70%)}

/* Warm white */
.pillar-star:nth-child(8){top:55%;left:8%;animation-duration:7.2s;animation-delay:3s;width:9px;height:9px}

/* Pale rose tint */
.pillar-star:nth-child(9){top:65%;left:25%;animation-duration:5.6s;animation-delay:1s;width:7px;height:7px}
.pillar-star:nth-child(9)::before{background:#ffdde0}
.pillar-star:nth-child(9)::after{background:radial-gradient(circle,rgba(255,200,210,.1) 0%,transparent 70%)}

/* Bright blue-white */
.pillar-star:nth-child(10){top:50%;left:90%;animation-duration:6s;animation-delay:2.8s;width:10px;height:10px}
.pillar-star:nth-child(10)::before{background:#d0dfff}
.pillar-star:nth-child(10)::after{width:18px;height:18px;margin-left:-9px;margin-top:-9px;background:radial-gradient(circle,rgba(180,210,255,.12) 0%,transparent 70%)}

/* White */
.pillar-star:nth-child(11){top:72%;left:78%;animation-duration:6.4s;animation-delay:4.5s;width:6px;height:6px}

/* Soft amber */
.pillar-star:nth-child(12){top:80%;left:92%;animation-duration:5.2s;animation-delay:.4s;width:5px;height:5px}
.pillar-star:nth-child(12)::before{background:#ffe4b8}
.pillar-star:nth-child(12)::after{width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px}

/* Pale white */
.pillar-star:nth-child(13){top:85%;left:12%;animation-duration:7.5s;animation-delay:5s;width:7px;height:7px}

/* Warm yellow */
.pillar-star:nth-child(14){top:90%;left:55%;animation-duration:5.8s;animation-delay:2.2s;width:8px;height:8px}
.pillar-star:nth-child(14)::before{background:#fff2d6}
.pillar-star:nth-child(14)::after{background:radial-gradient(circle,rgba(255,235,190,.1) 0%,transparent 70%)}

/* Cool blue */
.pillar-star:nth-child(15){top:30%;left:95%;animation-duration:5.4s;animation-delay:3.8s;width:6px;height:6px}
.pillar-star:nth-child(15)::before{background:#ccd8f0}

/* Tiny warm */
.pillar-star:nth-child(16){top:42%;left:48%;animation-duration:6.6s;animation-delay:5.4s;width:5px;height:5px}
.pillar-star:nth-child(16)::before{background:#ffe8cc}
.pillar-star:nth-child(16)::after{width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px}

/* Pale blue */
.pillar-star:nth-child(17){top:18%;left:55%;animation-duration:7s;animation-delay:.2s;width:7px;height:7px}
.pillar-star:nth-child(17)::before{background:#d8e8ff}
.pillar-star:nth-child(17)::after{background:radial-gradient(circle,rgba(190,220,255,.1) 0%,transparent 70%)}

/* White */
.pillar-star:nth-child(18){top:75%;left:40%;animation-duration:5.2s;animation-delay:1.6s;width:6px;height:6px}

/* Pale rose */
.pillar-star:nth-child(19){top:60%;left:70%;animation-duration:6.2s;animation-delay:3.2s;width:9px;height:9px}
.pillar-star:nth-child(19)::before{background:#ffd8dd}
.pillar-star:nth-child(19)::after{background:radial-gradient(circle,rgba(255,195,205,.1) 0%,transparent 70%)}

/* Tiny white */
.pillar-star:nth-child(20){top:95%;left:82%;animation-duration:5.6s;animation-delay:4.8s;width:5px;height:5px}
.pillar-star:nth-child(20)::after{width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px}
.pillar-products{background:#162020;border-top:1px solid rgba(255,255,255,.04);overflow:hidden;position:relative}
.pillar-marketing{background:var(--midnight);border-top:1px solid rgba(255,255,255,.04);overflow:hidden;position:relative}
/* Subtle animated mesh gradient background */
.pillar-marketing::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 30%,rgba(20,184,166,.04) 0%,transparent 70%),
    radial-gradient(ellipse 500px 500px at 85% 70%,rgba(139,92,246,.03) 0%,transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 90%,rgba(245,180,50,.03) 0%,transparent 70%);
  animation:mktBgDrift 20s ease-in-out infinite alternate;
}
@keyframes mktBgDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-15px,10px) scale(1.02)}
  100%{transform:translate(10px,-8px) scale(1)}
}
/* Very subtle dot grid overlay */
.pillar-marketing::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 30%,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,#000 30%,transparent 70%);
}
@media(max-width:1024px){
  .pillar-inner{grid-template-columns:1fr;gap:48px}
  .pillar-reverse .pillar-inner{direction:ltr}
  .pillar-text{max-width:100%;text-align:center}
  .section-sub,.pillar-text p{max-width:100%}
  .pillar-features{align-items:flex-start;text-align:left;width:fit-content;margin:0 auto 32px}
  .pillar-stat-row{justify-content:center}
  .pillar-num{font-size:64px}
  .pillar{padding:60px 0}
}
@media(max-width:768px){
  .pv-store-body{grid-template-columns:repeat(2,1fr)}
}

/* ===== TRUST — Dark Premium ===== */
.trust-section{padding:100px 0 60px;background:#F8FFFE;color:#111114;position:relative;overflow:hidden}
.trust-section::before{content:'';position:absolute;inset:0;background:none;pointer-events:none}
.trust-header{text-align:center;margin-bottom:56px;position:relative;z-index:2}
.trust-header .section-label{color:var(--teal-bright);justify-content:center}
.trust-header .section-title{color:#111114}
.trust-header .section-sub{color:rgba(0,0,0,.45);margin:0 auto}

/* Shield + credentials row */
.trust-creds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:64px;position:relative;z-index:2}
.trust-cred{
  text-align:center;padding:32px 20px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  transition:all .4s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.trust-cred::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.04) 30%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.04) 70%,transparent);
}
.trust-cred:hover{background:#fff;border-color:rgba(20,184,166,.2);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.trust-cred-icon{font-size:36px;margin-bottom:14px;display:block}
.trust-cred h4{font-family:var(--font-display);font-size:16px;font-weight:700;color:#111114;margin-bottom:6px}
.trust-cred p{font-size:13px;color:rgba(0,0,0,.45);line-height:1.6}

/* Guarantee banner */
.trust-guarantee{
  display:flex;align-items:center;gap:24px;
  max-width:800px;margin:0 auto 64px;padding:28px 36px;
  background:linear-gradient(135deg,rgba(20,184,166,.08) 0%,rgba(20,184,166,.03) 100%);
  border:1px solid rgba(20,184,166,.15);
  border-radius:20px;position:relative;z-index:2;
}
.trust-guarantee-shield{
  flex-shrink:0;width:64px;height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(20,184,166,.15),rgba(20,184,166,.05));
  border:1.5px solid rgba(20,184,166,.25);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.trust-guarantee-text h4{font-family:var(--font-display);font-size:20px;font-weight:700;color:#111114;margin-bottom:4px}
.trust-guarantee-text p{font-size:14px;color:rgba(0,0,0,.45);line-height:1.6}

/* Divider with label */
.trust-divider{
  text-align:center;margin:0 0 48px;position:relative;z-index:2;
}
.trust-divider::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.06) 20%,rgba(0,0,0,.06) 80%,transparent);
}
.trust-divider span{
  position:relative;display:inline-block;padding:0 20px;
  background:#F8FFFE;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(0,0,0,.25);
}

/* In the Press — large cards with image */
.trust-press{position:relative;z-index:2;margin-bottom:64px}
.trust-press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trust-press-card{
  padding:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  transition:all .4s cubic-bezier(.22,1,.36,1);
  text-decoration:none;display:block;overflow:hidden;
  position:relative;
}
.trust-press-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.04) 30%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.04) 70%,transparent);
}
.trust-press-card:hover{background:#fff;border-color:rgba(20,184,166,.2);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.08)}
.trust-press-img{
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(20,184,166,.08),rgba(15,118,110,.04));
  display:flex;align-items:center;justify-content:center;
  font-size:28px;color:rgba(20,184,166,.25);
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.trust-press-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(17,17,20,.4) 100%);
  pointer-events:none;
}
.trust-press-img::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 180deg,transparent 70%,rgba(255,255,255,.06) 78%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.06) 82%,transparent 90%);
  animation:pressGlare 8s linear infinite;pointer-events:none;z-index:1;
}
@keyframes pressGlare{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.trust-press-body{padding:20px 22px 24px}
.trust-press-source{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-bright);margin-bottom:10px}
.trust-press-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:#111114;line-height:1.5;margin-bottom:10px}
.trust-press-date{font-size:11px;color:rgba(0,0,0,.3);font-family:var(--font-mono)}
.trust-press-read{font-size:12px;color:var(--teal-bright);font-weight:600;display:inline-flex;align-items:center;gap:4px;margin-top:8px;opacity:.6;transition:opacity .3s}
.trust-press-card:hover .trust-press-read{opacity:1}

/* Payment strip */
.trust-payments{position:relative;z-index:2;text-align:center;margin-bottom:0;padding-bottom:0}
.trust-payments-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(0,0,0,.25);margin-bottom:16px}
.trust-payments-row{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.trust-pay-icon{
  display:flex;align-items:center;justify-content:center;
  padding:10px 20px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  font-size:14px;font-weight:700;color:rgba(0,0,0,.5);
  letter-spacing:.02em;
  transition:all .3s;
}
.trust-pay-icon:hover{background:rgba(0,0,0,.05);color:rgba(0,0,0,.7)}

/* Bottom legal line */
.trust-legal{
  position:relative;z-index:2;
  text-align:center;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.04);
}
.trust-legal p{font-size:12px;color:rgba(255,255,255,.2);line-height:1.7}
.trust-legal a{color:var(--teal-bright);text-decoration:none}
.trust-legal a:hover{text-decoration:underline}
@media(max-width:768px){
  .trust-creds{grid-template-columns:1fr}
  .trust-press-grid{grid-template-columns:1fr}
  .trust-guarantee{flex-direction:column;text-align:center;padding:24px}
  .trust-payments-row{gap:12px}
  .trust-pay-icon{padding:8px 14px;font-size:12px}
}


/* ===== SECTION HELPERS ===== */
.section-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:16px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--teal-bright); border-radius:2px; }
.section-title { font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; }
.section-sub { font-size:17px; color:var(--stone); max-width:560px; line-height:1.7; }

/* ===== VIDEO SECTION ===== */
.video-section {
  padding:80px 0;position:relative;overflow:hidden;
  background:#111114;
}
.video-wrap {
  position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 24px;
}
.video-placeholder {
  position:relative;
  border-radius:24px;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0A1A1C;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
}
.video-placeholder img {
  width:100%;height:100%;object-fit:cover;
  opacity:.5;
  display:block;
}
/* Dark overlay for text readability */
.video-overlay {
  position:absolute;inset:0;z-index:1;border-radius:24px;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.3) 0%,
    rgba(0,0,0,.1) 30%,
    rgba(0,0,0,.1) 60%,
    rgba(0,0,0,.4) 100%
  );
}
.video-content {
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;
}
.video-eyebrow {
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.6);margin-bottom:16px;
}
.video-title {
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,48px);font-weight:700;
  color:#fff;line-height:1.15;letter-spacing:-.02em;
  max-width:700px;margin-bottom:16px;
}
.video-sub {
  font-size:17px;color:rgba(255,255,255,.6);
  max-width:520px;line-height:1.7;margin-bottom:36px;
}

/* Play button — epic animated */
@keyframes playPulse{
  0%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes playRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.video-play {
  width:80px;height:80px;min-width:80px;min-height:80px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;margin-bottom:32px;
  transition:all .6s cubic-bezier(.22,1,.36,1);
  position:relative;flex-shrink:0;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}
/* Pulsing ring */
.video-play::before {
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  animation:playPulse 2.5s cubic-bezier(.4,0,.6,1) infinite;
}
/* Rotating dashed orbit */
.video-play::after {
  content:'';position:absolute;inset:-12px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.1);
  animation:playRotate 12s linear infinite;
}
.video-play:hover {
  background:rgba(20,184,166,.3);
  border-color:rgba(20,184,166,.6);
  transform:scale(1.12);
  box-shadow:0 12px 40px rgba(20,184,166,.2), 0 0 40px rgba(20,184,166,.15);
}
.video-play:hover::before {
  border-color:rgba(20,184,166,.4);
}
.video-play:hover::after {
  border-color:rgba(20,184,166,.2);
}
.video-play svg {
  width:28px;height:28px;min-width:28px;fill:#fff;margin-left:4px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.video-play:hover svg {
  transform:scale(1.15);
}
/* CTA under play — те же стили, что у .btn-primary / .nav-cta (teal glass) */
.video-cta {
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 36px;border-radius:50px;
  font-family:var(--font-body);
  font-size:16px;font-weight:700;color:#fff;
  text-decoration:none;cursor:pointer;
  border:1px solid rgba(38,187,171,.6);
  position:relative;overflow:hidden;
  background:#22a99b;
  box-shadow:0 4px 16px rgba(20,184,166,.25);
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.video-cta::before {
  content:'';position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:none;
}
.video-cta:hover {
  transform:translateY(-2px);
  border-color:rgba(76,212,196,.7);
  background:#35c8bb;
  box-shadow:0 6px 20px rgba(20,184,166,.3);
}
.video-cta svg { position:relative;z-index:2;transition:transform .4s cubic-bezier(.22,1,.36,1); }
.video-cta:hover svg { transform:translateX(4px); }
/* Trust line under CTA */
.video-trust {
  margin-top:20px;display:flex;align-items:center;gap:20px;
  font-size:12px;color:rgba(255,255,255,.4);font-weight:500;
}
.video-trust span { display:flex;align-items:center;gap:5px; }
@media(max-width:768px) {
  .video-placeholder{aspect-ratio:9/14;min-height:500px}
  .video-title{font-size:24px}
  .video-sub{font-size:15px}
  .video-play{width:64px;height:64px;min-width:64px;min-height:64px}
  .video-play svg{width:22px;height:22px}
  .video-cta{font-size:15px;padding:14px 28px}
  .video-trust{flex-direction:column;gap:8px}
}

/* ===== HOW IT WORKS ===== */
.how-it-works {
  padding:100px 0; position:relative; overflow:hidden;
  background:#F4FBFA;
}
/* Isometric diamond mesh texture */
.how-it-works::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(30deg,rgba(15,118,110,.05) 1px,transparent 1px),
    linear-gradient(150deg,rgba(15,118,110,.05) 1px,transparent 1px);
  background-size:40px 24px;
  pointer-events:none;
}
/* Color washes */
.how-it-works::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 45% at 15% 25%,rgba(20,184,166,.07) 0%,transparent 70%),
    radial-gradient(ellipse 35% 40% at 85% 75%,rgba(139,92,246,.05) 0%,transparent 70%),
    radial-gradient(ellipse 30% 30% at 50% 50%,rgba(245,180,50,.03) 0%,transparent 60%);
}
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:60px; position:relative;z-index:1; }
.step-card {
  position:relative; z-index:1; padding:40px 32px;
  background:rgba(255,255,255,.4);
  border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 8px 32px rgba(15,118,110,.04),
    0 2px 6px rgba(0,0,0,.02);
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.step-card:hover {
  background:rgba(255,255,255,.55);
  transform:translateY(-6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 50px rgba(15,118,110,.07),
    0 4px 12px rgba(0,0,0,.03);
}
.step-number {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; font-weight:700;
  margin-bottom:24px;
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.step-card:hover .step-number{transform:scale(1.08)}
.step-1 .step-number { background:rgba(20,184,166,.12); color:var(--teal-deep); }
.step-2 .step-number { background:rgba(139,92,246,.1); color:rgba(109,40,217,1); }
.step-3 .step-number { background:rgba(59,130,246,.1); color:rgba(37,99,235,1); }
.step-card h3 { font-family:var(--font-display); font-size:22px; font-weight:600; margin-bottom:12px; letter-spacing:-.01em; color:var(--midnight); }
.step-card p { font-size:15px; color:var(--stone); line-height:1.7; }

/* ===== PRODUCTS ===== */
.products { padding:100px 0; background:var(--teal-mist); position:relative; }
.products::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(15,118,110,.12),transparent); }
.products-header { text-align:center; margin-bottom:60px; }
.products-header .section-sub { margin:0 auto; }
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(15,118,110,.06); transition:all .35s cubic-bezier(.22,1,.36,1); cursor:pointer; }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-medium); border-color:transparent; }
.product-card-img { height:160px; display:flex; align-items:center; justify-content:center; font-size:48px; position:relative; }
.product-card-tag { position:absolute; top:12px; left:12px; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); }
.tag-help { color:var(--teal); }
.tag-fight { color:var(--coral); }
.product-card-body { padding:16px 18px 20px; }
.product-card-category { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--stone-light); margin-bottom:4px; }
.product-card-name { font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.3; margin-bottom:6px; letter-spacing:-.01em; }
.product-card-desc { font-size:13px; color:var(--stone); line-height:1.5; margin-bottom:12px; }
.product-card-footer { display:flex; align-items:center; justify-content:space-between; }
.product-card-price { font-size:18px; font-weight:700; color:var(--midnight); }
.product-card-price s { font-size:13px; color:var(--stone-light); font-weight:400; margin-left:4px; }
.product-card-earn { font-size:12px; font-weight:600; color:var(--teal); background:rgba(15,118,110,.08); padding:3px 10px; border-radius:50px; }
.products-more { text-align:center; margin-top:48px; }

/* ===== TESTIMONIAL SLIDER — Light + Overlapping ===== */
.social-proof { padding:100px 0; background:#F8FFFE; position:relative;overflow:hidden }
.social-proof::before{content:'';position:absolute;inset:0;background-image:linear-gradient(30deg,rgba(15,118,110,.03) 1px,transparent 1px),linear-gradient(150deg,rgba(15,118,110,.03) 1px,transparent 1px);background-size:40px 24px;pointer-events:none}
.sp-slider{position:relative;margin-top:56px;min-height:500px;cursor:grab;user-select:none}
.sp-slider.sp-grabbing{cursor:grabbing}
.sp-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;opacity:0;pointer-events:none;z-index:1;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.sp-slide.sp-active{opacity:1;pointer-events:auto;z-index:2;visibility:visible}

/* Photo side */
.sp-photo{
  position:relative;height:480px;border-radius:20px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);
}
.sp-slide-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 8s cubic-bezier(.4,0,.2,1)}
.sp-active .sp-slide-img{transform:scale(1.06)}
/* Ambient glow behind photo */
.sp-photo::after{
  content:'';position:absolute;inset:-20px;border-radius:30px;z-index:-1;
  background:var(--glow);filter:blur(40px);opacity:.5;
}

/* Glass wrapper — holds badge + card, overlaps photo */
.sp-glass-wrap{
  position:relative;z-index:3;
  margin-left:-60px;
  overflow:visible;
}

/* Review card — metallic glass */
.sp-glass{
  position:relative;
  background:#fff;
  border-radius:20px;
  border:none;
  padding:36px 36px 32px;
  box-shadow:0 24px 60px rgba(15,118,110,.07), 0 4px 16px rgba(0,0,0,.04);
  overflow:hidden;
}
/* Metallic border ring — sits around the card */
.sp-glass-ring{display:none}
/* Shimmer sweep on metallic ring */
@keyframes metalShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.sp-glass-ring::after{
  content:'';position:absolute;inset:0;border-radius:21px;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:200% 100%;
  animation:metalShimmer 6s ease infinite;
  pointer-events:none;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  padding:1.5px;
}

/* Traveling sun glare across glass */
@keyframes spGlare{
  0%{left:-80%;top:-30%;opacity:0}
  15%{opacity:.6}
  85%{opacity:.6}
  100%{left:120%;top:5%;opacity:0}
}
.sp-glass::before{display:none}
/* Frosted highlight top */
.sp-glass::after{display:none}

/* Earn badge — floats above card, never clipped */
.sp-earn-badge{
  position:absolute;top:-16px;right:24px;z-index:4;
  background:#fff;
  border-radius:50px;padding:8px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 0 1px rgba(15,118,110,.06);
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--teal-deep);
}
.sp-earn-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 2s ease infinite}
.sp-stars{color:#FBBF24;font-size:14px;letter-spacing:2px;margin-bottom:14px;position:relative;z-index:2}
.sp-quote{font-family:var(--font-body);font-size:16px;line-height:1.8;color:var(--midnight);font-weight:400;opacity:.85;position:relative;z-index:2}
.sp-quote em{font-style:normal;color:var(--teal-deep);font-weight:700}
.sp-disclaimer{font-size:10px;color:rgba(15,23,42,.32);margin-top:6px;letter-spacing:.02em}
.sp-author{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(15,118,110,.06);position:relative;z-index:2}
.sp-author-name{font-size:15px;font-weight:700;color:var(--midnight)}
.sp-author-role{font-size:13px;color:#4B5563;margin-top:2px}

/* Nav dots */
.sp-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:32px;position:relative;z-index:5}
.sp-dots{display:flex;justify-content:center;gap:10px;position:relative;z-index:5}
.sp-dot{width:8px;height:8px;border-radius:50%;background:rgba(15,118,110,.12);cursor:pointer;transition:all .4s;border:none;padding:0}
.sp-dot.sp-dot-active{background:var(--teal);width:28px;border-radius:4px}
@media(max-width:768px){
  .sp-slider{min-height:640px}
  .sp-slide{grid-template-columns:1fr;gap:0}
  .sp-photo{height:280px;border-radius:16px}
  .sp-glass-wrap{margin-left:16px;margin-right:16px;margin-top:-42px;position:relative;z-index:3}
  .sp-glass{border-radius:16px;padding:20px 20px 18px}
  .sp-glass-ring{border-radius:17px;inset:-1.5px}
  .sp-glass-ring::after{border-radius:17px}
  .sp-earn-badge{top:-14px;right:16px;font-size:13px;padding:6px 14px}
  .sp-quote{font-size:14px;line-height:1.7}
}
.proof-stars { color:var(--teal-bright); font-size:16px; letter-spacing:2px; margin-bottom:16px; }
.proof-text { font-size:15px; line-height:1.7; color:var(--charcoal); margin-bottom:20px; font-style:italic; }
.proof-author { display:flex; align-items:center; gap:12px; }
.proof-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; }
.proof-name { font-size:14px; font-weight:600; }
.proof-role { font-size:12px; color:var(--stone); }

/* ===== MATH — Interactive Calculator + Globe ===== */
.math-section { padding:100px 0; background:#F8FFFE; color:#111114; position:relative; overflow:hidden; }
.math-section::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 50% 80% at 10% 20%, rgba(20,184,166,.1) 0%, transparent 50%), radial-gradient(ellipse 40% 60% at 90% 80%, rgba(15,118,110,.05) 0%, transparent 50%); pointer-events:none; }
.math-content { position:relative; z-index:2; text-align:center; }
.math-content .section-title { color:#fff; }
.math-content .section-sub { color:rgba(255,255,255,.55); margin:0 auto 48px; }
.math-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1050px;margin:0 auto;text-align:left}
.math-globe-col{display:flex;flex-direction:column;align-items:center}

/* Globe scene */
.math-globe-scene{position:relative;width:100%;aspect-ratio:1;max-width:380px}

/* Sunrise glow behind planet — dynamic, drifting */
.math-sunrise{
  position:absolute;
  width:65%;height:65%;
  right:-10%;bottom:-5%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,60,.22) 0%, rgba(255,160,40,.12) 25%, rgba(255,120,20,.05) 50%, transparent 70%);
  filter:blur(18px);
  pointer-events:none;z-index:0;
  animation:sunDrift 12s ease-in-out infinite;
}
@keyframes sunDrift{
  0%{opacity:.65;transform:translate(0,0) scale(1)}
  25%{opacity:.9;transform:translate(-8%,5%) scale(1.08)}
  50%{opacity:1;transform:translate(-3%,-6%) scale(1.12)}
  75%{opacity:.85;transform:translate(5%,3%) scale(1.04)}
  100%{opacity:.65;transform:translate(0,0) scale(1)}
}
.math-sunrise::before{
  content:'';position:absolute;inset:-15%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,240,150,.1) 0%, rgba(255,200,80,.04) 40%, transparent 65%);
  animation:sunFlicker 4s ease-in-out infinite alternate;
}
@keyframes sunFlicker{0%{opacity:.5;transform:scale(.95)}100%{opacity:1;transform:scale(1.1)}}
.math-sunrise::after{
  content:'';position:absolute;inset:-35%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,220,100,.06) 0%, transparent 55%);
  filter:blur(30px);
  animation:sunDrift 12s ease-in-out infinite reverse;
}

/* Globe sphere */
.math-globe{
  width:76%;height:76%;position:absolute;top:12%;left:12%;
  border-radius:50%;overflow:hidden;z-index:2;
  background:radial-gradient(circle at 35% 30%,#152a38 0%,#0c1e2c 40%,#070f18 100%);
  box-shadow:
    inset -30px -20px 60px rgba(0,0,0,.7),
    inset 15px 15px 40px rgba(20,184,166,.04),
    0 0 80px rgba(20,184,166,.06),
    0 0 160px rgba(20,184,166,.03);
}
/* Wireframe SVG fills the globe */
.math-globe svg{
  position:absolute;inset:0;width:100%;height:100%;
}
/* Atmosphere rim */
.math-globe::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 75% 65%,transparent 48%,rgba(255,180,50,.06) 58%,rgba(255,200,80,.1) 65%,rgba(255,220,120,.05) 72%,transparent 80%),
             radial-gradient(circle at 30% 25%,transparent 48%,rgba(20,184,166,.05) 60%,rgba(20,184,166,.08) 68%,transparent 78%);
  pointer-events:none;
}
/* Inner glow overlay */
.math-globe::before{
  content:'';position:absolute;inset:0;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,rgba(20,184,166,.04) 0%,transparent 50%);
  pointer-events:none;
}

/* Order flash dots */
@keyframes dotFlash{
  0%{r:0;opacity:0}
  15%{r:3;opacity:1}
  40%{r:2.5;opacity:.8}
  100%{r:1;opacity:0}
}

/* Orbits */
.math-orbits{position:absolute;inset:0;z-index:1;pointer-events:none}
.math-orbit{
  position:absolute;top:50%;left:50%;
  border:1px solid rgba(20,184,166,.12);
  border-radius:50%;transform-origin:center center;
}
.math-orbit-1{width:118%;height:44%;margin-left:-59%;margin-top:-22%;transform:rotate(-15deg)}
.math-orbit-2{width:128%;height:54%;margin-left:-64%;margin-top:-27%;transform:rotate(25deg)}
.math-orbit-3{width:112%;height:38%;margin-left:-56%;margin-top:-19%;transform:rotate(-40deg)}

/* Floating purchase tags */
.math-tags{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible}
@keyframes tagFloat{
  0%{opacity:0;transform:translateY(4px) scale(.9)}
  12%{opacity:1;transform:translateY(0) scale(1)}
  75%{opacity:1;transform:translateY(-14px) scale(1)}
  100%{opacity:0;transform:translateY(-24px) scale(.92)}
}
.math-tag{
  position:absolute;
  background:rgba(17,17,20,.75);
  border:1px solid rgba(20,184,166,.2);
  border-radius:8px;
  padding:5px 10px;
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
  animation:tagFloat 3.5s ease forwards;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 0 1px rgba(20,184,166,.06);
}
.math-tag-amount{color:#4ade80;font-family:var(--font-mono);font-weight:700}
.math-tag-city{color:rgba(255,255,255,.5);font-weight:400}
.math-tag-dot{width:4px;height:4px;border-radius:50%;background:#4ade80;flex-shrink:0}

/* "Your Store" marker on globe */
.math-store-marker{
  position:absolute;z-index:4;pointer-events:none;
  width:12px;height:12px;
  /* Will be positioned by JS */
}
.math-store-marker::before{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  background:var(--teal-bright);
  box-shadow:0 0 8px rgba(20,184,166,.6),0 0 20px rgba(20,184,166,.3);
  animation:storePulse 2s ease infinite;
}
.math-store-marker::after{
  content:'';position:absolute;
  inset:-6px;border-radius:50%;
  border:1.5px solid rgba(20,184,166,.3);
  animation:storePulse 2s ease infinite .3s;
}
@keyframes storePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.5}}

/* Live counter under globe */
.math-live-counter{
  text-align:center;
  margin-top:16px;
  font-size:13px;
  color:rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;z-index:3;
}
.math-live-counter-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:15px;
  color:var(--teal-bright);
  min-width:32px;
  display:inline-block;
}
.math-live-counter-dot{
  width:6px;height:6px;border-radius:50%;
  background:#4ade80;
  animation:pulse 2s ease infinite;
}

/* Calculator panel */
.math-calc{position:relative}
.math-calc-header{margin-bottom:32px}
.math-calc-header h3{font-family:var(--font-display);font-size:24px;font-weight:700;color:#fff;margin-bottom:4px}
.math-calc-header p{font-size:14px;color:rgba(255,255,255,.4)}

/* Slider */
.math-slider-wrap{margin-bottom:36px}
.math-slider-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.math-slider-label span{font-size:13px;font-weight:500;color:rgba(255,255,255,.45)}
.math-slider-val{font-family:var(--font-mono);font-size:28px;font-weight:800;color:var(--teal-bright)}
.math-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--teal-bright) 0%,var(--teal-bright) var(--pct,8%),rgba(255,255,255,.08) var(--pct,8%));
  outline:none;cursor:pointer;
}
.math-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:var(--teal-bright);
  border:3px solid #111114;
  box-shadow:0 0 0 3px rgba(20,184,166,.25),0 4px 12px rgba(0,0,0,.3);
  cursor:pointer;transition:box-shadow .2s;
}
.math-slider::-webkit-slider-thumb:hover{
  box-shadow:0 0 0 6px rgba(20,184,166,.2),0 4px 16px rgba(0,0,0,.4);
}
.math-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;border:3px solid #111114;
  background:var(--teal-bright);
  box-shadow:0 0 0 3px rgba(20,184,166,.25),0 4px 12px rgba(0,0,0,.3);
  cursor:pointer;
}

/* Result cards */
.math-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.math-res-card{
  padding:20px;border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  transition:all .4s;
}
.math-res-card.main{
  grid-column:1/-1;
  background:rgba(20,184,166,.08);
  border-color:rgba(20,184,166,.2);
}
.math-res-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.35);margin-bottom:4px}
.math-res-value{font-family:var(--font-mono);font-size:28px;font-weight:800;color:#fff;line-height:1.1;transition:all .3s}
.math-res-card.main .math-res-value{font-size:40px;color:#4ade80}
.math-res-note{font-size:12px;color:rgba(255,255,255,.3);margin-top:4px}
.math-disclaimer { font-size:13px; color:rgba(255,255,255,.2); margin-top:32px; text-align:center; }
@media(max-width:768px){
  .math-layout{grid-template-columns:1fr;gap:32px}
  .math-globe-scene{max-width:280px}
  .math-res-card.main .math-res-value{font-size:32px}
}

/* ===== PERSONAL MANAGER ===== */
.pm-section { padding:100px 0; background:#F8FFFE; position:relative; overflow:hidden; }
.pm-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(30deg,rgba(15,118,110,.02) 1px,transparent 1px),linear-gradient(150deg,rgba(15,118,110,.02) 1px,transparent 1px);background-size:40px 24px;pointer-events:none}
.pm-header{text-align:center;max-width:640px;margin:0 auto 48px}
.pm-header .section-sub{margin:0 auto}

/* Hero photo */
.pm-photo-wrap{position:relative;border-radius:20px;overflow:hidden;margin-bottom:56px;aspect-ratio:21/9;background:#e2e8f0}
.pm-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.pm-photo-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 40%,transparent 70%,rgba(0,0,0,.08) 100%);pointer-events:none}
.pm-photo-badge{
  position:absolute;bottom:24px;left:24px;z-index:2;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50px;padding:8px 20px 8px 10px;
  color:#fff;font-size:14px;font-weight:600;
}
.pm-photo-badge-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 2s ease infinite;flex-shrink:0}

/* Promise headline */
.pm-promise{text-align:center;max-width:700px;margin:0 auto 48px}
.pm-promise h3{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--midnight);margin-bottom:12px}
.pm-promise p{font-size:16px;line-height:1.8;color:var(--stone)}

/* Benefits grid */
.pm-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.pm-benefit{
  position:relative;
  padding:32px 24px 28px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.5);
  border-top-color:rgba(255,255,255,.7);
  border-bottom-color:rgba(255,255,255,.3);
  border-radius:20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.02) inset,
    0 4px 20px rgba(15,118,110,.04),
    0 1px 4px rgba(0,0,0,.03);
  transition:all .5s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
  cursor:default;
}
/* Frosted top highlight */
.pm-benefit::before{
  content:'';position:absolute;top:0;left:0;right:0;height:45%;
  border-radius:20px 20px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 50%, transparent 100%);
  pointer-events:none;z-index:0;
}
/* Shimmer glare — plays once on hover */
@keyframes pmShimmer{
  0%{left:-80%;opacity:0}
  20%{opacity:1}
  100%{left:130%;opacity:0}
}
.pm-benefit::after{
  content:'';position:absolute;top:-50%;
  left:-80%;
  width:50%;height:250%;
  background:linear-gradient(
    105deg,
    transparent 0%, transparent 38%,
    rgba(255,255,255,.15) 45%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,.15) 55%,
    transparent 62%, transparent 100%
  );
  pointer-events:none;z-index:1;
  opacity:0;
  transition:none;
}
.pm-benefit:hover::after{
  animation:pmShimmer 1s cubic-bezier(.4,0,.2,1) forwards;
}
/* Hover state */
.pm-benefit:hover{
  transform:translateY(-6px);
  border-color:rgba(20,184,166,.15);
  border-top-color:rgba(20,184,166,.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.02) inset,
    0 12px 40px rgba(15,118,110,.09),
    0 4px 12px rgba(0,0,0,.04),
    0 0 0 1px rgba(20,184,166,.06);
}

/* Icon container — dark glass with glow */
.pm-benefit-icon{
  position:relative;z-index:2;
  width:72px;height:72px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
  transition:all .5s cubic-bezier(.22,1,.36,1);
}
.pm-benefit-icon img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.12)}
/* Crystal SVG icons — frontal glass shapes + liquid-glass tile */
.pm-benefit-icon--crystal{
  background:transparent;
  border:none;
  box-shadow:none;
}
.pm-benefit-icon--crystal .pm-crystal-svg{
  width:72%;
  height:72%;
  display:block;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 2px 8px rgba(20,184,166,.35));
}
/* Icon ambient glow */
.pm-benefit-icon::after{
  content:'';position:absolute;inset:-6px;border-radius:20px;
  background:radial-gradient(circle, rgba(20,184,166,.12) 0%, transparent 70%);
  pointer-events:none;z-index:-1;
  opacity:0;
  transition:opacity .5s;
}
/* Hover icon */
.pm-benefit:hover .pm-benefit-icon{
  border-color:rgba(20,184,166,.25);
  box-shadow:
    0 2px 8px rgba(0,0,0,.15),
    0 0 12px rgba(20,184,166,.1),
    0 0 0 1px rgba(255,255,255,.05) inset;
  transform:scale(1.05);
}
.pm-benefit:hover .pm-benefit-icon::after{opacity:1}

/* Text z-index */
.pm-benefit h4{position:relative;z-index:2;font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:6px;color:var(--midnight);letter-spacing:-.01em;transition:color .3s}
.pm-benefit p{position:relative;z-index:2;font-size:14px;line-height:1.7;color:var(--stone)}
.pm-benefit:hover h4{color:var(--teal-deep)}

/* Channels strip */
.pm-channels{
  display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;
  padding:28px 0;
  border-top:1px solid rgba(15,118,110,.06);
  border-bottom:1px solid rgba(15,118,110,.06);
  margin-bottom:48px;
}
.pm-channel{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--stone)}
.pm-channel-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--teal-frost)}

/* Bottom quote */
.pm-quote-wrap{text-align:center;max-width:600px;margin:0 auto}
.pm-quote{font-family:var(--font-display);font-size:20px;font-weight:400;font-style:italic;line-height:1.7;color:var(--charcoal);margin-bottom:16px}
.pm-quote em{font-style:normal;color:var(--teal-deep);font-weight:700}
.pm-quote-author{font-size:14px;color:var(--stone)}
.pm-quote-author strong{color:var(--midnight);font-weight:600}
.pm-quote-author-wrap{display:flex;align-items:center;gap:14px;justify-content:center}
.pm-quote-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(15,118,110,.1);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.pm-quote-earning{font-size:12px;font-family:var(--font-mono);color:var(--teal);font-weight:600;margin-top:2px}
@media(max-width:768px){
  .pm-benefits{grid-template-columns:1fr}
  .pm-photo-wrap{aspect-ratio:16/9;border-radius:16px}
  .pm-channels{gap:20px}
}

/* (CTA and footer styles moved to mega-footer above) */

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;text-align:center} .hero-sub{margin:20px auto 0} .hero-actions{justify-content:center} .hero-note{display:block;text-align:center} .hero-note svg{display:inline-block;vertical-align:-2px;margin-right:4px} .hero-visual{max-width:520px;margin:40px auto 0} .hero-float{display:none}
  .steps-grid{grid-template-columns:1fr;max-width:480px;margin:60px auto 0} .products-grid{grid-template-columns:repeat(2,1fr)} .proof-grid{grid-template-columns:1fr;max-width:520px;margin:48px auto 0}
}
@media(max-width:768px){
  .hero{padding:90px 0 60px} .hero h1{font-size:32px} .hero-sub{font-size:16px} .hero-actions{flex-direction:column} .btn-primary{width:100%;justify-content:center;white-space:nowrap;font-size:15px;padding:16px 24px} .btn-ghost{width:100%;justify-content:center}

  /* === MOBILE DASHBOARD — FULL REDESIGN === */

  /* Topbar — teal accent with scanning line */
  .dash-topbar{
    padding:10px 14px;
    border-bottom:1px solid rgba(20,184,166,.15);
    position:relative;overflow:hidden;
  }
  .dash-topbar::after{
    content:'';position:absolute;bottom:0;left:-30%;width:30%;height:1px;
    background:linear-gradient(90deg,transparent,#5eead4,transparent);
    animation:topbarScan 3s ease-in-out infinite;
  }
  @keyframes topbarScan{0%{left:-30%}100%{left:100%}}
  .dash-logo{font-size:13px}
  .dash-logo span{color:#14b8a6 !important}
  .dash-badge{font-size:9px;padding:2px 6px;border-color:rgba(20,184,166,.2);color:#5eead4;background:rgba(20,184,166,.06)}
  .dash-status-dot{width:7px;height:7px;box-shadow:0 0 10px rgba(34,197,94,.7)}

  /* Stats — ALL 3 VISIBLE in compact row */
  .dash-stats{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important;
    margin-bottom:10px;
  }
  .dash-stat-dots{display:none !important}
  .dash-stat{
    display:block !important;
    padding:10px !important;
    border-radius:10px !important;
    border-color:rgba(20,184,166,.12) !important;
    background:rgba(20,184,166,.04) !important;
    text-align:center !important;
    animation:statFadeIn .6s cubic-bezier(.22,1,.36,1) both !important;
    position:relative;overflow:hidden;
  }
  .dash-stat:nth-child(1){animation-delay:.1s !important}
  .dash-stat:nth-child(2){animation-delay:.2s !important}
  .dash-stat:nth-child(3){animation-delay:.3s !important}
  /* Shimmer sweep on each stat */
  .dash-stat::after{
    content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(20,184,166,.08),transparent);
    animation:statSweep 4s ease-in-out infinite;
    pointer-events:none;
  }
  .dash-stat:nth-child(2)::after{animation-delay:1.3s}
  .dash-stat:nth-child(3)::after{animation-delay:2.6s}
  @keyframes statFadeIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes statSweep{0%{left:-50%}100%{left:150%}}
  .dash-stat-label{margin-bottom:2px !important;font-size:8px !important;color:#5eead4 !important;white-space:nowrap}
  .dash-stat-value{font-size:16px !important;color:#fff !important;line-height:1.2 !important}
  .dash-stat-change{margin-top:2px !important;font-size:9px !important;padding:1px 4px !important}

  /* Body */
  .dash-body{padding:12px}

  /* Chart panel — teal border + sweep */
  .dash-chart-wrap{
    padding:10px 12px 8px;margin-bottom:8px;
    border-color:rgba(20,184,166,.1);
    position:relative;overflow:hidden;
  }
  .dash-chart-wrap::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(20,184,166,.05),transparent);
    animation:chartSweep 5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes chartSweep{0%{left:-40%}100%{left:120%}}
  .dash-chart-title{color:rgba(255,255,255,.9);font-size:11px}
  .dash-chart-svg-wrap{height:50px}
  .dash-chart-svg{height:50px}
  .dash-chart-live-value{font-size:16px}
  .dash-chart-period span{font-size:9px;padding:2px 6px}
  .dash-chart-period span.active{background:rgba(20,184,166,.2);color:#5eead4}

  /* Product bars — vivid teal with glow + stagger */
  .dash-product-fill{
    background:linear-gradient(90deg,#0f766e,#14B8A6 30%,#5eead4 55%,#14B8A6 80%,#0f766e);
    background-size:200% 100%;
    animation:bar-shimmer 1.8s ease-in-out infinite;
    box-shadow:0 0 6px rgba(20,184,166,.35);
  }
  .dash-product-bar{height:6px;border-radius:3px;background:rgba(20,184,166,.06)}
  .dash-product-sales{color:#5eead4;text-shadow:0 0 8px rgba(94,234,212,.3);font-size:10px}
  .dash-product-name{font-size:9px;width:95px}
  .dash-products-list{gap:8px;padding:6px 0 2px}
  .dash-product-row{animation:productSlideIn .5s cubic-bezier(.22,1,.36,1) both}
  .dash-product-row:nth-child(1){animation-delay:.1s}
  .dash-product-row:nth-child(2){animation-delay:.25s}
  .dash-product-row:nth-child(3){animation-delay:.4s}
  @keyframes productSlideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}

  /* Orders — FULLY VISIBLE, not cut off */
  .dash-orders{max-height:none !important;gap:6px;overflow:visible}
  .dash-order{
    padding:8px 10px;
    border-color:rgba(20,184,166,.08);
    animation:orderFadeIn .5s cubic-bezier(.22,1,.36,1) both;
  }
  .dash-order:nth-child(1){animation-delay:.5s}
  .dash-order:nth-child(2){animation-delay:.7s}
  @keyframes orderFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .dash-order-icon{
    width:24px;height:24px;font-size:12px;border-radius:7px;
    border:1px solid rgba(20,184,166,.15);
  }
  .dash-order-name{font-size:10px}
  .dash-order-amount{
    font-size:11px;color:#5eead4;
    text-shadow:0 0 10px rgba(94,234,212,.4);
    animation:amountPulse 2s ease-in-out infinite alternate;
  }
  @keyframes amountPulse{0%{text-shadow:0 0 4px rgba(94,234,212,.2)}100%{text-shadow:0 0 14px rgba(94,234,212,.5)}}
  .dash-order-status{font-size:7px;padding:2px 5px}

  /* Dashboard frame — pulsing teal glow */
  .dash-border-glow{
    border-color:rgba(20,184,166,.15);
    animation:dashLevitate 8s cubic-bezier(.45,.05,.55,.95) infinite,dashBorderGlow 3s ease-in-out infinite alternate;
  }
  @keyframes dashBorderGlow{
    0%{box-shadow:0 0 0 1px rgba(20,184,166,.04),0 0 16px rgba(20,184,166,.05),0 24px 70px rgba(0,0,0,.45)}
    100%{box-shadow:0 0 0 1px rgba(20,184,166,.08),0 0 30px rgba(20,184,166,.1),0 0 60px rgba(20,184,166,.04),0 24px 70px rgba(0,0,0,.45)}
  }
  .dash-border-glow::before{
    background:linear-gradient(90deg,transparent,rgba(20,184,166,.12) 30%,rgba(20,184,166,.22) 50%,rgba(20,184,166,.12) 70%,transparent);
  }
  .products-grid{grid-template-columns:1fr;max-width:400px;margin:40px auto 0}
}

/* ===== FREE BASIC PAGE STYLES (merged from old main.css) ===== */
@keyframes shimmer-move{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(20px,-15px) scale(1.04)}66%{transform:translate(-15px,20px) scale(.97)}}
@keyframes dash-levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes card-shine{0%{left:-120%}100%{left:200%}}
.rd1{transition-delay:.1s}
.rd2{transition-delay:.2s}
.rd3{transition-delay:.3s}
.rd4{transition-delay:.4s}
.rd5{transition-delay:.5s}
/* liquid-btn / nav-mobile-toggle */
/* BUTTONS */
.section-title em{font-style:italic;color:var(--teal-bright)}
.hero-grid-pat{position:absolute;inset:0;pointer-events:none;opacity:.018;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 20%,transparent 70%)}
.hero-photo-wrap{position:relative;width:420px;max-width:100%}
.hero-photo{width:100%;border-radius:24px;display:block;box-shadow:0 24px 64px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.3)}
.hero-photo-glow{position:absolute;inset:-20px;border-radius:32px;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(20,184,166,.12) 0%,transparent 70%);pointer-events:none;filter:blur(30px);z-index:-1}
.hf1{top:16px;right:-16px;animation:float 5s ease-in-out infinite}
.hf2{bottom:48px;left:-24px;animation:float 6s ease-in-out infinite 1.5s}
.float-icon svg{width:16px;height:16px}
.float-sub{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
/* Product fan */
.product-fan{position:relative;width:100%;height:460px}
.fan-card{position:absolute;width:190px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.3);transition:transform .4s var(--ease-smooth)}
.fan-card-thumb{height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.fan-card-thumb svg{width:44px;height:44px;opacity:.75}
.fan-card-body{padding:12px 14px 14px}
.fan-card-cat{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.fan-card-name{font-size:12px;font-weight:700;color:#111;line-height:1.35;margin-bottom:8px}
.fan-card-foot{display:flex;align-items:center;justify-content:space-between}
.fan-card-price{font-size:14px;font-weight:700;color:#0f766e}
.fan-card-old{font-size:11px;color:#9ca3af;text-decoration:line-through}
.fan-card-btn{font-size:9px;font-weight:700;color:#fff;background:#0f766e;padding:4px 10px;border-radius:50px}
.fan-c1{top:50px;left:0;transform:rotate(-11deg);z-index:1;animation:float 7s ease-in-out infinite}
.fan-c2{top:20px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:2;animation:float 8.5s ease-in-out infinite .6s}
.fan-c3{top:50px;right:0;transform:rotate(9deg);z-index:1;animation:float 7.5s ease-in-out infinite 1.2s}
.fan-c4{bottom:20px;left:50%;transform:translateX(-50%);z-index:3;animation:float 9s ease-in-out infinite 1.8s}
.fan-glow{position:absolute;bottom:0;left:10%;right:10%;height:50px;background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(20,184,166,.15),transparent 70%);filter:blur(20px);pointer-events:none}
/* ===== TRUST STRIP ===== */
.trust-strip{background:#F8FFFE;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-item{display:flex;align-items:center;gap:18px;padding:28px 36px;border-right:1px solid rgba(0,0,0,.06);transition:background .3s}
.trust-item:last-child{border-right:none}
.trust-item:hover{background:rgba(20,184,166,.03)}
.trust-icon{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.2)}
.trust-icon svg{width:24px;height:24px;stroke:var(--teal-bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-label{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:3px}
.trust-desc{font-size:13px;color:rgba(15,23,42,.5)}
.pillar+.pillar{border-top:1px solid rgba(255,255,255,.05)}
.pillar::before{content:'';position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Alternating dark section tones */
.p-sell{background:#F8FFFE}
/* Store section on light bg */
.p-store-light{background:#F0F7F5}
.p-store-light .pillar-num{color:rgba(0,0,0,.06)}
.p-store-light h2{color:#0f172a}
.p-store-light .section-label{color:var(--teal-bright)}
.p-store-light .section-sub{color:rgba(15,23,42,.5)}
.p-store-light .pillar-features li{color:rgba(15,23,42,.6)}
.p-store-light .pillar-features svg{stroke:var(--teal-bright)}
.p-store-light .pillar-stat-val{color:#0f172a}
.p-store-light .pillar-stat-label{color:rgba(15,23,42,.4)}
.p-store-light::before{background:radial-gradient(ellipse 50% 60% at 80% 50%,rgba(20,184,166,.08) 0%,transparent 60%)}
/* Sell section on dark bg */
.p-sell-dark{background:#1A1A1A}
.p-sell-dark .pillar-num{color:rgba(255,255,255,.06)}
.p-sell-dark h2{color:#fff}
.p-sell-dark .section-sub{color:rgba(255,255,255,.5)}
.p-sell-dark .pillar-features li{color:rgba(255,255,255,.55)}
.p-sell-dark .pillar-stat-val{color:#fff}
.p-sell-dark .pillar-stat-label{color:rgba(255,255,255,.35)}
.p-sell-dark::before{background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(20,184,166,.05) 0%,transparent 60%)}
.p-kit{background:#162020;border-top:1px solid rgba(255,255,255,.04)}
.p-kit .pillar-num{color:rgba(255,255,255,.06)}
.p-kit h2{color:#fff}
.p-kit .section-sub{color:rgba(255,255,255,.5)}
.p-kit .pillar-features li{color:rgba(255,255,255,.55)}
.p-kit .pillar-stat-val{color:#fff}
.p-kit .pillar-stat-label{color:rgba(255,255,255,.35)}
.p-store{background:#1A1A1A}
.p-store .pillar-num{color:rgba(255,255,255,.06)}
.p-store h2{color:#fff}
.p-store .section-sub{color:rgba(255,255,255,.5)}
.p-store .pillar-features li{color:rgba(255,255,255,.55)}
.p-store .pillar-stat-val{color:#fff}
.p-store .pillar-stat-label{color:rgba(255,255,255,.35)}
/* Gradient overlays */
.p-sell::before{background:radial-gradient(ellipse 50% 60% at 80% 50%,rgba(20,184,166,.05) 0%,transparent 60%)}
.p-kit::before{background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(139,92,246,.04) 0%,transparent 60%)}
.p-how::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 45% at 15% 25%,rgba(20,184,166,.07) 0%,transparent 70%),radial-gradient(ellipse 35% 40% at 85% 75%,rgba(139,92,246,.05) 0%,transparent 70%)}
.p-store::before{background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(59,130,246,.04) 0%,transparent 60%)}
.p-included::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 45% at 85% 25%,rgba(20,184,166,.06) 0%,transparent 70%)}
/* Light sections */
.p-how{background:#F4FBFA}
.p-how+.pillar,.p-included+.pillar{border-top:1px solid rgba(0,0,0,.06)}
.p-included{background:#F8FFFE}
/* Diamond mesh texture on light sections */
.p-how::after,.p-included::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(30deg,rgba(15,118,110,.05) 1px,transparent 1px),linear-gradient(150deg,rgba(15,118,110,.05) 1px,transparent 1px);background-size:40px 24px}
/* Text overrides for light sections */
.p-how .section-title,.p-included .section-title{color:#111114}
.p-how .section-sub,.p-included .section-sub{color:rgba(17,17,20,.55)}
.p-how .section-label,.p-included .section-label{color:var(--teal);background:rgba(20,184,166,.12)}
.p-how .pillar-num,.p-included .pillar-num{color:rgba(0,0,0,.05);-webkit-text-stroke:1px rgba(0,0,0,.07)}
.p-how .pillar-features li,.p-included .pillar-features li{color:rgba(17,17,20,.6)}
.p-how .pillar-features li svg,.p-included .pillar-features li svg{color:var(--teal)}
.p-how .pillar-stat-val,.p-included .pillar-stat-val{color:#111114}
.p-how .pillar-stat-label,.p-included .pillar-stat-label{color:rgba(17,17,20,.4)}
/* Glass panel adapts on light bg */
.p-how .glass-panel{background:rgba(255,255,255,.85);border-color:rgba(15,118,110,.12);box-shadow:0 12px 48px rgba(15,118,110,.1),0 4px 16px rgba(0,0,0,.06),0 1px 0 rgba(255,255,255,.9) inset}
.p-how .how-step-row{border-bottom-color:rgba(17,17,20,.07)}
.p-how .how-step-title{color:#111114}
.p-how .how-step-desc{color:rgba(17,17,20,.5)}
/* Inc tiles adapt on light bg */
.p-included .inc-glass-grid{gap:20px}
.p-included .inc-glass-tile{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.p-included .inc-glass-tile::before{
  display:none;
}
.p-included .inc-glass-tile:nth-child(1){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:nth-child(2){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:nth-child(3){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:nth-child(4){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:nth-child(5){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:nth-child(6){--tile-accent:linear-gradient(180deg,#14b8a6,#0f766e)}
.p-included .inc-glass-tile:hover{
  transform:translateY(-5px);
  border-color:rgba(20,184,166,.3);
  box-shadow:0 18px 38px rgba(15,23,42,.1);
}
.p-included .inc-tile-icon{
  box-shadow:none;
  transition:transform .25s var(--ease-smooth),filter .25s var(--ease-smooth);
}
.p-included .inc-glass-tile:hover .inc-tile-icon{
  transform:scale(1.05);
  filter:saturate(1.05);
}
.p-included .inc-tile-title{color:#0f172a;font-size:16px;letter-spacing:-.01em;margin-bottom:8px}
.p-included .inc-tile-desc{color:rgba(15,23,42,.64);line-height:1.6}
.p-how .section-title em,.p-included .section-title em,.social-proof .section-title em{color:var(--teal-deep)}
.pillar-reverse .pillar-inner>*{direction:ltr}
.pillar-visual::before{content:'';position:absolute;inset:-60px;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(20,184,166,.06) 0%,transparent 65%);pointer-events:none;filter:blur(20px);animation:glowPulse 6s ease infinite}
@keyframes psAmbient{0%,100%{transform:translate(0,0);opacity:.6}50%{transform:translate(var(--fx),var(--fy));opacity:1}100%{transform:translate(0,0);opacity:.6}}
@keyframes heroMesh{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ps-cat-icon svg:first-child{width:22px;height:22px;position:relative;z-index:1}
.ps-card.ps-prev .ps-card-inner,.ps-card.ps-next .ps-card-inner{border-color:rgba(255,255,255,.06);transform:scale(.92)}
.ps-card-hero{width:45%;position:relative;overflow:hidden;display:flex;align-items:stretch;justify-content:center;background:#0a0a0c}
.ps-card-hero img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.ps-card.ps-active .ps-card-hero img{transform:scale(1.05)}
.ps-card-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.3) 0%,transparent 60%);z-index:1}
.ps-card-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.5;margin-bottom:16px}
.ps-card-price-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ps-card-stars{font-size:13px;color:#f59e0b;letter-spacing:1px;margin-top:12px}
.ps-card-stars span{color:rgba(255,255,255,.5);font-size:12px;margin-left:4px}
@media(max-width:640px){
  .ps-slider{height:380px}
  .ps-card{height:280px}
  .ps-card.ps-active{top:50px}
  .ps-card.ps-prev{top:-180px}
  .ps-card.ps-next{top:280px}
  .ps-card-body{padding:20px 16px}
  .ps-card-name{font-size:17px}
  .ps-card-price{font-size:22px}
  .ps-earn-val{font-size:15px}
  .ps-cat-icon{width:40px;height:40px;border-radius:10px}
  .ps-cat-icon svg:first-child{width:18px;height:18px}
}
/* Generic glass card used in pillar visuals */
.glass-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.12);border-radius:24px;padding:32px;overflow:hidden;backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:0 32px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);animation:dash-levitate 8s ease-in-out infinite;position:relative;width:100%}
.glass-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 40%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.12) 60%,transparent);pointer-events:none}
.glass-panel::after{content:'';position:absolute;top:-50%;left:-60%;width:45%;height:200%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.03) 48%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.03) 52%,transparent 62%);pointer-events:none;animation:card-shine 9s ease-in-out infinite}
/* Pill check row */
.check-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.04);border-radius:10px}
.check-ico{width:20px;height:20px;border-radius:50%;background:rgba(34,197,94,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.check-ico svg{width:10px;height:10px;stroke:#22C55E;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.check-row-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
/* Amazon Kit Visual */
.ak-visual{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(20,184,166,.08),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
}
.ak-header{display:flex;align-items:center;gap:14px;padding:20px 24px;background:linear-gradient(135deg,rgba(255,153,0,.12) 0%,rgba(255,153,0,.03) 100%);border-bottom:1px solid rgba(255,255,255,.06)}
.ak-logo{flex-shrink:0}
.ak-logo svg{filter:drop-shadow(0 2px 8px rgba(255,153,0,.2))}
.ak-header-text{flex:1;min-width:0}
.ak-title{font-size:16px;font-weight:700;color:#fff}
.ak-subtitle{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}
.ak-value-badge{background:linear-gradient(135deg,#FF9900,#e68a00);color:#111;font-family:var(--font-display);font-size:18px;font-weight:800;padding:8px 16px;border-radius:10px;white-space:nowrap;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ak-value-badge span{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-top:2px}
.ak-hero-img{width:100%;height:280px;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.ak-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.ak-items{padding:12px 16px;display:flex;flex-direction:column;gap:4px}
.ak-item{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;transition:background .2s}
.ak-item:hover{background:rgba(255,255,255,.05)}
.ak-item-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ak-item-icon svg{width:20px;height:20px}
.ak-ig1{background:linear-gradient(135deg,#FF9900,#cc7a00)}
.ak-ig2{background:linear-gradient(135deg,#FF9900,#cc7a00)}
.ak-ig3{background:linear-gradient(135deg,#FF9900,#cc7a00)}
.ak-ig4{background:linear-gradient(135deg,#FF9900,#cc7a00)}
.ak-ig5{background:linear-gradient(135deg,#FF9900,#cc7a00)}
.ak-item-name{font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.ak-item-desc{font-size:12px;color:rgba(255,255,255,.4);margin-top:2px}
.ak-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.06)}
.ak-footer-free{font-size:12px;font-weight:600;color:rgba(255,255,255,.4)}
.ak-footer-cta{font-size:13px;font-weight:700;color:#FF9900;display:flex;align-items:center;gap:6px;transition:gap .2s}
.ak-footer-cta:hover{gap:10px}
/* ===== PRODUCTS GRID (inside pillar visual) ===== */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cat-tile{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px;transition:all .3s var(--ease-smooth)}
.cat-tile:hover{background:rgba(20,184,166,.06);border-color:rgba(20,184,166,.25)}
.cat-tile-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.cat-tile-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cat-tile-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.cat-tile-count{font-size:11px;color:rgba(255,255,255,.35);font-weight:600}
/* ===== HOW STEPS (horizontal inside glass panel) ===== */
.how-steps-row{display:flex;flex-direction:column;gap:0}
.how-step-row{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.how-step-row:last-child{border-bottom:none}
.how-step-num{width:36px;height:36px;border-radius:50%;background:var(--teal-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 0 0 6px rgba(15,118,110,.12)}
.how-step-body{}
.how-step-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px}
.how-step-desc{font-size:12px;color:rgba(255,255,255,.4);line-height:1.55}
.how-step-pill{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 10px;background:rgba(20,184,166,.1);border-radius:50px;font-size:10px;font-weight:700;color:var(--teal-bright)}
.pv-fc-4{transform:rotate(0deg);animation:pvFloat4 5.5s ease-in-out infinite 2.4s}
@keyframes pvFloat1{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-10px)}}
@keyframes pvFloat2{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-8px)}}
@keyframes pvFloat3{0%,100%{transform:rotate(1deg) translateY(0) translateX(0)}50%{transform:rotate(1deg) translateY(-12px) translateX(4px)}}
@keyframes pvFloat4{0%,100%{transform:rotate(0deg) translateY(0)}50%{transform:rotate(0deg) translateY(-6px)}}
.pv-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:22px;background:#0a0a0f;border-radius:0 0 16px 16px;z-index:10;border:1px solid rgba(255,255,255,.08);border-top:none}
.pv-store-nav-bar{display:flex;align-items:center;justify-content:space-between;padding:28px 14px 8px;background:rgba(0,0,0,.3)}
.pv-store-hero{position:relative;height:160px;overflow:hidden}
.pv-store-items{display:flex;flex-direction:column;gap:8px}
.pv-store-item{display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:10px}
.pv-store-item img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0}
.pv-store-item-info{flex:1}
/* ===== INCLUDED GRID (glass tiles) ===== */
.inc-glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.inc-glass-tile{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;transition:all .35s var(--ease-smooth)}
.inc-glass-tile:hover{background:rgba(20,184,166,.06);border-color:rgba(20,184,166,.25);transform:translateY(-4px)}
.inc-tile-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.inc-tile-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inc-tile-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:6px}
.inc-tile-desc{font-size:13px;color:rgba(255,255,255,.4);line-height:1.55}
/* ===== CTA ===== */
.cta-section{padding:100px 0;background:#111114;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(20,184,166,.06) 0%,transparent 60%)}
.cta-box{position:relative;text-align:center;max-width:680px;margin:0 auto;padding:80px 60px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:32px;overflow:hidden;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 40px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(20,184,166,.5) 40%,rgba(20,184,166,.7) 50%,rgba(20,184,166,.5) 60%,transparent);pointer-events:none}
.cta-shimmer{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0%,transparent 38%,rgba(20,184,166,.03) 50%,transparent 62%,transparent 100%);background-size:200% 100%;animation:shimmer-move 5s ease-in-out infinite}
.cta-box .section-title{margin-bottom:14px;color:#fff}
.cta-box .section-sub{margin:0 auto 36px;color:rgba(255,255,255,.5)}
.cta-actions{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-note{font-size:13px;color:rgba(255,255,255,.25);margin-top:20px}
/* ===== FAQ ===== */
.faq-section{padding:100px 0;background:#F8FFFE;border-top:1px solid rgba(0,0,0,.06)}
.faq-header{text-align:center;margin-bottom:64px}
.faq-header .section-title{color:#111114}
.faq-header .section-sub{color:rgba(0,0,0,.45)}
.faq-wrap{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px 48px}
.faq-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-bright);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.faq-item{border-bottom:1px solid rgba(0,0,0,.08)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;font-size:14px;font-weight:600;color:rgba(0,0,0,.75);cursor:pointer;transition:color .2s;user-select:none}
.faq-q:hover{color:#111114}
.faq-chevron{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s;background:rgba(0,0,0,.03)}
.faq-chevron svg{width:10px;height:10px;stroke:rgba(0,0,0,.4);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .3s}
.faq-item.open .faq-chevron{background:rgba(20,184,166,.15);border-color:rgba(20,184,166,.4)}
.faq-item.open .faq-chevron svg{stroke:var(--teal-bright);transform:rotate(180deg)}
.faq-a{font-size:13px;color:rgba(0,0,0,.45);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .4s var(--ease-smooth),padding .3s}
.faq-item.open .faq-a{max-height:300px;padding-bottom:16px}
@media(max-width:960px){
  .hero-content{grid-template-columns:1fr;gap:48px}
  .pillar-inner{grid-template-columns:1fr;gap:48px}
  .pillar-reverse .pillar-inner{direction:ltr}
  .product-fan{height:340px}
  .inc-glass-grid{grid-template-columns:repeat(2,1fr)}
}
.social-proof .section-title{color:#111114}
.social-proof .section-label{color:var(--teal);background:rgba(20,184,166,.12)}
@media(max-width:768px){
  .hero-note{font-size:11px}
  .lp-cta-note{font-size:11px}
  .footer-cta-note{font-size:11px}
  .cta-note{font-size:11px}
  .hero{padding:90px 0 60px}
  .pillar{padding:60px 0}
  .social-proof{padding:60px 0}
  .cta-section{padding:60px 0}
  .trust-section{padding:60px 0}
  .faq-section{padding:60px 0}
  .trust-grid{grid-template-columns:1fr}
  .trust-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .trust-item:last-child{border-bottom:none}
  .faq-wrap{grid-template-columns:1fr;gap:0}
  .cta-box{padding:48px 28px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .sp-slider{min-height:640px}
  .sp-slide{grid-template-columns:1fr;gap:0}
  .sp-photo{height:280px;border-radius:16px}
  .sp-glass-wrap{margin-left:16px;margin-right:16px;margin-top:-42px;position:relative;z-index:3}
  .sp-glass{border-radius:16px;padding:20px 20px 18px}
  .sp-earn-badge{top:-14px;right:16px;font-size:13px;padding:6px 14px}
  .sp-quote{font-size:14px;line-height:1.7}
  .trust-creds{grid-template-columns:1fr}
  .trust-guarantee{flex-direction:column;text-align:center;padding:24px}
  .trust-payments-row{gap:12px}
  .trust-pay-icon{padding:8px 14px;font-size:12px}
}
@media(max-width:640px){
  .hero-actions{flex-direction:column;align-items:flex-start}
  .cta-actions{flex-direction:column;align-items:center}
  .inc-glass-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
}/* Free Basic page — page-specific overrides */

/* Photo wrap — full width, no gaps so background orb glow doesn't bleed through */
.hero-photo-wrap {
  width: 100%;
}

/* Photo — no shadow, no crop */
.hero-photo {
  border-radius: 20px;
  box-shadow: none;
}

/* Disable floor reflection (designed for dashboard on homepage) */
.hero-visual::after {
  display: none;
}

/* Remove glow — bleeds around photo as unwanted shadow */
.hero-photo-glow {
  display: none;
}

/* Floating badges — bigger font/padding, dark glass */
.hero-float {
  font-size: 14px;
  padding: 14px 18px;
  background: rgba(8, 12, 20, 0.6) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-top-color: rgba(255,255,255,.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 0 rgba(255,255,255,.12) inset,
    0 16px 48px rgba(0,0,0,.4),
    0 4px 12px rgba(0,0,0,.25) !important;
}

/* Store section — 2 float cards left, 2 right, evenly spread, uniform width */
.p-store .pv-float-card { width: 140px; box-sizing: border-box; }
.p-store .pv-fc-1, .p-store-light .pv-fc-1 { top: 18%;    right: -55px; left: auto;  bottom: auto; }
.p-store .pv-fc-2, .p-store-light .pv-fc-2 { bottom: 18%; right: -55px; left: auto;  top: auto;    }
.p-store .pv-fc-3, .p-store-light .pv-fc-3 { top: 18%;    left:  -55px; right: auto; bottom: auto; }
.p-store .pv-fc-4, .p-store-light .pv-fc-4 { bottom: 18%; left:  -55px; right: auto; top: auto;    }

/* Hide ring animation on slider icons */
.ps-ring {
  display: none;
}

/* Fix slider gradient overlays to match section background color */
.p-sell .ps-slider::before {
  background: linear-gradient(180deg, #F8FFFE, transparent);
}
.p-sell .ps-slider::after {
  background: linear-gradient(0deg, #F8FFFE, transparent);
}

/* Category icons on light bg */
.p-sell .ps-cat-icon {
  background: rgba(15,118,110,.07);
  border-color: rgba(15,118,110,.18);
}
.p-sell .ps-cat-icon:hover {
  background: rgba(15,118,110,.12);
  border-color: rgba(15,118,110,.28);
}
.p-sell .ps-cat-icon.ps-icon-active {
  background: rgba(20,184,166,.15);
  border-color: rgba(20,184,166,.35);
  box-shadow: 0 0 16px rgba(20,184,166,.15);
}
.p-sell .ps-cat-icon svg { stroke: #0f766e; }
.p-sell .ps-cat-icon.ps-icon-active svg { stroke: #14B8A6; }

/* Light card style for the light p-sell section */
.p-sell .ps-card-inner {
  background: #fff;
  border-color: rgba(15,118,110,.12);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.p-sell .ps-card.ps-active .ps-card-inner {
  background: #fff;
  border-color: rgba(20,184,166,.2);
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.p-sell .ps-card-body {
  background: #fff;
}
.p-sell .ps-card.ps-prev,
.p-sell .ps-card.ps-next {
  opacity: 0;
  pointer-events: none;
}
/* Dark text for light card */
.p-sell .ps-card-cat { color: rgba(15,118,110,.7); }
.p-sell .ps-card-name { color: #0f172a; }
.p-sell .ps-card-desc { color: rgba(15,23,42,.55); }
.p-sell .ps-card-price { color: #0f172a; }
.p-sell .ps-card-stars { color: #f59e0b; }
.p-sell .ps-card-stars span { color: rgba(15,23,42,.45); }

/* Badge positions — relative to photo-wrap, hanging off the edges */
.hf1 {
  top: 56px;
  right: -20px;
  left: auto;
}

.hf2 {
  bottom: 40px;
  left: -20px;
  right: auto;
}
/* ========================= /FOOTER STYLES ======================== */