@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
/* Note: font is also loaded via async <link> in landing/index.html for non-blocking render */

/* ── TOKENS DESIGN */
:root {
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Color palette — HSL tokens (dark theme default) */
  --background:         220 16% 6%;
  --background-subtle:  220 16% 8%;
  --foreground:         210 20% 95%;
  --card:               220 16% 9%;
  --card-foreground:    210 20% 95%;
  --primary:            239 84% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary:          220 16% 14%;
  --secondary-foreground: 210 20% 95%;
  --muted:              220 16% 14%;
  --muted-foreground:   215 12% 58%;
  --accent:             239 84% 67%;
  --accent-foreground:  0 0% 100%;
  --success:            152 60% 42%;
  --warning:            38 92% 50%;
  --destructive:        0 72% 51%;
  --border:             220 16% 18%;
  --input:              220 16% 18%;
  --ring:               239 84% 67%;
  --radius:             0.75rem;
  --radius-lg:          1rem;
  --radius-xl:          1.25rem;

  /* Shadows */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 24px hsl(var(--primary) / 0.3), 0 0 8px hsl(var(--primary) / 0.2);
  --shadow-glow-green: 0 0 24px hsl(var(--success) / 0.3);

  /* Easing */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: hsl(var(--foreground));
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 860px; }
.section    { padding: 4rem 0; }
.section-lg { padding: 6rem 0; }

/* ── NOISE TEXTURE OVERLAY ───────────────────────────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* ── NAVBAR ─────────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 4rem;
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid hsl(var(--border) / 0.6);
  transition: background var(--transition-slow), box-shadow var(--transition-slow);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }
.brand {
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em;
  background: linear-gradient(135deg, hsl(var(--foreground)) 40%, hsl(var(--primary)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-links { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.nav-links a {
  font-size: 0.8125rem; font-weight: 500;
  color: hsl(var(--muted-foreground));
  border: 1px solid transparent; border-radius: 999px;
  padding: 0.375rem 0.875rem;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.nav-links a:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}
.nav-links a.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary) / 0.25);
}

/* ── HERO  ── */
.hero {
  position: relative; overflow: hidden;
  padding: 6rem 0 5rem; text-align: center;
}
/* Animated background blobs */
.hero-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); pointer-events: none;
  will-change: transform;
}
.hero-blob-1 {
  width: 700px; height: 700px; top: -280px; left: -150px;
  background: radial-gradient(circle, hsl(239 84% 67% / 0.18) 0%, transparent 70%);
  animation: blob-drift-1 18s ease-in-out infinite;
}
.hero-blob-2 {
  width: 600px; height: 600px; top: -200px; right: -120px;
  background: radial-gradient(circle, hsl(152 60% 42% / 0.14) 0%, transparent 70%);
  animation: blob-drift-2 22s ease-in-out infinite;
}
.hero-blob-3 {
  width: 400px; height: 400px; bottom: -100px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, hsl(239 84% 67% / 0.08) 0%, transparent 70%);
  animation: blob-drift-3 16s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40px, 30px) scale(1.05); }
  66%     { transform: translate(-20px, 50px) scale(0.97); }
}
@keyframes blob-drift-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-30px, 20px) scale(1.03); }
  66%     { transform: translate(20px, -30px) scale(1.07); }
}
@keyframes blob-drift-3 {
  0%,100% { transform: translateX(-50%) scale(1); }
  50%     { transform: translateX(-50%) scale(1.1); }
}

/* Grid lines overlay */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--border) / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
}

.hero-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: 999px; padding: 0.375rem 0.875rem;
  margin-bottom: 1.5rem;
  animation: fade-up 0.5s var(--ease) both;
}
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  max-width: 820px; margin: 0 auto 1.25rem;
  animation: fade-up 0.5s 0.1s var(--ease) both;
}
.hero-sub {
  font-size: 1.125rem; color: hsl(var(--muted-foreground));
  max-width: 580px; margin: 0 auto 2.5rem;
  animation: fade-up 0.5s 0.2s var(--ease) both;
}
.hero-actions {
  display: flex; gap: 0.875rem; justify-content: center; flex-wrap: wrap;
  animation: fade-up 0.5s 0.3s var(--ease) both;
}

/* ── GRADIENT TEXT */
.gradient-text {
  background: linear-gradient(135deg,
    hsl(var(--primary)) 0%,
    hsl(239 84% 80%) 45%,
    hsl(var(--success)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── BUTTONS  ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6875rem 1.375rem;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600;
  border-radius: var(--radius); border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
  position: relative; overflow: hidden;
}
.btn:active { transform: scale(0.97); }

/* Shimmer sweep on .btn-primary */
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
}
.btn-primary:hover {
  background: hsl(239 84% 72%);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}
.btn-primary:hover::after { left: 160%; }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
.btn-secondary:hover {
  background: hsl(var(--muted));
  border-color: hsl(var(--primary) / 0.3);
  transform: translateY(-1px);
}
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)); }

/* Outline variant */
.btn-outline {
  background: transparent;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.4);
}
.btn-outline:hover {
  background: hsl(var(--primary) / 0.08);
  border-color: hsl(var(--primary) / 0.6);
  box-shadow: var(--shadow-glow);
}

/* Size variants */
.btn-sm  { padding: 0.4375rem 1rem;   font-size: 0.8125rem; }
.btn-lg  { padding: 0.875rem 1.75rem; font-size: 1.0625rem; }
.btn-xl  { padding: 1rem 2rem;        font-size: 1.125rem; }

/* Amazon */
.btn-amazon { background: #FF9900; color: #111; font-weight: 700; }
.btn-amazon:hover { background: #e68a00; box-shadow: 0 0 24px rgba(255,153,0,0.4); transform: translateY(-1px); }

/* ── BADGE / PILL ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.625rem; font-size: 0.7rem; font-weight: 600;
  border-radius: 999px; border: 1px solid hsl(var(--primary) / 0.25);
  background: hsl(var(--primary) / 0.1); color: hsl(var(--primary));
  letter-spacing: 0.04em; text-transform: uppercase;
}
.badge.success { background: hsl(var(--success)/0.1); color: hsl(var(--success)); border-color: hsl(var(--success)/0.25); }
.badge.warning { background: hsl(var(--warning)/0.1); color: hsl(var(--warning)); border-color: hsl(var(--warning)/0.25); }
.badge.new {
  background: linear-gradient(135deg, hsl(var(--primary)/0.15), hsl(var(--success)/0.1));
  color: hsl(var(--primary)); border-color: hsl(var(--primary)/0.3);
  animation: pulse-badge 2s ease infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow: 0 0 0 0 hsl(var(--primary)/0); }
  50%      { box-shadow: 0 0 8px 2px hsl(var(--primary)/0.2); }
}

/* ── CARDS ──────────────────────────────────────────────────────────────────── */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition:
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
  position: relative; overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, hsl(var(--primary)/0.04) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--transition-base);
  pointer-events: none;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / 0.3);
}
.card:hover::before { opacity: 1; }

/* Glass card */
.card.glass {
  background: hsl(var(--card) / 0.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Feature icon in cards */
.feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary)); font-size: 1.375rem;
  flex-shrink: 0; margin-bottom: 0.875rem;
  transition: background var(--transition-base), transform var(--transition-spring);
}
.card:hover .feature-icon { background: hsl(var(--primary) / 0.2); transform: scale(1.1) rotate(-3deg); }

/* Card grids */
.card-grid   { display: grid; gap: 1rem; }
.card-grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ── COUNTER STAT */
.stat-block { text-align: center; }
.stat-value {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1;
  background: linear-gradient(135deg, hsl(var(--foreground)) 30%, hsl(var(--primary)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }

/* ── INPUTS FORM */ / ───
.input {
  width: 100%; padding: 0.6875rem 0.9375rem;
  font-family: var(--font-body); font-size: 0.9375rem;
  color: hsl(var(--foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18);
}
label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); display: block; margin-bottom: 0.375rem; }
.form-group { margin-bottom: 1rem; }
select.input { cursor: pointer; }

/* Result box */
.result-box {
  background: hsl(var(--primary) / 0.08);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.25rem; text-align: center;
}
.result-value { font-size: 2.25rem; font-weight: 800; color: hsl(var(--primary)); line-height: 1; }
.result-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.375rem; }

/* ── HEADERS SECTION */
.section-header { margin-bottom: 2.5rem; }
.section-header h2 { font-size: clamp(1.625rem, 3vw, 2.5rem); margin-bottom: 0.625rem; }
.section-header p { color: hsl(var(--muted-foreground)); max-width: 620px; font-size: 1.0625rem; }

/* ── DIVIDER ─────────────────────────────────────────────────────────────────── */
hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 2.5rem 0; }

/* ── TRUST / SOCIAL PROOF STRIP */
.social-proof {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem 2rem; flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  font-size: 0.875rem; color: hsl(var(--muted-foreground));
}
.social-proof strong { color: hsl(var(--foreground)); }

/* ── AFFILIATE CARDS ──────────────────────────────────────────────────────────── */
.aff-section { margin: 2.5rem 0; }
.aff-disclosure {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: hsl(var(--warning) / 0.08); border: 1px solid hsl(var(--warning) / 0.25);
  border-radius: var(--radius); padding: 0.875rem 1rem; margin-bottom: 1.25rem;
  font-size: 0.8125rem; color: hsl(var(--muted-foreground)); line-height: 1.5;
}
.aff-disclosure::before { content: "ℹ️"; flex-shrink: 0; margin-top: 0.1rem; }
.aff-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg); padding: 1.25rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.aff-card:hover { border-color: hsl(var(--primary)/0.4); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.aff-card-icon {
  width: 64px; height: 64px; border-radius: var(--radius);
  background: hsl(var(--primary)/0.1); border: 1px solid hsl(var(--primary)/0.2);
  display: flex; align-items: center; justify-content: center; font-size: 1.75rem; flex-shrink: 0;
}
.aff-card-body { flex: 1; min-width: 0; }
.aff-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.aff-card-stars { font-size: 0.8125rem; color: #f59e0b; margin-bottom: 0.25rem; }
.aff-card-note  { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.aff-card-price { font-size: 0.875rem; font-weight: 600; color: hsl(var(--success)); margin-bottom: 0.75rem; }
.aff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }

/* SaaS Card */
.saas-card {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg); padding: 1.5rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.saas-card:hover { border-color: hsl(var(--primary)/0.4); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.saas-card-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
.saas-logo { font-size: 2rem; }
.saas-name  { font-size: 1.0625rem; font-weight: 700; }
.saas-stars { font-size: 0.8125rem; color: #f59e0b; }
.saas-features { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.saas-features li { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.saas-features li::before { content: "✓ "; color: hsl(var(--success)); font-weight: 700; }

/* ── TRUST FOOTER */ 
.trust-footer {
  border-top: 1px solid hsl(var(--border)); padding: 2.5rem 0 1.5rem;
  display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center;
  font-size: 0.8125rem; color: hsl(var(--muted-foreground));
}
.trust-footer a { color: hsl(var(--muted-foreground)); transition: color var(--transition-fast); }
.trust-footer a:hover { color: hsl(var(--foreground)); }

/* ── ANIMATIONS  ── */
@keyframes fade-up   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes slide-in-right { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 hsl(var(--primary)/0); }
  50%     { box-shadow: 0 0 24px 4px hsl(var(--primary)/0.25); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes scale-in { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:none; } }

/* Utility animation classes */
.animate-in        { animation: fade-up 0.4s var(--ease) both; }
.animate-fade      { animation: fade-in 0.4s var(--ease) both; }
.animate-scale     { animation: scale-in 0.3s var(--ease-spring) both; }
.animate-float     { animation: float 4s ease-in-out infinite; }
.pulse-glow        { animation: pulse-glow 2.5s ease infinite; }
.spin-slow         { animation: spin-slow 8s linear infinite; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Scroll-reveal (JS adds .revealed) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }

/* ── SHIMMER LOADING ────────────────────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,
    hsl(var(--card)) 25%,
    hsl(var(--muted)) 50%,
    hsl(var(--card)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* ── METER PROGRESS */ / ────────────────────────
.progress-bar { height: 6px; background: hsl(var(--muted)); border-radius: 999px; overflow: hidden; }
.progress-fill {
  height: 100%; background: linear-gradient(90deg, hsl(var(--primary)), hsl(239 84% 80%));
  border-radius: 999px;
  transition: width 1s var(--ease-out);
}

/* ── TOOLTIP  ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: hsl(var(--foreground)); color: hsl(var(--background));
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
  padding: 0.3125rem 0.625rem; border-radius: calc(var(--radius) - 2px);
  opacity: 0; pointer-events: none; transition: opacity var(--transition-fast);
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar   { padding: 0 1rem; }
  .hero     { padding: 3.5rem 0 2.5rem; }
  .hero h1  { font-size: clamp(1.875rem, 6vw, 2.5rem); }
  .card-grid-3, .card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .aff-grid { grid-template-columns: 1fr; }
  .hero-blob-1, .hero-blob-2 { opacity: 0.6; }
}
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .btn-lg, .btn-xl { padding: 0.75rem 1.25rem; font-size: 1rem; }
  .section { padding: 2.5rem 0; }
}

/* ── SCROLL-REVEAL JS SNIPPET (inline in pages) ──────────────────────────────── */
/* Add this to pages:
<script>
const ro = new IntersectionObserver(entries => {
  entries.forEach(e => { if(e.isIntersecting) { e.target.classList.add('revealed'); ro.unobserve(e.target); } });
}, {threshold:0.1});
document.querySelectorAll('.reveal').forEach(el => ro.observe(el));
document.addEventListener('scroll', () => {
  if(window.scrollY > 10) document.querySelector('.navbar')?.classList.add('scrolled');
  else document.querySelector('.navbar')?.classList.remove('scrolled');
}, {passive:true});
</script>
*/

/* ═══════════════════════════════════════════════════════════════════════════════
   SPRINT H — LOVABLE.AI QUALITY EXTENSIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── EXTENDED TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Brand gradients */
  --gradient-brand:       linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #f97316 100%);
  --gradient-violet-rose: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
  --gradient-text-value:  linear-gradient(135deg, #a78bfa 0%, #f472b6 60%, #fb923c 100%);
  --gradient-blue-violet: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gradient-success:     linear-gradient(135deg, #10b981 0%, #059669 100%);

  /* Extended shadows */
  --shadow-glow-lg:     0 0 40px hsl(var(--primary)/0.25), 0 0 80px hsl(var(--primary)/0.1);
  --shadow-glow-rose:   0 0 24px rgba(236,72,153,0.3), 0 0 8px rgba(236,72,153,0.2);
  --shadow-card-hover:  0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px hsl(var(--primary)/0.2);
  --shadow-pricing-featured: 0 0 0 2px #8b5cf6, 0 16px 48px rgba(139,92,246,0.25);

  /* Spacing scale */
  --space-section:  5rem;
  --space-section-lg: 7.5rem;
}

/* ── GRADIENT TEXT UTILITY */
.gradient-brand-text {
  background: var(--gradient-text-value);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BAR ANNOUNCEMENT */
.announce-bar {
  width: 100%;
  background: linear-gradient(90deg, hsl(var(--primary)/0.15) 0%, rgba(236,72,153,0.12) 50%, hsl(var(--primary)/0.15) 100%);
  border-bottom: 1px solid hsl(var(--primary)/0.2);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  position: relative;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.announce-bar a { color: hsl(var(--primary)); text-decoration: underline; }
.announce-bar a:hover { color: #ec4899; }
.announce-bar .announce-dismiss {
  position: absolute; right: 1rem;
  background: none; border: none; cursor: pointer;
  color: hsl(var(--muted-foreground)); font-size: 1rem; line-height: 1;
  padding: 0.25rem; border-radius: 4px;
  transition: color var(--transition-fast);
}
.announce-bar .announce-dismiss:hover { color: hsl(var(--foreground)); }
.announce-bar.hidden { display: none; }

/* ── SECTION BADGE (pill above h2) ──────────────────────────────────────────── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: hsl(var(--primary)/0.1);
  border: 1px solid hsl(var(--primary)/0.25);
  color: hsl(var(--primary));
  border-radius: 999px;
  padding: 0.3rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.875rem;
}
.section-badge.rose  { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.25); color: #f472b6; }
.section-badge.green { background: hsl(var(--success)/0.1); border-color: hsl(var(--success)/0.25); color: hsl(var(--success)); }
.section-badge.amber { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.25); color: #fbbf24; }

/* ── HERO ENHANCEMENTS ───────────────────────────────────────────────────────── */
.hero-noise {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}
.hero-glow-bloom {
  position: absolute;
  top: 30%; left: 50%; transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, hsl(var(--primary)/0.12) 0%, transparent 70%);
  pointer-events: none; z-index: 1;
}
/* Tighter hero h1 */
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.hero .hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: hsl(var(--muted-foreground));
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* ── HOW IT WORKS ────────────────────────────────────────────────────────────── */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}
.hiw-grid::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: calc(16.66% + 1rem);
  right: calc(16.66% + 1rem);
  height: 2px;
  background: linear-gradient(90deg, hsl(var(--primary)/0.3), rgba(236,72,153,0.3));
  pointer-events: none;
}
.hiw-step {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
}
.hiw-number {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--gradient-violet-rose);
  color: white;
  font-size: 1.125rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 20px rgba(139,92,246,0.4);
}
.hiw-step h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.5rem; }
.hiw-step p  { font-size: 0.9rem; color: hsl(var(--muted-foreground)); margin: 0; }

/* ── TESTIMONIALS  ── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.testimonial-card:hover {
  border-color: hsl(var(--primary)/0.3);
  box-shadow: var(--shadow-card-hover);
}
.testimonial-stars { font-size: 0.875rem; margin-bottom: 0.875rem; letter-spacing: 0.05em; }
.testimonial-quote {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: hsl(var(--foreground));
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--gradient-violet-rose);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700;
  flex-shrink: 0;
}
.testimonial-name  { font-size: 0.875rem; font-weight: 700; }
.testimonial-role  { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }

/* ── PREVIEW PRICING */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.pricing-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.pricing-card.featured {
  border-color: #8b5cf6;
  box-shadow: var(--shadow-pricing-featured);
  position: relative;
}
.pricing-card.featured::before {
  content: "Most Popular";
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-violet-rose);
  color: white;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25rem 0.875rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.pricing-tier  { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.pricing-price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
.pricing-per   { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.75rem; text-align: left; }
.pricing-features li { padding: 0.375rem 0; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.pricing-features li::before { content: "✓"; color: hsl(var(--success)); font-weight: 700; flex-shrink: 0; }

/* ── TRUST BADGES ROW ────────────────────────────────────────────────────────── */
.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.trust-badge .badge-icon {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: hsl(var(--primary)/0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ── SITE FOOTER (4-column) ──────────────────────────────────────────────────── */
.site-footer {
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
  padding: 4rem 0 2rem;
  margin-top: auto;
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand .brand-logo {
  font-size: 1.125rem;
  font-weight: 800;
  color: hsl(var(--foreground));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.footer-brand .brand-logo .logo-icon {
  width: 2rem; height: 2rem;
  border-radius: 8px;
  background: var(--gradient-violet-rose);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.footer-brand p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.65; margin-bottom: 1.25rem; }
.footer-brand .copyright { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.footer-col h4 { font-size: 0.875rem; font-weight: 700; margin-bottom: 1rem; color: hsl(var(--foreground)); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 0.625rem; }
.footer-col ul li a { font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--transition-fast); }
.footer-col ul li a:hover { color: hsl(var(--foreground)); }
.footer-bottom {
  max-width: 1200px;
  margin: 2rem auto 0;
  padding: 1.5rem 1.5rem 0;
  border-top: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.footer-bottom a { color: hsl(var(--muted-foreground)); text-decoration: none; }
.footer-bottom a:hover { color: hsl(var(--foreground)); }

/* ── MOBILE NAVBAR HAMBURGER ─────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: var(--radius);
  transition: background var(--transition-fast);
}
.nav-hamburger:hover { background: hsl(var(--secondary)); }
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: hsl(var(--foreground));
  border-radius: 2px;
  transition: all var(--transition-base);
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: hsl(var(--background)/0.97);
  backdrop-filter: blur(20px);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a { font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); text-decoration: none; }
.nav-mobile-menu a:hover { color: hsl(var(--primary)); }

/* ── BESTSELLER / NEW BADGE ──────────────────────────────────────────────────── */
.badge-bestseller {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.375rem;
}
.badge-new {
  display: inline-block;
  background: hsl(var(--primary)/0.15);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary)/0.3);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.375rem;
}

/* ── READING TIME PILL ───────────────────────────────────────────────────────── */
.reading-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--secondary));
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  margin-bottom: 0.375rem;
}

/* ── SPRINT RESPONSIVE H */
@media (max-width: 900px) {
  .hiw-grid::before { display: none; }
  .hiw-grid         { grid-template-columns: 1fr; gap: 1.5rem; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .pricing-grid     { grid-template-columns: 1fr; }
  .site-footer .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .nav-hamburger    { display: flex; }
  .nav-links        { display: none; }
  .navbar .btn      { display: none; }
}
@media (max-width: 580px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .trust-badges { gap: 1rem 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   SPRINT H · RESEARCH-BACKED REFINEMENTS (Vercel · Linear · Lovable exact values)
 */

/* ── EXACT EASING FROM RESEARCH ──────────────────────────────────────────────── */
:root {
  --ease-out-quint:     cubic-bezier(0.23, 1, 0.32, 1);      /* Linear — smooth decel */
  --ease-out-expo:      cubic-bezier(0.19, 1, 0.22, 1);      /* Linear — snappy */
  --ease-reveal:        cubic-bezier(.4, .01, .165, .99);     /* Vercel scroll-reveal */
  --ease-in-out-quart:  cubic-bezier(0.77, 0, 0.175, 1);     /* Linear */

  /* Linear exact dark colors */
  --color-bg-marketing: #010102;    /* Linear homepage — even darker than app */
  --color-border-trans: rgba(255,255,255,0.08);   /* Linear glass border */
  --color-border-trans-strong: rgba(255,255,255,0.12);

  /* Vercel brand accent hex values (for inline use) */
  --color-indigo: #4f39f6;
  --color-violet: #7008e7;

  /* Shimmer animation timing */
  --shimmer-speed-fast: 1.8s;
  --shimmer-speed-slow: 2.5s;
}

/* ── HEADING LETTER-SPACING (Linear: -0.022em on all large heads) ────────────── */
h1 { letter-spacing: -0.04em;  font-weight: 800; }
h2 { letter-spacing: -0.022em; font-weight: 700; }
h3 { letter-spacing: -0.012em; font-weight: 600; }

/* ── ANIMATED SHIMMER TEXT (Linear exact technique) ─────────────────────────── */
/* linear-gradient: text-color 0% → highlight 60% → text-color 80–100%          */
/* background-size: 300% 100% — then animate position 300% → 0%                 */
@keyframes shimmer-text {
  0%  { background-position: 300% center; }
  to  { background-position: 0%   center; }
}
.gradient-text {
  background: linear-gradient(
    135deg,
    #a78bfa 0%,
    #f9fafb 40%,
    #f472b6 60%,
    #a78bfa 80%,
    #fb923c 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 4s linear infinite;
}

/* ── IMPROVED SCROLL-REVEAL (Vercel easing + translateY(24px)) ───────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.5s cubic-bezier(.4, .01, .165, .99),
    transform 0.5s cubic-bezier(.4, .01, .165, .99);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children — applied via CSS custom property on parent */
.stagger .reveal:nth-child(1) { transition-delay: 0s; }
.stagger .reveal:nth-child(2) { transition-delay: 0.07s; }
.stagger .reveal:nth-child(3) { transition-delay: 0.14s; }
.stagger .reveal:nth-child(4) { transition-delay: 0.21s; }
.stagger .reveal:nth-child(5) { transition-delay: 0.28s; }
.stagger .reveal:nth-child(6) { transition-delay: 0.35s; }
.stagger .reveal:nth-child(7) { transition-delay: 0.42s; }
.stagger .reveal:nth-child(8) { transition-delay: 0.49s; }

/* ── IMPROVED BUTTON GLOW (Lovable no-reflow ::after pattern) ────────────────── */
/* Replace the existing shimmer sweep with the no-reflow glow overlay */
.btn-primary {
  position: relative;
  overflow: hidden;
  /* keep existing gradient bg */
}
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(1px); }  /* Vercel pressed state */

/* ── VERCEL PERSPECTIVE HERO GRID (optional class) ───────────────────────────── */
.hero-perspective-container {
  position: absolute; inset: 0;
  perspective: 2000px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-perspective-tilt {
  transform: rotateX(75deg);
  width: 200vw; margin-left: -50%;
  height: 100%;
  position: relative;
}
@keyframes grid-scroll {
  0%  { transform: translateY(0); }
  to  { transform: translateY(100px); }
}
.hero-perspective-lines {
  background-image:
    linear-gradient(to right, rgba(139,92,246,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,0.15) 1px, transparent 1px);
  background-size: 60px 60px;
  width: 100%; height: 200%;
  animation: grid-scroll 8s linear infinite;
}

/* ── BUTTON ACTIVE PRESS STATE (Vercel: translateY(1px)) ─────────────────────── */
.btn:active, .btn-secondary:active, .btn-outline:active {
  transform: translateY(1px);
}

/* ── IMPROVED CARD BORDER (Linear: rgba(255,255,255,0.08) pattern) ───────────── */
/* Override base card border with translucent value for more depth */
.card.glass,
.testimonial-card,
.pricing-card {
  border-color: rgba(255,255,255,0.08);
}
.card.glass:hover,
.testimonial-card:hover {
  border-color: rgba(139,92,246,0.4);
}

/* ── REDUCE MOTION RESPECT (all 4 sites implement this) ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Badge.eyebrow → aligned with .section-badge ───────────────────────────── */
.badge.eyebrow, span.eyebrow {
  display: inline-flex;
  align-items: center;
  background: hsl(var(--primary)/0.1);
  border: 1px solid hsl(var(--primary)/0.25);
  color: hsl(var(--primary));
  border-radius: 999px;
  padding: 0.3rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT H² — ELITE TOKEN COMPLETION (audit-driven)
   Adds: spacing scale, font weights, type scale, color shades, z-index scale,
         focus-visible states, number counter animation, backdrop blur tokens
 */

:root {
  /* ── Spacing scale (8px base) ─────────────────────────────────────────── */
  --space-px: 1px;
  --space-1:  0.125rem;  /* 2px  */
  --space-2:  0.25rem;   /* 4px  */
  --space-3:  0.5rem;    /* 8px  */
  --space-4:  0.75rem;   /* 12px */
  --space-5:  1rem;      /* 16px */
  --space-6:  1.25rem;   /* 20px */
  --space-7:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── scale Typography */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* ── Font weights ─────────────────────────────────────────────────────── */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ── Line heights ─────────────────────────────────────────────────────── */
  --lh-none:    1;
  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* ── Letter spacing */
  --ls-tighter: -0.05em;
  --ls-tight:   -0.025em;
  --ls-normal:   0em;
  --ls-wide:     0.025em;
  --ls-wider:    0.05em;
  --ls-widest:   0.1em;

  /* ── Color shades — primary (indigo */) ───────────────────────────────
  --primary-50:  239 100% 97%;
  --primary-100: 239 95%  92%;
  --primary-200: 239 90%  85%;
  --primary-300: 239 87%  78%;
  --primary-400: 239 84%  72%;
  --primary-500: 239 84%  67%;  /* ← base --primary */
  --primary-600: 239 84%  58%;
  --primary-700: 239 80%  50%;
  --primary-800: 239 76%  40%;
  --primary-900: 239 70%  28%;

  /* ── Color shades — gray (neutral */) ───
  --gray-50:  220 16% 96%;
  --gray-100: 220 16% 90%;
  --gray-200: 220 16% 80%;
  --gray-300: 220 14% 65%;
  --gray-400: 220 12% 50%;
  --gray-500: 220 12% 40%;
  --gray-600: 220 14% 28%;
  --gray-700: 220 15% 18%;
  --gray-800: 220 16% 11%;
  --gray-900: 220 16%  6%;

  /* ── widths Border */
  --border-0: 0;
  --border-1: 1px;
  --border-2: 2px;
  --border-4: 4px;

  /* ── Backdrop blur tokens */
  --blur-sm:  blur(4px);
  --blur-md:  blur(12px);
  --blur-lg:  blur(24px);
  --blur-xl:  blur(40px);

  /* ── Z-index scale ────────────────────────────────────────────────────── */
  --z-neg:      -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;
}

/* ── Focus-visible system ───────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Suppress default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Explicit button/link focus rings */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.15);
}

/* ── Stat counter number animation ─────────────────────────────────────── */
.stat-counter, .hero-stat-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  /* JS adds .counting class during animation */
  transition: none;
}

@keyframes count-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.stat-counter.counting,
.hero-stat-num.counting {
  animation: count-pulse 0.15s var(--ease-spring);
}

/* ── Interactive system overlay */
.interactive-overlay {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.interactive-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--primary) / 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
  border-radius: inherit;
}

.interactive-overlay:hover::after  { opacity: 1; }
.interactive-overlay:active::after { background: hsl(var(--primary) / 0.13); opacity: 1; }

/* ── Disabled state utility ─────────────────────────────────────────────── */
[disabled],
[aria-disabled="true"],
.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Backdrop blur classes utility */
.backdrop-sm { backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); }
.backdrop-md { backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md); }
.backdrop-lg { backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); }

/* ── Text size utilities ─────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg);   }
.text-xl   { font-size: var(--text-xl);   }
.text-2xl  { font-size: var(--text-2xl);  }
.text-3xl  { font-size: var(--text-3xl);  }
.text-4xl  { font-size: var(--text-4xl);  }
.text-5xl  { font-size: var(--text-5xl);  }

/* ── Font weight utilities ───────────────────────────────────────────────── */
.fw-light    { font-weight: var(--fw-light);    }
.fw-normal   { font-weight: var(--fw-normal);   }
.fw-medium   { font-weight: var(--fw-medium);   }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold);     }
.fw-extrabold{ font-weight: var(--fw-extrabold);}

/* ── Spacing utilities (padding/margin shortcuts) ────────────────────────── */
.p-3  { padding: var(--space-3);  }
.p-4  { padding: var(--space-4);  }
.p-5  { padding: var(--space-5);  }
.p-6  { padding: var(--space-6);  }
.p-7  { padding: var(--space-7);  }
.p-8  { padding: var(--space-8);  }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }


/* ═══════════════════════════════════════════════════════════════════════════
   Sprint J — Lovable.ai Design Polish Layer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Store card: glass shimmer hover ──────────────────────────────────────── */
.card {
  position: relative;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(.4,.01,.165,.99),
    box-shadow 220ms cubic-bezier(.4,.01,.165,.99),
    border-color 220ms ease;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.06) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 480ms cubic-bezier(.4,.01,.165,.99);
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(99,102,241,.3);
  border-color: rgba(99,102,241,.4);
}
.card:hover::after {
  transform: translateX(100%);
}

/* ── Card icon badge ──────────────────────────────────────────────────────── */
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: .75rem;
  flex-shrink: 0;
}

/* ── grid Product */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* ── Section surface upgrade ─────────────────────────────────────────────── */
.section-surface {
  background: linear-gradient(
    135deg,
    rgba(99,102,241,.04) 0%,
    transparent 60%
  );
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(2px);
}

/* ── loader Skeleton */
@keyframes skeleton-pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .8; }
}
.skeleton {
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-card {
  height: 180px;
  border-radius: 12px;
}
.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }

/* ── Section entrance animation upgrade ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 640ms cubic-bezier(.4,.01,.165,.99),
    transform 640ms cubic-bezier(.4,.01,.165,.99);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ── Gradient border CTA ─────────────────────────────────────────────────── */
.cta-gradient-border {
  position: relative;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--accent,280 100% 70%)) 50%,
    hsl(var(--primary)) 100%
  );
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}
.cta-gradient-border > * {
  border-radius: 15px;
  background: var(--surface);
  padding: 2rem;
}

/* ── Nav link active indicator ───────────────────────────────────────────── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: hsl(var(--primary));
  transform: scaleX(0);
  transition: transform 200ms ease;
  border-radius: 1px;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ── Badge variants pill */
.badge-travel  { background: #f59e0b22; color: #f59e0b; border-color: #f59e0b44; }
.badge-home    { background: #8b5cf622; color: #8b5cf6; border-color: #8b5cf644; }
.badge-family  { background: #ec489922; color: #ec4899; border-color: #ec489944; }
.badge-food    { background: #ef444422; color: #ef4444; border-color: #ef444444; }
.badge-freelance { background: #6366f122; color: #6366f1; border-color: #6366f144; }
.badge-wedding { background: #ec489922; color: #ec4899; border-color: #ec489944; }
.badge-fitness { background: #10b98122; color: #10b981; border-color: #10b98144; }
.badge-student { background: #3b82f622; color: #3b82f6; border-color: #3b82f644; }

/* ── Floating label inputs ───────────────────────────────────────────────── */
.input-wrap {
  position: relative;
}
.input-wrap input {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .875rem 1rem;
  width: 100%;
  color: var(--text-primary, #f4f4f5);
  font-size: .95rem;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.input-wrap input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .15);
}

/* ── Table of sidebar contents */
.toc {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  font-size: .85rem;
}
.toc-title {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: .75rem;
}
.toc a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: .25rem 0;
  border-left: 2px solid transparent;
  padding-left: .75rem;
  transition: color 150ms, border-color 150ms;
}
.toc a:hover {
  color: hsl(var(--primary));
  border-left-color: hsl(var(--primary));
}

 */Tooltip /* ── ─────────────────
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .4rem .7rem;
  font-size: .78rem;
  color: #e4e4e7;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
  z-index: 100;
}
[data-tooltip]:hover::before {
  opacity: 1;
}

/* ── Mobile nav upgrade ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10,10,18,.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    gap: .25rem;
    z-index: 200;
  }
  .nav-links.open a {
    padding: .75rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open a:last-child {
    border-bottom: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT K-POLISH — Lovable-tier upgrade layer
   Added 2026-05-13. Self-contained, additive only. Safe to remove block.
 */

/* ── Hero aurora background image */
.hero-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/images/hero-aurora.svg");
  background-size: cover; background-position: center;
  opacity: 0.85;
}
.hero { position: relative; isolation: isolate; }
.hero > .container { position: relative; z-index: 3; }

/* Cursor-follow spotlight on hero (desktop only) */
@media (min-width: 1024px) {
  .hero::after {
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 30%),
      hsl(var(--primary) / 0.18),
      transparent 70%
    );
    transition: background-position 80ms linear;
    mix-blend-mode: screen;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
}

/* ── Animated shimmer .gradient-text on */
.gradient-text {
  background-size: 220% 220% !important;
  animation: gt-shimmer 6s ease-in-out infinite;
}
@keyframes gt-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; background-position: 0% 50% !important; }
}

/* ── Radiant conic-gradient border (Lovable signature) ────────────────────── */
.radiant-border {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.radiant-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rb-angle, 0deg),
    #7c3aed, #db2777, #fb923c, #a78bfa, #7c3aed
  );
  animation: rb-spin 4s linear infinite;
  filter: blur(0.5px);
}
.radiant-border::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: hsl(var(--background));
}
@property --rb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rb-spin {
  to { --rb-angle: 360deg; transform: rotate(0); }
}
.radiant-border:hover::before { animation-duration: 2s; }
@media (prefers-reduced-motion: reduce) {
  .radiant-border::before { animation: none; }
}

/* Variant: full-bleed border for primary CTAs (keeps button gradient inside) */
.btn.radiant-cta {
  position: relative;
  z-index: 0;
  isolation: isolate;
  border: none;
}
.btn.radiant-cta::before {
  content: "";
  position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--rb-angle, 0deg),
    #a78bfa, #f472b6, #fb923c, #7c3aed, #a78bfa
  );
  animation: rb-spin 5s linear infinite;
  filter: blur(1px) saturate(1.2);
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
  .btn.radiant-cta::before { animation: none; }
}

/* ── Glow buttons v2 — multi-layer outer bloom + inner shimmer ────────────── */
.btn-primary.pulse-glow,
.btn.glow-v2 {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px hsl(var(--primary) / 0.30),
    0 6px 18px -4px hsl(var(--primary) / 0.55),
    0 18px 48px -10px hsl(var(--primary) / 0.45),
    0 0 60px -8px hsl(var(--primary) / 0.35);
  transition: box-shadow .35s ease, transform .35s ease;
}
.btn-primary.pulse-glow:hover,
.btn.glow-v2:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px hsl(var(--primary) / 0.50),
    0 10px 24px -4px hsl(var(--primary) / 0.70),
    0 24px 64px -10px hsl(var(--primary) / 0.55),
    0 0 90px -8px hsl(var(--primary) / 0.50);
}
.btn-primary.pulse-glow::after,
.btn.glow-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255,255,255,0.35) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform .8s ease;
  pointer-events: none;
}
.btn-primary.pulse-glow:hover::after,
.btn.glow-v2:hover::after {
  transform: translateX(100%);
}

/* ── Animated stat counters (markup hook only — JS does the rest) ─────────── */
.stat-value[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ── SVG section divider */
.section-divider {
  position: relative;
  height: 80px;
  margin: -1px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    hsl(var(--card) / 0.4) 100%);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 C300,80 900,0 1200,40 L1200,80 L0,80 Z' fill='black'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'><path d='M0,40 C300,80 900,0 1200,40 L1200,80 L0,80 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  pointer-events: none;
}

/* ── Affiliate marquee (homepage */) ─
.affiliate-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  background:
    radial-gradient(800px circle at 50% 0%, hsl(var(--primary)/0.06), transparent 60%),
    hsl(var(--card)/0.4);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.affiliate-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.affiliate-marquee:hover .affiliate-marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.affiliate-tile {
  flex: 0 0 auto;
  width: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.affiliate-tile:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: var(--shadow-card-hover);
}
.affiliate-tile img,
.affiliate-tile svg { display: block; width: 100%; height: 140px; object-fit: cover; }
.affiliate-tile-meta { padding: .65rem .8rem; }
.affiliate-tile-name { font-size: .85rem; font-weight: 600; margin: 0 0 .2rem; }
.affiliate-tile-price { font-size: .8rem; color: hsl(var(--primary)); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .affiliate-marquee-track { animation: none; }
}

/* ── /deals/ page card grid (uses design-system */) ─────────────────
.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.deal-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.deal-card:hover {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.deal-card .deal-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.deal-card .deal-thumb svg,
.deal-card .deal-thumb img {
  width: 100%; height: 100%; display: block;
}
.deal-card .deal-discount {
  position: absolute;
  top: .6rem; left: .6rem;
  background: hsl(var(--destructive, 0 72% 51%));
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: .25rem .5rem;
  border-radius: 999px;
  letter-spacing: .04em;
}
.deal-card .deal-body {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}
.deal-card .deal-title {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deal-card .deal-price-row {
  display: flex; align-items: baseline; gap: .5rem;
}
.deal-card .deal-price {
  font-size: 1rem; font-weight: 800; color: hsl(var(--primary));
}
.deal-card .deal-price-was {
  font-size: .8rem; color: hsl(var(--muted-foreground)); text-decoration: line-through;
}
.deal-card .deal-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  background: var(--gradient-violet-rose);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
}
.deal-card .deal-cta:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINT K-POLISH v2 — Deep Lovable parity layer
   Added 2026-05-13. Self-contained, additive only.
 */

/* ── Top scroll-progress bar ──────────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, #a78bfa, #f472b6, #fb923c);
  z-index: 9999;
  transition: width 60ms linear;
  pointer-events: none;
}

/* ── Floating glass nav pill (desktop only) ───────────────────────────────── */
@media (min-width: 1024px) {
  body.has-floating-nav .navbar { transition: transform .35s var(--ease), opacity .35s var(--ease); }
  body.scrolled-deep .navbar    { transform: translateY(-110%); opacity: 0; pointer-events: none; }
  .nav-pill {
    position: fixed;
    top: 14px; left: 50%;
    transform: translateX(-50%) translateY(-120%);
    display: flex; align-items: center; gap: .25rem;
    padding: .4rem .5rem;
    background: hsl(var(--card) / 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid hsl(var(--border));
    border-radius: 999px;
    box-shadow: 0 12px 40px -12px rgba(0,0,0,.6), 0 0 0 1px hsl(var(--primary)/0.08);
    z-index: 200;
    opacity: 0;
    transition: transform .45s var(--ease-spring), opacity .35s var(--ease);
  }
  body.scrolled-deep .nav-pill {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  .nav-pill > a {
    position: relative;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: color .2s var(--ease);
    z-index: 1;
  }
  .nav-pill > a:hover,
  .nav-pill > a.active { color: hsl(var(--foreground)); }
  .nav-pill .nav-pill-indicator {
    position: absolute;
    top: 4px; bottom: 4px;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.18);
    border: 1px solid hsl(var(--primary) / 0.30);
    transition: left .35s var(--ease-spring), width .35s var(--ease-spring);
    z-index: 0;
  }
  .nav-pill > .btn {
    margin-left: .35rem;
    padding: .5rem 1rem;
    font-size: .85rem;
  }
}
@media (max-width: 1023px) { .nav-pill { display: none !important; } }

/* ── Per-card cursor spotlight ────────────────────────────────────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tool-card, .product-card, .blog-card, .cat-card {
    --cx: 50%; --cy: 50%;
  }
  .tool-card::after, .product-card::after, .blog-card::after, .cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      280px circle at var(--cx) var(--cy),
      hsl(var(--primary) / 0.14),
      transparent 70%
    );
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }
  .tool-card:hover::after,
  .product-card:hover::after,
  .blog-card:hover::after,
  .cat-card:hover::after { opacity: 1; }
  .tool-card, .product-card, .blog-card, .cat-card { position: relative; overflow: hidden; }
}

/* ── Sticky bottom CTA bar */
.sticky-cta {
  position: fixed;
  left: 50%; bottom: 16px;
  transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem .6rem 1rem;
  background: hsl(var(--card) / 0.75);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px hsl(var(--primary)/0.10);
  z-index: 180;
  opacity: 0;
  transition: transform .45s var(--ease-spring), opacity .35s var(--ease);
  max-width: calc(100vw - 24px);
}
.sticky-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.sticky-cta .sticky-cta-label {
  font-size: .85rem; font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.sticky-cta .btn { padding: .5rem .9rem; font-size: .8rem; }
@media (max-width: 480px) {
  .sticky-cta .sticky-cta-label { display: none; }
}

 Sparkle particle field (CSS-only) ────────────────────────────────────── *//* ─
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.sparkles span {
  position: absolute;
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255,255,255,0.6) 35%, transparent 70%);
  filter: blur(.4px) drop-shadow(0 0 6px rgba(255,255,255,.8));
  opacity: 0;
  animation: sparkle-rise 9s linear infinite;
}
@keyframes sparkle-rise {
  0%   { transform: translateY(20vh) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translateY(-120vh) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sparkles { display: none; } }

/* ── Aurora text shimmer mask ─────────────────────────────────────────────── */
.aurora-text {
  background: linear-gradient(120deg,
    #a78bfa 0%, #f472b6 30%, #fb923c 50%, #f472b6 70%, #a78bfa 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: aurora-sweep 7s linear infinite;
}
@keyframes aurora-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@media (prefers-reduced-motion: reduce) { .aurora-text { animation: none; } }

/* ── Bento grid (How It upgrade Works */) ───
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 1rem;
}
.bento-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.bento-tile:hover { border-color: hsl(var(--primary)/0.35); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.bento-tile-icon {
  width: 2.4rem; height: 2.4rem; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--primary)/0.14); color: hsl(var(--primary));
  font-size: 1.25rem;
}
.bento-tile h3 { margin: .35rem 0 .15rem; font-size: 1.05rem; }
.bento-tile p  { color: hsl(var(--muted-foreground)); font-size: .9rem; margin: 0; }

.bento-tile.bento-hero {
  grid-column: span 4;
  grid-row: span 2;
  background:
    radial-gradient(900px circle at 0% 0%, hsl(var(--primary)/0.18), transparent 55%),
    radial-gradient(700px circle at 100% 100%, hsl(330 81% 60% /0.15), transparent 55%),
    hsl(var(--card));
}
.bento-tile.bento-hero h3 { font-size: 1.5rem; }
.bento-tile.bento-hero p  { font-size: 1rem; max-width: 56ch; }
.bento-tile.bento-2  { grid-column: span 2; }
.bento-tile.bento-3  { grid-column: span 2; }
.bento-tile.bento-4  { grid-column: span 3; }
.bento-tile.bento-5  { grid-column: span 3; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-tile.bento-hero { grid-column: span 2; grid-row: auto; }
  .bento-tile.bento-2, .bento-tile.bento-3,
  .bento-tile.bento-4, .bento-tile.bento-5 { grid-column: span 1; }
}
@media (max-width: 540px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-tile, .bento-tile.bento-hero,
  .bento-tile.bento-2, .bento-tile.bento-3,
  .bento-tile.bento-4, .bento-tile.bento-5 { grid-column: span 1; }
}

/* ── Vertical timeline connector HIW for */
.hiw-grid { position: relative; }
@media (min-width: 768px) {
  .hiw-grid::before {
    content: "";
    position: absolute;
    left: 6%; right: 6%;
    top: 2.6rem;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      hsl(var(--primary)/0.45) 20%,
      hsl(330 81% 60% /0.55) 50%,
      hsl(var(--primary)/0.45) 80%,
      transparent 100%);
    z-index: 0;
    border-radius: 2px;
  }
}
.hiw-step { position: relative; z-index: 1; }
.hiw-number {
  position: relative;
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px hsl(var(--background)),
              0 8px 24px -6px hsl(var(--primary)/0.55);
}

/* ── Faux terminal / code mock */
.terminal-mock {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, #0f0f17 0%, #0a0a0f 100%);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
  color: #e5e7eb;
}
.terminal-mock-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .85rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid hsl(var(--border));
}
.terminal-mock-bar span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #4b5563;
}
.terminal-mock-bar span:nth-child(1) { background: #ef4444; }
.terminal-mock-bar span:nth-child(2) { background: #f59e0b; }
.terminal-mock-bar span:nth-child(3) { background: #10b981; }
.terminal-mock-bar .terminal-mock-title {
  width: auto; height: auto; background: none;
  margin-left: .5rem; color: hsl(var(--muted-foreground));
  font-size: .75rem; font-family: inherit;
}
.terminal-mock-body { padding: 1rem 1.1rem; min-height: 8.5rem; line-height: 1.7; }
.terminal-mock-body .tm-prompt { color: #67e8f9; user-select: none; }
.terminal-mock-body .tm-out    { color: #d1d5db; }
.terminal-mock-body .tm-ok     { color: #6ee7b7; }
.terminal-mock-body .tm-cmd    {
  display: inline;
  border-right: 2px solid transparent;
}
.terminal-mock-body .tm-cmd.typing {
  border-right-color: #e5e7eb;
  animation: caret-blink 1s steps(2) infinite;
}
@keyframes caret-blink { 50% { border-right-color: transparent; } }

/* Sprint K-Polish v2: footer column headings use h3 for a11y heading-order */
.footer h3.footer-h { font-size: .95rem; font-weight: 700; margin: 0 0 .85rem; color: hsl(var(--foreground)); letter-spacing: .02em; }

/* ── H4 BUTTON SYSTEM 2026-05-16 ─────────────────────────────────────────── */
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem 1.5rem;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s,background .2s}
.wm-btn-primary{background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;box-shadow:0 8px 24px -8px rgba(124,58,237,.5)}
.wm-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(124,58,237,.65);filter:brightness(1.05)}
.wm-btn-primary:focus-visible{outline:3px solid rgba(167,139,250,.55);outline-offset:2px}
.wm-btn-primary:active{transform:scale(.97)}
.wm-btn-secondary{background:rgba(255,255,255,.04);color:#e2e8f0;border-color:rgba(255,255,255,.08)}
.wm-btn-secondary:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.wm-btn-secondary:focus-visible{outline:3px solid rgba(167,139,250,.45);outline-offset:2px}
.wm-btn-ghost{background:transparent;color:#a78bfa}
.wm-btn-ghost:hover{background:rgba(167,139,250,.08)}
.wm-btn-lg{padding:1.1rem 1.7rem;font-size:1rem}
.wm-btn-sm{padding:.55rem 1rem;font-size:.82rem}

/* Normalize legacy button classes — shared hover/focus/active */
.btn, .btn-primary, .btn-secondary, .btn-lg, .wm-hv2-btn, .wm-hv2-btn-primary, .wm-pdp-btn, .button{transition:transform .2s,box-shadow .2s,filter .2s,background .2s}
.btn-primary, .wm-hv2-btn-primary, .wm-pdp-btn, .button{box-shadow:0 8px 24px -8px rgba(124,58,237,.5)}
.btn-primary:hover, .wm-hv2-btn-primary:hover, .wm-pdp-btn:hover, .button:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(124,58,237,.65);filter:brightness(1.05)}
.btn-primary:focus-visible, .wm-hv2-btn-primary:focus-visible, .wm-pdp-btn:focus-visible, .button:focus-visible, .btn:focus-visible, .btn-secondary:focus-visible{outline:3px solid rgba(167,139,250,.55);outline-offset:2px}
.btn:active, .btn-primary:active, .btn-secondary:active, .wm-hv2-btn:active, .wm-hv2-btn-primary:active, .wm-pdp-btn:active, .button:active{transform:scale(.97)}

/* Forms */
input[type="email"]:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="url"]:focus,textarea:focus,select:focus{outline:3px solid rgba(167,139,250,.45);outline-offset:1px}
.form-error{color:#ef4444;font-size:.85rem;margin-top:.4rem}
.form-success{color:#22c55e;font-size:.85rem;margin-top:.4rem}
.form-hint{color:#71717a;font-size:.78rem;margin-top:.35rem}
.form-required::after{content:'*';color:#ef4444;margin-left:.2rem}

/* ── H5 CANONICAL TYPOGRAPHY 2026-05-16 — class-doubled to beat inline ───── */
.wm-hv2-h1.wm-hv2-h1, .u2-hero-h1.u2-hero-h1, .wm-pdp-h1.wm-pdp-h1, .hero-v2-h1.hero-v2-h1{
  font-size: clamp(1.7rem, 4.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 1.1rem;
}
@media (max-width:480px){
  .wm-hv2-h1.wm-hv2-h1, .u2-hero-h1.u2-hero-h1, .wm-pdp-h1.wm-pdp-h1, .hero-v2-h1.hero-v2-h1{
    font-size: 1.65rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .hero-pill, .wm-hv2-pill, .wm-pdp-eyebrow{
    font-size: .72rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
h2.h2-canonical, .wm-section h2{
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.wm-lead, .hero-sub.hero-sub, .wm-hv2-sub.wm-hv2-sub, .wm-pdp-lead.wm-pdp-lead{
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  line-height: 1.55;
}
section.section, section.wm-section{ padding: 4rem 0; }
@media (max-width:768px){ section.section, section.wm-section{ padding: 2.5rem 0; } }

/* Footer typography — force brand font regardless of legacy inline overrides */
footer.wm-shared-footer, footer.wm-shared-footer *{
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

/* ── Mobile-first responsive guards 2026-05-16 ──────────────────────────── */
@media (max-width:480px){
  .affiliate-tile{min-width:140px}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .hero-v2-actions, .wm-hv2-cta{flex-direction:column;align-items:stretch}
  .hero-v2-actions .btn, .wm-hv2-cta .wm-hv2-btn{width:100%}
  .hero-v2-mockup, .wm-hv2-mockup{transform:none !important;animation:none !important}
  table{display:block;overflow-x:auto;max-width:100%}
  pre{overflow-x:auto;max-width:100%}
}

/* ── J3 — mobile page-length compression 2026-05-16 (J3.1 tighter pass) ── */
@media (max-width:640px){
  section.section, section.wm-section, section.section-lg{padding:1.5rem 0 !important}
  .section-header{margin-bottom:1rem !important}
  .section-header h2{font-size:1.35rem !important;line-height:1.15 !important;margin:0 0 .35rem !important}
  .section-header p{font-size:.88rem !important;margin:.25rem 0 0 !important;line-height:1.45 !important}
  .section-badge{font-size:.68rem !important;padding:.22rem .55rem !important;margin-bottom:.5rem !important}
  /* Tighten card grids */
  .tools-grid, .products-grid, .features-grid, .testimonials-grid, .hub-grid, .pricing-grid, .deal-grid, .post-grid{gap:.6rem !important}
  /* Cap mobile grids: tools to 4, products to 4, testimonials to 2 */
  .tools-grid > a:nth-child(n+5), .tools-grid > .tool-card:nth-child(n+5){display:none !important}
  .products-grid > a:nth-child(n+5), .products-grid > .product-card:nth-child(n+5){display:none !important}
  .testimonials-grid > article:nth-child(n+3), .testimonials-grid > .testimonial-item:nth-child(n+3){display:none !important}
  /* Categories row — show only top 4 */
  .categories-row > a:nth-child(n+5), .categories-row > .category-card:nth-child(n+5){display:none !important}
  /* Cards themselves smaller */
  .tool-card, .product-card, .post-card, .feature-card, .category-card{padding:1rem !important}
  .tool-card .tool-name, .tool-card .tool-title{font-size:.95rem !important;margin:.4rem 0 .25rem !important}
  .tool-card .tool-desc{font-size:.78rem !important;line-height:1.4 !important}
  .tool-card .tool-icon{font-size:1.5rem !important;margin-bottom:.3rem !important}
  .product-card .product-name{font-size:.92rem !important}
  /* How-it-works steps tighter */
  .how-it-works .step, .steps .step, .step{padding:.9rem !important;margin-bottom:.45rem !important}
  .how-it-works .step h3, .steps .step h3, .step h3{font-size:1rem !important;margin-bottom:.25rem !important}
  .how-it-works .step p, .steps .step p, .step p{font-size:.82rem !important;line-height:1.4 !important;margin:0 !important}
  /* Finance hub cards */
  .finance-hubs-grid, .hubs-grid{grid-template-columns:repeat(2,1fr) !important;gap:.6rem !important}
  .finance-hub-card, .hub-card{padding:.75rem !important}
  .finance-hub-card h3, .hub-card h3{font-size:.88rem !important;margin:.3rem 0 .15rem !important}
  .finance-hub-card p, .hub-card p{font-size:.74rem !important}
  /* Affiliate marquee tiles smaller */
  .affiliate-tile{min-width:120px}
  .affiliate-tile-name{font-size:.78rem}
  .affiliate-tile-price{font-size:.7rem}
  /* Hero h1 absolute mobile cap */
  .hero-v2-h1.hero-v2-h1, .wm-hv2-h1.wm-hv2-h1, .u2-hero-h1.u2-hero-h1, .wm-pdp-h1.wm-pdp-h1{font-size:1.6rem !important;line-height:1.08 !important}
  /* Pricing cards stack tighter */
  .pricing-card, .price-card{padding:1.25rem !important;margin-bottom:.75rem !important}
  .pricing-card h3, .price-card h3{font-size:1.1rem !important}
  .pricing-amount, .price-card .price{font-size:1.8rem !important}
  /* "Why Wingman" features compress */
  .why-card, .feature-card{padding:1rem !important}
  .why-card h3, .feature-card h3{font-size:1rem !important;margin:.4rem 0 .3rem !important}
  /* Section dividers smaller */
  .section-divider{margin:1rem 0 !important;height:1px !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACE ARENA BRAND OVERRIDE LAYER  (appended — wins the cascade)
   Palette:  midnight bg #0a0f1f / #0a1020 · cyan primary #22d3ee · gold accent #f5c518 / #facc15
   HSL equivalents:  midnight 222 49% 8% · cyan 187 81% 53% · gold 47 91% 53%
   Keeps Plus Jakarta Sans + every component class from the base sheet.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Core surfaces — midnight blue */
  --background:         222 49% 8%;    /* #0a1020 */
  --background-subtle:  221 47% 10%;
  --foreground:         210 30% 96%;
  --card:               220 44% 11%;   /* slightly lifted midnight */
  --card-foreground:    210 30% 96%;
  --secondary:          218 40% 15%;
  --secondary-foreground: 210 30% 96%;
  --muted:              218 38% 16%;
  --muted-foreground:   213 22% 66%;

  /* Cyan primary */
  --primary:            187 81% 53%;   /* #22d3ee */
  --primary-foreground: 222 49% 8%;    /* dark text on cyan for contrast */
  --ring:               187 81% 53%;

  /* Gold accent */
  --accent:             47 91% 53%;    /* #f5c518 */
  --accent-foreground:  222 49% 8%;
  --warning:            47 91% 53%;

  --success:            160 84% 45%;
  --destructive:        0 80% 60%;
  --border:             216 36% 20%;
  --input:              216 36% 20%;

  /* Re-tint glow shadows toward cyan + add a gold variant */
  --shadow-glow:    0 0 28px hsl(187 81% 53% / 0.35), 0 0 10px hsl(187 81% 53% / 0.25);
  --shadow-glow-lg: 0 0 44px hsl(187 81% 53% / 0.30), 0 0 90px hsl(187 81% 53% / 0.12);
  --shadow-glow-gold: 0 0 28px hsl(47 91% 53% / 0.40), 0 0 10px hsl(47 91% 53% / 0.28);

  /* Brand gradients */
  --gradient-brand:       linear-gradient(135deg, #22d3ee 0%, #67e8f9 45%, #f5c518 100%);
  --gradient-violet-rose: linear-gradient(135deg, #22d3ee 0%, #0e7490 100%);
  --gradient-text-value:  linear-gradient(135deg, #67e8f9 0%, #22d3ee 55%, #f5c518 100%);
}

/* Brand wordmark in navbar/footer → cyan→gold */
.brand,
.footer-brand .brand-logo {
  background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 55%, #f5c518 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Animated gradient hero text → cyan→white→gold */
.gradient-text {
  background: linear-gradient(135deg, #67e8f9 0%, #f8fafc 42%, #22d3ee 60%, #f5c518 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-text 5s linear infinite;
}

/* GOLD primary CTAs — the leaderboard-forward accent */
.btn-primary {
  background: linear-gradient(135deg, #f5c518 0%, #facc15 100%);
  color: #0a1020;
  font-weight: 700;
  box-shadow: var(--shadow-glow-gold);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #facc15 0%, #fde047 100%);
  box-shadow: 0 0 40px hsl(47 91% 53% / 0.55), 0 8px 20px -6px hsl(47 91% 53% / 0.5);
  transform: translateY(-1px);
}

/* Cyan outline / ghost secondary that reads as "spectate" */
.btn-outline {
  color: #22d3ee;
  border: 1px solid hsl(187 81% 53% / 0.45);
}
.btn-outline:hover {
  background: hsl(187 81% 53% / 0.10);
  border-color: hsl(187 81% 53% / 0.7);
  box-shadow: var(--shadow-glow);
}

/* CYAN GLOW flourish utility */
.glow-cyan { box-shadow: var(--shadow-glow); }
.glow-gold { box-shadow: var(--shadow-glow-gold); }
.text-cyan { color: #22d3ee; }
.text-gold { color: #f5c518; }

/* Hero blobs → cyan + gold over midnight */
.hero-blob-1 { background: radial-gradient(circle, hsl(187 81% 53% / 0.20) 0%, transparent 70%) !important; }
.hero-blob-2 { background: radial-gradient(circle, hsl(47 91% 53% / 0.14) 0%, transparent 70%) !important; }
.hero-blob-3 { background: radial-gradient(circle, hsl(187 81% 53% / 0.10) 0%, transparent 70%) !important; }

/* Hero cursor spotlight → cyan */
@media (min-width: 1024px) {
  .hero::after {
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,30%), hsl(187 81% 53% / 0.20), transparent 70%);
  }
}

/* Section / hero pills → cyan */
.hero-pill, .section-badge, .badge {
  color: #22d3ee;
  background: hsl(187 81% 53% / 0.10);
  border-color: hsl(187 81% 53% / 0.28);
}
.section-badge.amber, .badge.warning { color: #f5c518; background: hsl(47 91% 53% / 0.10); border-color: hsl(47 91% 53% / 0.28); }

/* Mode cards — cyan top accent line + gold hover */
.mode-card {
  position: relative; overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.mode-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #22d3ee, #f5c518);
  opacity: 0.85;
}
.mode-card:hover {
  transform: translateY(-4px);
  border-color: hsl(187 81% 53% / 0.45);
  box-shadow: 0 10px 30px -8px hsl(187 81% 53% / 0.35), var(--shadow-glow);
}
.mode-icon { font-size: 2rem; margin-bottom: 0.6rem; display: block; }

/* Leaderboard table — gold rank, cyan accents */
.lb-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lb-table th, .lb-table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
.lb-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); }
.lb-table td { font-size: 0.9rem; }
.lb-table tbody tr:hover { background: hsl(187 81% 53% / 0.06); }
.lb-rank { font-weight: 800; color: #f5c518; }
.lb-name { font-weight: 600; color: hsl(var(--foreground)); }
.lb-score { color: #22d3ee; font-weight: 700; }
.lb-empty { text-align: center; color: hsl(var(--muted-foreground)); padding: 1.5rem; font-size: 0.9rem; }

/* Code block for agent-builders section */
.code-block {
  background: linear-gradient(180deg, #0c1326 0%, #0a1020 100%);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #d1e8f0;
}
.code-block .c-cyan { color: #67e8f9; }
.code-block .c-gold { color: #f5c518; }
.code-block .c-mut  { color: #64748b; }

/* theme-color helper note: pages set <meta name="theme-color" content="#0a1020"> */