@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');
/* public/css/style.css - Premium Vanilla CSS Design System */
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-primary: #3b82f6; /* Fallback */
  --color-primary-hover: #2563eb;
  --color-card-bg: rgba(255, 255, 255, 0.8);
  --color-card-border: rgba(0, 0, 0, 0.05);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  
  /* Core Aesthetic Variables */
  --radius-avatar: 50%;
  --radius-badge: 9999px;
  --radius-card: var(--radius-xl);
  --shadow-card: var(--shadow-lg);
  --brand-logo-bg: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary, #06b6d4)));
  --brand-logo-text-fill: transparent;
  
  --container-width: 1200px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
  --color-bg: #0a0a0c; /* neutral dark near-black, zero blue bias */
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: rgba(18, 18, 22, 0.7); /* neutral dark card bg */
  --color-card-border: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family, 'Inter', sans-serif);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

a {
  text-decoration: none;
  color: inherit;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Layout Utilities */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.section {
  padding: 5rem 0;
  position: relative;
}
.section-sm { padding: 3rem 0; }
.section-lg { padding: 8rem 0; }

.section-bg-alt {
  background-color: rgba(0, 0, 0, 0.02);
}
html.dark .section-bg-alt {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   SECTION BACKGROUNDS — Each section has a unique tinted background
   All derived from --color-primary to maintain palette harmony
   ========================================================================== */

/* Pain / Danger sections — subtle red undertone */
.section-bg-pain {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #EF4444 4%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}
html.dark .section-bg-pain {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #EF4444 6%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}

/* Mechanism / Insight sections — primary tint */
.section-bg-primary-tint {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 5%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}
html.dark .section-bg-primary-tint {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}

/* Benefits / Positive sections — emerald undertone */
.section-bg-positive {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #10b981 4%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}
html.dark .section-bg-positive {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #10b981 7%, var(--color-bg)) 0%,
    var(--color-bg) 100%
  );
}

/* Offer sections — strong primary warm glow */
.section-bg-offer {
  background: radial-gradient(
    ellipse at 50% 100%,
    color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)) 0%,
    var(--color-bg) 70%
  );
}
html.dark .section-bg-offer {
  background: radial-gradient(
    ellipse at 50% 100%,
    color-mix(in srgb, var(--color-primary) 14%, var(--color-bg)) 0%,
    var(--color-bg) 70%
  );
}

/* ==========================================================================
   RICH TEXT UTILITIES — Inline formatting for copy variety
   Used directly in AI-generated HTML strings
   ========================================================================== */

/* Gradient text on key phrases */
.rte-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

/* Primary color text */
.rte-accent {
  color: var(--color-primary);
  font-weight: 700;
}

/* Danger/pain red text */
.rte-danger {
  color: #EF4444;
  font-weight: 700;
}

/* Success/benefit green text */
.rte-success {
  color: #10b981;
  font-weight: 700;
}

/* Highlight marker — translucent background behind text */
.rte-mark {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-weight: 700;
}

/* Danger mark — red highlight */
.rte-mark-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border-radius: 3px;
  padding: 0.05em 0.35em;
  font-weight: 700;
}

/* Underline accent with gradient */
.rte-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 700;
}

/* Italic emphasis with color */
.rte-em {
  font-style: italic;
  color: var(--color-primary);
  opacity: 0.9;
}

/* Strong emphasis — bold + uppercase tracking */
.rte-strong {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Strikethrough for before/after comparisons */
.rte-strike {
  text-decoration: line-through;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Full sentence gradient background banner (inline) */
.rte-banner {
  display: inline-block;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, transparent), color-mix(in srgb, var(--color-primary) 5%, transparent));
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.2em 0.75em;
  margin: 0.25em 0;
  font-style: italic;
}

/* New advanced rich text styles for AI copy mutations */

/* Animated Shimmer Text */
.rte-shimmer {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary, #a855f7) 25%, #ffffff 50%, var(--color-secondary, #a855f7) 75%, var(--color-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rteShine 3s linear infinite;
  font-weight: 800;
  display: inline-block;
}
@keyframes rteShine {
  to { background-position: 200% center; }
}

/* Neon Glow Effect */
.rte-glow {
  color: #ffffff !important;
  text-shadow: 0 0 5px var(--color-primary), 0 0 15px rgba(var(--color-primary-rgb, 59, 130, 246), 0.6);
  font-weight: 700;
}
html.light .rte-glow {
  color: var(--color-primary) !important;
  text-shadow: 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
}

/* Word Background Gradient */
.rte-bg-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, #a855f7));
  color: #ffffff !important;
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
  display: inline-block;
  font-weight: 700;
}

/* Neobrutalist 3D Highlight Box */
.rte-bg-neobru {
  background: #fde047 !important;
  color: #000000 !important;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  padding: 0.1em 0.45em;
  font-weight: 800;
  display: inline-block;
  transform: rotate(-1deg);
}

/* Letter Spacing expanded */
.rte-spaced {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.9em;
  font-weight: 700;
}

/* Handwritten Cursive Font swap */
.rte-handwritten {
  font-family: 'Caveat', 'Segoe Print', cursive !important;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-block;
  transform: rotate(-2deg);
}

/* Spoiler / Curio Blurred Text */
.rte-spoiler {
  filter: blur(5px);
  transition: filter 0.3s ease;
  cursor: help;
  display: inline-block;
}
.rte-spoiler:hover {
  filter: blur(0);
}

/* Double/Crossed Strikethrough */
.rte-strike-x {
  text-decoration: line-through;
  text-decoration-color: #EF4444;
  text-decoration-thickness: 3px;
  font-weight: 700;
}

/* Dynamic relative font sizing (1.25x larger) */
.rte-large {
  font-size: 1.25em;
  display: inline-block;
  line-height: 1.1;
}

/* Typewriter animation layout */
.rte-typewriter {
  border-right: 2px solid var(--color-primary);
  white-space: nowrap;
  animation: rteBlink 0.75s step-end infinite;
  display: inline-block;
}
@keyframes rteBlink {
  from, to { border-color: transparent }
  50% { border-color: var(--color-primary); }
}

/* Scroll / Hover Reveal Text contrast */
.rte-scroll-reveal {
  background: linear-gradient(to right, var(--color-text) 50%, var(--color-text-muted) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position 0.5s ease;
  display: inline-block;
}
.rte-scroll-reveal:hover {
  background-position: 0 0;
}

/* Hover Background Draw (Handdrawn painting effect) */
.rte-draw {
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, color-mix(in srgb, var(--color-primary) 18%, transparent) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.3s ease-in-out;
  font-weight: 700;
  display: inline-block;
  padding: 0 0.25em;
}
.rte-draw:hover {
  background-size: 100% 100%;
}

/* Drop Cap styling for editorial text */
.rte-dropcap::first-letter {
  font-size: 3.5em;
  font-weight: 900;
  float: left;
  line-height: 0.8;
  margin-right: 0.1em;
  color: var(--color-primary);
  font-family: var(--font-heading);
}

/* Side Note margin styling */
.rte-sidenote {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-secondary, #a855f7);
  padding-left: 0.5rem;
  margin: 0.5rem 0;
  display: block;
  font-style: italic;
  font-weight: 400;
}

/* Bento text box formatting */
.rte-bento {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}
.rte-bento:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-md);
}

/* Responsive Hide Desktop Helper */
.hide-desktop {
  display: block;
}
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Inline Explanatory Tooltips */
.rte-tooltip {
  position: relative;
  border-bottom: 1px dotted var(--color-primary);
  cursor: help;
  display: inline-block;
}
.rte-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(15, 23, 42, 0.95);
  color: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 500;
}
.rte-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Copy Auto-correction inline effect */
.rte-correct {
  text-decoration: line-through;
  text-decoration-color: #EF4444;
  text-decoration-thickness: 2px;
  color: #EF4444;
  margin-right: 0.25em;
  display: inline-block;
}
.rte-correct::after {
  content: attr(data-correction);
  text-decoration: none;
  color: #10B981;
  font-weight: 700;
  margin-left: 0.5em;
  display: inline-block;
  animation: rteGlowPulse 2s infinite alternate;
}
@keyframes rteGlowPulse {
  from { opacity: 0.8; }
  to { opacity: 1; text-shadow: 0 0 4px rgba(16, 185, 129, 0.2); }
}

/* Micro inline security trust badges */
.rte-micro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  margin: 0.15rem;
  vertical-align: middle;
}
.rte-micro-badge.icon-secure {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  color: #10B981;
}
.rte-micro-badge.icon-secure::before {
  content: '🛡️';
}
.rte-micro-badge.icon-lock {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  color: #F59E0B;
}
.rte-micro-badge.icon-lock::before {
  content: '🔒';
}
.rte-micro-badge.icon-br::before {
  content: '🇧🇷';
}
.rte-micro-badge.icon-bolt::before {
  content: '⚡';
}

/* Typography */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.heading-1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.heading-2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.heading-3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.subtitle {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-bottom: 2rem;
  max-width: 700px;
}
.subtitle.mx-auto { margin-inline: auto; }

/* Grid System */
.grid {
  display: grid;
  gap: 2rem;
}
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Glassmorphism & Cards */
.card-glass {
  background: var(--color-card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-glass:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-text, #ffffff) !important;
  box-shadow: 0 4px 14px 0 rgba(var(--color-primary-rgb, 59, 130, 246), 0.39);
}

/* Gradient button when cta_gradient is set */
.btn-primary.btn-gradient {
  background: var(--cta-gradient, linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)));
  background-color: transparent;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);
}

.btn-primary.btn-gradient:hover {
  background: var(--cta-gradient-hover, linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)));
  background-color: transparent;
  filter: brightness(1.1);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-full {
  width: 100%;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

/* Forms */
.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
html.dark .form-control {
  background-color: rgba(0, 0, 0, 0.2);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

/* Specific Component Layouts */
.hero-grid {
  display: grid;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-grid.two-cols {
    grid-template-columns: 1fr 1fr;
  }
  .hero-grid.two-cols-reverse {
    grid-template-columns: 1fr 1fr;
  }
  .hero-grid.two-cols-reverse .hero-content {
    order: 2;
  }
  .hero-grid.two-cols-reverse .card-glass {
    order: 1;
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Center alignment for hero_centered_clean */
.hero-grid:not(.two-cols):not(.two-cols-reverse) .hero-content {
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* ==========================================================================
   TRUST BAR / SOCIAL PROOF STRIP
   ========================================================================== */
.trust-bar {
  padding: 1.75rem 0;
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  background: var(--color-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent);
  pointer-events: none;
}
.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 100px;
}
.trust-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.trust-number .trust-plus {
  color: var(--color-primary);
  font-size: 1rem;
}
.trust-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.trust-divider {
  width: 1px;
  height: 40px;
  background: var(--color-card-border);
}
@media (max-width: 600px) {
  .trust-divider { display: none; }
  .trust-bar-inner { gap: 1.5rem 2rem; }
}

/* ==========================================================================
   HERO IMAGE GLOW WRAPPER
   ========================================================================== */
.hero-img-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
}
.hero-img-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  z-index: 0;
  opacity: 0.5;
  filter: blur(16px);
  transform: scale(0.97);
  transition: opacity 0.3s, filter 0.3s;
}
.hero-img-wrapper:hover::before {
  opacity: 0.7;
  filter: blur(24px);
}
.hero-img-wrapper img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  display: block;
}

/* ==========================================================================
   GRADIENT HEADLINE TEXT
   ========================================================================== */
.headline-gradient {
  background: linear-gradient(135deg, var(--color-text), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   CARD ICONS (Pain Points & Benefits)
   ========================================================================== */
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.card-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.card-icon-primary {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* ==========================================================================
   FLOATING STICKY CTA BAR
   ========================================================================== */
.floating-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 1.5rem;
  background: rgba(var(--color-bg-rgb, 255, 255, 255), 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}
html.dark .floating-cta {
  background: rgba(15, 23, 42, 0.94);
}
.floating-cta.visible {
  transform: translateY(0);
}
.floating-cta-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .floating-cta-text { display: none; }
  .floating-cta { justify-content: center; }
}

/* ==========================================================================
   SECTION GRADIENT DIVIDERS
   ========================================================================== */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.3;
  margin: 0;
}

/* ==========================================================================
   TESTIMONIAL CARDS
   ========================================================================== */
.testimonial-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   OFFER PRICING CARD
   ========================================================================== */
.offer-card {
  transition: box-shadow var(--transition-normal);
}
.offer-card:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent), var(--shadow-xl);
}

/* Header & Navbar */
.navbar {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-card-border);
  background-color: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(var(--color-bg-rgb, 255, 255, 255), 0.8);
}
html.dark .navbar {
  background-color: rgba(15, 23, 42, 0.8);
}
.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Footer */
.footer {
  padding: 3rem 0;
  text-align: center;
  border-top: 1px solid var(--color-card-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}

/* Ensure the hero headline and subline don't inherit a class that overwrites */
.hero .headline {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}
.hero .subline {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 580px;
}

/* ----- HERO BG: GLASSMORPHISM ----- */
.hero-bg-glassmorphism {
  background: transparent;
}
.hero-bg-glassmorphism::before,
.hero-bg-glassmorphism::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  animation: blobFloat 12s ease-in-out infinite;
  opacity: 0.35;
}
.hero-bg-glassmorphism::before {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  background: var(--color-primary);
  animation-delay: 0s;
}
.hero-bg-glassmorphism::after {
  width: 350px;
  height: 350px;
  bottom: -50px;
  left: -80px;
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-secondary));
  animation-delay: -4s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -30px) scale(1.05); }
  66% { transform: translate(-15px, 20px) scale(0.95); }
}
.hero-bg-glassmorphism .hero-grid { position: relative; z-index: 1; }

/* ----- HERO BG: LIQUID GLASS ----- */
.hero-bg-liquid_glass {
  background: var(--color-bg);
}
.hero-bg-liquid_glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--color-primary) 50%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary)) 0%, transparent 40%),
    radial-gradient(circle at 55% 90%, color-mix(in srgb, var(--color-secondary) 15%, transparent) 0%, transparent 35%);
  animation: liquidShift 18s ease infinite alternate;
}
@keyframes liquidShift {
  0%  { opacity: 0.7; background-position: 0% 0%; }
  50% { opacity: 1;   background-position: 100% 50%; }
  100%{ opacity: 0.7; background-position: 0% 100%; }
}
.hero-bg-liquid_glass .hero-grid { position: relative; z-index: 1; }

/* ----- HERO BG: NEO-BRUTALISM ----- */
.hero-bg-neobrutalism {
  background: var(--color-bg);
  border-bottom: 4px solid var(--color-text);
}
html.dark .hero-bg-neobrutalism {
  border-bottom: 4px solid var(--color-primary);
}
.hero-bg-neobrutalism::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 20px,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 21px
  );
  z-index: 0;
}
.hero-bg-neobrutalism .hero-grid { position: relative; z-index: 1; }

/* ----- HERO BG: CLAYMORPHISM ----- */
.hero-bg-claymorphism {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)) 0%,
    var(--color-bg) 60%
  );
}
.hero-bg-claymorphism::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  top: -150px;
  right: -150px;
  filter: blur(60px);
  z-index: 0;
  animation: morphBlob 15s ease-in-out infinite;
}
@keyframes morphBlob {
  0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
  25% { border-radius: 30% 60% 40% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 50% 50% 30% 70% / 30% 50% 50% 70%; }
  75% { border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; }
}
.hero-bg-claymorphism .hero-grid { position: relative; z-index: 1; }

/* ----- HERO BG: MINIMALISM ----- */
.hero-bg-minimalism {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-card-border);
}
.hero-bg-minimalism .hero-grid { position: relative; z-index: 1; }

/* Hero Centered Layout */
.hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Section Accent (using brand color as subtle accent) */
.section-accent {
  position: relative;
}
.section-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.5;
}


/* ==========================================================================
   DESIGN THEME BODY BACKGROUNDS — Each theme creates a visually distinct page
   All use --color-primary (= cta_bg) so every palette looks different too.
   ========================================================================== */

/* 1. MINIMALISM — pure, clean, almost no texture */
body.theme-minimalism_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.08);
  background-color: var(--color-bg);
  background-image: none;
}
body.theme-minimalism_dark {
  --color-bg: #08080a;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: #08080a;
  background-color: #08080a; /* true neutral near-black, zero color bias */
  --color-card-border: rgba(255, 255, 255, 0.07);
  background-image: none;
}
body.theme-minimalism_light .card-glass, 
body.theme-minimalism_dark .card-glass, 
body.theme-minimalism_light .navbar,
body.theme-minimalism_dark .navbar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 4px;
  background: var(--color-card-bg);
}
body.theme-minimalism_light .btn,
body.theme-minimalism_dark .btn { border-radius: 4px; }
body.theme-minimalism_light .section-divider,
body.theme-minimalism_dark .section-divider { display: none; }

/* 2. NEO-BRUTALISM — harsh, high-contrast grid lines */
body.theme-neobrutalism_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: #000000;
  --radius-avatar: 0px;
  --radius-badge: 0px;
  --radius-card: 0px;
  --shadow-card: 6px 6px 0px var(--color-card-border);
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-color: var(--color-bg);
}
body.theme-neobrutalism_dark {
  --color-bg: #0a0a0a;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: #0a0a0a;
  background-color: #0a0a0a; /* true charcoal black, no color bias */
  --color-card-border: #ffffff;
  --radius-avatar: 0px;
  --radius-badge: 0px;
  --radius-card: 0px;
  --shadow-card: 6px 6px 0px var(--color-card-border);
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary) 15%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 15%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
}
body.theme-neobrutalism_light .card-glass,
body.theme-neobrutalism_dark .card-glass,
body.theme-neobrutalism_light .form-control,
body.theme-neobrutalism_dark .form-control {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 3px solid var(--color-card-border);
  border-radius: 0;
  box-shadow: 6px 6px 0px var(--color-card-border);
  transition: transform 0.2s, box-shadow 0.2s;
}
body.theme-neobrutalism_light .card-glass:hover,
body.theme-neobrutalism_dark .card-glass:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px var(--color-card-border);
}
body.theme-neobrutalism_light .btn-primary,
body.theme-neobrutalism_dark .btn-primary {
  border: 3px solid var(--color-card-border);
  border-radius: 0;
  box-shadow: 5px 5px 0px var(--color-card-border);
  font-weight: 900;
  color: var(--color-bg) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.theme-neobrutalism_light .btn-primary:hover,
body.theme-neobrutalism_dark .btn-primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px var(--color-card-border);
}
body.theme-neobrutalism_light .section-divider,
body.theme-neobrutalism_dark .section-divider { display: none; }

/* 3. GLASSMORPHISM — animated radial blobs using brand color */
body.theme-glassmorphism_light,
body.theme-glassmorphism_dark {
  background-color: var(--color-bg);
  background-image: none;
  position: relative;
}
body.theme-glassmorphism_light::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.theme-glassmorphism_dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
@keyframes glassBodyAnim {
  0%   { opacity: 0.8; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.05) rotate(2deg); }
  100% { opacity: 0.7; transform: scale(0.98) rotate(-1deg); }
}

/* 4. CLAYMORPHISM — soft pastel gradient with blob, fully driven by --color-primary */
body.theme-claymorphism_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: rgba(255, 255, 255, 0.8);
  --color-card-border: rgba(0, 0, 0, 0.05);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse at 70% 10%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 40%);
}
body.theme-claymorphism_dark {
  --color-bg: #09080e;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: #121216;
  background-color: #09080e; /* neutral dark, no color bias */
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-image:
    radial-gradient(ellipse at 70% 10%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 45%);
}
body.theme-claymorphism_light .card-glass,
body.theme-claymorphism_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 28px;
  border: none;
}
body.theme-claymorphism_light .card-glass {
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.12),
              inset -4px -4px 10px rgba(0, 0, 0, 0.06),
              inset 4px 4px 10px rgba(255, 255, 255, 0.85);
}
body.theme-claymorphism_dark .card-glass {
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4),
              inset -4px -4px 10px rgba(0, 0, 0, 0.25),
              inset 4px 4px 10px rgba(255, 255, 255, 0.04);
}
body.theme-claymorphism_light .btn,
body.theme-claymorphism_dark .btn {
  border-radius: 9999px;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.12), inset -3px -3px 8px rgba(0,0,0,0.1), inset 3px 3px 8px rgba(255,255,255,0.25);
}

/* 5. LIQUID GLASS — full-screen animated mesh gradient */
body.theme-liquid_glass_light,
body.theme-liquid_glass_dark {
  background-color: var(--color-bg);
  background-attachment: fixed;
  position: relative;
}
body.theme-liquid_glass_light::before,
body.theme-liquid_glass_dark::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, color-mix(in srgb, var(--color-primary) 20%, var(--color-secondary)) 0%, transparent 35%),
    radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--color-primary) 15%, var(--color-secondary)) 0%, transparent 30%);
  animation: liquidMesh 25s ease infinite alternate;
}
body.theme-liquid_glass_light::before {
  opacity: 0.35;
}
body.theme-liquid_glass_dark::before {
  opacity: 0.25;
}
@keyframes liquidMesh {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}
body.theme-liquid_glass_light .card-glass,
body.theme-liquid_glass_dark .card-glass {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
body.theme-liquid_glass_light .btn-primary,
body.theme-liquid_glass_dark .btn-primary {
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
}

/* 6. PREMIUM CYBER — High-tech, futuristic dark and light themes */
body.theme-premium_cyber_dark {
  --color-bg: #030712;
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-card-bg: rgba(255, 255, 255, 0.03);
  --color-card-border: rgba(255, 255, 255, 0.08);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle at top, #0b0f19, #030712) !important;
}
body.theme-premium_cyber_light {
  --color-bg: #f1f5f9;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-card-bg: rgba(255, 255, 255, 0.7);
  --color-card-border: rgba(0, 0, 0, 0.08);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  background-color: var(--color-bg);
  background-image: radial-gradient(circle at top, #f8fafc, #f1f5f9) !important;
}
body.theme-premium_cyber_dark .card-glass,
body.theme-premium_cyber_light .card-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  border: 1px solid var(--color-card-border);
  background: var(--color-card-bg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 80px rgba(16, 185, 129, 0.05);
}
body.theme-premium_cyber_light .card-glass {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05), 0 0 80px rgba(16, 185, 129, 0.05);
}
body.theme-premium_cyber_dark .btn-primary,
body.theme-premium_cyber_light .btn-primary {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-premium_cyber_dark .btn-primary:hover,
body.theme-premium_cyber_light .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4), 0 0 15px rgba(16, 185, 129, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}
body.theme-premium_cyber_dark h1 span.highlight,
body.theme-premium_cyber_light h1 span.highlight {
  background: linear-gradient(90deg, #10b981, #34d399);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-premium_cyber_light h1 span.highlight {
  background: linear-gradient(90deg, #10b981, #059669);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-premium_cyber_dark .top-tag,
body.theme-premium_cyber_light .top-tag {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* 7. LOW FI TRUST — Ultra clean, solid high-converting style */
body.theme-low_fi_trust_dark {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-text-muted: #a0a0a0;
  --color-card-bg: #0d0d0d;
  --color-card-border: #222222;
  --font-heading: 'Arial', sans-serif;
  --font-body: 'Arial', sans-serif;
  --radius-avatar: 8px;
  --radius-badge: 4px;
  --radius-card: 8px;
  --shadow-card: none;
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
body.theme-low_fi_trust_light {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #555555;
  --color-card-bg: #fafafa;
  --color-card-border: #e0e0e0;
  --font-heading: 'Arial', sans-serif;
  --font-body: 'Arial', sans-serif;
  --radius-avatar: 8px;
  --radius-badge: 4px;
  --radius-card: 8px;
  --shadow-card: none;
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
body.theme-low_fi_trust_dark .card-glass,
body.theme-low_fi_trust_light .card-glass {
  border-radius: 8px;
  border: 1px solid var(--color-card-border);
  background: var(--color-card-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.theme-low_fi_trust_dark .btn-primary,
body.theme-low_fi_trust_light .btn-primary {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  border-radius: 10px;
  background: #00c853 !important;
  color: #ffffff !important;
  border: 2px solid #00e676;
  text-align: center;
  box-shadow: none !important;
  transition: background-color 0.2s, border-color 0.2s;
}
body.theme-low_fi_trust_light .btn-primary {
  border: 2px solid #00a543;
}
body.theme-low_fi_trust_dark .btn-primary:hover {
  background-color: #00b0ff !important;
  border-color: #40c4ff !important;
}
body.theme-low_fi_trust_light .btn-primary:hover {
  background-color: #0091ea !important;
  border-color: #00b0ff !important;
}
body.theme-low_fi_trust_dark .highlight-green,
body.theme-low_fi_trust_light .highlight-green {
  color: #00e676;
}
body.theme-low_fi_trust_light .highlight-green {
  color: #008f39;
}
body.theme-low_fi_trust_dark .urgency-red-box,
body.theme-low_fi_trust_light .urgency-red-box {
  background-color: #d32f2f;
  color: #ffffff;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin: 20px auto;
  width: 100%;
  max-width: 350px;
  text-transform: uppercase;
}
body.theme-low_fi_trust_dark .urgency-red-box span,
body.theme-low_fi_trust_light .urgency-red-box span {
  font-size: 12px;
  font-weight: normal;
  display: block;
  margin-top: 4px;
  text-transform: none;
  opacity: 0.9;
}

/* 8. RETRO NOTEPAD — Web 1.0/brutalist notepad design */
body.theme-retro_notepad_dark {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-text-muted: #a0a0a0;
  --color-card-bg: #0d0d0d;
  --color-card-border: #ff0000;
  --font-heading: 'Times New Roman', Times, serif;
  --font-body: 'Times New Roman', Times, serif;
  --radius-avatar: 0px;
  --radius-badge: 0px;
  --radius-card: 0px;
  --shadow-card: none;
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
body.theme-retro_notepad_light {
  --color-bg: #f0ede4;
  --color-text: #000000;
  --color-text-muted: #555555;
  --color-card-bg: #fffffc;
  --color-card-border: #ff0000;
  --font-heading: 'Times New Roman', Times, serif;
  --font-body: 'Times New Roman', Times, serif;
  --radius-avatar: 0px;
  --radius-badge: 0px;
  --radius-card: 0px;
  --shadow-card: 5px 5px 0px #cbc7bb;
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-color: var(--color-bg) !important;
  background-image: none !important;
}
body.theme-retro_notepad_dark .card-glass,
body.theme-retro_notepad_light .card-glass {
  border: 3px dashed var(--color-card-border) !important;
  border-radius: 0 !important;
  background: var(--color-card-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.theme-retro_notepad_light .card-glass {
  box-shadow: 5px 5px 0px #cbc7bb !important;
}
body.theme-retro_notepad_dark .btn-primary,
body.theme-retro_notepad_light .btn-primary {
  display: block;
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  border-radius: 0 !important;
  background-color: #00ff00 !important;
  color: #000000 !important;
  font-size: 1.3rem;
  border: 3px solid #ffffff !important;
  box-shadow: none !important;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}
body.theme-retro_notepad_light .btn-primary {
  border: 3px solid #000000 !important;
}
body.theme-retro_notepad_dark .btn-primary:hover,
body.theme-retro_notepad_light .btn-primary:hover {
  background-color: #ffff00 !important;
  color: #ff0000 !important;
  text-decoration: underline !important;
}
body.theme-retro_notepad_dark .highlight-yellow,
body.theme-retro_notepad_light .highlight-yellow {
  background-color: #ffff00;
  color: #000000;
  padding: 2px 5px;
  font-weight: bold;
}
body.theme-retro_notepad_dark .highlight-green-underline {
  color: #00ff00;
  text-decoration: underline;
}
body.theme-retro_notepad_light .highlight-green-underline {
  color: #008000;
  text-decoration: underline;
}
body.theme-retro_notepad_dark .retro-alert-box,
body.theme-retro_notepad_light .retro-alert-box {
  background-color: #ff0000;
  color: #ffffff;
  border: 4px double #ffffff;
  padding: 15px;
  font-size: 20px;
  font-weight: bold;
  margin: 20px auto;
  max-width: 320px;
}
body.theme-retro_notepad_light .retro-alert-box {
  border: 4px double #000000;
}

/* Background overrides for heroes under these design trends */
.hero-bg-premium_cyber_dark,
.hero-bg-premium_cyber_light,
.hero-bg-low_fi_trust_dark,
.hero-bg-low_fi_trust_light,
.hero-bg-retro_notepad_dark,
.hero-bg-retro_notepad_light {
  background: transparent !important;
}
.hero-bg-premium_cyber_dark::before,
.hero-bg-premium_cyber_dark::after,
.hero-bg-premium_cyber_light::before,
.hero-bg-premium_cyber_light::after,
.hero-bg-low_fi_trust_dark::before,
.hero-bg-low_fi_trust_dark::after,
.hero-bg-low_fi_trust_light::before,
.hero-bg-low_fi_trust_light::after,
.hero-bg-retro_notepad_dark::before,
.hero-bg-retro_notepad_dark::after,
.hero-bg-retro_notepad_light::before,
.hero-bg-retro_notepad_light::after {
  display: none !important;
}


/* ==========================================================================
   HERO TINT SUPPORT
   Each breed passes --color-hero-tint via inline style on body/section.
   All hero backgrounds pick it up for their orbs and gradients.
   ========================================================================== */
:root { --color-hero-tint: rgba(99,102,241,0.12); }

.hero-bg-glassmorphism::before {
  background: var(--color-hero-tint, var(--color-primary));
}
.hero-bg-glassmorphism::after {
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-secondary));
  opacity: 0.28;
}
.hero-bg-liquid_glass::before {
  background:
    radial-gradient(circle at 20% 30%, var(--color-hero-tint, color-mix(in srgb, var(--color-primary) 50%, transparent)) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary)) 0%, transparent 40%),
    radial-gradient(circle at 55% 90%, color-mix(in srgb, var(--color-secondary) 10%, transparent) 0%, transparent 35%);
}
.hero-bg-claymorphism {
  background: linear-gradient(135deg,
    var(--color-hero-tint, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg))) 0%,
    var(--color-bg) 60%
  );
}

/* ==========================================================================
   MOBILE RESPONSIVE — Comprehensive fixes
   ========================================================================== */

/* Mobile: < 640px */
@media (max-width: 640px) {
  /* Hero */
  .hero { padding: 5rem 0 2.5rem; }
  .headline { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; line-height: 1.15 !important; }
  .subline  { font-size: 1rem !important; }

  /* Split hero becomes stacked */
  .hero-grid.two-cols,
  .hero-grid.two-cols-reverse {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hero-grid.two-cols-reverse > *:first-child { order: 2; }
  .hero-grid.two-cols-reverse > *:last-child  { order: 1; }

  /* Grid overrides */
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .grid-4 { grid-template-columns: 1fr !important; }

  /* Sections */
  .section { padding: 3rem 0 !important; }
  .section-lg { padding: 4rem 0 !important; }
  .heading-2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; margin-bottom: 1rem !important; }
  .heading-3 { font-size: 1.1rem !important; }

  /* Cards */
  .card-glass { padding: 1.25rem !important; }

  /* Trust bar */
  .trust-bar-inner { flex-direction: column !important; gap: 1.5rem !important; text-align: center; }
  .trust-bar-divider { display: none !important; }

  /* Author section: stacked */
  #author .card-glass {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }

  /* How it works: connector line hidden on mobile */
  #how-it-works [style*="position: absolute; top: 3rem"] { display: none !important; }

  /* Offer card */
  .offer-card { padding: 1.5rem 1.25rem !important; }

  /* Floating CTA */
  .floating-cta {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1rem !important;
    text-align: center;
  }
  .floating-cta-text { display: none !important; }

  /* Navbar */
  .navbar-container { flex-wrap: wrap; gap: 0.5rem; }

  /* Countdown */
  [data-countdown] { flex-direction: column !important; gap: 0.25rem !important; }

  /* O Criador section overrides */
  .author-split-grid-left,
  .author-split-grid-right,
  .author-bento-grid,
  .author-editorial-grid,
  .author-neobrutalist-grid,
  .author-glowing-grid,
  .author-signature-grid,
  .author-three-column-grid,
  .author-overlay-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 2rem 1.25rem !important;
  }
  .author-bento-grid > div {
    grid-column: span 1 !important;
  }
  .author-split-grid-right > *:first-child,
  .author-signature-grid > *:first-child {
    order: 2 !important;
  }
  .author-split-grid-right > *:last-child,
  .author-signature-grid > *:last-child {
    order: 1 !important;
  }
  .author-timeline-journey {
    padding: 0 1rem !important;
  }
  .author-timeline-journey > div {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: left !important;
  }
  .author-timeline-journey > div > div {
    text-align: left !important;
    padding: 0 !important;
  }
  .author-timeline-journey [style*="position: absolute; left: 50%"] {
    display: none !important;
  }
  .author-timeline-journey [style*="background: linear-gradient(180deg"] {
    display: none !important;
  }
  .author-editorial-grid {
    padding: 2rem 1.25rem !important;
  }
  .author-editorial-grid > *:last-child {
    max-width: 100% !important;
  }
  .author-editorial-grid img {
    height: auto !important;
    max-height: 250px !important;
  }

  /* O Método section overrides */
  .mechanism-split-grid,
  .mechanism-floating-grid,
  .mechanism-glass-grid,
  .mechanism-checklist-grid,
  .mechanism-scientific-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .mechanism-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .mechanism-bento-grid > div {
    grid-column: span 1 !important;
  }
  .mechanism-tabs-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .mechanism-scientific-grid {
    border-left: none !important;
    padding-left: 0 !important;
  }
  .mechanism-scientific-grid > div:last-child {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--color-card-border) !important;
    padding-top: 2rem !important;
  }
  .brutalist-card {
    padding: 1.5rem !important;
  }

  /* O Garantia section overrides */
  .guarantee-neobrutalist,
  .guarantee-glassmorphism,
  .guarantee-showcase-grid,
  .guarantee-checklist,
  .guarantee-floating-shield,
  .guarantee-two-column,
  .guarantee-split-seal {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 2rem 1.25rem !important;
    text-align: center !important;
  }
  .guarantee-neobrutalist > div,
  .guarantee-glassmorphism > div,
  .guarantee-showcase-grid > div,
  .guarantee-checklist > div,
  .guarantee-floating-shield > div,
  .guarantee-two-column > div,
  .guarantee-split-seal > div {
    text-align: center !important;
  }
  .guarantee-showcase-badges {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .guarantee-showcase-badges > div {
    grid-column: span 1 !important;
  }
  .guarantee-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .guarantee-bento-grid > div {
    grid-column: span 1 !important;
  }
  .guarantee-two-column-left {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--color-card-border) !important;
    padding-bottom: 2rem !important;
  }
  .guarantee-seal {
    margin: 0 auto !important;
  }

  /* Benefícios section overrides */
  .benefits-split-list {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Pain Points section overrides */
  .pain-split-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* Tablet: 640px - 768px */
@media (min-width: 640px) and (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .headline { font-size: clamp(2rem, 5vw, 3rem) !important; }
  #author .card-glass {
    grid-template-columns: 120px 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Touch device hover fix */
@media (hover: none) {
  .card-glass:hover { transform: none !important; }
  .btn:hover { transform: none !important; }
}

/* ==========================================================================
   NOVAS ESCOLAS DE ARTE — 6 novos temas de design
   Filosofia: o TEMA controla o estilo/linguagem. A COR vem de --color-primary.
   ========================================================================== */

/* 6. AURORA — Impressionismo Nórdico
   Luz que vaza pelo céu. Gradientes respiram como aurora boreal. */
body.theme-aurora_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: rgba(255, 255, 255, 0.8);
  --color-card-border: rgba(0, 0, 0, 0.05);
  background-color: var(--color-bg);
  position: relative;
}
body.theme-aurora_dark {
  --color-bg: #050508;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: #0a0a0f;
  background-color: #050508;
  position: relative;
}
body.theme-aurora_light::before,
body.theme-aurora_dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% -10%, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse at 85% -5%,  color-mix(in srgb, var(--color-primary) 18%, var(--color-secondary)) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--color-primary) 8%, transparent)  0%, transparent 40%);
  filter: blur(45px);
  animation: auroraShift 18s ease-in-out infinite alternate;
  opacity: 0.75;
}
@keyframes auroraShift {
  0%   { transform: scaleX(1)    scaleY(1);    opacity: 0.6; }
  33%  { transform: scaleX(1.1)  scaleY(1.25); opacity: 0.85; }
  66%  { transform: scaleX(0.95) scaleY(1.1);  opacity: 0.65; }
  100% { transform: scaleX(1.08) scaleY(0.92); opacity: 0.75; }
}
body.theme-aurora_light .card-glass,
body.theme-aurora_dark .card-glass {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, rgba(255,255,255,0.07));
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
}
body.theme-aurora_light .btn-primary,
body.theme-aurora_dark .btn-primary {
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
body.theme-aurora_light .btn-primary:hover,
body.theme-aurora_dark .btn-primary:hover {
  box-shadow: 0 0 35px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* 7. CYBERPUNK — Futurismo Digital
   Escuridão máxima + luz neon cirúrgica. Blade Runner em CSS. */
body.theme-cyberpunk {
  background-color: var(--color-bg);
  position: relative;
}
html.dark body.theme-cyberpunk {
  background-color: #000000;
}
body.theme-cyberpunk::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
}
body.theme-cyberpunk::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 35vh;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 70%);
}
body.theme-cyberpunk .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 12%, transparent),
              inset 0 0 18px rgba(0,0,0,0.6);
  border-radius: 4px;
}
body.theme-cyberpunk .btn-primary {
  background: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 50%, transparent),
              inset 0 0 14px color-mix(in srgb, var(--color-primary) 8%, transparent);
  text-shadow: 0 0 8px var(--color-primary);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}
body.theme-cyberpunk .btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 65%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
body.theme-cyberpunk h1, body.theme-cyberpunk h2 {
  text-shadow: 0 0 22px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
body.theme-cyberpunk .navbar {
  background: rgba(0,0,0,0.95) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}

/* 7a. SYNTHWAVE — Anos 80, Pôr do Sol e Retro Ciber */
body.theme-synthwave_dark {
  --color-bg: #0c0216;
  --color-text: #fdf2f8;
  --color-text-muted: var(--color-secondary);
  --color-card-bg: rgba(22, 4, 38, 0.85);
  --color-card-border: color-mix(in srgb, var(--color-primary) 35%, transparent);
  background-color: #0c0216;
}
body.theme-synthwave_dark .card-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 0 25px color-mix(in srgb, var(--color-primary) 15%, transparent), inset 0 0 10px rgba(0,0,0,0.5);
  border-radius: 12px;
}
body.theme-synthwave_dark .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 60%, transparent), 0 5px 15px color-mix(in srgb, var(--color-secondary) 40%, transparent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 8px;
}
body.theme-synthwave_dark .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px color-mix(in srgb, var(--color-primary) 80%, transparent), 0 8px 20px color-mix(in srgb, var(--color-secondary) 60%, transparent);
}
body.theme-synthwave_dark h1, body.theme-synthwave_dark h2 {
  text-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 60%, transparent), 0 0 30px color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: linear-gradient(to bottom, #ffffff, var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-synthwave_dark .navbar {
  background: rgba(12, 2, 22, 0.9) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
}

/* 7b. TERMINAL NEON — Hacker da Matrix */
body.theme-terminal_neon_dark {
  --color-bg: #000000;
  --color-text: var(--color-primary);
  --color-text-muted: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --color-card-bg: #050505;
  --color-card-border: var(--color-primary);
  background-color: #000000;
  background-image: 
    linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  font-family: 'Fira Code', 'Courier New', Courier, monospace !important;
}
body.theme-terminal_neon_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 0 8px color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 0;
}
body.theme-terminal_neon_dark .btn-primary {
  background: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0;
}
body.theme-terminal_neon_dark .btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  box-shadow: 0 0 25px var(--color-primary);
}
body.theme-terminal_neon_dark h1, body.theme-terminal_neon_dark h2 {
  text-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 50%, transparent);
  color: var(--color-primary) !important;
}
body.theme-terminal_neon_dark .navbar {
  background: #000000 !important;
  border-bottom: 2px solid var(--color-primary) !important;
}

/* 7c. NEBULA NEON — Espaço profundo e luzes tóxicas */
body.theme-nebula_neon_dark {
  --color-bg: #05030a;
  --color-text: #f3e8ff;
  --color-text-muted: var(--color-secondary);
  --color-card-bg: rgba(13, 8, 24, 0.8);
  --color-card-border: color-mix(in srgb, var(--color-primary) 30%, transparent);
  background-color: #05030a;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 60%);
}
body.theme-nebula_neon_dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: 
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--color-secondary) 12%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 45%);
}
body.theme-nebula_neon_dark .card-glass {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 0 40px color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: 16px;
}
body.theme-nebula_neon_dark .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 0 20px color-mix(in srgb, var(--color-secondary) 30%, transparent);
  border-radius: 50px;
}
body.theme-nebula_neon_dark .btn-primary:hover {
  transform: scale(1.02);
  box-shadow: 0 0 35px color-mix(in srgb, var(--color-primary) 60%, transparent), 0 0 35px color-mix(in srgb, var(--color-secondary) 50%, transparent);
}
body.theme-nebula_neon_dark h1, body.theme-nebula_neon_dark h2 {
  text-shadow: 0 0 25px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
body.theme-nebula_neon_dark .navbar {
  background: rgba(5, 3, 10, 0.85) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

/* 7d. ACID TECH — Alta voltagem e minimalismo brutalista */
body.theme-acid_tech_dark {
  --color-bg: #090a0f;
  --color-text: #f8fafc;
  --color-text-muted: var(--color-primary);
  --color-card-bg: #11131c;
  --color-card-border: var(--color-primary);
  background-color: #090a0f;
}
body.theme-acid_tech_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  box-shadow: 8px 8px 0px #000000;
  border-radius: 4px;
}
body.theme-acid_tech_dark .btn-primary {
  background: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  color: #000000 !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 4px;
}
body.theme-acid_tech_dark .btn-primary:hover {
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 25px var(--color-primary);
}
body.theme-acid_tech_dark h1, body.theme-acid_tech_dark h2 {
  text-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
body.theme-acid_tech_dark .navbar {
  background: #090a0f !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}

/* 7e. BLOOD NEON — Laser vermelho do submundo */
body.theme-blood_neon_dark {
  --color-bg: #070203;
  --color-text: #fee2e2;
  --color-text-muted: var(--color-primary);
  --color-card-bg: #0f0507;
  --color-card-border: var(--color-primary);
  background-color: #070203;
}
body.theme-blood_neon_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-radius: 6px;
}
body.theme-blood_neon_dark .btn-primary {
  background: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-primary) 50%, transparent);
  text-transform: uppercase;
  font-weight: 800;
  border-radius: 4px;
}
body.theme-blood_neon_dark .btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
  box-shadow: 0 0 30px var(--color-primary);
}
body.theme-blood_neon_dark h1, body.theme-blood_neon_dark h2 {
  text-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 60%, transparent);
}
body.theme-blood_neon_dark .navbar {
  background: #070203 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
}

/* 8. NEUMORPHISM — Bauhaus Soft
   Elementos moldados na matéria do fundo. Físicos, pressionáveis. */
body.theme-neumorphism_light {
  --color-bg: #e4e4e8;
  --color-text: #2a2a35;
  --color-text-muted: #72728a;
  --color-card-bg: #e4e4e8;
  --color-card-border: transparent;
  background-color: #e4e4e8;
  background-image: none;
}
body.theme-neumorphism_dark {
  --color-bg: #1e1e24;
  --color-text: #e8e8f0;
  --color-text-muted: #9090a8;
  --color-card-bg: #1e1e24;
  --color-card-border: transparent;
  background-color: #1e1e24;
  background-image: none;
}
body.theme-neumorphism_light .card-glass,
body.theme-neumorphism_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 18px;
}
body.theme-neumorphism_light .card-glass {
  background: #e4e4e8;
  box-shadow: 8px 8px 18px #c2c2c6, -8px -8px 18px #ffffff;
}
body.theme-neumorphism_dark .card-glass {
  background: #1e1e24;
  box-shadow: 8px 8px 18px #131318, -8px -8px 18px #29292e;
}
body.theme-neumorphism_light .btn-primary,
body.theme-neumorphism_dark .btn-primary {
  border: none !important;
  border-radius: 50px;
  font-weight: 700;
}
body.theme-neumorphism_light .btn-primary {
  background: #e4e4e8 !important;
  color: var(--color-primary) !important;
  box-shadow: 6px 6px 14px #c2c2c6, -6px -6px 14px #ffffff;
}
body.theme-neumorphism_dark .btn-primary {
  background: #1e1e24 !important;
  color: var(--color-primary) !important;
  box-shadow: 6px 6px 14px #131318, -6px -6px 14px #29292e;
}
body.theme-neumorphism_light .btn-primary:hover {
  box-shadow: inset 4px 4px 10px #c2c2c6, inset -4px -4px 10px #ffffff;
}
body.theme-neumorphism_dark .btn-primary:hover {
  box-shadow: inset 4px 4px 10px #131318, inset -4px -4px 10px #29292e;
}
body.theme-neumorphism_light .navbar {
  background: #e4e4e8 !important;
  box-shadow: 0 4px 14px #c2c2c6, 0 -4px 14px #ffffff !important;
  border-bottom: none !important;
}
body.theme-neumorphism_dark .navbar {
  background: #1e1e24 !important;
  box-shadow: 0 4px 14px #131318, 0 -4px 14px #29292e !important;
  border-bottom: none !important;
}

/* 9. EDITORIAL — Escola Tipográfica Suíça
   Conteúdo é rei. Tipografia é o design. Um acento. Zero ornamento. */
body.theme-editorial_light {
  background-color: #f7f6f3;
  background-image: none;
  --color-bg: #f7f6f3;
  --color-text: #1c1917;
  --color-text-muted: #6b6a67;
  --color-card-bg: #f7f6f3;
  --color-card-border: #e7e5e4;
}
body.theme-editorial_dark {
  background-color: #0c0c0c;
  background-image: none;
  --color-bg: #0c0c0c;
  --color-text: #f7f6f3;
  --color-text-muted: #a8a7a5;
  --color-card-bg: #0c0c0c;
  --color-card-border: #2c2c2c;
}
body.theme-editorial_light .card-glass,
body.theme-editorial_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: none;
  border-top: 2px solid var(--color-primary);
  border-radius: 0;
  box-shadow: none;
  padding-top: 1.5rem;
}
body.theme-editorial_light .btn-primary,
body.theme-editorial_dark .btn-primary {
  border-radius: 0;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border: 2px solid var(--color-primary);
}
body.theme-editorial_light .btn-primary:hover,
body.theme-editorial_dark .btn-primary:hover {
  background: transparent !important;
  color: var(--color-primary) !important;
}
body.theme-editorial_light .navbar {
  border-bottom: 2px solid var(--color-primary) !important;
  box-shadow: none !important;
  background: rgba(247,246,243,0.97) !important;
}
body.theme-editorial_dark .navbar {
  border-bottom: 2px solid var(--color-primary) !important;
  box-shadow: none !important;
  background: rgba(12,12,12,0.97) !important;
}
body.theme-editorial_light h1,
body.theme-editorial_dark h1 {
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* 10. MEMPHIS — Pop Art Geométrico dos Anos 80
   Caos organizado. Formas geométricas. Energia máxima. */
body.theme-memphis {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 28px),
    radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--color-primary) 5%, transparent) 0%, transparent 35px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 4%, transparent) 0%, transparent 20px),
    radial-gradient(circle at 25% 75%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 22px),
    repeating-linear-gradient(45deg,  color-mix(in srgb, var(--color-primary) 5%, transparent) 0px, color-mix(in srgb, var(--color-primary) 5%, transparent) 1.5px, transparent 1.5px, transparent 22px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0px, color-mix(in srgb, var(--color-primary) 3%, transparent) 1px,   transparent 1px,   transparent 32px);
}
body.theme-memphis .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 3px solid var(--color-primary);
  border-radius: 14px;
  background: var(--color-card-bg);
  box-shadow: 6px 6px 0 var(--color-primary);
  transition: transform 0.15s, box-shadow 0.15s;
}
body.theme-memphis .card-glass:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-primary);
}
body.theme-memphis .btn-primary {
  border-radius: 50px;
  font-weight: 800;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
  transform: rotate(-0.8deg);
  border: 2px solid rgba(0,0,0,0.12);
}
body.theme-memphis .btn-primary:hover {
  transform: rotate(0.8deg) scale(1.03);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.25);
}
body.theme-memphis .navbar {
  background: color-mix(in srgb, var(--color-bg) 95%, var(--color-primary)) !important;
  border-bottom: 3px solid var(--color-primary) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15) !important;
}

/* 11. CLASSIC — Elegância Atemporal
   Proporções nobres. Detalhes refinados. Cor como acento, nunca como ruído. */
body.theme-classic_dark {
  background-color: var(--color-bg);
  color: var(--color-text);
  --color-bg: #0d0b09;
  --color-text: #f8f5ef;
  --color-text-muted: #b5ada2;
  --color-card-bg: #16120f;
  --color-card-border: rgba(248, 245, 239, 0.15);
  background-image:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-primary) 4%, transparent) 0px,
      transparent 1px,
      transparent 64px
    ),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 55%);
}
body.theme-classic_light {
  background-color: var(--color-bg);
  color: var(--color-text);
  --color-bg: #f8f5ef; /* pergaminho quente */
  --color-text: #1a1510;
  --color-text-muted: #70675a;
  --color-card-bg: #fcfbfa;
  --color-card-border: rgba(26, 21, 16, 0.12);
  background-image:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 55%);
}
body.theme-classic_light .card-glass,
body.theme-classic_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: color-mix(in srgb, var(--color-bg) 93%, var(--color-primary));
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2),
              0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
}
body.theme-classic_light .card-glass::before,
body.theme-classic_dark .card-glass::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  pointer-events: none;
  border-radius: 1px;
}
body.theme-classic_light .btn-primary,
body.theme-classic_dark .btn-primary {
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.88rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 28%, rgba(0,0,0,0.2)),
              0 -2px 0 rgba(0,0,0,0.15) inset;
  border-bottom: 3px solid color-mix(in srgb, var(--color-primary) 60%, #000);
}
body.theme-classic_dark .navbar {
  background: color-mix(in srgb, #0d0b09 96%, var(--color-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent), 0 4px 20px rgba(0,0,0,0.4) !important;
}
body.theme-classic_light .navbar {
  background: color-mix(in srgb, #f8f5ef 96%, var(--color-primary)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent) !important;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-primary) 50%, transparent), 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* 12. NEO-SKEUOMORPHISM — Tactile Tech
   Sombras internas, relevos táteis e efeitos glossy realistas. */
body.theme-neo_skeuomorphism {
  background-color: var(--color-bg);
}
body.theme-neo_skeuomorphism .card-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--color-bg) 85%, var(--color-primary) 3%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.2);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}
body.theme-neo_skeuomorphism .btn-primary {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
}
body.theme-neo_skeuomorphism .btn-primary:active {
  transform: translateY(1.5px);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* 13. EDITORIAL LUXURY — Serif Sophistication
   Tipografia refinada, tons creme/off-white e bordas finas estilo revista de luxo. */
body.theme-editorial_luxury_light {
  background-color: #faf8f5;
  color: #1a1a1a;
  --color-bg: #faf8f5;
  --color-text: #1a1a1a;
  --color-text-muted: #66615b;
  --color-card-bg: #faf8f5;
  --color-card-border: rgba(0, 0, 0, 0.12);
}
body.theme-editorial_luxury_dark {
  background-color: #111111;
  color: #f5f4f0;
  --color-bg: #111111;
  --color-text: #f5f4f0;
  --color-text-muted: #a09e9a;
  --color-card-bg: #111111;
  --color-card-border: rgba(255, 255, 255, 0.12);
}
body.theme-editorial_luxury_light .card-glass,
body.theme-editorial_luxury_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  box-shadow: none;
}
body.theme-editorial_luxury_dark .card-glass {
  border-color: rgba(255, 255, 255, 0.12);
}
body.theme-editorial_luxury_light .btn-primary {
  border-radius: 0;
  border: 1px solid #1a1a1a !important;
  background: #1a1a1a !important;
  color: #faf8f5 !important;
  font-family: var(--font-family), serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
body.theme-editorial_luxury_dark .btn-primary {
  border-radius: 0;
  border-color: #f5f4f0 !important;
  background: #f5f4f0 !important;
  color: #111111 !important;
  font-family: var(--font-family), serif;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
body.theme-editorial_luxury_light .btn-primary:hover,
body.theme-editorial_luxury_dark .btn-primary:hover {
  background: transparent !important;
}
body.theme-editorial_luxury_light .btn-primary:hover {
  color: #1a1a1a !important;
}
body.theme-editorial_luxury_dark .btn-primary:hover {
  color: #f5f4f0 !important;
}

/* 14. RETRO TERMINAL — Green CRT glow
   Estilo computador clássico, console retro e brilho verde de fósforo. */
body.theme-retro_terminal {
  background-color: #0b0c10;
  color: #00ff66;
  --color-bg: #0b0c10;
  --color-text: #00ff66;
  --color-text-muted: #008f39;
  --color-card-bg: #0d0e12;
  --color-card-border: #00ff66;
  --radius-avatar: 0px;
  --radius-badge: 0px;
  --radius-card: 4px;
  --shadow-card: 0 0 10px rgba(0, 255, 102, 0.15);
  --brand-logo-bg: none;
  --brand-logo-text-fill: currentColor;
  background-image: 
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
}
body.theme-retro_terminal .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #0d0e12;
  border: 2px solid #00ff66;
  box-shadow: 0 0 10px rgba(0, 255, 102, 0.15);
  border-radius: 4px;
}
body.theme-retro_terminal .btn-primary {
  border-radius: 4px;
  background: transparent !important;
  color: #00ff66 !important;
  border: 2px solid #00ff66 !important;
  box-shadow: 0 0 8px rgba(0, 255, 102, 0.25) !important;
  font-family: monospace;
}
body.theme-retro_terminal .btn-primary:hover {
  background: #00ff66 !important;
  color: #0b0c10 !important;
  box-shadow: 0 0 15px rgba(0, 255, 102, 0.5) !important;
}
body.theme-retro_terminal h1, body.theme-retro_terminal h2 {
  text-shadow: 0 0 6px rgba(0, 255, 102, 0.6);
  font-family: monospace !important;
}

/* 15. SWISS INTERNATIONAL — Bauhaus Bold
   Geometria assimétrica, fontes ultra-heavy e contraste maciço. */
body.theme-swiss_international {
  background-color: #f3f3f3;
  color: #000000;
  --color-bg: #f3f3f3;
  --color-text: #000000;
  --color-text-muted: #555555;
  --color-card-bg: #ffffff;
  --color-card-border: #000000;
}
body.theme-swiss_international .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 0;
  box-shadow: none;
}
body.theme-swiss_international .btn-primary {
  border-radius: 0;
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #000000 !important;
  font-weight: 900;
  text-transform: uppercase;
}
body.theme-swiss_international .btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
}
body.theme-swiss_international h1, body.theme-swiss_international h2 {
  font-weight: 900 !important;
  text-transform: uppercase;
}

/* 16. COSMIC AURORA — Iridescent Web3 glow
   Gradientes holográficos e fluidos com efeito furta-cor. */
body.theme-cosmic_aurora {
  background-color: #07070f;
  color: #ffffff;
  --color-bg: #07070f;
  --color-text: #ffffff;
  --color-text-muted: #8a8a9a;
  --color-card-bg: rgba(15, 15, 30, 0.7);
  --color-card-border: rgba(255, 0, 127, 0.15);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(127, 0, 255, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 0, 127, 0.12) 0%, transparent 40%);
}
body.theme-cosmic_aurora .card-glass {
  background: rgba(15, 15, 30, 0.7);
  border: 1px solid rgba(255, 0, 127, 0.15);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(127, 0, 255, 0.05);
  border-radius: 24px;
}
body.theme-cosmic_aurora .btn-primary {
  border-radius: 50px;
  background: linear-gradient(135deg, #7f00ff, #ff007f) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255, 0, 127, 0.3) !important;
}
body.theme-cosmic_aurora .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(255, 0, 127, 0.5) !important;
  transform: translateY(-1px);
}

/* 17. CLEAN SAAS — Silicon Valley Sleek
   O padrão minimalista de alta tecnologia. */
body.theme-clean_saas {
  background-color: #f8fafc;
  color: #0f172a;
  --color-bg: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(15, 23, 42, 0.05);
}
body.theme-clean_saas_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: rgba(255, 255, 255, 0.8);
  --color-card-border: rgba(0, 0, 0, 0.05);
}
body.theme-clean_saas_dark {
  background-color: #0b0f19;
  color: #f1f5f9;
  --color-bg: #0b0f19;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-card-bg: #111827;
  --color-card-border: rgba(241, 245, 249, 0.04);
}
body.theme-clean_saas_light .card-glass,
body.theme-clean_saas_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.02);
  border-radius: 16px;
}
body.theme-clean_saas_light .card-glass {
  background: #ffffff;
}
body.theme-clean_saas_dark .card-glass {
  background: #111827;
  border-color: rgba(241, 245, 249, 0.04);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
body.theme-clean_saas_light .btn-primary,
body.theme-clean_saas_dark .btn-primary {
  border-radius: 8px;
  background: var(--color-primary) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

/* 18. EARTHY ORGANIC — Soft Eco Sand
   Paleta de areia quente, olive e terracota. Curvas orgânicas. */
body.theme-earthy_organic {
  background-color: #f4f0ea;
  color: #2b2621;
  --color-bg: #f4f0ea;
  --color-text: #2b2621;
  --color-text-muted: #5e544b;
  --color-card-bg: #FAF8F5;
  --color-card-border: #dfd8cf;
}
body.theme-earthy_organic .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #FAF8F5;
  border: 1px solid #dfd8cf;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(94, 84, 75, 0.03);
}
body.theme-earthy_organic .btn-primary {
  border-radius: 30px;
  background: #3c5a52 !important; /* olive/forest green */
  color: #FAF8F5 !important;
  border: none !important;
}
body.theme-earthy_organic .btn-primary:hover {
  background: #2d443e !important;
}

/* 19. ART DECO — Gatsby Gold
   Luxo clássico. Esmeralda e ouro metálico. */
body.theme-art_deco {
  background-color: #0b1411; /* verde-escuro profundo */
  color: #dfd2b9; /* dourado suave */
  --color-bg: #0b1411;
  --color-text: #dfd2b9;
  --color-text-muted: #8c7e65;
  --color-card-bg: #0f1c18;
  --color-card-border: #c5a880;
}
body.theme-art_deco .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #0f1c18;
  border: 1px solid #c5a880;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
body.theme-art_deco .btn-primary {
  border-radius: 2px;
  background: #c5a880 !important;
  color: #0b1411 !important;
  border: 1px solid #c5a880 !important;
  font-family: var(--font-family), serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body.theme-art_deco .btn-primary:hover {
  background: transparent !important;
  color: #c5a880 !important;
}

/* ==========================================================================
   NEW PERSUASION ELEMENTS & SECONDARY BUTTONS
   ========================================================================== */
.btn-secondary {
  background-color: transparent;
  color: var(--color-text) !important;
  border: 2px solid var(--color-card-border);
  box-shadow: none;
}
.btn-secondary:hover {
  background-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
  border-color: var(--color-primary);
  transform: translateY(-2px) scale(1.02);
}
.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.hero-inline-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.hero-inline-social-proof .avatar-group {
  display: flex;
  align-items: center;
}
.hero-inline-social-proof .avatar-group img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  margin-right: -10px;
  object-fit: cover;
  transition: transform var(--transition-fast);
}
.hero-inline-social-proof .avatar-group img:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 10;
}
.hero-inline-social-proof .proof-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.hero-benefits-bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem auto;
  padding: 0;
  max-width: 800px;
}
.hero-grid:not(.hero-centered) .hero-benefits-bullets {
  justify-content: flex-start;
  margin-inline: 0;
}
.hero-benefits-bullets li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);
  border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .hero-benefits-bullets li {
    white-space: normal !important;
  }
}

.cta-micro-copy {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  opacity: 0.85;
  margin-top: 0.65rem;
  text-align: center;
  font-weight: 500;
}
.hero-grid:not(.hero-centered) .cta-micro-copy {
  text-align: left;
  padding-left: 0.25rem;
}

/* ==========================================================================
   AURORA & CYBERPUNK THEMES
   ========================================================================== */
.hero-bg-aurora {
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.hero-bg-aurora::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 20% 30%, rgba(var(--color-primary-rgb, 59, 130, 246), 0.18) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 50% 10%, rgba(20, 184, 166, 0.08) 0%, transparent 40%);
  animation: auroraMove 25s linear infinite alternate;
  z-index: 0;
  filter: blur(80px);
  pointer-events: none;
}
@keyframes auroraMove {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(5%, -5%) rotate(180deg) scale(1.05); }
  100% { transform: translate(-5%, 5%) rotate(360deg) scale(0.95); }
}
.hero-bg-aurora .hero-grid,
.hero-bg-aurora .hero-centered {
  position: relative;
  z-index: 1;
}

.hero-bg-cyberpunk {
  background: #020205 !important;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--color-primary);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
}
.hero-bg-cyberpunk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(var(--color-primary-rgb, 59, 130, 246), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  z-index: 0;
}
.hero-bg-cyberpunk .hero-grid,
.hero-bg-cyberpunk .hero-centered {
  position: relative;
  z-index: 1;
}

.neon-glow-border {
  border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.4) !important;
  box-shadow: 0 0 15px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2),
              inset 0 0 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);
}

/* ==========================================================================
   BENTO GRID LAYOUT
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .bento-col-span-2 {
    grid-column: span 2;
  }
  .bento-row-span-2 {
    grid-row: span 2;
  }
}
.bento-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* ==========================================================================
   FLOATING MOCKUP
   ========================================================================== */
.floating-mockup {
  animation: floatAnimation 5s ease-in-out infinite;
  display: block;
  max-height: 480px;
  object-fit: contain;
  margin: 0 auto;
}
@keyframes floatAnimation {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* ==========================================================================
   BEFORE/AFTER SLIDER (CLIP-PATH BASED)
   ========================================================================== */
.before-after-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-card-border);
}
.before-after-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.before-after-slider .image-before {
  z-index: 1;
}
.before-after-slider .image-after {
  z-index: 2;
  clip-path: polygon(0 0, var(--clip-pos, 50%) 0, var(--clip-pos, 50%) 100%, 0 100%);
}
.before-after-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--clip-pos, 50%);
  width: 3px;
  background: #ffffff;
  z-index: 2;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
  pointer-events: none;
  transform: translateX(-50%);
}
.before-after-slider .slider-bar {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  outline: none;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 3;
  cursor: ew-resize;
}
.before-after-slider .slider-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid var(--color-primary);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  cursor: ew-resize;
}

/* ==========================================================================
   CONVERSION TRIGGERS
   ========================================================================== */
.live-traffic-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #10b981;
  margin-bottom: 1.25rem;
}
.live-traffic-counter .pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-dot-anim 1.6s infinite;
}
@keyframes pulse-dot-anim {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.vsl-anchors-container {
  margin-top: 1.25rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: left;
}
.vsl-anchors-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.vsl-anchors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.vsl-anchor-tag {
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.vsl-anchor-tag:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.geo-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
  border: 1px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1.25rem;
  text-align: center;
}

/* ==========================================================================
   MOBILE-FIRST ENHANCEMENTS AND MICRO-INTERACTIONS
   ========================================================================== */

/* Active Press / Tactile Click Feedback for buttons & interactive elements */
.btn:active,
.vsl-anchor-tag:active,
.card-glass:active {
  transform: scale(0.96) translateY(1px);
  filter: brightness(0.92);
}

/* Neobrutalist specific active state */
.neobrutalist-btn:active {
  transform: translate(4px, 4px) !important;
  box-shadow: 0px 0px 0px var(--color-text) !important;
}

/* Mobile Sticky CTA Pulse Animation */
@keyframes mobile-cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 99, 102, 241), 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb, 99, 102, 241), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 99, 102, 241), 0);
  }
}

.floating-cta .btn {
  animation: mobile-cta-pulse 2.2s infinite;
}

/* Horizontal Swipeable Carousel for Mobile Devices */
@media (max-width: 768px) {
  .swipe-carousel-mobile {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 1rem !important;
    padding: 0.5rem 0.25rem 1.5rem !important;
    width: 100% !important;
    scrollbar-width: none; /* Hide standard Firefox scrollbar */
    -webkit-overflow-scrolling: touch;
  }
  .swipe-carousel-mobile::-webkit-scrollbar {
    display: none; /* Hide Chrome/Safari scrollbar */
  }
  .swipe-carousel-mobile > * {
    flex: 0 0 85% !important; /* Take up 85% of screen width so next card is visible */
    scroll-snap-align: start !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   10 NOVOS PATTERNS DE DESIGN (PADRÕES DE BACKGROUND)
   ========================================================================== */

/* 1. DOT MATRIX — Micro bolinhas minimalistas */
body.theme-pattern_dots_light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 15%, transparent) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}
body.theme-pattern_dots_dark {
  --color-bg: #09090c;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-card-bg: #121216;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 15%, transparent) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* 2. TOPOGRAPHY — Linhas topográficas abstratas */
body.theme-pattern_topography_light {
  --color-bg: #fbfbfa;
  --color-text: #1f1f1f;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath d='M-10,30 C30,10 50,70 80,40 C110,10 130,60 160,30 M-10,70 C40,50 60,110 90,80 C120,50 140,100 160,70 M-10,110 C50,90 70,150 100,120 C130,90 150,140 160,110 M-10,150 C60,130 80,190 110,160 C140,130 160,180 160,150' fill='none' stroke='rgba(0,0,0,0.05)' stroke-width='1.2'/%3E%3C/svg%3E");
}
body.theme-pattern_topography_dark {
  --color-bg: #09090b;
  --color-text: #f4f4f5;
  --color-text-muted: #a1a1aa;
  --color-card-bg: #18181b;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpath d='M-10,30 C30,10 50,70 80,40 C110,10 130,60 160,30 M-10,70 C40,50 60,110 90,80 C120,50 140,100 160,70 M-10,110 C50,90 70,150 100,120 C130,90 150,140 160,110' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 3. SUBTLE GRAIN — Textura de granulado fosco */
body.theme-pattern_grain_light {
  --color-bg: #f9f9fb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.07);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
}
body.theme-pattern_grain_dark {
  --color-bg: #0b0c10;
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-card-bg: #111318;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E");
}

/* 4. DIAGONAL STRIPES — Listras diagonais discretas */
body.theme-pattern_stripes_light {
  --color-bg: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(15, 23, 42, 0.06);
  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, color-mix(in srgb, var(--color-primary) 7%, transparent) 15px, color-mix(in srgb, var(--color-primary) 7%, transparent) 16px);
}
body.theme-pattern_stripes_dark {
  --color-bg: #0f1015;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-card-bg: #17181f;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, color-mix(in srgb, var(--color-primary) 10%, transparent) 15px, color-mix(in srgb, var(--color-primary) 10%, transparent) 16px);
}

/* 5. BLUEPRINT — Desenho técnico de engenharia */
body.theme-pattern_blueprint_dark {
  --color-bg: #05162e;
  --color-text: #e0f2fe;
  --color-text-muted: #7dd3fc;
  --color-card-bg: #0b2545;
  --color-card-border: rgba(56, 189, 248, 0.3);
  background-color: #05162e;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(56, 189, 248, 0.15) 2px, transparent 2px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.15) 2px, transparent 2px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}
body.theme-pattern_blueprint_dark .card-glass {
  background: rgba(11, 37, 69, 0.85);
  border: 2px solid rgba(56, 189, 248, 0.3) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(56, 189, 248, 0.1);
  border-radius: 4px;
}
body.theme-pattern_blueprint_dark .btn-primary {
  border: 1px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

/* 6. HEX GRID — Colmeia tecnológica futurista */
body.theme-pattern_hex_dark {
  --color-bg: #060814;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-card-bg: #0f132a;
  --color-card-border: rgba(148, 163, 184, 0.1);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16.16 L56 48.48 L28 64.64 L0 48.48 L0 16.16 Z M28 98 L56 81.84 L56 49.52 L28 33.36 L0 49.52 L0 81.84 Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
}
body.theme-pattern_hex_dark .card-glass {
  background: rgba(15, 19, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 7. TECH CIRCUIT — Trilhas eletrônicas de circuitos */
body.theme-pattern_circuit_dark {
  --color-bg: #030712;
  --color-text: #f9fafb;
  --color-text-muted: #9ca3af;
  --color-card-bg: #111827;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0 L40 40 L80 40 M40 40 L40 80 M80 0 L60 20 L60 0 M0 80 L20 60 L20 80' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='60' cy='20' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3Ccircle cx='20' cy='60' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
}

/* 8. CHEVRON — Ziguezague geométrico minimalista */
body.theme-pattern_chevron_light {
  --color-bg: #fafafa;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 15 L30 30 L60 15 L30 0 Z' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='1'/%3E%3C/svg%3E");
}
body.theme-pattern_chevron_dark {
  --color-bg: #0c0a09;
  --color-text: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-card-bg: #1c1917;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 15 L30 30 L60 15 L30 0 Z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
}

/* 9. ISOMETRIC GRID — Grade tridimensional isométrica */
body.theme-pattern_isogrid_light {
  --color-bg: #fafaf9;
  --color-text: #292524;
  --color-text-muted: #78716c;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='50' viewBox='0 0 86 50'%3E%3Cpath d='M0 25 L43 0 L86 25 L43 50 Z M43 0 L43 50' fill='none' stroke='rgba(0,0,0,0.02)' stroke-width='1'/%3E%3C/svg%3E");
}
body.theme-pattern_isogrid_dark {
  --color-bg: #0c0a09;
  --color-text: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-card-bg: #1c1917;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='50' viewBox='0 0 86 50'%3E%3Cpath d='M0 25 L43 0 L86 25 L43 50 Z M43 0 L43 50' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3C/svg%3E");
}

/* 10. WAVE — Ondas sinuosas elegantes */
body.theme-pattern_wave_light {
  --color-bg: #fdfdfd;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 Q 20 0, 40 20 T 80 20 M0 30 Q 20 10, 40 30 T 80 30' fill='none' stroke='rgba(0,0,0,0.025)' stroke-width='1.2'/%3E%3C/svg%3E");
}
body.theme-pattern_wave_dark {
  --color-bg: #09090b;
  --color-text: #f4f4f5;
  --color-text-muted: #a1a1aa;
  --color-card-bg: #18181b;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 20 Q 20 0, 40 20 T 80 20 M0 30 Q 20 10, 40 30 T 80 30' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* 11. CROSSES — Interseções de grade minimalista */
body.theme-pattern_crosses_light {
  --color-bg: #f9f9fb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}
body.theme-pattern_crosses_dark {
  --color-bg: #09090b;
  --color-text: #f4f4f5;
  --color-text-muted: #a1a1aa;
  --color-card-bg: #18181b;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 35%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(to right, color-mix(in srgb, var(--color-primary) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 10%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

/* 12. RETRO HALFTONE — Gradiente de retícula estilo pop art */
body.theme-pattern_halftone_light {
  --color-bg: #fafafa;
  --color-text: #171717;
  --color-text-muted: #737373;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.07);
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 18%, transparent) 20%, transparent 21%),
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 10%, transparent) 15%, transparent 16%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}
body.theme-pattern_halftone_dark {
  --color-bg: #080808;
  --color-text: #f5f5f5;
  --color-text-muted: #a3a3a3;
  --color-card-bg: #171717;
  --color-card-border: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 15%, transparent) 20%, transparent 21%),
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 8%, transparent) 15%, transparent 16%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* ==========================================================================
   20 NOVAS VARIAÇÕES DE ESTILOS E TEMAS (LUXO, EDITORIAL, RETRÔ, CLÁSSICO)
   ========================================================================== */

/* 1. ROYAL OBSIDIAN — Luxo Negro */
body.theme-royal_obsidian_dark {
  --color-bg: #080808;
  --color-text: #f3f4f6;
  --color-text-muted: #c5a880;
  --color-card-bg: rgba(18, 18, 18, 0.95);
  --color-card-border: rgba(197, 168, 128, 0.25);
  background-color: #080808;
  background-image: none;
}
body.theme-royal_obsidian_dark .card-glass {
  backdrop-filter: none;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(197, 168, 128, 0.05);
  border-radius: 4px;
}
body.theme-royal_obsidian_dark .btn-primary {
  background: linear-gradient(135deg, #c5a880, #8c7e65) !important;
  border: 1px solid #c5a880 !important;
  color: #080808 !important;
  font-weight: 700;
  border-radius: 2px;
  text-transform: uppercase;
}
body.theme-royal_obsidian_dark .btn-primary:hover {
  background: transparent !important;
  color: #c5a880 !important;
  box-shadow: 0 0 15px rgba(197, 168, 128, 0.3);
}

/* 2. CHAMPAGNE VELVET — Requinte Aveludado */
body.theme-champagne_velvet_light {
  --color-bg: #faf8f5;
  --color-text: #1a1a1a;
  --color-text-muted: #800020;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(128, 0, 32, 0.15);
  background-color: #faf8f5;
  background-image: none;
}
body.theme-champagne_velvet_light .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 8px 24px rgba(128, 0, 32, 0.04);
  border-radius: 6px;
}
body.theme-champagne_velvet_light .btn-primary {
  background: #800020 !important;
  border: 1px solid #800020 !important;
  color: #faf8f5 !important;
  font-weight: 600;
  border-radius: 4px;
}
body.theme-champagne_velvet_dark {
  --color-bg: #161113;
  --color-text: #faf8f5;
  --color-text-muted: #c5a880;
  --color-card-bg: #20181b;
  --color-card-border: rgba(197, 168, 128, 0.2);
  background-color: #161113;
  background-image: none;
}
body.theme-champagne_velvet_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-radius: 6px;
}
body.theme-champagne_velvet_dark .btn-primary {
  background: #800020 !important;
  border: 1px solid #800020 !important;
  color: #faf8f5 !important;
  font-weight: 600;
  border-radius: 4px;
}

/* 3. MIDNIGHT SAPPHIRE — Rebuscado Profundo */
body.theme-midnight_sapphire_dark {
  --color-bg: #040a18;
  --color-text: #f3f4f6;
  --color-text-muted: #cbd5e1;
  --color-card-bg: rgba(10, 20, 38, 0.9);
  --color-card-border: rgba(255, 255, 255, 0.15);
  background-color: #040a18;
  background-image: none;
}
body.theme-midnight_sapphire_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255,255,255,0.05);
  border-radius: 8px;
}
body.theme-midnight_sapphire_dark .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 8px;
}

/* 4. NORDIC LIGHT — Minimalismo Frio */
body.theme-nordic_light_light {
  --color-bg: #f2f4f7;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  background-color: #f2f4f7;
}
body.theme-nordic_light_light .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: none;
  border-radius: 0;
}
body.theme-nordic_light_dark {
  --color-bg: #181b22;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-card-bg: #1e232d;
  --color-card-border: #2e3545;
  background-color: #181b22;
  background-image: none;
}
body.theme-nordic_light_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: none;
  border-radius: 0;
}

/* 5. WARM OCHRE — Elegância Terrosa */
body.theme-warm_ochre_light {
  --color-bg: #faf7f2;
  --color-text: #2c2724;
  --color-text-muted: #8c7d75;
  --color-card-bg: #ffffff;
  --color-card-border: #e8e2d8;
  background-color: #faf7f2;
  background-image: none;
}
body.theme-warm_ochre_light .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 4px 12px rgba(140, 125, 117, 0.05);
  border-radius: 8px;
}
body.theme-warm_ochre_dark {
  --color-bg: #1a1613;
  --color-text: #faf7f2;
  --color-text-muted: #c8a285;
  --color-card-bg: #26211d;
  --color-card-border: #38312c;
  background-color: #1a1613;
  background-image: none;
}
body.theme-warm_ochre_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 8px;
}

/* 6. ZEN SLATE — Foco Purista */
body.theme-zen_slate_dark {
  --color-bg: #1e2022;
  --color-text: #f5f5f5;
  --color-text-muted: #9ca3af;
  --color-card-bg: #1a1c1e;
  --color-card-border: #2d3135;
  background-color: #1e2022;
  background-image: none;
}
body.theme-zen_slate_dark .card-glass {
  background: var(--color-card-bg);
  border: none;
  border-bottom: 2px solid var(--color-primary);
  border-radius: 0;
  box-shadow: none;
}

/* 7. VINYL 70S — Nostalgia Vintage */
body.theme-vinyl_70s_light {
  --color-bg: #fbf6eb;
  --color-text: #2d1b18;
  --color-text-muted: #c85a17;
  --color-card-bg: #ffffff;
  --color-card-border: #ebdcb9;
  background-color: #fbf6eb;
  background-image: none;
}
body.theme-vinyl_70s_light .card-glass {
  background: var(--color-card-bg);
  border: 2px solid var(--color-card-border);
  border-radius: 12px;
}
body.theme-vinyl_70s_dark {
  --color-bg: #1c1512;
  --color-text: #fbf6eb;
  --color-text-muted: #d4a373;
  --color-card-bg: #281e1a;
  --color-card-border: #3d2f28;
  background-color: #1c1512;
  background-image: none;
}
body.theme-vinyl_70s_dark .card-glass {
  background: var(--color-card-bg);
  border: 2px solid var(--color-card-border);
  border-radius: 12px;
}

/* 8. VINTAGE NEWSPAPER — Gazeta Retro */
body.theme-newspaper_vintage_light {
  --color-bg: #f4ebd0;
  --color-text: #1a1611;
  --color-text-muted: #5c5446;
  --color-card-bg: #fdfaf2;
  --color-card-border: #1a1611;
  background-color: #f4ebd0;
  background-image: none;
}
body.theme-newspaper_vintage_light .card-glass {
  background: var(--color-card-bg);
  border: 3px double var(--color-card-border);
  border-radius: 0;
}
body.theme-newspaper_vintage_dark {
  --color-bg: #1a1611;
  --color-text: #f4ebd0;
  --color-text-muted: #a39b8c;
  --color-card-bg: #26211a;
  --color-card-border: #f4ebd0;
  background-color: #1a1611;
  background-image: none;
}
body.theme-newspaper_vintage_dark .card-glass {
  background: var(--color-card-bg);
  border: 3px double var(--color-card-border);
  border-radius: 0;
}

/* 9. MEDICAL CLEAN — Pureza Hospitalar */
body.theme-medical_clean_light {
  --color-bg: #f8fafc;
  --color-text: #0f172a;
  --color-text-muted: #0ea5e9;
  --color-card-bg: #ffffff;
  --color-card-border: #e2e8f0;
  background-color: #f8fafc;
  background-image: none;
}
body.theme-medical_clean_light .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.03);
  border-radius: 10px;
}
body.theme-medical_clean_dark {
  --color-bg: #0a0f18;
  --color-text: #f8fafc;
  --color-text-muted: #0ea5e9;
  --color-card-bg: #111a2e;
  --color-card-border: #1e2e4a;
  background-color: #0a0f18;
  background-image: none;
}
body.theme-medical_clean_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
}

/* 10. DARK SLATE — Clássico Corporativo Escuro */
body.theme-dark_slate_dark {
  --color-bg: #0f172a;
  --color-text: #cbd5e1;
  --color-text-muted: #38bdf8;
  --color-card-bg: #1e293b;
  --color-card-border: #334155;
  background-color: #0f172a;
  background-image: none;
}
body.theme-dark_slate_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
}

/* 11. VIBRANT TECH — Tech Moderna */
body.theme-vibrant_tech_light {
  --color-bg: #ffffff;
  --color-text: #09090b;
  --color-text-muted: #4f46e5;
  --color-card-bg: #ffffff;
  --color-card-border: #e4e4e7;
  background-color: #ffffff;
  background-image: none;
}
body.theme-vibrant_tech_light .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  border-radius: 14px;
}
body.theme-vibrant_tech_dark {
  --color-bg: #09090b;
  --color-text: #fafafa;
  --color-text-muted: #6366f1;
  --color-card-bg: #18181b;
  --color-card-border: #27272a;
  background-color: #09090b;
  background-image: none;
}
body.theme-vibrant_tech_dark .card-glass {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-radius: 14px;
}

/* 15. SALES LETTER — Carta de Vendas Americana (Microsoft Word Style)
   Visual clássico de folha de Word, marca-texto amarelo e caneta vermelha. */
body.theme-sales_letter_light {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #555555;
  --color-card-bg: #fdfdfd;
  --color-card-border: #cccccc;
  background-color: #ffffff;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
}
body.theme-sales_letter_light .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #fcfcfc;
  border: 1px solid #dddddd;
  box-shadow: none;
  border-radius: 0;
  padding: 1.5rem;
}
body.theme-sales_letter_light .btn-primary {
  background: #ff0000 !important; /* Caneta Vermelha viva de conversão */
  border: 2px solid #b30000 !important;
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif !important;
  box-shadow: 0 4px 0px #b30000;
  border-radius: 4px;
}
body.theme-sales_letter_light .btn-primary:hover {
  background: #e60000 !important;
  transform: translateY(2px);
  box-shadow: 0 2px 0px #b30000;
}
body.theme-sales_letter_light h1, body.theme-sales_letter_light h2 {
  color: #111111;
  font-family: inherit;
  font-weight: 800;
  text-shadow: none;
}
body.theme-sales_letter_light .rte-mark {
  background: #ffff00 !important; /* Caneta marca-texto amarela pura */
  color: #000000 !important;
  border-radius: 2px;
  padding: 0.1em 0.25em;
  text-shadow: none;
}
body.theme-sales_letter_light .rte-underline {
  text-decoration: underline;
  text-decoration-color: #ff0000 !important; /* Sublinhado vermelho */
  text-decoration-style: solid;
}
body.theme-sales_letter_light .navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #eeeeee !important;
}

body.theme-sales_letter_dark {
  --color-bg: #121212;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-card-bg: #1a1a1a;
  --color-card-border: #334155;
  background-color: #121212;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif !important;
}
body.theme-sales_letter_dark .card-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #1a1a1a;
  border: 1px solid #334155;
  box-shadow: none;
  border-radius: 0;
  padding: 1.5rem;
}
body.theme-sales_letter_dark .btn-primary {
  background: #ff3333 !important;
  border: 2px solid #cc0000 !important;
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif !important;
  box-shadow: 0 4px 0px #cc0000;
  border-radius: 4px;
}
body.theme-sales_letter_dark .btn-primary:hover {
  background: #e62222 !important;
  transform: translateY(2px);
  box-shadow: 0 2px 0px #cc0000;
}
body.theme-sales_letter_dark h1, body.theme-sales_letter_dark h2 {
  color: #ffffff;
  font-family: inherit;
  font-weight: 800;
  text-shadow: none;
}
body.theme-sales_letter_dark .rte-mark {
  background: #555500 !important; /* Marca-texto escuro */
  color: #ffffff !important;
  border-radius: 2px;
  padding: 0.1em 0.25em;
  text-shadow: none;
}
body.theme-sales_letter_dark .rte-underline {
  text-decoration: underline;
  text-decoration-color: #ff3333 !important;
  text-decoration-style: solid;
}
body.theme-sales_letter_dark .navbar {
  background: #121212 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

/* Natural Selection Feed Log Styles */
.evolution-log-item {
  border-left: 4px solid var(--border-color);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.evolution-log-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border-color: rgba(255,255,255,0.2);
}
.evolution-log-item.seed {
  border-left-color: #10B981 !important;
}
.evolution-log-item.mutation {
  border-left-color: #3B82F6 !important;
}
.evolution-log-item.extinction {
  border-left-color: #EF4444 !important;
}
.evolution-log-item del, .evolution-log-item s {
  color: #EF4444;
  opacity: 0.85;
}
.evolution-log-item ins, .evolution-log-item strong {
  color: #10B981;
}

/* Premium Visual Enhancements: Font Pairings, Noise Grain & Asymmetric Dividers */
h1, h2, h3, h4, h5, h6, .headline, .heading-2, .brand {
  font-family: var(--font-heading, inherit);
}
body, p, li, input, textarea, button, select, .testimonial-card, .faq-item, .benefit-card {
  font-family: var(--font-body, inherit);
}

body.theme-has-grain::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.asymmetric-divider-slant-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
  padding-bottom: 5rem !important;
}
.asymmetric-divider-slant-top {
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
  padding-top: 5rem !important;
}
.asymmetric-divider-wave-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 50% 98%, 0 96%);
  padding-bottom: 5rem !important;
}

/* ==========================================================================
   11 NEW HERO LAYOUT STYLES
   ========================================================================== */

/* 1. Large Gradient Headline Style */
.rte-gradient-text-large {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: inline-block;
}

/* 2. Three Badge Chips Style */
.hero-three-badge-chips-container {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.hero-three-badge-chips-container .chip-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  background: var(--card-bg, rgba(255,255,255,0.05));
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.hero-three-badge-chips-container .chip-badge.highlight {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff !important;
}

/* 3. Benefits Vertical Bar Style */
.benefits-vertical-bar-container {
  border-left: 4px solid var(--color-primary);
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: left;
}
.benefits-vertical-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.benefits-vertical-bar-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}
.benefits-vertical-bar-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* 4. Framed Browser Mockup Style */
.framed-mockup-browser {
  border: 4px solid var(--color-border, #334155);
  border-radius: 8px;
  overflow: hidden;
  background: #1e293b;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.framed-mockup-browser-header {
  background: #0f172a;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-bottom: 1px solid var(--color-border, #334155);
}
.framed-mockup-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}
.framed-mockup-browser-dot:nth-child(2) {
  background: #f59e0b;
}
.framed-mockup-browser-dot:nth-child(3) {
  background: #10b981;
}
.framed-mockup-browser-address {
  margin-left: 1rem;
  flex-grow: 1;
  background: #1e293b;
  border-radius: 4px;
  height: 16px;
  opacity: 0.5;
}
.framed-mockup-browser img {
  width: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
}

/* 5. Compact Announcement Strip Style */
.hero-compact-strip {
  padding: 2.5rem 0 !important;
  text-align: center;
}
.hero-compact-strip-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
}
@media (max-width: 768px) {
  .hero-compact-strip-grid {
    flex-direction: column;
    text-align: center;
  }
}

/* 6. Editorial Dark Luxury Style */
.hero-editorial-dark-luxury-container {
  background: #000000 !important;
  color: #faf8f5 !important;
  border-top: 1px solid rgba(250, 248, 245, 0.1);
  border-bottom: 1px solid rgba(250, 248, 245, 0.1);
  padding: 5rem 0 !important;
}
.hero-editorial-dark-luxury-container h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #dfba6b !important; /* luxury gold */
  letter-spacing: -0.02em;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.1;
}
.hero-editorial-dark-luxury-container .subline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: rgba(250, 248, 245, 0.75) !important;
  font-size: 1.15rem;
}
.hero-editorial-dark-luxury-container .btn-primary {
  background: #dfba6b !important;
  color: #000000 !important;
  border: 1px solid #dfba6b !important;
  border-radius: 0 !important;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.hero-editorial-dark-luxury-container .btn-primary:hover {
  background: transparent !important;
  color: #dfba6b !important;
}

/* 7. Split Two Column Text Only */
.hero-split-two-column-text-only-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  text-align: left;
}
@media (max-width: 768px) {
  .hero-split-two-column-text-only-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

/* 8. Quote Author Style */
.quote-author-card {
  padding: 2rem;
  border-left: 3px solid var(--color-primary);
  background: var(--card-bg, rgba(255, 255, 255, 0.02));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
  text-align: left;
  box-shadow: var(--shadow-md);
}
.quote-author-card::before {
  content: '“';
  font-size: 5rem;
  position: absolute;
  top: -1.5rem;
  left: 0.5rem;
  opacity: 0.15;
  color: var(--color-primary);
  font-family: Georgia, serif;
  line-height: 1;
}
.quote-author-text {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.quote-author-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.quote-author-meta img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.quote-author-info {
  display: flex;
  flex-direction: column;
}
.quote-author-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-text);
}
.quote-author-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* 9. Boxed Copy Style */
.hero-boxed-copy-card {
  padding: 2.5rem;
  background: var(--card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-xl);
  text-align: left;
}

/* 10. Centered Flyer Style */
.hero-centered-flyer-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* ==========================================================================
   NATIVE HORIZONTAL SCROLL TRACK TESTIMONIALS
   ========================================================================== */
.testimonials-horizontal-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}
.testimonials-horizontal-scroll::-webkit-scrollbar {
  height: 6px;
}
.testimonials-horizontal-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.testimonials-horizontal-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-primary);
  border-radius: 999px;
}
.testimonial-horizontal-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.testimonial-horizontal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   WHATSAPP MOCKUP CUSTOM STYLES
   ========================================================================== */
.whatsapp-chat-body::-webkit-scrollbar {
  width: 5px;
}
.whatsapp-chat-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}
.whatsapp-chat-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 99px;
}
.wa-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #ffffff;
}

/* ==========================================================================
   HOW IT WORKS PROCESS CARDS
   ========================================================================== */
.how-it-works-cards-process-grid .card-glass {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.how-it-works-cards-process-grid .card-glass:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.process-step-arrow {
  animation: stepArrowPulse 2s infinite alternate;
}

/* ==========================================================================
   FAQ SPLIT SUPPORT CALL RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
  .faq-split-support-call-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .faq-split-support-call-grid > div:first-child {
    position: static !important;
  }
}

/* ==========================================================================
   GUARANTEE CERTIFICATE LUXURY LAYOUT
   ========================================================================== */
.guarantee-certificate-luxury-box {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.guarantee-certificate-luxury-box:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow-2xl);
}

/* ==========================================================================
   PAIN POINTS THREAT ALERT BOX
   ========================================================================== */
.pain-points-threat-alert-box {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.pain-points-threat-alert-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   AUTHOR SIGNATURE EDITORIAL LETTER
   ========================================================================== */
.author-signature-editorial-letter {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.author-signature-editorial-letter:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   PRICING SCARCITY PROGRESS BAR ANIMATION
   ========================================================================== */
.pricing-scarcity-progress-bar div {
  animation: loadProgressBar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loadProgressBar {
  from { width: 0%; }
  to { width: 92%; }
}

/* ==========================================================================
   PHASE 3: UNIQUE MECHANISM & BENEFITS CUSTOM LAYOUTS
   ========================================================================= */

/* 1. Technical Blueprint Grid Pattern */
.blueprint-grid-pattern {
  background-image: 
    linear-gradient(color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 2. Radar/Gauge SVG Animations */
.radar-gauge-svg {
  animation: radarRotateRing 20s linear infinite;
}
.radar-pulse-core {
  animation: radarCorePulse 2s infinite ease-in-out;
}
.gauge-fill-path {
  animation: gaugeFillAnim 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gauge-needle {
  transform-origin: 100px 100px;
  animation: needleBounce 3s cubic-bezier(0.3, 1.5, 0.6, 1) infinite alternate;
}

@keyframes radarRotateRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes radarCorePulse {
  0%, 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 2px var(--color-primary)); }
  50% { transform: scale(1.3); opacity: 0.8; filter: drop-shadow(0 0 10px var(--color-primary)); }
}

@keyframes gaugeFillAnim {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

@keyframes needleBounce {
  0% { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* 3. Comparison VS Badge Responsive adjustment */
.comparison-vs-badge {
  transition: transform 0.3s ease;
}
.comparison-vs-badge:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

/* 4. Checklist Boxed card hover */
.checklist-boxed-card {
  transition: all var(--transition-normal);
}
.checklist-boxed-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 15px 35px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Responsive grid adjustments */
@media (max-width: 991px) {
  .mechanism-blueprint-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .benefits-radar-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* ==========================================================================
   PHASE 4: PREMIUM BORDERS & VISUAL MICRO-DETAILS
   ========================================================================== */

/* 1. Border Styles */
.border-gradient {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.border-gradient::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
  pointer-events: none;
}

.border-double-frame {
  position: relative;
  border: 1px solid var(--color-card-border);
}
.border-double-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-card-border));
  border-radius: calc(var(--radius-md) - 4px);
  pointer-events: none;
}

.border-offset {
  border: 2px solid var(--color-text) !important;
  box-shadow: 6px 6px 0px var(--color-text) !important;
}

/* 2. Border Shine Glow Effect */
.border-shine-hover {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.border-shine-hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary, var(--color-primary)), var(--color-primary));
  background-size: 200% auto;
  opacity: 0.15;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.border-shine-hover:hover::before {
  opacity: 1;
  animation: borderShineAnim 2s linear infinite;
}
@keyframes borderShineAnim {
  to { background-position: 200% center; }
}

/* 3. Micro-Grid Background Pattern */
.bg-micro-grid {
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px) !important;
  background-size: 14px 14px !important;
}

/* 4. Custom SVG List Bullets */
.list-custom-bullets {
  list-style: none !important;
  padding-left: 0 !important;
}
.list-custom-bullets li {
  position: relative !important;
  padding-left: 1.85rem !important;
  margin-bottom: 0.8rem !important;
}
.list-custom-bullets li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  width: 16px !important;
  height: 16px !important;
  background-color: var(--color-primary) !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
}
.bullets-shield li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12.53 16.28a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 5.47-5.47a.75.75 0 111.06 1.06l-6 6z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12.53 16.28a.75.75 0 01-1.06 0l-3-3a.75.75 0 111.06-1.06l2.47 2.47 5.47-5.47a.75.75 0 111.06 1.06l-6 6z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}
.bullets-lightning li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2.25a.75.75 0 01.75.75v10.5h6.5a.75.75 0 01.53 1.28l-8 8a.75.75 0 01-1.28-.53V11.25H3.75a.75.75 0 01-.53-1.28l8-8a.75.75 0 01.53-.22z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2.25a.75.75 0 01.75.75v10.5h6.5a.75.75 0 01.53 1.28l-8 8a.75.75 0 01-1.28-.53V11.25H3.75a.75.75 0 01-.53-1.28l8-8a.75.75 0 01.53-.22z'/%3E%3C/svg%3E") !important;
}
.bullets-star li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   PHASE 5: DYNAMIC BACKGROUND UTILITY CLASSES
   ========================================================================== */

/* 1. Aurora Glow Background */
.bg-aurora-glow {
  position: relative;
  overflow: hidden;
}
.bg-aurora-glow::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.bg-aurora-glow::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -20%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 12%, transparent), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

/* 2. Spotlight Background Focus */
.bg-spotlight-focus {
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 60%) !important;
}

/* 3. Slanted Skew Section */
.section-divider-skew {
  clip-path: polygon(0 0, 100% 3%, 100% 97%, 0 100%);
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* 4. Matrix Dot Grid Background */
.bg-matrix-grid {
  background-image: 
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-primary) 15%, transparent) 1px, transparent 0),
    linear-gradient(color-mix(in srgb, var(--color-primary) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 1px, transparent 1px) !important;
  background-size: 24px 24px, 24px 24px, 24px 24px !important;
}

/* ==========================================================================
   PHASE 6: 8 NEW DYNAMIC BACKGROUNDS
   ========================================================================== */

/* 1. Cursor Spotlight Tracking */
.bg-cursor-spotlight {
  position: relative;
  background: radial-gradient(circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 70%) !important;
}

/* 2. Animated Wave Divides */
.bg-animated-waves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C26.9,4.75,55.05,8.1,83,9.78,169.5,15,248.59,23.51,321.39,56.44Z' fill='%236366f1' fill-opacity='0.08'%3E%3C/path%3E%3C/svg%3E");
  background-size: 100% 120px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
  animation: waveMotion 15s linear infinite alternate;
}
@keyframes waveMotion {
  from { background-position-x: 0px; }
  to { background-position-x: 1200px; }
}

/* 3. Retro 3D Tunnel Grid */
.bg-retro-3d-tunnel {
  perspective: 200px;
  overflow: hidden;
  position: relative;
}
.bg-retro-3d-tunnel::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image: 
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: rotateX(60deg);
  animation: gridScroll 12s linear infinite;
}
@keyframes gridScroll {
  from { background-position: 0 0; }
  to { background-position: 0 480px; }
}

/* 4. Parallax Abstract Blobs */
.bg-parallax-blobs {
  position: relative;
  overflow: hidden;
}
.bg-parallax-blobs::before, .bg-parallax-blobs::after {
  content: '';
  position: absolute;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.bg-parallax-blobs::before {
  width: 250px;
  height: 250px;
  top: 10%;
  left: 10%;
  animation: blobFloat1 18s ease-in-out infinite alternate;
}
.bg-parallax-blobs::after {
  width: 300px;
  height: 300px;
  bottom: 15%;
  right: 10%;
  animation: blobFloat2 24s ease-in-out infinite alternate;
}
@keyframes blobFloat1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(40px, 30px) scale(1.1) rotate(45deg); }
}
@keyframes blobFloat2 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(-40px, -20px) scale(0.9) rotate(-45deg); }
}

/* 5. Voronoi / Polygonal Tech Mesh */
.bg-voronoi-mesh {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10l20 20v20L10 70V10zm50 0L40 30v20l20 20V10zM30 40l10-10 10 10-10 10-10-10z' fill='%236366f1' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-size: 80px 80px !important;
}

/* 6. Frosted Glass Pane Overlay */
.bg-frosted-glass {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}
.dark .bg-frosted-glass {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* 7. Cyberpunk Warning Stripes */
.bg-warning-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 10px,
    color-mix(in srgb, var(--color-primary) 5%, transparent) 20px
  ) !important;
}

/* 8. Particles Floating Dust */
.bg-particles-dust {
  position: relative;
  overflow: hidden;
}
.bg-particles-dust::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 20px 30px, var(--color-primary), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, var(--color-primary), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 50px 10px, var(--color-primary), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80px 40px, var(--color-primary), rgba(0,0,0,0));
  background-size: 100px 100px;
  opacity: 0.15;
  animation: dustFloat 15s linear infinite;
}
@keyframes dustFloat {
  from { background-position: 0 0; }
  to { background-position: 0 -100px; }
}

/* ==========================================================================
   PHASE 7: 12 ADDITIONAL DYNAMIC BACKGROUNDS
   ========================================================================== */

/* 1. Matrix Code Rain */
.bg-matrix-rain {
  position: relative;
  overflow: hidden;
}
.bg-matrix-rain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(51,255,51,0.15) 75%, rgba(0,0,0,0) 100%);
  background-size: 100% 300px;
  animation: matrixStream 8s linear infinite;
  opacity: 0.12;
}
@keyframes matrixStream {
  from { background-position-y: -300px; }
  to { background-position-y: 600px; }
}

/* 2. Radar Sweep */
.bg-radar-sweep {
  position: relative;
  overflow: hidden;
}
.bg-radar-sweep::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, var(--color-primary) 0deg, transparent 90deg, transparent 360deg);
  opacity: 0.08;
  animation: radarRotate 6s linear infinite;
}
@keyframes radarRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 3. Topographic Lines */
.bg-topo-lines {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q30,5 50,20 T90,20 M10,40 Q35,25 60,40 T90,40 M10,60 Q30,45 50,60 T90,60 M10,80 Q40,65 70,80 T90,80' fill='none' stroke='%236366f1' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E") !important;
  background-size: 150px 150px !important;
}

/* 4. Magnetic Field */
.bg-magnetic-field {
  position: relative;
  background-image: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 95%, color-mix(in srgb, var(--color-primary) 8%, transparent) 100%) !important;
  background-size: 40px 40px !important;
}

/* 5. Circuit Board */
.bg-circuit-board {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0h10v10H0zm20 20h20v5H20zm0 15h10v5H20zm30-15h20v5H50zm15 30h10v10H65z' fill='%236366f1' fill-opacity='0.03'/%3E%3Cpath d='M10 5h10v10h5v20H15V20H10zm45 15h10V10h5v40H60V30H55z' fill='%236366f1' fill-opacity='0.02'/%3E%3C/svg%3E") !important;
  background-size: 80px 80px !important;
}

/* 6. Bokeh Lights */
.bg-bokeh-lights {
  position: relative;
  overflow: hidden;
}
.bg-bokeh-lights::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(40px circle at 20% 30%, color-mix(in srgb, var(--color-primary) 10%, transparent) 100%, transparent),
    radial-gradient(60px circle at 80% 70%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 8%, transparent) 100%, transparent),
    radial-gradient(50px circle at 50% 20%, color-mix(in srgb, var(--color-primary) 6%, transparent) 100%, transparent);
  animation: bokehPulse 8s ease-in-out infinite alternate;
}
@keyframes bokehPulse {
  0% { opacity: 0.5; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* 7. Bento Geometry */
.bg-bento-geometry {
  position: relative;
  overflow: hidden;
}
.bg-bento-geometry::before {
  content: '▲';
  position: absolute;
  top: 15%;
  left: 10%;
  font-size: 4rem;
  color: color-mix(in srgb, var(--color-primary) 3%, transparent);
  transform: rotate(15deg);
  animation: bentoFloat 20s linear infinite;
}
.bg-bento-geometry::after {
  content: '●';
  position: absolute;
  bottom: 15%;
  right: 12%;
  font-size: 5rem;
  color: color-mix(in srgb, var(--color-secondary, var(--color-primary)) 2%, transparent);
  animation: bentoFloat 25s linear infinite reverse;
}
@keyframes bentoFloat {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-30px) rotate(360deg); }
}

/* 8. Morphing Blob */
.bg-morphing-blob {
  position: relative;
  overflow: hidden;
}
.bg-morphing-blob::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%);
  animation: blobMorph 10s ease-in-out infinite alternate;
  filter: blur(40px);
  z-index: 0;
}
@keyframes blobMorph {
  0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  100% { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; }
}

/* 9. Neon Horizon */
.bg-neon-horizon {
  position: relative;
  overflow: hidden;
}
.bg-neon-horizon::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: 
    linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(150px) rotateX(45deg);
  transform-origin: bottom;
  animation: horizonScroll 8s linear infinite;
}
@keyframes horizonScroll {
  from { background-position-y: 0px; }
  to { background-position-y: 40px; }
}

/* 10. Drifting Mist */
.bg-drifting-mist {
  position: relative;
  overflow: hidden;
}
.bg-drifting-mist::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 4%, transparent) 50%, transparent);
  background-size: 200% 100%;
  animation: mistScroll 25s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes mistScroll {
  from { background-position-x: 0%; }
  to { background-position-x: 200%; }
}

/* 11. Constellation Network */
.bg-constellation-network {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%236366f1' fill-opacity='0.15'/%3E%3Ccircle cx='90' cy='10' r='1.5' fill='%236366f1' fill-opacity='0.15'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%236366f1' fill-opacity='0.2'/%3E%3Ccircle cx='30' cy='80' r='1.5' fill='%236366f1' fill-opacity='0.15'/%3E%3Ccircle cx='70' cy='80' r='1.5' fill='%236366f1' fill-opacity='0.15'/%3E%3Cline x1='10' y1='10' x2='50' y2='50' stroke='%236366f1' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='90' y1='10' x2='50' y2='50' stroke='%236366f1' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='30' y1='80' x2='50' y2='50' stroke='%236366f1' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='70' y1='80' x2='50' y2='50' stroke='%236366f1' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E") !important;
  background-size: 100px 100px !important;
}

/* 12. Data Matrix */
.bg-data-matrix {
  position: relative;
  overflow: hidden;
}
.bg-data-matrix::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 80%),
    linear-gradient(to right, transparent 0%, transparent 95%, color-mix(in srgb, var(--color-primary) 3%, transparent) 95%);
  background-size: 40px 160px;
  opacity: 0.8;
  animation: dataFlow 12s linear infinite;
}
@keyframes dataFlow {
  from { background-position-y: 0px; }
  to { background-position-y: 320px; }
}

/* SVG Icon System (Phase 8) */
.wlp-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  stroke-width: 2px;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
  transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Duotone specific background elements styling */
.wlp-icon .duotone-bg {
  fill: currentColor;
  opacity: 0.15;
  stroke: none;
}

/* Sizing variations */
.wlp-icon-sm {
  width: 1em;
  height: 1em;
  stroke-width: 1.5px;
}

.wlp-icon-lg {
  width: 1.75em;
  height: 1.75em;
  stroke-width: 2px;
}

/* ==========================================================================
   NEW SHIMMERING & INTERACTIVE BACKGROUND EFFECTS
   ========================================================================== */

/* 1. Glitter Glow Theme (Light & Dark) */
body.theme-glitter_glow_light {
  --color-bg: #fafaf9;
  --color-text: #1c1917;
  --color-text-muted: #78716c;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.05);
  background-color: var(--color-bg);
  position: relative;
}
body.theme-glitter_glow_dark {
  --color-bg: #0c0a09;
  --color-text: #f5f5f4;
  --color-text-muted: #a8a29e;
  --color-card-bg: #1c1917;
  --color-card-border: rgba(255, 255, 255, 0.06);
  background-color: var(--color-bg);
  position: relative;
}
body.theme-glitter_glow_light::before,
body.theme-glitter_glow_dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 8%),
    radial-gradient(circle, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 12%, transparent) 0%, transparent 10%),
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 6%);
  background-size: 180px 180px, 260px 260px, 140px 140px;
  background-position: 0 0, 40px 60px, 90px 120px;
  animation: glitterShimmer 25s linear infinite;
}
@keyframes glitterShimmer {
  0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.05) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 0.8; }
}

/* 2. Custom Cyber Grid Rain Theme (Dark) */
body.theme-cyber_grid_rain_dark {
  --color-bg: #050508;
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  --color-card-bg: #0d0d12;
  --color-card-border: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background-color: var(--color-bg);
  position: relative;
}
body.theme-cyber_grid_rain_dark::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: 
    linear-gradient(rgba(0,0,0,0) 0%, color-mix(in srgb, var(--color-primary) 22%, transparent) 75%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 1px, transparent 1px);
  background-size: 100% 320px, 40px 40px, 40px 40px;
  animation: cyberRainStream 10s linear infinite;
}
@keyframes cyberRainStream {
  from { background-position: 0 -320px, 0 0, 0 0; }
  to { background-position: 0 640px, 0 0, 0 0; }
}

/* 3. Plaid Pattern Theme (Light & Dark) */
body.theme-pattern_plaid_light {
  --color-bg: #fafafa;
  --color-text: #18181b;
  --color-text-muted: #71717a;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(0, 0, 0, 0.05);
  background-color: var(--color-bg);
  background-image: 
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--color-primary) 6%, transparent) 50%, transparent 50%);
  background-size: 60px 60px;
}
body.theme-pattern_plaid_dark {
  --color-bg: #09090b;
  --color-text: #f4f4f5;
  --color-text-muted: #a1a1aa;
  --color-card-bg: #18181b;
  --color-card-border: rgba(255, 255, 255, 0.06);
  background-color: var(--color-bg);
  background-image: 
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--color-primary) 8%, transparent) 50%, transparent 50%);
  background-size: 60px 60px;
}

/* ==========================================================================
   ADVANCED INTERACTIVE EFFECTS
   ========================================================================== */

/* 1. Animated Text Gradient */
.text-gradient-animate {
  background: linear-gradient(
    to right,
    var(--color-primary) 20%,
    var(--color-secondary, var(--color-primary)) 40%,
    var(--color-text) 60%,
    var(--color-secondary, var(--color-primary)) 80%,
    var(--color-primary) 100%
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: textShine 6s linear infinite;
}

@keyframes textShine {
  to { background-position: 200% center; }
}

/* 2. Card Hover Spotlight */
.card-glass,
.testimonial-card,
.offer-card,
.benefit-card {
  position: relative;
}

.card-glass::after,
.testimonial-card::after,
.offer-card::after,
.benefit-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    color-mix(in srgb, var(--color-primary) 10%, transparent),
    transparent 80%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card-glass:hover::after,
.testimonial-card:hover::after,
.offer-card:hover::after,
.benefit-card:hover::after {
  opacity: 1;
}

/* Make sure inner content sits on top of spotlight pseudo-element */
.card-glass > *,
.testimonial-card > *,
.offer-card > *,
.benefit-card > * {
  position: relative;
  z-index: 2;
}

/* 3. Ambient Cursor Glow (exclusive to dark mode themes) */
.cursor-glow-bg {
  position: fixed;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-primary) 12%, transparent) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

body.dark .cursor-glow-bg,
body[class*="_dark"] .cursor-glow-bg {
  opacity: 1;
}

/* ==========================================================================
   HIGH TICKET GLOW THEME (Ultra premium flat dark mode with neon accents)
   ========================================================================== */
:root:has(body.theme-high_ticket_glow_dark),
:root:has(body.theme-high_ticket_glow) {
  --color-bg: #09080e !important;
  --color-bg-rgb: 9, 8, 14 !important;
}

body.theme-high_ticket_glow_dark,
body.theme-high_ticket_glow {
  --color-bg: #09080e;
  --color-text: #ffffff;
  --color-text-muted: #94a3b8;
  --color-card-bg: #12111a;
  --color-card-border: rgba(255, 255, 255, 0.06);
  background-color: var(--color-bg) !important;
  background-image: none !important;
  position: relative;
}

/* Force dark class compatibility */
html.dark body.theme-high_ticket_glow_dark,
html.dark body.theme-high_ticket_glow {
  background-color: #000000 !important;
}

/* Remove all other default body glow pseudo-elements */
body.theme-high_ticket_glow_dark::before,
body.theme-high_ticket_glow_dark::after,
body.theme-high_ticket_glow::before,
body.theme-high_ticket_glow::after {
  display: none !important;
  content: none !important;
}

/* Headline Styling: Massive extra-bold uppercase font */
body.theme-high_ticket_glow_dark h1,
body.theme-high_ticket_glow_dark .hero-title,
body.theme-high_ticket_glow_dark .high-ticket-headline,
body.theme-high_ticket_glow h1,
body.theme-high_ticket_glow .hero-title,
body.theme-high_ticket_glow .high-ticket-headline {
  font-family: var(--font-heading, 'Outfit'), sans-serif !important;
  font-weight: 900 !important; /* Force heavier weight */
  font-size: clamp(2.3rem, 5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}

/* Subline and secondary texts */
body.theme-high_ticket_glow_dark p,
body.theme-high_ticket_glow_dark .high-ticket-subline,
body.theme-high_ticket_glow p,
body.theme-high_ticket_glow .high-ticket-subline {
  font-family: var(--font-body, 'Inter'), sans-serif !important;
  font-weight: 400 !important;
}

/* Flat, solid premium card styling */
body.theme-high_ticket_glow_dark .card-glass,
body.theme-high_ticket_glow_dark .testimonial-card,
body.theme-high_ticket_glow_dark .offer-card,
body.theme-high_ticket_glow_dark .benefit-card,
body.theme-high_ticket_glow .card-glass,
body.theme-high_ticket_glow .testimonial-card,
body.theme-high_ticket_glow .offer-card,
body.theme-high_ticket_glow .benefit-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #111017 !important; /* Flat card background */
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border-radius: 12px !important;
}

/* Flat solid sections: no gradients */
body.theme-high_ticket_glow_dark section,
body.theme-high_ticket_glow section {
  background: transparent !important;
  background-image: none !important;
}

/* Dynamic Primary Button (CTA) styling: vibrant neon solid block */
body.theme-high_ticket_glow_dark .btn-primary,
body.theme-high_ticket_glow .btn-primary {
  background: var(--color-primary, #ff004f) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 99px !important; /* pill shape like FSS */
  box-shadow: 0 8px 25px rgba(var(--color-primary-rgb, 241, 30, 170), 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

body.theme-high_ticket_glow_dark .btn-primary:hover,
body.theme-high_ticket_glow .btn-primary:hover {
  background: var(--color-primary-hover, #d9003f) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(var(--color-primary-rgb, 241, 30, 170), 0.5) !important;
}

/* Secondary CTA buttons */
body.theme-high_ticket_glow_dark .btn-secondary,
body.theme-high_ticket_glow .btn-secondary {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
}

body.theme-high_ticket_glow_dark .btn-secondary:hover,
body.theme-high_ticket_glow .btn-secondary:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Outlined hollow numbers for steps in list view */
body.theme-high_ticket_glow_dark .list-outline-number,
body.theme-high_ticket_glow .list-outline-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  line-height: 1;
}

/* Simple solid navbar border */
body.theme-high_ticket_glow_dark .navbar,
body.theme-high_ticket_glow .navbar {
  background: rgba(9, 8, 14, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   STANDALONE SCOREBOARD SECTION
   ========================================================================== */
.scoreboard-section {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
  position: relative;
}

/* 1. Marquee Ticker running text */
.scoreboard-marquee-outer {
  background: #000000;
  border-bottom: 2px solid var(--color-primary, #ff004f);
  overflow: hidden;
  padding: 0.85rem 0;
  width: 100%;
}
.scoreboard-marquee-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.scoreboard-marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: scoreboardMarqueeScroll 25s linear infinite;
}
.scoreboard-marquee-track:hover {
  animation-play-state: paused;
}
.scoreboard-marquee-item {
  display: inline-flex;
  align-items: center;
  padding: 0 2rem;
  flex-shrink: 0;
}
.scoreboard-marquee-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary, #ff004f);
  box-shadow: 0 0 10px var(--color-primary, #ff004f);
  margin-right: 0.85rem;
}
.scoreboard-marquee-text {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-heading, 'Outfit'), sans-serif;
}
@keyframes scoreboardMarqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.3333%, 0, 0);
  }
}

/* 2. Stats scoreboard strip */
.scoreboard-stats-strip {
  background: var(--color-primary, #ff004f);
  width: 100%;
  padding: 3.5rem 0;
}
.scoreboard-stats-grid {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  text-align: center;
}
.scoreboard-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.scoreboard-stats-number {
  font-family: var(--font-heading, 'Outfit'), sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.3rem);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.02em;
}
.scoreboard-stats-label {
  font-family: var(--font-body, 'Inter'), sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  max-width: 220px;
  line-height: 1.4;
}
@media (max-width: 991px) {
  .scoreboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 575px) {
  .scoreboard-stats-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .scoreboard-stats-strip {
    padding: 2.5rem 0;
  }
}

/* ==========================================================================
   CSS FOR 10 ADDITIONAL SCOREBOARD SPECIES
   ========================================================================== */

/* 4. Double Opposite Scroll */
.scoreboard-opposite-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.scroll-direction-right .scoreboard-marquee-track {
  animation: scoreboardMarqueeScrollReverse 25s linear infinite;
}
@keyframes scoreboardMarqueeScrollReverse {
  0% { transform: translate3d(-33.3333%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 5. Bento Scoreboard Grid */
.scoreboard-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.scoreboard-bento-card {
  border-radius: 16px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-card-border, rgba(255,255,255,0.08));
}
.scoreboard-bento-card.card-marquee {
  grid-column: span 3;
  background: #000000;
  padding: 1rem 0;
  overflow: hidden;
  border-bottom: 2px solid var(--color-primary);
}
@media (max-width: 767px) {
  .scoreboard-bento-grid {
    grid-template-columns: 1fr;
  }
  .scoreboard-bento-card.card-marquee {
    grid-column: span 1;
  }
}

/* 6. Floating Glass Card */
.scoreboard-floating-box {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 3.5rem 2rem;
  box-shadow: var(--shadow-xl, 0 20px 40px rgba(0,0,0,0.3));
}
.scoreboard-marquee-inner-wrap {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.5rem;
  overflow: hidden;
}

/* 7. Asymmetric Slanted Banner */
.scoreboard-slanted-outer {
  overflow: hidden;
  width: 100%;
}
.scoreboard-slanted-inner {
  transform: skewY(-2deg);
  margin: 1.5rem 0;
}
.scoreboard-slanted-inner > div {
  transform: skewY(2deg); /* Unskew content */
}

/* 8. Split Editorial Ticker */
.scoreboard-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.scoreboard-split-left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  text-align: left;
}
.scoreboard-editorial-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left: 3px solid var(--color-primary);
  padding-left: 1.5rem;
}
.scoreboard-vertical-marquee-wrapper {
  height: 280px;
  overflow: hidden;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 2rem;
}
.scoreboard-vertical-marquee-wrapper::before,
.scoreboard-vertical-marquee-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}
.scoreboard-vertical-marquee-wrapper::before {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg, #09080e), transparent);
}
.scoreboard-vertical-marquee-wrapper::after {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg, #09080e), transparent);
}
.scoreboard-vertical-marquee-track {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  animation: scoreboardVerticalScroll 18s linear infinite;
}
.scoreboard-vertical-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.scoreboard-vertical-item .vertical-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-primary);
}
.scoreboard-vertical-item .vertical-text {
  font-family: var(--font-heading), sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
@keyframes scoreboardVerticalScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@media (max-width: 767px) {
  .scoreboard-split-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* 9. Minimal Icon Chips */
.icon-chips-marquee .scoreboard-marquee-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-right: 0.85rem;
  filter: drop-shadow(0 0 5px var(--color-primary));
}

/* 10. Scarcity Progress Ticker */
.scoreboard-scarcity-box {
  width: 100%;
}
.scarcity-banner {
  background: rgba(255, 59, 48, 0.08);
  border-bottom: 2px solid #ff3b30;
}
.scarcity-live-indicator {
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.75rem;
  animation: scarcityPulse 1.5s infinite;
}
@keyframes scarcityPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.4; }
}
.scoreboard-progress-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: left;
}
.scoreboard-progress-circle-wrap {
  width: 70px;
  height: 70px;
  position: relative;
  flex-shrink: 0;
  color: var(--color-primary);
}
.scoreboard-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.scoreboard-progress-circle-wrap .circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
}
html.light .scoreboard-progress-circle-wrap .circle-text {
  color: var(--color-text);
}
.progress-strip .scoreboard-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}

/* 11. Giant Outline Background */
.scoreboard-giant-outline-wrapper {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
  width: 100%;
}
.giant-outline-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20vw;
  font-weight: 950;
  font-family: var(--font-heading), sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.03);
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}
html.light .giant-outline-bg-text {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.02);
}
.giant-outline-foreground-stats {
  position: relative;
  z-index: 2;
}

/* 12. Glitch Terminal Ticker */
.scoreboard-terminal-box {
  background: #05070a;
  border-top: 1px dashed rgba(0,255,0,0.2);
  border-bottom: 1px dashed rgba(0,255,0,0.2);
  position: relative;
  width: 100%;
}
.terminal-scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  z-index: 2;
  pointer-events: none;
}
.scoreboard-terminal-box .scoreboard-marquee-outer {
  background: #020305;
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
}
.scoreboard-terminal-box .scoreboard-marquee-text {
  color: #00ff00 !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.8rem;
}
.terminal-prompt {
  color: #00ff00;
  margin-right: 0.5rem;
  font-weight: 900;
  font-family: 'Courier New', Courier, monospace;
}
.scoreboard-terminal-box .scoreboard-stats-strip {
  background: #05070a;
  padding: 3rem 0;
}
.scoreboard-terminal-box .scoreboard-stats-item {
  border: 1px solid rgba(0, 255, 0, 0.15);
  background: #020305;
  padding: 1.5rem;
  border-radius: 4px;
}
.scoreboard-terminal-box .scoreboard-stats-number {
  color: #00ff00 !important;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}
.scoreboard-terminal-box .scoreboard-stats-label {
  color: #88aa88;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
}

/* 13. Masonry Stats Ticker */
.scoreboard-masonry-wrapper {
  width: 100%;
}
.scoreboard-masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(130px, auto);
  gap: 1.25rem;
}
.scoreboard-masonry-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
}
.masonry-stat-card {
  border: 1px solid var(--color-card-border, rgba(255,255,255,0.08));
}
.masonry-marquee-card {
  grid-column: span 2;
  background: #000000;
  overflow: hidden;
  padding: 1.5rem 0 !important;
}
.scoreboard-masonry-grid .block-1 {
  grid-column: span 2;
}
.scoreboard-masonry-grid .block-3 {
  grid-column: span 1;
}
.scoreboard-masonry-grid .block-4 {
  grid-column: span 1;
}
@media (max-width: 991px) {
  .scoreboard-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .scoreboard-masonry-grid {
    grid-template-columns: 1fr;
  }
  .scoreboard-masonry-grid > div {
    grid-column: span 1 !important;
  }
}

/* 14. Gradient Neon Flow */
.scoreboard-gradient-flow-wrapper {
  background: transparent;
  width: 100%;
}
.gradient-flow-track {
  background: linear-gradient(90deg, #ff0055, #00ffcc, #ffcc00, #ff0055) !important;
  background-size: 300% 100% !important;
  animation: neonFlowBg 8s linear infinite !important;
  border-bottom: none !important;
}
@keyframes neonFlowBg {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* 15. Vertical Split Comparison */
.scoreboard-split-comparison {
  display: flex;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  align-items: stretch;
}
.comparison-column {
  flex: 1;
  padding: 3rem 2.5rem;
}
.comparison-column.col-before {
  background: rgba(255, 59, 48, 0.03);
}
.comparison-column.col-after {
  background: rgba(0, 255, 204, 0.03);
}
.comparison-header {
  font-family: var(--font-heading), sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ff3b30;
}
.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}
.comparison-list li::before {
  content: '✕ ';
  color: #ff3b30;
  font-weight: 900;
  margin-right: 0.5rem;
}
.comparison-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison-divider-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.8rem;
  color: #ffffff;
  position: absolute;
  left: -22px;
}
.comparison-stats-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.comparison-stat-node {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.comparison-stat-node .stat-num {
  font-family: var(--font-heading), sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}
.comparison-stat-node .stat-lbl {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
@media (max-width: 767px) {
  .scoreboard-split-comparison {
    flex-direction: column;
  }
  .comparison-divider {
    height: 1px;
    width: 100%;
  }
  .comparison-divider-circle {
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 16. Bold Typography Stack */
.scoreboard-bold-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
.bold-stack-line {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 1rem;
}
.bold-stack-line:last-child {
  border-bottom: none;
}
.bold-stack-number {
  font-family: var(--font-heading), sans-serif;
  font-weight: 950;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 0.9;
  color: #ffffff;
  letter-spacing: -0.04em;
}
html.light .bold-stack-number {
  color: var(--color-text);
}
.bold-stack-label {
  font-family: var(--font-body), sans-serif;
  font-weight: 800;
  font-size: clamp(0.9rem, 1.8vw, 1.4rem);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 17. Minimal Pills Row */
.scoreboard-pills-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
}
.scoreboard-stat-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-card-border, rgba(255,255,255,0.08));
}
.scoreboard-stat-pill .pill-number {
  font-family: var(--font-heading), sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
}
.scoreboard-stat-pill .pill-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.minimal-pills-marquee {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.pill-dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-muted);
  border-radius: 50%;
  margin-right: 0.85rem;
}

/* 18. Circular Metrics Grid */
.scoreboard-circular-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  width: 100%;
}
.scoreboard-circular-card {
  border-radius: 20px;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--color-card-border, rgba(255,255,255,0.08));
}
.circle-progress-wrapper {
  width: 84px;
  height: 84px;
  position: relative;
  margin-bottom: 1.5rem;
}
.circle-progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.circle-progress-wrapper .progress-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading), sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: #ffffff;
}
html.light .circle-progress-wrapper .progress-val {
  color: var(--color-text);
}
.circular-title {
  font-family: var(--font-heading), sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 0.25rem;
}
html.light .circular-title {
  color: var(--color-text);
}
.circular-desc {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.3;
}
@media (max-width: 991px) {
  .scoreboard-circular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .scoreboard-circular-grid {
    grid-template-columns: 1fr;
  }
}

/* 19. Neobrutalist Hazard Ticker */
.scoreboard-neobrutalist-hazard {
  width: 100%;
}
.hazard-marquee-strip {
  background: #facc15 !important;
  border-top: 3px solid #111827 !important;
  border-bottom: 3px solid #111827 !important;
  padding: 0.85rem 0;
  overflow: hidden;
  /* Cyberpunk warning warning tape strip look */
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 15px,
    rgba(17, 24, 39, 0.06) 15px,
    rgba(17, 24, 39, 0.06) 30px
  ) !important;
}
.hazard-black-dot {
  width: 8px;
  height: 8px;
  background: #111827;
  border-radius: 50%;
  margin-right: 0.85rem;
}
.neobrutalist-hazard-card {
  background: #ffffff !important;
  border: 3px solid #111827 !important;
  box-shadow: 6px 6px 0px #111827 !important;
  padding: 2rem 1.5rem !important;
  text-align: center;
  border-radius: 0 !important;
}

/* 20. Overlay Backdrop Blur */
.scoreboard-backdrop-overlay-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 4rem 0;
}
.scoreboard-backdrop-bg-mesh {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 40%),
              radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 15%, transparent) 0%, transparent 45%);
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
}
.scoreboard-backdrop-content-wrap {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   DYNAMIC THEME ADAPTATION FOR STANDALONE SCOREBOARD
   ========================================================================== */

/* --- 1. Generic Light Theme Adaptation --- */
html.light .scoreboard-marquee-outer {
  background: var(--color-card-bg, #ffffff) !important;
  border-bottom: 1px solid var(--color-card-border, rgba(0, 0, 0, 0.08)) !important;
}
html.light .scoreboard-marquee-text {
  color: var(--color-text, #1c1917) !important;
}
html.light .scoreboard-marquee-dot {
  background: var(--color-primary, #6366f1) !important;
  box-shadow: none !important;
}
html.light .scoreboard-stats-strip {
  background: var(--color-bg, #fafaf9) !important;
  border-bottom: 1px solid var(--color-card-border, rgba(0, 0, 0, 0.08)) !important;
}
html.light .scoreboard-stats-number {
  color: var(--color-primary, #6366f1) !important;
  text-shadow: none !important;
}
html.light .scoreboard-stats-label {
  color: var(--color-text-muted, #78716c) !important;
}

/* --- 2. Neobrutalism Theme Adaptation --- */
body[class*="theme-neobrutalism"] .scoreboard-marquee-outer {
  background: #ffffff !important;
  border-top: 3px solid #111827 !important;
  border-bottom: 3px solid #111827 !important;
}
body[class*="theme-neobrutalism"] .scoreboard-marquee-text {
  color: #111827 !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}
body[class*="theme-neobrutalism"] .scoreboard-marquee-dot {
  background: #111827 !important;
  box-shadow: none !important;
}
body[class*="theme-neobrutalism"] .scoreboard-stats-strip {
  background: var(--color-bg, #ffffff) !important;
  border-bottom: 3px solid #111827 !important;
  padding: 3rem 0 !important;
}
body[class*="theme-neobrutalism"] .scoreboard-stats-grid {
  gap: 1.5rem !important;
}
body[class*="theme-neobrutalism"] .scoreboard-stats-item {
  background: #ffffff !important;
  border: 3px solid #111827 !important;
  box-shadow: 4px 4px 0px #111827 !important;
  padding: 1.5rem !important;
  border-radius: 0px !important;
}
body[class*="theme-neobrutalism"] .scoreboard-stats-number {
  color: #111827 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
body[class*="theme-neobrutalism"] .scoreboard-stats-label {
  color: #374151 !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   DECOUPLED BACKGROUND PATTERNS
   ========================================================================== */

body.bg-pattern-grid {
  background-image: 
    linear-gradient(color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

body.bg-pattern-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--color-primary) 12%, transparent) 1.5px, transparent 1.5px) !important;
  background-size: 24px 24px !important;
}

body.bg-pattern-waves {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--color-primary) 4%, transparent) 20px, color-mix(in srgb, var(--color-primary) 4%, transparent) 40px) !important;
}

body.bg-pattern-topography {
  background-image: 
    radial-gradient(circle at 20% 30%, transparent 120px, color-mix(in srgb, var(--color-primary) 4%, transparent) 121px, transparent 122px),
    radial-gradient(circle at 80% 70%, transparent 160px, color-mix(in srgb, var(--color-primary) 4%, transparent) 161px, transparent 162px) !important;
  background-size: 100% 100% !important;
}

body.bg-pattern-orbs::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--color-primary) 10%, var(--color-secondary, var(--color-primary))) 0%, transparent 35%) !important;
  animation: glassBodyAnim 20s ease-in-out infinite alternate;
}

body.bg-pattern-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.045'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-none {
  background-image: none !important;
}

body.bg-pattern-stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, color-mix(in srgb, var(--color-primary) 8%, transparent) 15px, color-mix(in srgb, var(--color-primary) 8%, transparent) 16px) !important;
}

body.bg-pattern-blueprint {
  background-image: 
    linear-gradient(color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-primary) 15%, transparent) 2px, transparent 2px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 15%, transparent) 2px, transparent 2px) !important;
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px !important;
}

body.bg-pattern-hex {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16.16 L56 48.48 L28 64.64 L0 48.48 L0 16.16 Z M28 98 L56 81.84 L56 49.52 L28 33.36 L0 49.52 L0 81.84 Z' fill='none' stroke='rgba(100,110,240,0.03)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 0 L40 40 L80 40 M40 40 L40 80 M80 0 L60 20 L60 0 M0 80 L20 60 L20 80' fill='none' stroke='rgba(100,110,240,0.03)' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(100,110,240,0.05)'/%3E%3Ccircle cx='60' cy='20' r='1.5' fill='rgba(100,110,240,0.05)'/%3E%3Ccircle cx='20' cy='60' r='1.5' fill='rgba(100,110,240,0.05)'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 15 L30 30 L60 15 L30 0 Z' fill='none' stroke='rgba(100,110,240,0.025)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-isogrid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='50' viewBox='0 0 86 50'%3E%3Cpath d='M0 25 L43 0 L86 25 L43 50 Z M43 0 L43 50' fill='none' stroke='rgba(100,110,240,0.025)' stroke-width='1'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-crosses {
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 30%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(to right, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, transparent) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-position: center center !important;
}

body.bg-pattern-halftone {
  background-image: 
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 16%, transparent) 20%, transparent 21%),
    radial-gradient(circle, color-mix(in srgb, var(--color-primary) 9%, transparent) 15%, transparent 16%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 12px 12px !important;
}

body.bg-pattern-plaid {
  background-image: 
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--color-primary) 6%, transparent) 50%, transparent 50%) !important;
  background-size: 60px 60px !important;
}

/* ==========================================================================
   NEW BACKGROUND PATTERNS (EXPANSION TO 51 PATTERNS)
   ========================================================================== */

body.bg-pattern-stars {
  background-image: 
    radial-gradient(1px 1px at 20px 30px, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 40px 70px, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent),
    radial-gradient(1px 1px at 50px 110px, color-mix(in srgb, var(--color-primary) 25%, transparent), transparent),
    radial-gradient(2px 2px at 80px 40px, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 110px 80px, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent),
    radial-gradient(1px 1px at 120px 120px, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent) !important;
  background-size: 140px 140px !important;
}

body.bg-pattern-triangles::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M0 0 L28 0 L14 24.5 Z M14 24.5 L0 49 L28 49 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M0 0 L28 0 L14 24.5 Z M14 24.5 L0 49 L28 49 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 28px 49px;
  mask-size: 28px 49px;
}

body.bg-pattern-diamonds {
  background-image: 
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 25%, transparent 25%),
    linear-gradient(225deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 25%, transparent 25%),
    linear-gradient(315deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 25%, transparent 25%) !important;
  background-position: 20px 0, 20px 0, 0 0, 0 0 !important;
  background-size: 40px 40px !important;
}

body.bg-pattern-cubes {
  background-image: 
    linear-gradient(30deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--color-primary) 5%, transparent) 87.5%, color-mix(in srgb, var(--color-primary) 5%, transparent)),
    linear-gradient(150deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 12%, transparent 12.5%, transparent 87%, color-mix(in srgb, var(--color-primary) 5%, transparent) 87.5%, color-mix(in srgb, var(--color-primary) 5%, transparent)),
    linear-gradient(300deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 24%, transparent 24.5%, transparent 75%, color-mix(in srgb, var(--color-primary) 7%, transparent) 75.5%, color-mix(in srgb, var(--color-primary) 7%, transparent)),
    linear-gradient(60deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 24%, transparent 24.5%, transparent 75%, color-mix(in srgb, var(--color-primary) 7%, transparent) 75.5%, color-mix(in srgb, var(--color-primary) 7%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 50%, transparent 50%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 2%, transparent) 50%, transparent 50%) !important;
  background-size: 40px 70px !important;
}

body.bg-pattern-honeycomb::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16.16 L56 48.48 L28 64.64 L0 48.48 L0 16.16 Z M28 98 L56 81.84 L56 49.52 L28 33.36 L0 49.52 L0 81.84 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16.16 L56 48.48 L28 64.64 L0 48.48 L0 16.16 Z M28 98 L56 81.84 L56 49.52 L28 33.36 L0 49.52 L0 81.84 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 56px 98px;
  mask-size: 56px 98px;
}

body.bg-pattern-lines-horizontal {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px) !important;
  background-size: 100% 24px !important;
}

body.bg-pattern-lines-vertical {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--color-primary) 6%, transparent) 1px, transparent 1px) !important;
  background-size: 24px 100% !important;
}

body.bg-pattern-crosshatch {
  background-image: 
    linear-gradient(45deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
    linear-gradient(-45deg, color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

body.bg-pattern-argyle::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E%3Cpath d='M30 0 L60 50 L30 100 L0 50 Z M0 0 L60 100 M60 0 L0 100' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E%3Cpath d='M30 0 L60 50 L30 100 L0 50 Z M0 0 L60 100 M60 0 L0 100' fill='black' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 100px;
  mask-size: 60px 100px;
}

body.bg-pattern-checkerboard {
  background-image: 
    linear-gradient(45deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 25%, transparent 25%), 
    linear-gradient(-45deg, color-mix(in srgb, var(--color-primary) 4%, transparent) 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-primary) 4%, transparent) 75%), 
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-primary) 4%, transparent) 75%) !important;
  background-size: 30px 30px !important;
  background-position: 0 0, 0 15px, 15px -15px, -15px 0px !important;
}

body.bg-pattern-houndstooth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.045;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L10 0 L10 10 L0 20 Z M10 10 L20 10 L20 20 L10 20 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0 0 L10 0 L10 10 L0 20 Z M10 10 L20 10 L20 20 L10 20 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

body.bg-pattern-basketweave::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 L20 0 L20 20 L0 20 Z M20 20 L40 20 L40 40 L20 40 Z M20 0 L40 0 L40 20 L20 20 Z M0 20 L20 20 L20 40 L0 40 Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 0 L20 0 L20 20 L0 20 Z M20 20 L40 20 L40 40 L20 40 Z M20 0 L40 0 L40 20 L20 20 Z M0 20 L20 20 L20 40 L0 40 Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
}

body.bg-pattern-herringbone::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M0 0 L15 15 L0 30 M15 0 L30 15 L15 30 M30 0 L15 15 L30 30 M15 0 L0 15 L15 30' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M0 0 L15 15 L0 30 M15 0 L30 15 L15 30 M30 0 L15 15 L30 30 M15 0 L0 15 L15 30' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 30px 30px;
  mask-size: 30px 30px;
}

body.bg-pattern-seigaiha::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 30 A30 30 0 0 1 60 30 M5 30 A25 25 0 0 1 55 30 M10 30 A20 20 0 0 1 50 30 M15 30 A15 15 0 0 1 45 30 M20 30 A10 10 0 0 1 40 30 M25 30 A5 5 0 0 1 35 30' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 30 A30 30 0 0 1 60 30 M5 30 A25 25 0 0 1 55 30 M10 30 A20 20 0 0 1 50 30 M15 30 A15 15 0 0 1 45 30 M20 30 A10 10 0 0 1 40 30 M25 30 A5 5 0 0 1 35 30' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 30px;
  mask-size: 60px 30px;
}

body.bg-pattern-asanoha::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 0 L60 17.3 L60 52 L30 34.6 L0 52 L0 17.3 Z M30 104 L60 86.7 L60 52 L30 69.4 L0 52 L0 86.7 Z M30 34.6 L30 69.4 M0 17.3 L60 86.7 M60 17.3 L0 86.7' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 0 L60 17.3 L60 52 L30 34.6 L0 52 L0 17.3 Z M30 104 L60 86.7 L60 52 L30 69.4 L0 52 L0 86.7 Z M30 34.6 L30 69.4 M0 17.3 L60 86.7 M60 17.3 L0 86.7' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 104px;
  mask-size: 60px 104px;
}

body.bg-pattern-art-deco::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 40 A40 40 0 0 1 40 0 M0 40 A30 30 0 0 1 30 10 M0 40 A20 20 0 0 1 20 20 M0 40 A10 10 0 0 1 10 30 M40 40 A40 40 0 0 0 0 0 M40 40 A30 30 0 0 0 10 10 M40 40 A20 20 0 0 0 20 20 M40 40 A10 10 0 0 0 30 30' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 40 A40 40 0 0 1 40 0 M0 40 A30 30 0 0 1 30 10 M0 40 A20 20 0 0 1 20 20 M0 40 A10 10 0 0 1 10 30 M40 40 A40 40 0 0 0 0 0 M40 40 A30 30 0 0 0 10 10 M40 40 A20 20 0 0 0 20 20 M40 40 A10 10 0 0 0 30 30' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
}

body.bg-pattern-sunburst {
  background-image: repeating-conic-gradient(from 0deg at 50% 0%, transparent 0deg 3deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 3deg 6deg) !important;
}

body.bg-pattern-spiral {
  background-image: repeating-radial-gradient(circle at center, transparent, transparent 15px, color-mix(in srgb, var(--color-primary) 4%, transparent) 15px, color-mix(in srgb, var(--color-primary) 4%, transparent) 30px) !important;
  background-size: 100% 100% !important;
}

body.bg-pattern-moroccan::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E%3Cpath d='M30 0 C30 25 0 25 0 50 C0 75 30 75 30 100 C30 75 60 75 60 50 C60 25 30 25 30 0 Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100' viewBox='0 0 60 100'%3E%3Cpath d='M30 0 C30 25 0 25 0 50 C0 75 30 75 30 100 C30 75 60 75 60 50 C60 25 30 25 30 0 Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 100px;
  mask-size: 60px 100px;
}

body.bg-pattern-terrazzo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
  opacity: 0.05;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L25 15 L20 25 L5 20 Z M50 15 L65 10 L60 25 L45 20 Z M80 20 L95 10 L90 30 Z M30 40 L45 35 L40 55 L25 50 Z M70 50 L85 45 L80 65 L65 60 Z M15 70 L30 65 L25 80 L10 75 Z M50 75 L65 70 L60 90 L45 85 Z M80 80 L95 75 L90 95 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L25 15 L20 25 L5 20 Z M50 15 L65 10 L60 25 L45 20 Z M80 20 L95 10 L90 30 Z M30 40 L45 35 L40 55 L25 50 Z M70 50 L85 45 L80 65 L65 60 Z M15 70 L30 65 L25 80 L10 75 Z M50 75 L65 70 L60 90 L45 85 Z M80 80 L95 75 L90 95 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
}

body.bg-pattern-confetti::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary, var(--color-primary)));
  opacity: 0.05;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='10' y='10' width='8' height='4' transform='rotate(15 10 10)' fill='black'/%3E%3Ccircle cx='50' cy='20' r='3' fill='black'/%3E%3Crect x='90' y='15' width='4' height='8' transform='rotate(45 90 15)' fill='black'/%3E%3Cpolygon points='30,50 35,55 25,60' fill='black'/%3E%3Crect x='70' y='60' width='6' height='6' transform='rotate(30 70 60)' fill='black'/%3E%3Ccircle cx='110' cy='70' r='2.5' fill='black'/%3E%3Crect x='20' y='90' width='5' height='10' transform='rotate(60 20 90)' fill='black'/%3E%3Cpolygon points='60,95 68,98 64,106' fill='black'/%3E%3Ccircle cx='95' cy='105' r='4' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='10' y='10' width='8' height='4' transform='rotate(15 10 10)' fill='black'/%3E%3Ccircle cx='50' cy='20' r='3' fill='black'/%3E%3Crect x='90' y='15' width='4' height='8' transform='rotate(45 90 15)' fill='black'/%3E%3Cpolygon points='30,50 35,55 25,60' fill='black'/%3E%3Crect x='70' y='60' width='6' height='6' transform='rotate(30 70 60)' fill='black'/%3E%3Ccircle cx='110' cy='70' r='2.5' fill='black'/%3E%3Crect x='20' y='90' width='5' height='10' transform='rotate(60 20 90)' fill='black'/%3E%3Cpolygon points='60,95 68,98 64,106' fill='black'/%3E%3Ccircle cx='95' cy='105' r='4' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
}

body.bg-pattern-blobs::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--color-primary) 15%, transparent) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 45%),
              radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 10%, transparent) 0%, transparent 50%) !important;
  background-size: 100% 100% !important;
}

body.bg-pattern-matrix::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.045;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'%3E%3Ctext x='10' y='20' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='10' y='40' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='10' y='70' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='30' y='30' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='30' y='60' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='30' y='90' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='50' y='10' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='50' y='50' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='50' y='80' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='70' y='40' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='70' y='70' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='70' y='110' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'%3E%3Ctext x='10' y='20' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='10' y='40' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='10' y='70' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='30' y='30' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='30' y='60' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='30' y='90' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='50' y='10' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='50' y='50' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='50' y='80' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='70' y='40' font-family='monospace' font-size='10' fill='black'%3E0%3C/text%3E%3Ctext x='70' y='70' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3Ctext x='70' y='110' font-family='monospace' font-size='10' fill='black'%3E1%3C/text%3E%3C/svg%3E");
  -webkit-mask-size: 80px 120px;
  mask-size: 80px 120px;
}

body.bg-pattern-circuit-board::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L30 10 L40 20 L40 40 M40 20 L60 20 L70 30 L70 60 M70 40 L90 40 L90 80 M10 50 L10 80 L30 80 L40 90 M30 50 L50 70 M80 10 L80 30 M50 90 L80 90' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='3' fill='black'/%3E%3Ccircle cx='40' cy='40' r='3' fill='black'/%3E%3Ccircle cx='70' cy='60' r='3' fill='black'/%3E%3Ccircle cx='90' cy='80' r='3' fill='black'/%3E%3Ccircle cx='40' cy='90' r='3' fill='black'/%3E%3Ccircle cx='80' cy='10' r='2' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M10 10 L30 10 L40 20 L40 40 M40 20 L60 20 L70 30 L70 60 M70 40 L90 40 L90 80 M10 50 L10 80 L30 80 L40 90 M30 50 L50 70 M80 10 L80 30 M50 90 L80 90' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='3' fill='black'/%3E%3Ccircle cx='40' cy='40' r='3' fill='black'/%3E%3Ccircle cx='70' cy='60' r='3' fill='black'/%3E%3Ccircle cx='90' cy='80' r='3' fill='black'/%3E%3Ccircle cx='40' cy='90' r='3' fill='black'/%3E%3Ccircle cx='80' cy='10' r='2' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
}

body.bg-pattern-carbon-fiber {
  background: 
    linear-gradient(45deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 25%, transparent 25%), 
    linear-gradient(-45deg, color-mix(in srgb, var(--color-primary) 7%, transparent) 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-primary) 7%, transparent) 75%), 
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-primary) 7%, transparent) 75%) !important;
  background-size: 8px 8px !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px !important;
}

body.bg-pattern-sand-dunes::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 20 Q25 10 50 20 T100 20 M0 30 Q25 20 50 30 T100 30 M0 10 Q25 0 50 10 T100 10' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 20 Q25 10 50 20 T100 20 M0 30 Q25 20 50 30 T100 30 M0 10 Q25 0 50 10 T100 10' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 100px 40px;
  mask-size: 100px 40px;
}

body.bg-pattern-bamboo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cpath d='M20 0 L20 100 M60 0 L60 100 M20 20 L24 23 M20 70 L24 73 M60 40 L64 43 M60 90 L64 93 M20 30 C20 30 10 25 12 15 C14 5 20 25 20 25 M60 50 C60 50 50 45 52 35 C54 25 60 45 60 45' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='100' viewBox='0 0 80 100'%3E%3Cpath d='M20 0 L20 100 M60 0 L60 100 M20 20 L24 23 M20 70 L24 73 M60 40 L64 43 M60 90 L64 93 M20 30 C20 30 10 25 12 15 C14 5 20 25 20 25 M60 50 C60 50 50 45 52 35 C54 25 60 45 60 45' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 80px 100px;
  mask-size: 80px 100px;
}

body.bg-pattern-leaves::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 30 C10 40 10 50 20 50 C30 50 30 40 20 30 M20 50 L10 60 M60 20 C65 10 75 10 75 20 C75 30 65 30 60 20 M75 20 L85 25 M100 50 C90 60 90 70 100 70 C110 70 110 60 100 50 M100 70 L90 80 M40 80 C35 70 25 70 25 80 C25 90 35 90 40 80 M40 80 L50 85 M80 90 C85 80 95 80 95 90 C95 100 85 100 80 90 M80 90 L70 100' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 30 C10 40 10 50 20 50 C30 50 30 40 20 30 M20 50 L10 60 M60 20 C65 10 75 10 75 20 C75 30 65 30 60 20 M75 20 L85 25 M100 50 C90 60 90 70 100 70 C110 70 110 60 100 50 M100 70 L90 80 M40 80 C35 70 25 70 25 80 C25 90 35 90 40 80 M40 80 L50 85 M80 90 C85 80 95 80 95 90 C95 100 85 100 80 90 M80 90 L70 100' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
}

body.bg-pattern-greek-key::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L15 20 L15 5 L35 5 L35 35 L5 35 L5 10 M40 20 L25 20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L15 20 L15 5 L35 5 L35 35 L5 35 L5 10 M40 20 L25 20' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
}

body.bg-pattern-scales::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 20 A20 20 0 0 1 40 20 M-20 10 A20 20 0 0 1 20 10 A20 20 0 0 1 60 10' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M0 20 A20 20 0 0 1 40 20 M-20 10 A20 20 0 0 1 20 10 A20 20 0 0 1 60 10' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 20px;
  mask-size: 40px 20px;
}

body.bg-pattern-celtic::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 C45 15 45 45 30 60 C15 45 15 15 30 0 Z M0 30 C15 45 45 45 60 30 C45 15 15 15 0 30 Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0 C45 15 45 45 30 60 C15 45 15 15 30 0 Z M0 30 C15 45 45 45 60 30 C45 15 15 15 0 30 Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}

body.bg-pattern-retro-arcade::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='16' height='16' fill='black'/%3E%3Crect x='22' y='2' width='16' height='16' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='22' width='16' height='16' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='22' y='22' width='6' height='6' fill='black'/%3E%3Crect x='32' y='32' width='6' height='6' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect x='2' y='2' width='16' height='16' fill='black'/%3E%3Crect x='22' y='2' width='16' height='16' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='22' width='16' height='16' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='22' y='22' width='6' height='6' fill='black'/%3E%3Crect x='32' y='32' width='6' height='6' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
}

body.bg-pattern-digital-wave::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.04;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Ccircle cx='0' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='25' r='1.5' fill='black'/%3E%3Ccircle cx='20' cy='28' r='1.5' fill='black'/%3E%3Ccircle cx='30' cy='29' r='1.5' fill='black'/%3E%3Ccircle cx='40' cy='28' r='1.5' fill='black'/%3E%3Ccircle cx='50' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='60' cy='12' r='1.5' fill='black'/%3E%3Ccircle cx='70' cy='9' r='1.5' fill='black'/%3E%3Ccircle cx='80' cy='8' r='1.5' fill='black'/%3E%3Ccircle cx='90' cy='12' r='1.5' fill='black'/%3E%3Ccircle cx='100' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='0' cy='10' r='1' fill='black'/%3E%3Ccircle cx='10' cy='15' r='1' fill='black'/%3E%3Ccircle cx='20' cy='18' r='1' fill='black'/%3E%3Ccircle cx='30' cy='19' r='1' fill='black'/%3E%3Ccircle cx='40' cy='18' r='1' fill='black'/%3E%3Ccircle cx='50' cy='10' r='1' fill='black'/%3E%3Ccircle cx='60' cy='2' r='1' fill='black'/%3E%3Ccircle cx='70' cy='0' r='1' fill='black'/%3E%3Ccircle cx='80' cy='0' r='1' fill='black'/%3E%3Ccircle cx='90' cy='2' r='1' fill='black'/%3E%3Ccircle cx='100' cy='10' r='1' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Ccircle cx='0' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='10' cy='25' r='1.5' fill='black'/%3E%3Ccircle cx='20' cy='28' r='1.5' fill='black'/%3E%3Ccircle cx='30' cy='29' r='1.5' fill='black'/%3E%3Ccircle cx='40' cy='28' r='1.5' fill='black'/%3E%3Ccircle cx='50' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='60' cy='12' r='1.5' fill='black'/%3E%3Ccircle cx='70' cy='9' r='1.5' fill='black'/%3E%3Ccircle cx='80' cy='8' r='1.5' fill='black'/%3E%3Ccircle cx='90' cy='12' r='1.5' fill='black'/%3E%3Ccircle cx='100' cy='20' r='1.5' fill='black'/%3E%3Ccircle cx='0' cy='10' r='1' fill='black'/%3E%3Ccircle cx='10' cy='15' r='1' fill='black'/%3E%3Ccircle cx='20' cy='18' r='1' fill='black'/%3E%3Ccircle cx='30' cy='19' r='1' fill='black'/%3E%3Ccircle cx='40' cy='18' r='1' fill='black'/%3E%3Ccircle cx='50' cy='10' r='1' fill='black'/%3E%3Ccircle cx='60' cy='2' r='1' fill='black'/%3E%3Ccircle cx='70' cy='0' r='1' fill='black'/%3E%3Ccircle cx='80' cy='0' r='1' fill='black'/%3E%3Ccircle cx='90' cy='2' r='1' fill='black'/%3E%3Ccircle cx='100' cy='10' r='1' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100px 40px;
  mask-size: 100px 40px;
}

body.bg-pattern-optical-illusion::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect x='0' y='0' width='40' height='40' fill='black'/%3E%3Crect x='40' y='40' width='40' height='40' fill='black'/%3E%3Ccircle cx='40' cy='40' r='20' fill='white'/%3E%3Ccircle cx='40' cy='40' r='10' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Crect x='0' y='0' width='40' height='40' fill='black'/%3E%3Crect x='40' y='40' width='40' height='40' fill='black'/%3E%3Ccircle cx='40' cy='40' r='20' fill='white'/%3E%3Ccircle cx='40' cy='40' r='10' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 80px 80px;
  mask-size: 80px 80px;
}

body.bg-pattern-shattered-glass::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--color-primary);
  opacity: 0.035;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 0 L120 120 M120 0 L0 120 M60 0 L60 120 M0 60 L120 60 M30 30 L90 30 L90 90 L30 90 Z M45 45 L75 45 L75 75 L45 75 Z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 0 L120 120 M120 0 L0 120 M60 0 L60 120 M0 60 L120 60 M30 30 L90 30 L90 90 L30 90 Z M45 45 L75 45 L75 75 L45 75 Z' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
}

/* ==========================================================================
   20 NEW PREMIUM GRADIENT MESH & GRAINY GRADIENT PATTERNS
   ========================================================================== */

/* Shared Grainy Overlay for all Mesh Patterns */
body[class*="bg-pattern-mesh-"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.055'/%3E%3C/svg%3E") !important;
}

body.bg-pattern-mesh-fluid::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 30% 30%, var(--color-primary) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, var(--color-secondary, var(--color-primary)) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-primary) 40%, var(--color-secondary, var(--color-primary))) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 40%, transparent) 0%, transparent 50%) !important;
  filter: blur(80px);
  animation: meshRotate 30s linear infinite;
  opacity: 0.45;
}

body.bg-pattern-mesh-aurora::before {
  content: "";
  position: fixed;
  inset: -20% -20% 40% -20%;
  z-index: -2;
  pointer-events: none;
  background: 
    linear-gradient(90deg, 
      transparent 0%, 
      color-mix(in srgb, var(--color-primary) 40%, transparent) 25%, 
      transparent 45%, 
      color-mix(in srgb, var(--color-secondary, var(--color-primary)) 35%, transparent) 60%, 
      transparent 75%, 
      color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary, var(--color-primary))) 90%, 
      transparent 100%) !important;
  filter: blur(50px);
  animation: meshAuroraMove 20s ease-in-out infinite alternate;
  opacity: 0.42;
}

body.bg-pattern-mesh-grainy-peach::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-primary) 30%, #ff8a65) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 25%, #ffb74d) 0%, transparent 60%) !important;
  filter: blur(60px);
  opacity: 0.4;
}

body.bg-pattern-mesh-grainy-neon::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--color-primary) 90%, #00f0ff) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 95%, #ff007f) 0%, transparent 50%) !important;
  filter: blur(90px);
  animation: meshGlowPulse 15s ease-in-out infinite alternate;
  opacity: 0.5;
}

body.bg-pattern-mesh-nebula::before {
  content: "";
  position: fixed;
  inset: -40%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-primary) 60%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 50%, transparent) 0%, transparent 45%) !important;
  filter: blur(100px) contrast(1.5);
  animation: meshNebulaAnim 25s ease-in-out infinite alternate;
  opacity: 0.5;
}

body.bg-pattern-mesh-liquid-slow::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 35% 35%, var(--color-primary) 0%, transparent 40%),
    radial-gradient(circle at 65% 65%, var(--color-secondary, var(--color-primary)) 0%, transparent 40%) !important;
  filter: blur(80px) contrast(1.8);
  animation: meshLiquidAnim 35s ease-in-out infinite;
  opacity: 0.4;
}

body.bg-pattern-mesh-glow-center::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 45%, var(--color-secondary, var(--color-primary))) 0%, transparent 60%) !important;
  filter: blur(70px);
  animation: meshPulseCenter 12s ease-in-out infinite alternate;
  opacity: 0.45;
}

body.bg-pattern-mesh-sunset::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: 
    linear-gradient(to bottom, 
      color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, 
      color-mix(in srgb, var(--color-secondary, var(--color-primary)) 30%, transparent) 40%, 
      transparent 80%) !important;
  filter: blur(40px);
  opacity: 0.42;
}

body.bg-pattern-mesh-cyberpunk::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 10% 10%, #00f0ff 0%, transparent 45%),
    radial-gradient(circle at 90% 90%, #ff007f 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--color-primary) 0%, transparent 50%) !important;
  filter: blur(100px);
  animation: meshCyberMove 20s ease-in-out infinite alternate;
  opacity: 0.5;
}

body.bg-pattern-mesh-glass::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 80% 80%, var(--color-primary) 0%, transparent 45%),
    radial-gradient(circle at 20% 20%, var(--color-secondary, var(--color-primary)) 0%, transparent 45%) !important;
  filter: blur(60px);
  animation: meshGlassGlow 22s ease-in-out infinite alternate;
  opacity: 0.45;
}

body.bg-pattern-mesh-radial-multi::before {
  content: "";
  position: fixed;
  inset: -40%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 20% 20%, var(--color-primary) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, var(--color-secondary, var(--color-primary)) 0%, transparent 35%),
    radial-gradient(circle at 20% 80%, var(--color-secondary, var(--color-primary)) 0%, transparent 35%),
    radial-gradient(circle at 80% 80%, var(--color-primary) 0%, transparent 35%) !important;
  filter: blur(75px);
  animation: meshMultiOrb 28s linear infinite;
  opacity: 0.45;
}

body.bg-pattern-mesh-soft-pastel::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, #fff) 0%, transparent 60%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 15%, #fff) 0%, transparent 60%) !important;
  filter: blur(80px);
  opacity: 0.4;
}

body.bg-pattern-mesh-dark-smoke::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--color-primary) 25%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 20%, transparent) 0%, transparent 50%) !important;
  filter: blur(90px) contrast(1.3);
  animation: meshSmokeMove 18s ease-in-out infinite alternate;
  opacity: 0.4;
}

body.bg-pattern-mesh-flare::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 60%, var(--color-secondary, var(--color-primary))) 0%, transparent 50%) !important;
  filter: blur(80px);
  animation: meshFlarePulse 10s ease-in-out infinite alternate;
  opacity: 0.45;
}

body.bg-pattern-mesh-split::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background: 
    linear-gradient(135deg, 
      color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, 
      transparent 50%, 
      color-mix(in srgb, var(--color-secondary, var(--color-primary)) 30%, transparent) 100%) !important;
  filter: blur(70px);
  opacity: 0.45;
}

body.bg-pattern-mesh-holographic::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 20% 30%, #ff007f 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, #00f0ff 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, #ffef00 0%, transparent 40%),
    radial-gradient(circle at 30% 70%, var(--color-primary) 0%, transparent 40%) !important;
  filter: blur(95px);
  animation: meshHoloRotate 18s linear infinite;
  opacity: 0.45;
}

body.bg-pattern-mesh-cosmic-dust::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 30%, transparent) 0%, transparent 50%) !important;
  filter: blur(80px);
  animation: meshCosmicShimmer 16s ease-in-out infinite alternate;
  opacity: 0.45;
}

body.bg-pattern-mesh-lavender::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--color-primary) 20%, #b388ff) 0%, transparent 55%),
    radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 15%, #8c9eff) 0%, transparent 55%) !important;
  filter: blur(60px);
  opacity: 0.4;
}

body.bg-pattern-mesh-toxic::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 20% 80%, #39ff14 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, var(--color-primary) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--color-secondary, var(--color-primary)) 0%, transparent 50%) !important;
  filter: blur(90px);
  animation: meshToxicMove 22s ease-in-out infinite alternate;
  opacity: 0.45;
}

body.bg-pattern-mesh-minimal::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background: 
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--color-primary) 25%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 20%, transparent) 0%, transparent 40%) !important;
  filter: blur(70px);
  opacity: 0.35;
}

/* Animation Keyframes for Gradient Meshes */
@keyframes meshRotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes meshAuroraMove {
  0% { transform: translateX(-5%) translateY(-2%) scaleY(1); }
  50% { transform: translateX(5%) translateY(2%) scaleY(1.1); }
  100% { transform: translateX(-5%) translateY(-2%) scaleY(1); }
}

@keyframes meshGlowPulse {
  0% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.1) translate(3%, -2%); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes meshNebulaAnim {
  0% { transform: rotate(0deg) scale(1) translate(0, 0); }
  50% { transform: rotate(45deg) scale(1.1) translate(-2%, 3%); }
  100% { transform: rotate(90deg) scale(1) translate(0, 0); }
}

@keyframes meshLiquidAnim {
  0% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(120deg) scale(1.08) translate(2%, -2%); }
  66% { transform: rotate(240deg) scale(0.95) translate(-2%, 2%); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes meshPulseCenter {
  0% { transform: scale(0.9); opacity: 0.15; }
  100% { transform: scale(1.1); opacity: 0.22; }
}

@keyframes meshCyberMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -3%) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes meshGlassGlow {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(180deg) scale(1.15); }
}

@keyframes meshMultiOrb {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(-360deg) scale(1); }
}

@keyframes meshSmokeMove {
  0% { transform: translateY(0) scaleX(1); }
  100% { transform: translateY(-4%) scaleX(1.08); }
}

@keyframes meshFlarePulse {
  0% { transform: scale(1); opacity: 0.14; }
  100% { transform: scale(1.15); opacity: 0.22; }
}

@keyframes meshHoloRotate {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.15); }
}

@keyframes meshCosmicShimmer {
  0% { transform: scale(1) rotate(0deg); opacity: 0.14; }
  100% { transform: scale(1.08) rotate(15deg); opacity: 0.18; }
}

@keyframes meshToxicMove {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-3%, 3%) rotate(90deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(180deg) scale(1); }
}

body.bg-pattern-fireflies,
body.bg-pattern-bubbles {
  background-color: #030308 !important;
}

body.bg-pattern-wave-dots,
body.bg-pattern-wave-lines,
body.bg-pattern-network-constellation,
body.bg-pattern-mesh-aurora-canvas,
body.bg-pattern-matrix-rain,
body.bg-pattern-wind-flow,
body.bg-pattern-floating-geometry {
  background-color: #04040d !important;
}

/* --- Upgraded Double-Ring Dynamic CSS Guarantee Seal --- */
.selo-garantia {
  position: relative;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--color-primary, #27ae60) 60%, color-mix(in srgb, var(--color-primary, #27ae60) 80%, #000) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-family, system-ui, -apple-system, sans-serif);
  font-weight: bold;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25), 
              0 0 10px color-mix(in srgb, var(--color-primary, #27ae60) 30%, transparent);
  border: 3px solid rgba(255, 255, 255, 0.8);
  margin: 0 auto;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.selo-garantia:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), 
              0 0 20px color-mix(in srgb, var(--color-primary, #27ae60) 50%, transparent);
}

/* Outer clockwise ring */
.selo-garantia::after {
  content: '';
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  animation: girar 25s linear infinite;
  pointer-events: none;
}

/* Inner counter-clockwise ring */
.selo-garantia::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: 3px; bottom: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  animation: girar-reverso 15s linear infinite;
  pointer-events: none;
}

.selo-texto {
  font-size: 10px;
  line-height: 1.1;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.selo-texto span {
  font-size: 26px;
  font-weight: 900;
  display: block;
  line-height: 0.95;
  margin-bottom: 2px;
}

@keyframes girar {
  100% { transform: rotate(360deg); }
}

@keyframes girar-reverso {
  100% { transform: rotate(-360deg); }
}