/* =========================================================================
   WIKSTA BRAND STYLING SHEET — Bold & Vibrant Redesign
   Inspired by antigravity.google & squareup.com (No Blue color, Sunset Theme)
   ========================================================================= */

/* GLOBAL TOKENS & VARIABLES */
:root {
  /* Pristine light-themed variables (Stark White Backdrops) */
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff; 
  --bg-tertiary: #f9f9f9;
  
  --color-indigo: #10b981; /* Primary Elegant Emerald Green */
  --color-indigo-glow: rgba(16, 185, 129, 0.08);
  --color-violet: #059669; /* Sparsely Used Darker Emerald Green */
  --color-violet-glow: rgba(5, 150, 105, 0.08);
  --color-green: #34d399; /* Sparsely Used Lighter Green */
  --color-green-glow: rgba(52, 211, 153, 0.08);
  
  --color-slate-light: #555555; /* Neutral Slate */
  --color-slate-gray: #666666;
  --color-dark-ink: #111111; /* Stark Black/Charcoal */
  --color-border: rgba(0, 0, 0, 0.07);
  --color-border-focus: rgba(16, 185, 129, 0.25);
  --color-navy: #111111;
  
  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
  --font-serif: 'Lora', Georgia, serif;
  
  /* Dimensions & Speeds */
  --header-height: 76px;
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --box-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.02);
  --box-shadow-premium: 0 20px 45px rgba(0, 0, 0, 0.04);
}

/* Theme Override (Warm Obsidian Mode) */
html[data-theme="dark"] {
  --bg-primary: #0a0807; /* Deep obsidian black */
  --bg-secondary: #0a0807;
  --bg-tertiary: #131110;
  
  --color-indigo: #10b981; /* Primary Elegant Emerald Green */
  --color-indigo-glow: rgba(16, 185, 129, 0.15);
  --color-violet: #059669; 
  --color-violet-glow: rgba(5, 150, 105, 0.15);
  --color-green: #34d399;
  --color-green-glow: rgba(52, 211, 153, 0.15);
  
  --color-slate-light: #a8a09d;
  --color-slate-gray: #8c8380;
  --color-dark-ink: #ffffff;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-focus: rgba(16, 185, 129, 0.3);
  --color-navy: #ffffff;
  
  --box-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
  --box-shadow-premium: 0 20px 45px rgba(0, 0, 0, 0.45);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--color-dark-ink);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

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

button, input {
  font-family: inherit;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-indigo);
}

.container {
  max-width: 1440px;
  width: 94%;
  margin: 0 auto;
  position: relative;
}

.container-narrow {
  max-width: 960px;
}

.text-center {
  text-align: center !important;
}

/* Section Header Styles */
.section-header-sys {
  text-align: left;
  max-width: 780px;
  margin-bottom: 4rem;
}

.section-header-sys.text-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header-sys h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  color: var(--color-dark-ink);
}

.section-header-sys p {
  color: var(--color-slate-gray);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Monospace badge token */
.monospace-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-indigo-glow);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--color-indigo);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
}

.category-tag-badge {
  display: inline-flex;
  background: var(--color-violet-glow);
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: var(--color-violet);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

/* Status Lights */
.status-indicator-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.pulse-coral {
  background: var(--color-indigo);
  box-shadow: 0 0 8px var(--color-indigo);
  animation: dotPulse 2.5s infinite ease-in-out;
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 14px var(--color-indigo), 0 0 0 3px var(--color-indigo-glow); }
}

/* Gradient Text */
.gradient-text-coral {
  background: linear-gradient(135deg, var(--color-indigo), var(--color-violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================================================
   SCROLL REVEAL ANIMATION UTILITIES
   ========================================================================= */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.fade-in.visible {
  opacity: 1;
}

.scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.slide-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for card grids */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }

/* =========================================================================
   MOBILE NAVIGATION DRAWER
   ========================================================================= */
/* Hamburger button — visible only on mobile */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.2s ease;
  z-index: 1001;
}

.mobile-menu-toggle:hover {
  background: rgba(16, 185, 129, 0.08);
}

.hamburger-line {
  width: 22px;
  height: 2px;
  background: var(--color-dark-ink);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

html[data-theme="dark"] .hamburger-line {
  background: #e4e4e7;
}

/* X state when open */
.mobile-menu-toggle.is-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-toggle.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay backdrop */
#mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* Mobile nav drawer — slides from right */
#mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 85vw);
  height: 100dvh;
  z-index: 1200;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background-color: rgba(250, 250, 249, 0.78);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 55%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0) 45%),
    linear-gradient(rgba(16, 185, 129, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-theme="dark"] #mobile-nav-drawer {
  border-left-color: rgba(255, 255, 255, 0.06);
  background-color: rgba(2, 8, 6, 0.78);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0) 65%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
}

#mobile-nav-drawer.is-open {
  transform: translateX(0);
}

.mob-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .mob-drawer-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.mob-drawer-logo {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  color: var(--color-dark-ink);
  text-transform: lowercase;
}

[data-theme="dark"] .mob-drawer-logo {
  color: #ffffff;
}

.mob-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark-ink);
  font-size: 1.25rem;
  transition: all 0.2s ease;
}

[data-theme="dark"] .mob-drawer-close {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}

.mob-drawer-close:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.mob-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 0.25rem;
  flex: 1;
}

.mob-drawer-link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--color-dark-ink);
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}

[data-theme="dark"] .mob-drawer-link {
  color: #e4e4e7;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.mob-drawer-link:hover {
  background: rgba(16, 185, 129, 0.06);
  color: #10b981;
  padding-left: 1.25rem;
}

.mob-drawer-footer {
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-theme="dark"] .mob-drawer-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.mob-drawer-cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.mob-cta-primary {
  background: #d4ff00;
  color: #111111;
}

.mob-cta-primary:hover {
  background: #beee00;
  box-shadow: 0 6px 18px rgba(212, 255, 0, 0.25);
  color: #111111;
}

.mob-cta-secondary {
  background: transparent;
  color: var(--color-dark-ink);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .mob-cta-secondary {
  color: #e4e4e7;
  border-color: rgba(255, 255, 255, 0.1);
}

.mob-cta-secondary:hover {
  border-color: #10b981;
  color: #10b981;
}

/* Media query relocated below navbar declarations to prevent cascading overrides */

/* =========================================================================
   CTA LEAD DRAWER (slides from left)
   ========================================================================= */
#cta-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#cta-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

#cta-lead-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(540px, 95vw);
  height: 100dvh;
  z-index: 2100;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background-color: rgba(250, 250, 249, 0.78);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 55%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0) 45%),
    linear-gradient(rgba(16, 185, 129, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-theme="dark"] #cta-lead-drawer {
  border-left-color: rgba(255, 255, 255, 0.06);
  background-color: rgba(2, 8, 6, 0.78);
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0) 65%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
}

#cta-lead-drawer.is-open {
  transform: translateX(0);
}

.cta-drawer-inner {
  padding: 2.25rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 100dvh;
  overflow-y: auto;
  position: relative;
  z-index: 5;
}

.cta-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

[data-theme="dark"] .cta-drawer-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.cta-drawer-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.08em;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
}

.cta-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark-ink);
  font-size: 1.1rem;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

[data-theme="dark"] .cta-drawer-close {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
}

.cta-drawer-close:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
}

.cta-drawer-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 1.85rem);
  color: var(--color-dark-ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

[data-theme="dark"] .cta-drawer-title {
  color: #ffffff;
}

.cta-drawer-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-slate-gray);
  line-height: 1.6;
  margin-bottom: 2rem;
}

[data-theme="dark"] .cta-drawer-desc {
  color: #a1a1aa;
}

#cta-lead-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-field label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-dark-ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-theme="dark"] .form-field label {
  color: rgba(255, 255, 255, 0.65);
}

.field-helper-text {
  font-size: 0.72rem;
  color: var(--color-slate-gray);
  margin-top: -2px;
  opacity: 0.85;
}

html[data-theme="dark"] .field-helper-text {
  color: #a1a1aa;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-dark-ink);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-slate-gray);
  opacity: 0.75;
}

[data-theme="dark"] .form-field input::placeholder,
[data-theme="dark"] .form-field textarea::placeholder {
  color: #52525b;
  opacity: 1;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.form-field input:focus:invalid,
.form-field textarea:focus:invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-field select option {
  background: var(--bg-primary);
  color: var(--color-dark-ink);
}

[data-theme="dark"] .form-field select option {
  background: #020806;
  color: #e4e4e7;
}

.form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 400px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-submit-btn {
  background: #d4ff00;
  color: #111111;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-submit-btn:hover {
  background: #beee00;
  box-shadow: 0 8px 22px rgba(212, 255, 0, 0.25);
  transform: translateY(-1px);
  color: #111111;
}

.form-submit-btn:active {
  transform: translateY(0);
}

.cta-drawer-trust {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

[data-theme="dark"] .cta-drawer-trust {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-slate-gray);
}

[data-theme="dark"] .trust-item {
  color: #71717a;
}

.trust-item svg {
  color: #10b981;
  flex-shrink: 0;
}

/* =========================================================================
   1. PHYSICS GRAVITY INTERACTIVE BACKGROUND (Decorative Only)
   ========================================================================= */
#gravityCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}

/* =========================================================================
   2. NAVBAR
   ========================================================================= */
.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  max-width: 1440px;
  height: 60px;
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 12px;
  background: rgba(250, 250, 249, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-smooth);
}

html[data-theme="dark"] .navbar {
  background: rgba(2, 8, 6, 0.72);
  border: 1px solid rgba(16, 185, 129, 0.20);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.navbar-inner {
  max-width: 1440px;
  width: 100%;
  padding: 0 1.5rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--color-indigo);
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 6px;
  line-height: 1;
}

.logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--color-dark-ink);
}

.cta-nav-btn {
  background: #d4ff00;
  color: #111111;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: none;
  font-family: var(--font-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-nav-btn:hover {
  background: #beee00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 255, 0, 0.2);
  color: #111111;
}

.logo-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--color-slate-light);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: 4px;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-slate-light);
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-dark-ink);
}

@media (max-width: 991px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-links,
  .nav-actions {
    display: none !important;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bg-style-toggle {
  background: var(--bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-indigo);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all var(--transition-fast);
}

.bg-style-toggle:hover {
  background: var(--color-indigo-glow);
  border-color: var(--color-indigo);
}

.theme-toggle {
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--color-indigo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.05);
}

.theme-toggle:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
  transform: scale(1.05);
}

.theme-moon { display: none; }
html[data-theme="dark"] .theme-sun { display: none; }
html[data-theme="dark"] .theme-moon { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn-nav-cta {
  background: var(--color-dark-ink);
  color: var(--bg-primary);
}

.btn-nav-cta:hover {
  background: var(--color-indigo);
  color: #ffffff;
}

/* Mobile menu display and nav-actions hiding moved to 991px media query above */

/* =========================================================================
   3. HERO SECTION
   ========================================================================= */
.hero-sec {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-top: calc(var(--header-height) + 2rem);
  padding-bottom: 3rem;
  position: relative;
  z-index: 1;
  overflow: hidden; /* Prevent background elements from expanding bounds */
  background-color: #020806; /* Maintain deep dark venue aesthetic */
  background-image: 
    linear-gradient(rgba(16, 185, 129, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0) 55%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 45%),
    linear-gradient(rgba(2, 8, 6, 0.5) 0%, rgba(2, 8, 6, 0.88) 100%),
    url('hero_bg.png');
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%, cover, cover;
  background-position: center center, center center, center center, center center, center center, center bottom;
}


[data-theme="dark"] .hero-sec {
  background-color: #020806;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0) 65%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(rgba(2, 8, 6, 0.45) 0%, rgba(2, 8, 6, 0.96) 100%),
    url('hero_bg.png');
  background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%, cover, cover;
  background-position: center center, center center, center center, center center, center center, center bottom;
}

.hero-center-layout {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 6.2vw, 4.45rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff; /* Stark white to pop on venue background */
  margin-bottom: 1.25rem;
  text-align: center;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.highlight-green {
  color: #10b981; /* Primary Elegant Emerald Green */
}

.hero-subheadline {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7); /* Muted white for readability */
  margin-bottom: 2.25rem;
  max-width: 680px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero-ctas-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero-sec {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--header-height) + 1.5rem);
    padding-bottom: 2.5rem;
    box-sizing: border-box;
  }
  
  .hero-title {
    font-size: clamp(1.5rem, 6.5vw, 1.95rem);
    line-height: 1.2;
    margin-bottom: 0.65rem;
    letter-spacing: -0.01em;
  }
  
  .hero-subheadline {
    font-size: 0.86rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
  }
  
  .hero-ctas-center {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    gap: 10px;
  }
  
  .hero-ctas-center .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 18px;
  }
}

/* Elegant matte keycap button — premium yellow */
.btn-keycap-stitch {
  background: #d4ff00;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: #111111;
  box-shadow: 0 4px 10px rgba(212, 255, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.btn-keycap-stitch:hover {
  background: #beee00;
  border-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.25);
  color: #111111;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(212, 255, 0, 0.25);
}

.btn-keycap-stitch:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

/* Dark mode overrides for keycap */
html[data-theme="dark"] .btn-keycap-stitch {
  background: #d4ff00;
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  color: #111111;
  box-shadow: 0 4px 10px rgba(212, 255, 0, 0.25);
}

html[data-theme="dark"] .btn-keycap-stitch:hover {
  background: #beee00;
  border-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.45);
  color: #111111;
  box-shadow: 0 10px 20px rgba(212, 255, 0, 0.35);
}

/* Elegant secondary keycap button */
.btn-keycap-secondary {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 2px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  padding: 12px 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-slate-gray);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.btn-keycap-secondary:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--color-dark-ink);
  transform: translateY(-1px);
}

.btn-keycap-secondary:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

html[data-theme="dark"] .btn-keycap-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.4);
  color: #a1a1aa;
}

html[data-theme="dark"] .btn-keycap-secondary:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Specific styling override for hero secondary button to ensure high contrast on dark image backdrop */
.hero-sec .btn-keycap-secondary {
  border-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.02);
}

.hero-sec .btn-keycap-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
  color: #ffffff;
}

/* Floating waitlist CTA removed in favor of floating glassmorphic navbar */

.card-middle-left {
  top: 42%;
  left: -12%;
  max-width: 340px;
}

.card-bottom-right {
  bottom: 8%;
  right: -8%;
}

@media (max-width: 576px) {
  .glass-float-card {
    max-width: 260px;
    padding: 10px 14px;
  }
  .card-top-right { right: 2%; top: 5%; }
  .card-middle-left { left: 2%; top: 38%; }
  .card-bottom-right { right: 2%; bottom: 5%; }
}

.gfc-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.sports-badge { background: rgba(16, 185, 129, 0.1); color: var(--color-indigo); }
.music-badge { background: rgba(5, 150, 105, 0.1); color: var(--color-violet); }
.support-badge { background: rgba(16, 185, 129, 0.1); color: var(--color-green); }

.gfc-body {
  flex: 1;
}

.gfc-meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-slate-gray);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.gfc-desc {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-dark-ink);
  line-height: 1.25;
}

.gfc-sub {
  font-size: 0.68rem;
  color: var(--color-slate-gray);
  margin-top: 1px;
}

.gfc-pill-value {
  background: var(--color-indigo-glow);
  color: var(--color-indigo);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.gfc-pill-value.status-success {
  background: var(--color-green-glow);
  color: var(--color-green);
}

.gfc-pill-status {
  background: var(--bg-tertiary);
  color: var(--color-slate-light);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Animations for floating cards */
@keyframes floatUpAndDown {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-anim-1 { animation: floatUpAndDown 6s infinite ease-in-out; }
.float-anim-2 { animation: floatUpAndDown 7.5s infinite ease-in-out 1s; }
.float-anim-3 { animation: floatUpAndDown 5.2s infinite ease-in-out 2s; }

/* =========================================================================
   4. PROBLEM SECTION
   ========================================================================= */
.problem-sec {
  background-color: var(--bg-secondary);
  padding: 0;
  border: none;
  position: relative;
  z-index: 1;
}

.problem-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.problem-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--color-dark-ink);
  max-width: 880px;
}

.problem-columns {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4.5rem;
  margin-top: 1rem;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .problem-columns {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Editorial Style Paragraphs */
.editorial-p {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-dark-ink);
  margin-bottom: 1.75rem;
}

.editorial-p.secondary-p {
  color: var(--color-slate-gray);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.65;
}

/* Premium Gap Audit Card with Green Gradients */
.problem-gradient-card {
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--box-shadow-soft);
  transition: all var(--transition-smooth);
}

.problem-gradient-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16, 185, 129, 0.15);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.03);
}

.pgc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
}

.pgc-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-slate-gray);
  letter-spacing: 0.05em;
}

.pgc-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pgc-passive-row {
  opacity: 0.65;
}

.pgc-row-meta {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-slate-light);
}

.pgc-row-desc {
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--color-slate-gray);
}

/* Elegant Soft Green Gradient Active Box */
.pgc-active-card-gradient {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.07), rgba(5, 150, 105, 0.01));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--color-indigo);
  border-radius: 6px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pacg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pacg-title {
  font-family: var(--font-mono);
  font-weight: 750;
  font-size: 0.65rem;
  color: var(--color-indigo);
  letter-spacing: 0.04em;
}

.pacg-body {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-dark-ink);
}

.pacg-body strong {
  font-weight: 600;
  color: var(--color-indigo);
}

.takeover-scroll-wrapper {
  height: 180vh; /* Determines the scroll length of the expansion */
  position: relative;
  margin-top: 0;
}

.takeover-sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-secondary); /* Matches problem-sec backdrop */
}

.takeover-media-box {
  --scroll-progress: 0;
  /* Interpolate from boxed spaces to full screen based on progress */
  width: calc(85vw + (15vw * var(--scroll-progress)));
  height: calc(65vh + (35vh * var(--scroll-progress)));
  max-width: calc(1440px + ((100% - 1440px) * var(--scroll-progress)));
  border-radius: calc(24px * (1 - var(--scroll-progress)));
  
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, calc(0.18 * (1 - var(--scroll-progress))));
  background-color: #050505;
  
  /* Fallback transitions for instant snap or if JS is disabled */
  transition: box-shadow 0.1s ease-out;
}

/* Ensure that at 100% progress we are absolutely full-bleed without max-width constraints */
@media (min-width: 1441px) {
  .takeover-media-box {
    max-width: calc(1440px + (100vw - 1440px) * var(--scroll-progress));
  }
}

.takeover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Smooth zoom-out as it expands */
  transform: scale(calc(1.15 - (0.15 * var(--scroll-progress)))) translateZ(0);
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: none;
}

/* Takeover Phone Screen WhatsApp Simulator Overlay Styles */
/* The venue_takeover_phone.jpg already has the WhatsApp header and input bar
   baked into the photo. This overlay covers ONLY the white chat feed area
   of the phone screen, hiding its own header/input bar to avoid duplication. */
.takeover-phone-screen-overlay {
  display: none !important;
  position: absolute;
  /* Coordinates target the white chat area center within the phone screen.
     Measured against the image natural dimensions (1672×941), accounting for
     object-fit:cover mapping and the image's scale transform. */
  top: 48.0%;
  left: 54.5%;
  transform: translate(-50%, -50%) rotate(-8.5deg) scale(calc(1.15 - (0.15 * var(--scroll-progress))));
  transform-origin: center center;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  container-type: inline-size;
  pointer-events: none;
  overflow: hidden;
}

@media (min-width: 769px) {
  .takeover-phone-screen-overlay {
    /* Width and height sized to cover the white chat feed area of the phone screen */
    width: 13.2%;
    height: 52.0%;
    border-radius: 0;
  }
}

@media (max-width: 768px) {
  .takeover-phone-screen-overlay {
    width: 13.2%;
    height: 52.0%;
    border-radius: 0;
  }
}

/* Override absolute positioning for takeover WhatsApp screen container */
.takeover-phone-screen-overlay .whatsapp-screen-overlay {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Hide the header and input bar — they're already in the photo */
.takeover-phone-screen-overlay .whatsapp-header-bar {
  display: none !important;
}

.takeover-phone-screen-overlay .whatsapp-input-bar {
  display: none !important;
}

/* Chat feed fills the entire overlay (the white chat area of the phone) */
.takeover-phone-screen-overlay .whatsapp-chats-feed {
  flex: 1 !important;
  padding: 4cqw 3cqw !important;
  gap: 3cqw !important;
  background: transparent !important;
  overflow-y: auto !important;
}

/* Responsive bubble sizing using container queries */
.takeover-phone-screen-overlay .wa-msg-bubble {
  font-size: 4.8cqw !important;
  padding: 2.2cqw 3cqw !important;
  border-radius: 2.2cqw !important;
  margin-bottom: 0.5cqw !important;
  max-width: 82% !important;
  line-height: 1.4 !important;
}

.takeover-phone-screen-overlay .wa-typing-indicator {
  padding: 1.5cqw 2cqw !important;
  gap: 1.2cqw !important;
}

.takeover-phone-screen-overlay .wa-typing-indicator span {
  width: 1.5cqw !important;
  height: 1.5cqw !important;
}

.takeover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding: clamp(2rem, 6vw, 4rem) clamp(2rem, 6vw, 5rem);
  background: transparent;
  
  /* Fade in and slide up based on scroll progress */
  opacity: var(--scroll-progress);
  transform: translateY(calc(30px * (1 - var(--scroll-progress))));
  pointer-events: none;
}

.takeover-overlay-content {
  max-width: 560px;
  padding: 0;
}

.badge-overlay {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.takeover-overlay-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.takeover-overlay-desc {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Adjust layout rules on mobile so mobile view looks pristine */
@media (max-width: 768px) {
  .takeover-scroll-wrapper {
    height: 140vh; /* slightly shorter scroll strip on mobile */
    margin-top: 3rem;
  }
  
  .takeover-media-box {
    width: calc(90vw + (10vw * var(--scroll-progress)));
    height: calc(55vh + (45vh * var(--scroll-progress)));
    border-radius: calc(16px * (1 - var(--scroll-progress)));
  }
}
/* =========================================================================
   4B2. NARRATIVE ACTION SECTION — Split Screen Sticky Showcase
   ========================================================================= */
.narrative-action-sec {
  background-color: var(--bg-primary); /* Stark white */
  padding: 10rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}

.narrative-action-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 5rem;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .narrative-action-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

.na-left-sticky {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 991px) {
  .na-left-sticky {
    position: relative;
    top: auto;
  }
}

.na-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  font-weight: 850;
  color: var(--color-dark-ink);
  margin: 1.5rem 0;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.na-subtext {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-slate-gray);
  margin-bottom: 3.5rem;
  max-width: 520px;
}

.na-closing-box {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 2rem 0;
  width: 100%;
  max-width: 520px;
}

.na-closing-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 750;
  color: var(--color-indigo);
  letter-spacing: 0.05em;
}

.na-closing-line {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  color: var(--color-dark-ink);
  margin-top: 0.5rem;
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

/* =========================================================================
   NARRATIVE ACTION SECTION — B2B Stackable Cards & Redesigned Workflow Visualizer
   ========================================================================= */
.na-right-scrollable {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

.na-card {
  background: var(--bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0 !important; /* Strict sharp-corner brand architecture */
  padding: 2.5rem;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--box-shadow-soft);
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .na-card {
  background: #0d0d0d;
}

.na-card:hover {
  background: var(--bg-primary);
  border-color: #10B981; /* Glowing emerald green border */
  box-shadow: var(--box-shadow-premium);
  transform: translateY(-4px);
}

html[data-theme="dark"] .na-card:hover {
  background: #110f0e;
}

.na-card-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-indigo);
  letter-spacing: 0.05em;
}

.na-card-pain {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-slate-light);
}

html[data-theme="dark"] .na-card-pain {
  color: #a8a09d;
}

.pain-label {
  font-weight: 700;
  color: #ef4444; /* Alert red */
}

/* HIGH-FIDELITY B2B GRAPHIC CARD VISUALS */
.na-card-visual {
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100px;
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
}

html[data-theme="dark"] .na-card-visual {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.na-card:hover .na-card-visual {
  border-color: rgba(16, 185, 129, 0.2);
}

/* Redesigned Workflow Visualizer Wrapper (Overriding standard visual container) */
.na-card-visual-workflow {
  height: auto !important;
  aspect-ratio: 2 / 1;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.na-card-shift {
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .na-card-shift {
  color: #8c8380;
}

.na-card-shift p {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.shift-label {
  font-family: var(--font-heading);
  font-weight: 800;
  color: #10B981; /* Emerald green highlight */
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

/* ---- Card 1 Custom Padding and Footer styles ---- */
#na-card-1 {
  padding: 1.8rem 1.8rem 2.5rem 1.8rem !important;
}

.na-card-footer-workflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  margin-top: 0.5rem;
}

.na-workflow-footer-content {
  flex: 1;
}

.na-workflow-footer-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--color-dark-ink);
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.na-workflow-footer-desc {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--color-slate-gray);
  margin: 0;
}

html[data-theme="dark"] .na-workflow-footer-desc {
  color: #8c8380;
}

/* Sub-footer capsule badge for Cards 4, 5, 6 */
.re-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 9999px;
  padding: 3px 10px;
  margin-top: 8px;
}

html[data-theme="dark"] .re-footer-badge {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
}

.re-footer-badge-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
}

.re-lightning-icon {
  width: 9px;
  height: 9px;
  stroke: #10B981;
  display: block;
}

.re-footer-badge-text {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: #10B981;
  letter-spacing: -0.01em;
  line-height: 1;
}

.na-workflow-footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.na-badge-circle-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Subtly rotate the dashed green outer ring of the badge for rich premium motion */
.badge-ring-bg {
  transform-origin: center;
  animation: badgeRotate 25s infinite linear;
}

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

.badge-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: drawCheck 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.5s;
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ---- Card 1 Visualizer Container (800 x 400 aspect ratio) ---- */
.wf-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .wf-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.wf-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.path-bg {
  stroke: rgba(0, 0, 0, 0.16);
  transition: stroke 0.3s ease;
}

html[data-theme="dark"] .path-bg {
  stroke: rgba(255, 255, 255, 0.18);
}

/* ---- Input Event Pills (Left Column) ---- */
.wf-events-column {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.wf-pill {
  position: absolute;
  left: 3.75%;
  width: 22.5%;
  height: 12.5%;
  transform: translateY(-50%);
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1cqw; /* Squircle style within card borders */
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0 1.25cqw;
  box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  pointer-events: auto;
}

html[data-theme="dark"] .wf-pill {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Precise Event Pill Vertical Positions */
#pill-booking { top: 10%; }
#pill-message { top: 30%; }
#pill-scan { top: 50%; }
#pill-visit { top: 70%; }
#pill-dropoff { top: 90%; }

.wf-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-pill-svg {
  width: 1.75cqw;
  height: 1.75cqw;
  stroke: var(--color-slate-gray);
  transition: stroke 0.3s ease;
}

html[data-theme="dark"] .wf-pill-svg {
  stroke: #8c8380;
}

.wf-pill-text {
  font-family: var(--font-body);
  font-size: 1.6cqw;
  font-weight: 500;
  color: var(--color-dark-ink);
}

html[data-theme="dark"] .wf-pill-text {
  color: #e9edef;
}

/* Hover and active states on event pills */
.wf-pill:hover {
  border-color: var(--color-indigo);
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}

.wf-pill:hover .wf-pill-svg {
  stroke: var(--color-indigo);
}

/* Coordinated dispatch pulse for source pills */
@keyframes pillActive {
  0% {
    transform: translateY(-50%) scale(1);
    border-color: var(--color-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  }
  5% {
    transform: translateY(-50%) scale(1.06);
    border-color: #10B981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
  }
  15% {
    transform: translateY(-50%) scale(1);
    border-color: var(--color-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}

#pill-booking { animation: pillActive 10s infinite ease-in-out; }
#pill-message { animation: pillActive 10s infinite ease-in-out; animation-delay: 2s; }
#pill-scan { animation: pillActive 10s infinite ease-in-out; animation-delay: 4s; }
#pill-visit { animation: pillActive 10s infinite ease-in-out; animation-delay: 6s; }
#pill-dropoff { animation: pillActive 10s infinite ease-in-out; animation-delay: 8s; }

/* ---- Merging Point Dot ---- */
.wf-merge-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.25cqw;
  height: 1.25cqw;
  background: #10B981;
  border-radius: 50%;
  border: 0.25cqw solid var(--bg-primary);
  box-shadow: 0 0 0 0.25cqw rgba(16, 185, 129, 0.2);
  z-index: 3;
  animation: mergeDotPulse 2s infinite ease-in-out;
}

html[data-theme="dark"] .wf-merge-dot {
  border-color: #161413;
}

@keyframes mergeDotPulse {
  0%, 100% { box-shadow: 0 0 0 0.25cqw rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 0 0.75cqw rgba(16, 185, 129, 0.45); }
}

/* Center W Badge for Card 6 visualizer */
.wf-merge-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 4.5cqw;
  height: 4.5cqw;
  background: var(--bg-primary);
  border: 0.1875cqw solid #10B981;
  border-radius: 50%;
  box-shadow: 0 0 1.25cqw rgba(16, 185, 129, 0.15);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wfBadgePulse 2.5s infinite ease-in-out;
}

html[data-theme="dark"] .wf-merge-badge {
  background: #1e1b1a;
}

.wf-merge-badge-letter {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.85cqw;
  color: #10B981;
  line-height: 1;
}

@keyframes wfBadgePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 1.25cqw rgba(16, 185, 129, 0.15); }
  50% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 2cqw rgba(16, 185, 129, 0.35); }
}

/* Card 6 Pipeline Node Delays (10s synchronized motion timeline) */
#nm-node-summarized { animation-delay: 1.46s; }
#nm-node-dropped { animation-delay: 0.30s; }
#nm-node-attention { animation-delay: 1.15s; }
#nm-node-nextmove { animation-delay: 0.00s; animation-name: nodeSuccessPulse; }

/* ---- Horizontal Pipeline Nodes (Right Side) ---- */
.wf-pipeline-row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.wf-node-container {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  pointer-events: auto;
  z-index: 5;
}

.wf-node {
  width: 4.5cqw;
  height: 4.5cqw;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  position: relative;
}

html[data-theme="dark"] .wf-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
}

.wf-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-gray);
  transition: color 0.3s ease;
}

html[data-theme="dark"] .wf-node-icon {
  color: #8c8380;
}

.wf-node-svg {
  width: 2cqw;
  height: 2cqw;
  stroke: currentColor;
}

.wf-node-text {
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-weight: 500;
  color: var(--color-slate-gray);
  transition: color 0.3s ease;
}

html[data-theme="dark"] .wf-node-text {
  color: #8c8380;
}

/* Node Hover Actions */
.wf-node:hover {
  transform: scale(1.08);
  border-color: var(--color-indigo);
}

.wf-node:hover .wf-node-icon {
  color: var(--color-indigo);
}

/* Success styling for the Completed node */
.wf-node.node-success {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.03);
}

html[data-theme="dark"] .wf-node.node-success {
  background: rgba(16, 185, 129, 0.08);
}

.wf-node.node-success .wf-node-icon {
  color: #10B981;
}

/* Coordinated node ripple pulses synchronized with dot snap arrivals */
.wf-node {
  animation: nodePulse 2s infinite ease-in-out;
}

#node-captured { animation-delay: 1.46s; }
#node-assigned { animation-delay: 0.30s; }
#node-followup { animation-delay: 1.15s; }
#node-completed { animation-delay: 0.00s; animation-name: nodeSuccessPulse; }

@keyframes nodePulse {
  0% { transform: scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-color: var(--color-border); }
  10% { transform: scale(1.18); border-color: #10B981; box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.22); }
  20% { transform: scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-color: var(--color-border); }
  100% { transform: scale(1); }
}

@keyframes nodeSuccessPulse {
  0% { transform: scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-color: rgba(16, 185, 129, 0.3); }
  10% { transform: scale(1.22); border-color: #10B981; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.30); }
  20% { transform: scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-color: rgba(16, 185, 129, 0.3); }
  100% { transform: scale(1); }
}

/* ---- Visualizer Mobile Responsive Sizing ---- */
@media (max-width: 768px) {
  .na-card {
    padding: 1.5rem;
  }
  
  #na-card-1 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }

  .na-card-footer-workflow {
    gap: 1rem;
  }

  .na-workflow-footer-headline {
    font-size: 1.3rem;
  }

  .na-workflow-footer-desc {
    font-size: 0.86rem;
  }

  .na-workflow-footer-badge {
    width: 36px;
    height: 36px;
  }
}

/* ---- Card Visual Child Elements Styling ---- */
/* Visual 1 Checklist (Legacy / Backup) */
.visual-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.visual-list-item {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-slate-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="dark"] .visual-list-item {
  color: #a8a09d;
}

.visual-list-item.checked {
  color: #10B981;
  font-weight: 600;
}

/* Visual 2 Chat bubble */
.visual-chat-bubble {
  background: var(--bg-secondary);
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  max-width: 85%;
  align-self: flex-start;
  width: 100%;
}

html[data-theme="dark"] .visual-chat-bubble {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
}

.na-card:hover .visual-chat-bubble {
  background: var(--bg-primary);
  border-color: rgba(16, 185, 129, 0.25);
}

html[data-theme="dark"] .na-card:hover .visual-chat-bubble {
  background: #110f0e;
}

.bubble-sender {
  font-family: var(--font-heading);
  font-weight: 750;
  font-size: 0.74rem;
  color: var(--color-indigo);
  display: block;
  margin-bottom: 2px;
}

.visual-chat-bubble p {
  font-size: 0.76rem;
  color: var(--color-dark-ink);
  margin: 0;
}

html[data-theme="dark"] .visual-chat-bubble p {
  color: #e9edef;
}

/* Visual 3 Status card */
.visual-status-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(239, 68, 68, 0.015);
  border: 1px solid rgba(239, 68, 68, 0.06);
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

html[data-theme="dark"] .visual-status-card {
  background: rgba(239, 68, 68, 0.03);
  border-color: rgba(239, 68, 68, 0.1);
}

.na-card:hover .visual-status-card {
  border-color: rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.04);
}

.status-icon {
  font-size: 1.1rem;
}

.status-info {
  display: flex;
  flex-direction: column;
}

.status-title {
  font-family: var(--font-heading);
  font-weight: 750;
  font-size: 0.78rem;
  color: #ef4444; /* Warning Red */
}

.status-time {
  font-size: 0.68rem;
  color: var(--color-slate-light);
}

html[data-theme="dark"] .status-time {
  color: #a8a09d;
}

/* Visual 4 Re-engagement Dispatch */
.visual-alert {
  width: 100%;
  text-align: left;
}

.alert-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  padding: 2px 6px;
  display: inline-block;
  margin-bottom: 4px;
}

.visual-alert p {
  font-size: 0.74rem;
  color: var(--color-slate-gray);
  margin: 0;
}

html[data-theme="dark"] .visual-alert p {
  color: #8c8380;
}

/* Visual 5 Customer stats card */
.visual-customer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.cc-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-indigo);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
}

.cc-info {
  display: flex;
  flex-direction: column;
}

.cc-name {
  font-family: var(--font-heading);
  font-weight: 750;
  font-size: 0.78rem;
  color: var(--color-dark-ink);
}

html[data-theme="dark"] .cc-name {
  color: #faf9f6;
}

.cc-stats {
  font-size: 0.68rem;
  color: var(--color-slate-light);
}

html[data-theme="dark"] .cc-stats {
  color: #a8a09d;
}

/* Visual 6 Briefing card */
.visual-briefing {
  width: 100%;
  text-align: left;
}

.brief-title {
  font-family: var(--font-heading);
  font-weight: 750;
  font-size: 0.74rem;
  color: var(--color-indigo);
  display: block;
  margin-bottom: 2px;
}

.visual-briefing p {
  font-size: 0.72rem;
  color: var(--color-dark-ink);
  margin: 0;
}

html[data-theme="dark"] .visual-briefing p {
  color: #faf9f6;
}

@media (max-width: 768px) {
  .narrative-action-sec {
    padding: 7rem 0;
  }
}

/* =========================================================================
   5. YOUR BRAND, YOUR PLATFORM — Square-Inspired Edge-to-Edge
   ========================================================================= */
.brand-platform-sec {
  padding: 8rem 0 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.brand-header-container {
  max-width: 1440px;
  width: 94%;
  margin: 0 auto 5rem;
  text-align: center;
  padding: 0 2rem;
}

.brand-section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-dark-ink);
  margin-top: 0.75rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.brand-section-desc {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-slate-gray);
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.brand-section-pain-points {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-slate-gray);
  opacity: 0.75;
  margin-top: 1.25rem;
  letter-spacing: -0.01em;
}

html[data-theme="dark"] .brand-section-pain-points {
  color: #8c8380;
}

/* ---- Edge-to-Edge Horizontal Scroll Strip ---- */
.square-cards-grid {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 3rem 0; /* Add vertical padding for hover zoom and shadow breathing room */
  margin: -3rem 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.square-cards-grid::-webkit-scrollbar {
  display: none;
}

/* ---- Individual Card ---- */
.square-card {
  --card-width: calc((100vw - 3 * 1.5rem) / 3.25);
  --max-card-width: 620px;
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  width: min(var(--max-card-width), var(--card-width));
  height: calc(min(var(--max-card-width), var(--card-width)) * 1.25); /* Dynamic 4:5 portrait ratio */
  min-width: 0;
  overflow: hidden;
  background: #0a0a0a;
  cursor: pointer;
  position: relative;
  scroll-snap-align: start;
  border-radius: 0; /* Proper sharp edges, no border radius */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 1);
}

.square-card:hover,
.square-card.is-hovered {
  transform: scale(1.06); /* Increased scale to make it distinctly bigger */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

/* ---- Card Image — Full Bleed Edge-to-Edge (Covers 100% of card) ---- */
.square-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background: #0a0a0a;
}

.square-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.square-card:hover .square-card-image img,
.square-card.is-hovered .square-card-image img {
  transform: scale(1.03);
}

.square-card-image video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 2;
}

.square-card:hover .square-card-image video,
.square-card.is-hovered .square-card-image video {
  opacity: 1;
  transform: scale(1.03);
}



/* ---- Card Text Content (Overlayed on top of Image) ---- */
.square-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  box-sizing: border-box;
  padding: 2.2rem 2.2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, gap 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.square-card:hover .square-card-content,
.square-card.is-hovered .square-card-content {
  gap: 0.4rem;
}

#card-platform:hover .square-card-content,
#card-crm:hover .square-card-content,
#card-platform.is-hovered .square-card-content,
#card-crm.is-hovered .square-card-content {
  opacity: 0;
  transform: translateY(10px);
}

.square-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
}

.square-card-arrow {
  display: inline-block;
  font-size: 1rem;
  color: #000000;
  transition: transform 0.3s ease;
  font-weight: 400;
  opacity: 0.7;
}

.square-card:hover .square-card-arrow {
  transform: translateX(4px);
  opacity: 1;
}

.square-card-desc {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
  white-space: normal;
  overflow: hidden;
  
  /* Hidden state defaults */
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.35s ease;
}

.square-card:hover .square-card-desc {
  opacity: 1;
  max-height: 80px;
  transform: translateY(0);
}

/* ---- Video Card Sizing & Position Fix ---- */
/* Using ID-selectors to bypass CSS parser issue with bare video tag selector */
#card-platform .square-card-image video,
#card-analytics .square-card-image video,
#card-crm .square-card-image video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 2 !important;
}

/* Hover show video (image stays as fallback) */
#card-platform:hover .square-card-image video,
#card-crm:hover .square-card-image video,
#card-platform.is-hovered .square-card-image video,
#card-crm.is-hovered .square-card-image video {
  opacity: 1;
}

/* ---- Autoplayer Style for Autonomous Access Control Card ---- */
#card-analytics .square-card-image video {
  opacity: 1 !important;
}

#card-analytics.video-playing .square-card-content {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}


/* ---- Responsive & Viewport Adjustments ---- */
@media (max-width: 1200px) {
  .square-card {
    --card-width: calc((100vw - 2 * 1.5rem) / 2.25); /* 2.25 cards visible on tablets */
  }
}

@media (max-width: 768px) {
  .square-card {
    --card-width: calc((100vw - 1 * 1.5rem) / 1.25); /* 1.25 cards visible on mobile */
  }
  
  .square-card-content {
    padding: 3rem 1.5rem 1.75rem;
  }
  
  .brand-section-title {
    font-size: 2rem;
  }
}




/* =========================================================================
   5C2. CONNECTED OPERATIONS SHOWCASE — Shopify-Inspired Constellation
   ========================================================================= */
.connected-ops-sec {
  background-color: #f7fbf9;
  background-image: 
    linear-gradient(rgba(16, 185, 129, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.04) 1px, transparent 1px),
    radial-gradient(circle at center, #ffffff 0%, #edf9f5 65%, #ddf2eb 100%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  padding: 10rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.co-top-header {
  margin-bottom: 4.5rem;
}

.co-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 850;
  color: var(--color-dark-ink);
  margin-top: 1rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.co-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--color-slate);
  max-width: 900px;
  margin: 1.2rem auto 0 auto;
  line-height: 1.6;
}

/* Dark mode overrides for connected-ops-sec */
html[data-theme="dark"] .connected-ops-sec {
  background-color: #020a06;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    radial-gradient(circle at center, #04271c 0%, #010d08 100%);
  background-size: 42px 42px, 42px 42px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .co-main-title {
  color: #ffffff;
}

html[data-theme="dark"] .co-subtitle {
  color: #a8a29e;
}

/* Ecosystem Wide Frame Showcase */
.co-showcase-container {
  width: 100%;
  margin-bottom: 5rem;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.co-mockup-frame {
  width: 100%;
  max-width: 1060px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.45), 0 12px 30px rgba(16, 185, 129, 0.1);
  position: relative;
  background: #022c22;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.co-mockup-frame:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 45px 95px rgba(0, 0, 0, 0.55), 0 15px 40px rgba(16, 185, 129, 0.18);
}

.co-showcase-image {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.co-mockup-frame:hover .co-showcase-image {
  opacity: 1;
}

/* Subtle glow backdrop behind the mockup frame */
.co-mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

/* Bottom Metrics Row (3-column layout below diagram) */
.co-bottom-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 4.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 4.5rem;
  margin-top: 2rem;
  align-items: start;
}

@media (max-width: 991px) {
  .co-bottom-metrics {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-top: 3.5rem;
  }
}

.co-metric-item {
  display: flex;
  flex-direction: column;
}

.co-metric-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 750;
  color: #34d399; /* Vibrant mint green */
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.co-metric-value {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 6.5vw, 4.8rem);
  font-weight: 850;
  color: var(--color-dark-ink); /* Adaptive dark ink */
  line-height: 0.95;
  margin: 0 0 0.8rem 0;
  letter-spacing: -0.04em;
}

.co-metric-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-slate); /* Adaptive slate grey */
  margin: 0;
}

.co-details-callout-item {
  border-left: 3px solid #10B981; /* Glowing thick emerald bar */
  padding-left: 2rem;
}

.co-metric-desc-large {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-slate); /* Adaptive slate grey */
  margin: 0;
}

/* Dark mode overrides for metrics */
html[data-theme="dark"] .co-bottom-metrics {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .co-metric-value {
  color: #ffffff;
}

html[data-theme="dark"] .co-metric-desc,
html[data-theme="dark"] .co-metric-desc-large {
  color: #d1d5db;
}

/* Overlay SVG for Live Telemetry in Connected Ops section */
.co-overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Pulsing rings on W badge and hubs */
.co-pulse-ring-large {
  transform-origin: 500px 281.25px;
  animation: coRingPulseLarge 3s infinite ease-in-out;
}

.co-pulse-ring-small {
  animation: coRingPulseSmall 2s infinite ease-in-out;
}

/* Specific transform origins for each hub pulse circle */
.co-pulse-ring-small:nth-of-type(1) { transform-origin: 396px 200px; animation-delay: 0.5s; }
.co-pulse-ring-small:nth-of-type(2) { transform-origin: 596px 200px; animation-delay: 1.0s; }
.co-pulse-ring-small:nth-of-type(3) { transform-origin: 742px 281.25px; animation-delay: 1.5s; }
.co-pulse-ring-small:nth-of-type(4) { transform-origin: 630px 380px; animation-delay: 2.0s; }
.co-pulse-ring-small:nth-of-type(5) { transform-origin: 500px 422px; animation-delay: 2.5s; }
.co-pulse-ring-small:nth-of-type(6) { transform-origin: 362px 360px; animation-delay: 3.0s; }

@keyframes coRingPulseLarge {
  0%, 100% { transform: scale(1); opacity: 0.25; stroke-width: 2.5; }
  50% { transform: scale(1.08); opacity: 0.65; stroke-width: 1.5; }
}

@keyframes coRingPulseSmall {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.35); opacity: 0.8; }
}

/* Custom animation for traveling paths */
.co-active-path {
  animation: coPathDash 30s infinite linear;
}

@keyframes coPathDash {
  to { stroke-dashoffset: -100; }
}

/* =========================================================================
   5C3. ACCOUNTABILITY SECTION — Stark Control & Trust Layout
   ========================================================================= */
.accountability-sec {
  background-color: #060606; /* Obsidian black */
  padding: 8rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.acc-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 5rem auto;
}

.acc-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 5vw, 3.8rem);
  font-weight: 850;
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.acc-subheadline {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* 2x2 Grid Layout */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 768px) {
  .acc-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Premium Card Design */
.acc-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0; /* Sharp corners */
  padding: 3rem 2.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: default;
}

.acc-card:hover {
  border-color: #10B981; /* Glowing emerald border */
  background: rgba(16, 185, 129, 0.02);
  transform: translateY(-4px); /* Sleek vertical pop */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.acc-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.acc-card-num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.acc-card:hover .acc-card-num {
  color: #10B981; /* Glows green */
  font-weight: 600;
}

.acc-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.acc-card-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 750;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.acc-card-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  transition: color 0.3s ease;
}

.acc-card:hover .acc-card-desc {
  color: rgba(255, 255, 255, 0.85);
}



/* =========================================================================
   6. WHATSAPP OPERATIONS SECTION (Square style "Make smart decisions")
   ========================================================================= */
.whatsapp-ops-sec {
  background-color: var(--bg-secondary);
  padding: 8rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}

.subheadline-ops {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-indigo);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.wa-closing-callout {
  margin-top: 6rem;
  padding: 3.5rem 2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.wa-closing-text {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 750;
  line-height: 1.45;
  color: var(--color-dark-ink);
  letter-spacing: -0.02em;
  margin: 0;
}

.wa-simulations-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 991px) {
  .wa-simulations-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.wa-sim-menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wa-sim-btn {
  text-align: left;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px 24px;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-smooth);
  box-shadow: var(--box-shadow-soft);
}

.wa-sim-btn:hover {
  border-color: var(--color-border-focus);
  transform: translateX(4px);
}

.wa-sim-btn.active {
  background: var(--bg-primary);
  border-color: var(--color-indigo);
  box-shadow: var(--box-shadow-premium);
}

.sim-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-slate-gray);
  margin-bottom: 6px;
}

.wa-sim-btn h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark-ink);
  margin-bottom: 4px;
}

.wa-sim-btn p {
  font-size: 0.85rem;
  color: var(--color-slate-light);
  padding-right: 20px;
}

.sim-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--color-slate-gray);
  opacity: 0;
  transition: all var(--transition-fast);
}

.wa-sim-btn.active .sim-arrow {
  opacity: 1;
  color: var(--color-indigo);
  transform: translateY(-50%) translateX(4px);
}

/* PREMIUM HIGH-FIDELITY LIFESTYLE CANVAS WITH SEAMLESS SCREEN OVERLAY */
.wa-lifestyle-showcase {
  position: relative;
  width: 100%;
  max-width: 580px; /* Massive, bold physical phone proportions on desktop viewports */
  margin: 0 auto;
  aspect-ratio: 819 / 1024; /* Keep the exact aspect ratio of the sage green mockup image */
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--box-shadow-premium);
  background: #f0f4f2; /* Light sage base behind the mockup edges */
  container-type: inline-size; /* Added container query support */
}

.wa-lifestyle-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.whatsapp-screen-overlay {
  position: absolute;
  left: 29.060%;
  width: 42.0%; /* Refined to 42.0% to completely clear the top-right bezel overlay and ensure zero bleed */
  top: 11.65%; /* Refined to 11.65% to completely clear the top bezel perfectly */
  height: 75.45%; /* Refined to 75.45% to apply only a tiny fraction of bottom bezel clear, keeping it seamless */
  border-radius: 5.5cqw; /* Uniform responsive border-radius to prevent vertical curve stretching */
  background: #FAF9F6;
  overflow: hidden;
  z-index: 5;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05); /* Extremely subtle realistic screen inner shadow */
}

html[data-theme="dark"] .whatsapp-screen-overlay {
  background: #0b141a;
}

/* WhatsApp Styling Inside Smart Screen */
.whatsapp-header-bar {
  background: #f0f2f5; /* Native iOS WhatsApp Light Mode Header */
  color: #111111;
  padding: 10px 14px; /* Standard, compact native WhatsApp padding */
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

html[data-theme="dark"] .whatsapp-header-bar {
  background: #202c33; /* Native Android/iOS Dark Mode Header */
  color: #e9edef;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.wa-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-indigo); /* Sleek accent background */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.wa-chat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Critical for single-line truncation! */
}

.wa-chat-name {
  font-size: 0.72rem; /* Sleek, reduced font size */
  font-weight: 600;
  line-height: 1.25;
  color: #111111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .wa-chat-name {
  color: #e9edef;
}

.wa-chat-status {
  font-size: 0.54rem; /* Super sleek tiny status */
  font-weight: 400;
  color: #667781; /* Precise native secondary grey */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-theme="dark"] .wa-chat-status {
  color: #8696a0;
}

.wa-actions-dots {
  font-size: 0.9rem;
  cursor: pointer;
  color: #667781;
  flex-shrink: 0;
}

html[data-theme="dark"] .wa-actions-dots {
  color: #8696a0;
}

.whatsapp-chats-feed {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Tighter spacing for sleekness */
}

.wa-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
}

.wa-typing-indicator span {
  width: 5px;
  height: 5px;
  background: #8696a0;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
  display: inline-block;
}

.wa-typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.wa-typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.wa-msg-bubble {
  max-width: 85%;
  padding: 8px 10px; /* Sleeker, tighter padding */
  border-radius: 8px;
  font-size: 0.68rem; /* Sleek, reduced font size */
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
  animation: waBubbleFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes waBubbleFadeIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0px) scale(1); }
}

.wa-msg-left {
  align-self: flex-start;
  background: #ffffff; /* Classic WhatsApp white incoming bubble */
  color: #111111;
  border-top-left-radius: 2px; /* Micro-tail style */
  border: 1px solid rgba(0,0,0,0.02);
}

html[data-theme="dark"] .wa-msg-left {
  background: #202c33;
  color: #e9edef;
  border-color: rgba(255,255,255,0.02);
}

.wa-msg-right {
  align-self: flex-end;
  background: #e2fdd5; /* Native modern iOS WhatsApp light green outgoing bubble */
  color: #111111;
  border-top-right-radius: 2px; /* Micro-tail style */
  border: 1px solid rgba(0,0,0,0.02);
  font-weight: 500;
}

html[data-theme="dark"] .wa-msg-right {
  background: #005c4b; /* Native iOS WhatsApp dark green outgoing bubble */
  color: #e9edef;
  border-color: rgba(255,255,255,0.02);
}

/* Custom interactive modules loaded in bubble chats */
.wa-pl-grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 0.62rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}

html[data-theme="dark"] .wa-pl-grid {
  border-top-color: rgba(255,255,255,0.05);
}

.wa-pl-grid td {
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

html[data-theme="dark"] .wa-pl-grid td {
  border-bottom-color: rgba(255,255,255,0.03);
}

.wa-pl-grid tr:last-child td {
  border-bottom: none;
}

.pnl-row-accent {
  font-weight: 700;
  color: var(--color-indigo);
}

html[data-theme="dark"] .pnl-row-accent {
  color: #38bdf8;
}

.wa-inline-btn-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 6px;
  animation: waBubbleFadeIn 0.3s forwards;
}

.wa-inline-action-btn {
  background: #ffffff;
  border: 1px solid #e2e2e2;
  color: var(--color-indigo);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 12px;
  width: 85%;
  text-align: center;
  cursor: pointer;
  border-radius: 0 !important; /* Stark structural guidelines */
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.wa-inline-action-btn:hover {
  background: #fafafa;
  border-color: var(--color-indigo);
}

.wa-inline-action-btn.clicked {
  opacity: 0.6;
  background: #f5f5f5;
  cursor: not-allowed;
  transform: none;
}

html[data-theme="dark"] .wa-inline-action-btn {
  background: #211c1a;
  border-color: rgba(255,255,255,0.08);
  color: #38bdf8;
}

.whatsapp-input-bar {
  background: #f0f2f5; /* Native light gray input toolbar background */
  padding: 8px 10px; /* Slim, sleek iOS style padding */
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

html[data-theme="dark"] .whatsapp-input-bar {
  background: #1f2c34;
  border-top-color: rgba(255, 255, 255, 0.04);
}

.wa-input-field {
  flex: 1;
  border: 1px solid #e2e8f0;
  background: #ffffff; /* White input bubble */
  border-radius: 18px; /* Elegant rounded bubble input */
  outline: none;
  font-family: var(--font-body);
  font-size: 0.68rem; /* Sleek, reduced font size */
  color: #111111;
  padding: 6px 12px;
  margin: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

html[data-theme="dark"] .wa-input-field {
  background: #2a3942;
  border-color: rgba(255, 255, 255, 0.06);
  color: #e9edef;
}

.wa-input-field::placeholder {
  color: #8696a0;
}

.wa-input-field:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.wa-send-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #00a884; /* Signature modern WhatsApp green send pill */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.wa-send-btn:hover:not(:disabled) {
  background: #008f72;
  transform: scale(1.05);
}

.wa-send-btn:disabled {
  opacity: 0.35;
  background: #a1a1a1;
  cursor: not-allowed;
}

/* =========================================================================
   11B. FAQ SECTION — Clean B2B Editorial Layout
   ========================================================================= */
.faq-sec {
  background-color: var(--bg-primary); /* Stark white/dark primary backdrop */
  padding: 9rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}

.faq-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.5vw, 3.25rem);
  font-weight: 850;
  color: var(--color-dark-ink);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.faq-sequence-stack {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.faq-row {
  padding: 3rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: default;
}

.faq-row:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-row:hover {
  background: rgba(16, 185, 129, 0.015); /* Faint emerald overlay on hover */
  padding-left: 2.25rem; /* Spacious sliding indentation */
  border-color: rgba(16, 185, 129, 0.15);
}

.faq-question {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 750;
  color: var(--color-dark-ink);
  margin: 0 0 0.75rem 0;
  line-height: 1.35;
  transition: color 0.3s ease;
}

.faq-row:hover .faq-question {
  color: var(--color-indigo); /* Indigo highlight on question on hover */
}

.faq-answer {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-slate-gray);
  margin: 0;
  max-width: 800px;
}

@media (max-width: 768px) {
  .faq-sec {
    padding: 7rem 0;
  }
  
  .faq-row {
    padding: 2.5rem 1rem;
  }
  
  .faq-row:hover {
    padding-left: 1.5rem;
  }
}

/* =========================================================================
   12. FINAL CALL TO ACTION
   ========================================================================= */

.final-cta-sec {
  padding: 8rem 0 10rem;
  position: relative;
  z-index: 1;
  background-color: #fafaf9; /* Matches hero */
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0) 55%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 45%),
    linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
}

html[data-theme="dark"] .final-cta-sec {
  background-color: #020806; /* Matches hero */
  background-image: 
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0) 65%),
    radial-gradient(circle at 15% 80%, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0) 55%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-box-wrapper {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

.cta-box {
  background: #020a07; /* Luxurious dark emerald block */
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px; /* Smooth rounded modern container card */
  padding: 6rem 4rem;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
  .cta-box {
    padding: 4rem 2rem;
  }
}

.cta-box h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: #ffffff; /* Clean white */
  margin-bottom: 2rem;
}

.cta-box h2 .highlight-neon {
  color: #10b981;
  font-style: italic;
  font-weight: 500;
}

.cta-box p {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.7); /* Soft light gray */
  max-width: 680px;
  margin: 0 auto 3.5rem;
  line-height: 1.7;
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  align-items: center;
}

/* Floating Orbiting badges styling */
.cta-floating-badge {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 6px 14px;
  background: rgba(2, 10, 7, 0.8);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #10b981;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 5;
  pointer-events: none;
  animation: ecoFloatEffect 6s ease-in-out infinite;
}

.cta-floating-badge.badge-1 {
  left: -40px;
  top: 15%;
  animation-delay: 0.5s;
}

.cta-floating-badge.badge-2 {
  right: -50px;
  top: 40%;
  animation-delay: 1.5s;
}

.cta-floating-badge.badge-3 {
  left: -20px;
  bottom: 12%;
  animation-delay: 2.5s;
}

@media (max-width: 1060px) {
  .cta-floating-badge {
    display: none; /* Hide floating badges on smaller viewports */
  }
}

.btn-pilot-stark {
  background: #d4ff00;
  color: #111111;
  border: 1.5px solid #d4ff00;
  font-weight: 600;
  padding: 16px 36px !important;
  font-size: 0.88rem;
  border-radius: 0 !important; /* Force sharp Stark corners */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-pilot-stark:hover {
  background: #beee00;
  border-color: #beee00;
  color: #111111;
  box-shadow: 0 10px 25px rgba(212, 255, 0, 0.25);
}

.btn-pilot-stark .btn-arrow {
  transition: transform 0.3s ease;
  font-size: 1.05rem;
  line-height: 1;
}

.btn-pilot-stark:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-founder-stark {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-weight: 600;
  padding: 16px 36px !important;
  font-size: 0.88rem;
  border-radius: 0 !important; /* Force sharp Stark corners */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-founder-stark:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================================
   13. GIANT WORDMARK FOOTER
   ========================================================================= */
.footer {
  background: #020806;
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 0;
}

/* .footer-wordmark-top, .footer-wordmark-glow, .footer-giant-text--top removed — top wordmark removed from HTML */

.footer-giant-text {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.06em;
  line-height: 0.85;
  white-space: nowrap;
  display: block;
  text-align: center;
  width: 100%;
  user-select: none;
  pointer-events: none;
}

/* --- Main Footer Content --- */
.footer-main {
  background: #020806;
  padding: 4rem 0 3rem;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3.5rem;
}

.footer-brand-column {
  max-width: 580px;
  width: 100%;
}

@media (max-width: 991px) {
  .footer-grid {
    flex-direction: column;
    gap: 3rem;
  }
  .footer-brand-column {
    max-width: 100%;
  }
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}

.footer .logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin-bottom: 0;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 3px 8px;
  border-radius: 20px;
}

.status-pulse-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDotGlow 2s infinite ease-in-out;
}

@keyframes pulseDotGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.status-text {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a1a1aa;
  max-width: 320px;
  text-align: left;
  margin-bottom: 1.5rem;
}

/* --- Social Icons --- */
.footer-social-icons {
  display: flex;
  gap: 10px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #a1a1aa;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* --- Navigation Columns --- */
.footer-nav-column {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.footer-nav-column .nav-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.footer-nav-column ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
  padding: 0;
  margin: 0;
}

.footer-nav-column a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #d4d4d8;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.footer-nav-column a:hover {
  color: #10b981;
  transform: translateX(2px);
}

@media (min-width: 992px) {
  .footer-newsletter-column {
    margin-left: auto;
    max-width: 320px;
    width: 100%;
  }
}

/* --- Newsletter Column --- */
.footer-newsletter-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #a1a1aa;
  line-height: 1.55;
  margin-bottom: 1.2rem;
}

.footer-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-newsletter-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #e4e4e7;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.footer-newsletter-input::placeholder {
  color: #71717a;
}

.footer-newsletter-input:focus {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}

.footer-newsletter-btn {
  background: #d4ff00;
  color: #111111;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.footer-newsletter-btn:hover {
  background: #beee00;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 255, 0, 0.25);
  color: #111111;
}

/* --- Bottom Wordmark Band --- */
.footer-wordmark-bottom {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #020806;
  padding-bottom: 1rem;
}

.footer-giant-text--bottom {
  font-size: clamp(80px, 15vw, 200px);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
  padding-top: 0.5rem;
}

/* --- Bottom Copyright Strip --- */
.footer-bottom-strip {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.5rem 0;
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
}

.copyright-text {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: #71717a;
  margin: 0;
  text-align: left;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}

.footer-legal-links a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #71717a;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal-links a:hover {
  color: #10b981;
}

@media (max-width: 576px) {
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-legal-links {
    gap: 16px;
  }

  .footer-giant-text--bottom {
    font-size: clamp(60px, 22vw, 160px);
  }

  /* CTA floating badges — hide on very small screens */
  .cta-floating-badge {
    display: none;
  }

  .final-cta-sec {
    padding: 5rem 0 7rem;
  }
}

/* =========================================================================
   CARD 2: INSTANT RESPONSES — HYPER-PREMIUM AI ASSISTANT VISUALIZER
   ========================================================================= */

/* ---- Highlight Green Italic Style ---- */
.highlight-green-italic {
  color: #10B981;
  font-family: var(--font-heading);
}

/* ---- Card 2 Visualizer Wrapper ---- */
.na-card-visual-instant-responses {
  height: auto !important;
  aspect-ratio: 800 / 480;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.ir-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 480;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .ir-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.ir-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.ir-svg-lines path.path-bg,
.ir-svg-lines line.path-bg {
  stroke: var(--color-border);
  opacity: 0.65;
  transition: stroke 0.3s ease;
}

html[data-theme="dark"] .ir-svg-lines path.path-bg,
html[data-theme="dark"] .ir-svg-lines line.path-bg {
  stroke: rgba(255, 255, 255, 0.22);
}

/* Inputs Column Layout */
.ir-inputs-col {
  position: absolute;
  left: 2.5%;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 3;
}

.ir-input-node {
  position: absolute;
  left: 0;
  width: 100%;
  height: 10.417%; /* 50px */
  display: flex;
  align-items: center;
  gap: 1.25cqw; /* 10px */
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1cqw; /* 8px */
  padding: 0 1.5cqw; /* 12px */
  box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform: translateY(-50%);
}

html[data-theme="dark"] .ir-input-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.15);
}

#ir-in-1 { top: 14.583%; } /* Y = 70px */
#ir-in-2 { top: 30.208%; } /* Y = 145px */
#ir-in-3 { top: 45.833%; } /* Y = 220px */
#ir-in-4 { top: 61.458%; } /* Y = 295px */
#ir-in-5 { top: 77.083%; } /* Y = 370px */

.ir-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75cqw; /* 30px */
  height: 3.75cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  flex-shrink: 0;
}

.ir-input-icon svg {
  width: 2cqw;
  height: 2cqw;
}

.ir-input-label {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 500;
  color: var(--color-dark-ink);
  white-space: nowrap;
}

/* Staggered highlighting pulses */
@keyframes inputPulse {
  0%, 100% {
    border-color: var(--color-border);
    transform: translateY(-50%) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.12);
  }
}

html[data-theme="dark"] @keyframes inputPulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.22);
  }
}

#ir-in-1 { animation: inputPulse 8s infinite ease-in-out; animation-delay: 0s; }
#ir-in-2 { animation: inputPulse 8s infinite ease-in-out; animation-delay: 1.6s; }
#ir-in-3 { animation: inputPulse 8s infinite ease-in-out; animation-delay: 3.2s; }
#ir-in-4 { animation: inputPulse 8s infinite ease-in-out; animation-delay: 4.8s; }
#ir-in-5 { animation: inputPulse 8s infinite ease-in-out; animation-delay: 6.4s; }

/* Center Hub Style */
.ir-hub-node {
  position: absolute;
  left: 41.25%; /* X = 330px */
  top: 45.833%; /* Y = 220px */
  width: 11.25%; /* 90px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ir-hub-node {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.15);
}

.ir-hub-inner-circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .ir-hub-inner-circle {
  background: #1e1b1a;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.25);
}

.ir-hub-w {
  font-family: var(--font-body);
  font-size: 4cqw; /* ~32px */
  font-weight: 800;
  color: #10B981;
  margin-top: -0.25cqw;
  user-select: none;
}

.ir-hub-pulse-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  animation: hubRingPulse 2s infinite ease-out;
  pointer-events: none;
}

@keyframes hubRingPulse {
  0% { transform: scale(0.96); opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}

.ir-hub-label-wrap {
  position: absolute;
  left: 41.25%;
  top: 58.5%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

.ir-hub-label-title {
  font-family: var(--font-body);
  font-size: 1.875cqw; /* 15px */
  font-weight: 600;
  color: #10B981;
  margin-bottom: 0.25cqw;
}

.ir-hub-label-subtitle {
  font-family: var(--font-body);
  font-size: 1.375cqw; /* 11px */
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .ir-hub-label-subtitle {
  color: #8c8380;
}

/* Staggered hub reaction when telemetry dots hit */
@keyframes hubHitReaction {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  }
  5% {
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 0 2cqw rgba(16, 185, 129, 0.2);
  }
  15% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.ir-hub-node {
  animation: hubHitReaction 1.6s infinite ease-in-out;
  animation-delay: 1.2s;
}

/* Right Pipeline Step Nodes */
.ir-pipeline-node {
  position: absolute;
  top: 45.833%; /* Y = 220px */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  width: 6.25%; /* 50px */
  aspect-ratio: 1;
}

#ir-step-1 { left: 55%; }
#ir-step-2 { left: 66.25%; }
#ir-step-3 { left: 77.5%; }

.ir-node-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.02);
  color: var(--color-slate-gray);
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ir-node-circle {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  color: #8c8380;
}

.ir-node-circle svg {
  width: 40%;
  height: 40%;
}

.ir-node-label {
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  font-weight: 500;
  color: var(--color-dark-ink);
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Step 4 Confirmed Specific Design */
#ir-step-4 {
  left: 88.75%;
  width: 7.5%; /* 60px */
}

.ir-confirmed-outer-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.2px dashed rgba(16, 185, 129, 0.45);
  animation: spinRing 20s linear infinite;
}

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

.ir-confirmed-inner {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 1.875cqw rgba(16, 185, 129, 0.15);
  color: #10B981;
  position: absolute;
  top: 9%;
  left: 9%;
}

html[data-theme="dark"] .ir-confirmed-inner {
  background: #1e1b1a;
  box-shadow: 0 0 1.875cqw rgba(16, 185, 129, 0.3);
}

.ir-confirmed-inner svg {
  width: 42%;
  height: 42%;
}

#ir-step-4 .ir-node-label {
  color: #10B981;
  font-weight: 600;
}

/* Step Active Illumination animations (triggered on dot hit) */
@keyframes stepNodeIllumination {
  0%, 100% {
    border-color: var(--color-border);
    color: var(--color-slate-gray);
    box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.02);
  }
  10%, 40% {
    border-color: #10B981;
    color: #10B981;
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.2);
  }
}

html[data-theme="dark"] @keyframes stepNodeIllumination {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.06);
    color: #8c8380;
    box-shadow: 0 0.25cqw 0.75cqw rgba(0, 0, 0, 0.15);
  }
  10%, 40% {
    border-color: #10B981;
    color: #10B981;
    box-shadow: 0 0 1.25cqw rgba(16, 185, 129, 0.3);
  }
}

#ir-step-1 .ir-node-circle { animation: stepNodeIllumination 8s infinite ease-in-out; animation-delay: 1.6s; }
#ir-step-2 .ir-node-circle { animation: stepNodeIllumination 8s infinite ease-in-out; animation-delay: 2.0s; }
#ir-step-3 .ir-node-circle { animation: stepNodeIllumination 8s infinite ease-in-out; animation-delay: 2.4s; }

/* Confirmed node pulse */
@keyframes confirmedPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 1.875cqw rgba(16, 185, 129, 0.15);
  }
  10%, 40% {
    transform: scale(1.04);
    box-shadow: 0 0 2.5cqw rgba(16, 185, 129, 0.35);
  }
}

html[data-theme="dark"] @keyframes confirmedPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 1.875cqw rgba(16, 185, 129, 0.25);
  }
  10%, 40% {
    transform: scale(1.04);
    box-shadow: 0 0 2.5cqw rgba(16, 185, 129, 0.5);
  }
}

#ir-step-4 .ir-confirmed-inner { animation: confirmedPulse 8s infinite ease-in-out; animation-delay: 2.8s; }


/* Auxiliary Floating Status Widgets */
.ir-widget {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw; /* 10px */
  padding: 1.5cqw; /* 12px */
  box-shadow: 0 0.75cqw 2.25cqw rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] .ir-widget {
  background: rgba(30, 27, 26, 0.88);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.25);
}

.ir-widget:hover {
  transform: translateY(-0.25cqw);
  border-color: #10B981;
}

/* Rules Widget */
.ir-widget-rules {
  left: 52%;
  top: 8%;
  width: 26%;
  display: flex;
  align-items: center;
  gap: 1.25cqw;
}

.ir-widget-badge-green {
  width: 4cqw; /* 32px */
  height: 4cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ir-widget-badge-green svg {
  width: 55%;
  height: 55%;
}

.ir-widget-text-col {
  display: flex;
  flex-direction: column;
}

.ir-widget-title-row {
  display: flex;
  align-items: center;
  gap: 0.75cqw;
}

.ir-widget-title {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 600;
  color: var(--color-dark-ink);
}

.ir-widget-green-dot {
  width: 0.75cqw; /* 6px */
  height: 0.75cqw;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  box-shadow: 0 0 0.5cqw rgba(16, 185, 129, 0.5);
}

.ir-widget-desc {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  color: var(--color-slate-gray);
  margin-top: 0.125cqw;
}

html[data-theme="dark"] .ir-widget-desc {
  color: #8c8380;
}

/* Capacity Widget */
.ir-widget-capacity {
  left: 79.5%;
  top: 8%;
  width: 18%;
  display: flex;
  gap: 1.25cqw;
}

.ir-capacity-left {
  display: flex;
  align-items: flex-start;
}

.ir-capacity-icon {
  width: 3.25cqw; /* 26px */
  height: 3.25cqw;
  border-radius: 0.75cqw; /* 6px */
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ir-capacity-icon svg {
  width: 55%;
  height: 55%;
}

.ir-capacity-right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
}

.ir-capacity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
}

.ir-capacity-title {
  font-family: var(--font-body);
  font-size: 1.375cqw; /* 11px */
  color: var(--color-slate-gray);
  font-weight: 500;
}

html[data-theme="dark"] .ir-capacity-title {
  color: #8c8380;
}

.ir-capacity-val {
  font-family: var(--font-body);
  font-size: 1.75cqw; /* 14px */
  font-weight: bold;
  color: #10B981;
}

.ir-capacity-bar-bg {
  width: 100%;
  height: 0.625cqw; /* 5px */
  background: var(--bg-tertiary);
  border-radius: 0.375cqw;
  overflow: hidden;
}

html[data-theme="dark"] .ir-capacity-bar-bg {
  background: rgba(255, 255, 255, 0.05);
}

.ir-capacity-bar-fill {
  height: 100%;
  background: #10B981;
  border-radius: 0.375cqw;
}

.ir-capacity-total {
  font-family: var(--font-body);
  font-size: 1.125cqw; /* 9px */
  color: var(--color-slate-light);
  align-self: flex-end;
}

/* Seatmap Widget */
.ir-widget-seatmap {
  left: 55%;
  top: 62%;
  width: 22%;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

.ir-seatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ir-seatmap-title {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  font-weight: 700;
  color: var(--color-slate-light);
  letter-spacing: 0.05em;
}

.ir-seatmap-stage {
  font-family: var(--font-body);
  font-size: 1cqw; /* 8px */
  font-weight: 600;
  color: var(--color-slate-gray);
  border: 1px solid var(--color-border);
  padding: 0.125cqw 1.5cqw;
  border-radius: 0.5cqw;
  background: var(--bg-tertiary);
}

html[data-theme="dark"] .ir-seatmap-stage {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: #8c8380;
}

.ir-seatmap-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.5cqw;
  padding-top: 0.25cqw;
}

.ir-seat {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-border);
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ir-seat {
  background: rgba(255, 255, 255, 0.08);
}

.ir-seat-booked {
  background: var(--color-slate-light);
  opacity: 0.45;
}

.ir-seat-active {
  background: #10B981;
  box-shadow: 0 0 0.5cqw rgba(16, 185, 129, 0.4);
}

.ir-seat-empty {
  background: transparent;
}

/* Receipt Widget */
.ir-widget-receipt {
  left: 78.5%;
  top: 62%;
  width: 19%;
  display: flex;
  flex-direction: column;
  gap: 0.75cqw;
}

.ir-receipt-header {
  display: flex;
  align-items: center;
  gap: 1cqw;
}

.ir-receipt-icon-bg {
  width: 3.25cqw; /* 26px */
  height: 3.25cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ir-receipt-icon-bg svg {
  width: 55%;
  height: 55%;
}

.ir-receipt-meta {
  display: flex;
  flex-direction: column;
}

.ir-receipt-title {
  font-family: var(--font-body);
  font-size: 1.5cqw; /* 12px */
  font-weight: 600;
  color: var(--color-dark-ink);
}

.ir-receipt-time {
  font-family: var(--font-body);
  font-size: 1.125cqw; /* 9px */
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .ir-receipt-time {
  color: #8c8380;
}

.ir-receipt-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.25cqw 0;
}

html[data-theme="dark"] .ir-receipt-divider {
  background: rgba(255, 255, 255, 0.06);
}

.ir-receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ir-receipt-label {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .ir-receipt-label {
  color: #8c8380;
}

.ir-receipt-val {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  font-weight: 600;
  color: var(--color-dark-ink);
}

.ir-receipt-badge {
  display: flex;
  align-items: center;
  gap: 0.625cqw;
  background: rgba(16, 185, 129, 0.06);
  border: 1.2px solid rgba(16, 185, 129, 0.15);
  border-radius: 2.5cqw;
  padding: 0.375cqw 1.25cqw;
  margin-top: 0.5cqw;
  justify-content: center;
}

.ir-receipt-check {
  color: #10B981;
  font-weight: bold;
  font-size: 1.125cqw; /* 9px */
}

.ir-receipt-badge-text {
  font-family: var(--font-body);
  font-size: 1.125cqw; /* 9px */
  font-weight: 600;
  color: #10B981;
}

/* ---- Card 2 Visualizer Mobile Responsive Sizing ---- */
@media (max-width: 768px) {
  #na-card-2 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }
}

/* =========================================================================
   CARD 3: ABANDONMENT RECOVERY — HYPER-PREMIUM MOTION VISUALIZER
   ========================================================================= */

.na-card-visual-abandonment-recovery {
  height: auto !important;
  aspect-ratio: 800 / 480;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.ar-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 480;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .ar-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.ar-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ---- Card Columns ---- */
.ar-inputs-col {
  position: absolute;
  left: 5%;
  top: 0;
  width: 25%;
  height: 100%;
  z-index: 3;
}

.ar-input-node {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14.583%; /* 70px */
  display: flex;
  align-items: center;
  gap: 1.5cqw; /* 12px */
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw; /* 10px */
  padding: 1cqw 1.75cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform: translateY(-50%);
}

html[data-theme="dark"] .ar-input-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#ar-in-1 { top: 15.625%; } /* Y = 75px */
#ar-in-2 { top: 38.542%; } /* Y = 185px */
#ar-in-3 { top: 61.458%; } /* Y = 295px */
#ar-in-4 { top: 84.375%; } /* Y = 405px */

.ar-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75cqw; /* 30px */
  height: 3.75cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #10B981;
  flex-shrink: 0;
}

.ar-input-icon svg {
  width: 2cqw;
  height: 2cqw;
  stroke: currentColor;
}

.ar-input-label {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 600;
  color: var(--color-dark-ink);
  line-height: 1.25;
  text-align: left;
}

.ar-red-dot {
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background-color: #ef4444;
  margin-left: auto;
  margin-right: 0.25cqw;
  flex-shrink: 0;
}

/* Staggered highlighting pulses matching the 6.4s timeline */
@keyframes arInputPulse {
  0%, 100% {
    border-color: var(--color-border);
    transform: translateY(-50%) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.12);
  }
}

html[data-theme="dark"] @keyframes arInputPulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.22);
  }
}

#ar-in-1 { animation: arInputPulse 6.4s infinite ease-in-out; animation-delay: 0s; }
#ar-in-2 { animation: arInputPulse 6.4s infinite ease-in-out; animation-delay: 1.6s; }
#ar-in-3 { animation: arInputPulse 6.4s infinite ease-in-out; animation-delay: 3.2s; }
#ar-in-4 { animation: arInputPulse 6.4s infinite ease-in-out; animation-delay: 4.8s; }

/* ---- W Hub Node ---- */
.ar-hub-node {
  position: absolute;
  left: 57.5%; /* X = 460px */
  top: 50%; /* Y = 240px */
  width: 11.25%; /* 90px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ar-hub-node {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.15);
}

.ar-hub-inner-circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .ar-hub-inner-circle {
  background: #1e1b1a;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.25);
}

.ar-hub-w {
  font-family: var(--font-body);
  font-size: 4cqw;
  font-weight: 800;
  color: #10B981;
  margin-top: -0.25cqw;
  user-select: none;
}

.ar-hub-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  z-index: -1;
  pointer-events: none;
  animation: arPulseRing 6.4s infinite ease-in-out;
}

@keyframes arPulseRing {
  0%, 100% { transform: scale(1); opacity: 0; }
  /* Pulses hit exactly when dots arrive (1.2s, 2.8s, 4.4s, 6.0s on 6.4s timeline) */
  18.75%, 43.75%, 68.75%, 93.75% { transform: scale(1.3); opacity: 1; border-color: rgba(16, 185, 129, 0.6); }
  22.5%, 47.5%, 72.5%, 97.5% { transform: scale(1.6); opacity: 0; }
}

@keyframes arHubPulseNode {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  18.75%, 43.75%, 68.75%, 93.75% { transform: translate(-50%, -50%) scale(1.08); }
  22.5%, 47.5%, 72.5%, 97.5% { transform: translate(-50%, -50%) scale(1); }
}

.ar-hub-node {
  animation: arHubPulseNode 6.4s infinite ease-in-out;
}

/* ---- Right Checkmark Success Node ---- */
.ar-success-node {
  position: absolute;
  left: 85%; /* X = 680px */
  top: 50%; /* Y = 240px */
  width: 10%; /* 80px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.ar-success-card {
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw; /* 10px */
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

html[data-theme="dark"] .ar-success-card {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.25);
}

.ar-success-check-circle {
  width: 4.5cqw;
  height: 4.5cqw;
  border-radius: 50%;
  border: 2px solid #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  background: rgba(16, 185, 129, 0.05);
}

.ar-success-check-circle svg {
  width: 2.25cqw;
  height: 2.25cqw;
}

/* Glowing rays above card */
.ar-success-rays {
  position: absolute;
  top: -1.75cqw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5cqw;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ar-ray {
  width: 0.3cqw;
  height: 1.25cqw;
  background: #10b981;
  border-radius: 0.1cqw;
}

.ar-ray-left { transform: rotate(-30deg); }
.ar-ray-middle { height: 1.5cqw; transform: translateY(-0.1cqw); }
.ar-ray-right { transform: rotate(30deg); }

/* Success animation states timed exactly at dot arrivals (2.2s, 3.8s, 5.4s, 7.0s / 0.6s) */
@keyframes arSuccessActiveCard {
  0%, 100% { transform: scale(1); }
  9.375% { transform: scale(1); }
  11.5%, 15.625% { transform: scale(1.08); border-color: #10b981; box-shadow: 0 0 1.5cqw rgba(16, 185, 129, 0.2); }
  18.75% { transform: scale(1); }

  34.375% { transform: scale(1); }
  36.5%, 40.625% { transform: scale(1.08); border-color: #10b981; box-shadow: 0 0 1.5cqw rgba(16, 185, 129, 0.2); }
  43.75% { transform: scale(1); }

  59.375% { transform: scale(1); }
  61.5%, 65.625% { transform: scale(1.08); border-color: #10b981; box-shadow: 0 0 1.5cqw rgba(16, 185, 129, 0.2); }
  68.75% { transform: scale(1); }

  84.375% { transform: scale(1); }
  86.5%, 90.625% { transform: scale(1.08); border-color: #10b981; box-shadow: 0 0 1.5cqw rgba(16, 185, 129, 0.2); }
  93.75% { transform: scale(1); }
}

@keyframes arSuccessActiveRays {
  0%, 100% { opacity: 0; transform: scale(0.6) translateY(0.5cqw); }
  9.375% { opacity: 0; transform: scale(0.6) translateY(0.5cqw); }
  11.5%, 15.625% { opacity: 1; transform: scale(1) translateY(0); }
  18.75% { opacity: 0; }

  34.375% { opacity: 0; transform: scale(0.6) translateY(0.5cqw); }
  36.5%, 40.625% { opacity: 1; transform: scale(1) translateY(0); }
  43.75% { opacity: 0; }

  59.375% { opacity: 0; transform: scale(0.6) translateY(0.5cqw); }
  61.5%, 65.625% { opacity: 1; transform: scale(1) translateY(0); }
  68.75% { opacity: 0; }

  84.375% { opacity: 0; transform: scale(0.6) translateY(0.5cqw); }
  86.5%, 90.625% { opacity: 1; transform: scale(1) translateY(0); }
  93.75% { opacity: 0; }
}

.ar-success-card {
  animation: arSuccessActiveCard 6.4s infinite ease-in-out;
}

.ar-success-rays {
  animation: arSuccessActiveRays 6.4s infinite ease-in-out;
}

.ar-svg-lines path.path-bg,
.ar-svg-lines line.path-bg {
  stroke: rgba(16, 185, 129, 0.45);
  stroke-dasharray: 3 4;
  transition: stroke 0.3s ease;
}

html[data-theme="dark"] .ar-svg-lines path.path-bg,
html[data-theme="dark"] .ar-svg-lines line.path-bg {
  stroke: rgba(16, 185, 129, 0.55);
}

.ar-empty-circle {
  stroke: #10B981;
  stroke-width: 1.5;
  fill: var(--bg-primary);
  transition: fill 0.3s ease;
}

html[data-theme="dark"] .ar-empty-circle {
  fill: #161413;
}

@media (max-width: 768px) {
  #na-card-3 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }
}

/* ---- Card 4: Retention Engine Visualizer ---- */
.na-card-visual-retention-engine {
  height: auto !important;
  aspect-ratio: 800 / 480;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.re-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 480;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .re-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.re-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.re-inputs-col {
  position: absolute;
  left: 5%;
  top: 0;
  width: 25%;
  height: 100%;
  z-index: 3;
}

.re-input-node {
  position: absolute;
  left: 0;
  width: 100%;
  height: 14.583%; /* 70px */
  display: flex;
  align-items: center;
  gap: 1.5cqw; /* 12px */
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw; /* 10px */
  padding: 1cqw 1.75cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform-origin: center;
  z-index: 3;
}

html[data-theme="dark"] .re-input-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#re-in-1 { top: 18.75%; --rot: -4deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); } /* Y = 90px */
#re-in-2 { top: 50%; --rot: -2deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); } /* Y = 240px */
#re-in-3 { top: 81.25%; --rot: 3deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); } /* Y = 390px */

.re-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75cqw; /* 30px */
  height: 3.75cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #10B981;
  flex-shrink: 0;
}

.re-input-icon svg {
  width: 2cqw;
  height: 2cqw;
  stroke: currentColor;
}

.re-input-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.re-input-title {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 600;
  color: var(--color-dark-ink);
  line-height: 1.25;
  text-align: left;
}

.re-input-subtitle {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  color: var(--color-slate-gray);
  margin-top: 0.15cqw;
  line-height: 1.1;
  text-align: left;
}

/* ---- W Hub Node ---- */
.re-hub-node {
  position: absolute;
  left: 50%; /* X = 400px */
  top: 50%; /* Y = 240px */
  width: 11.25%; /* 90px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  animation: reHubPulseNode 6.4s infinite ease-in-out;
}

html[data-theme="dark"] .re-hub-node {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.15);
}

.re-hub-inner-circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .re-hub-inner-circle {
  background: #1e1b1a;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.25);
}

.re-hub-w {
  font-family: var(--font-body);
  font-size: 4cqw;
  font-weight: 800;
  color: #10B981;
  margin-top: -0.25cqw;
  user-select: none;
}

.re-hub-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  z-index: -1;
  pointer-events: none;
  animation: rePulseRing 6.4s infinite ease-in-out;
}

@keyframes rePulseRing {
  0%, 100% { transform: scale(1); opacity: 0; }
  25%, 58.28%, 91.72% { transform: scale(1.3); opacity: 1; border-color: rgba(16, 185, 129, 0.6); }
  28.75%, 62.03%, 95.47% { transform: scale(1.6); opacity: 0; }
}

@keyframes reHubPulseNode {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25%, 58.28%, 91.72% { transform: translate(-50%, -50%) scale(1.08); }
  28.75%, 62.03%, 95.47% { transform: translate(-50%, -50%) scale(1); }
}

/* ---- Right Column: Outputs ---- */
.re-outputs-col {
  position: absolute;
  left: 68%;
  top: 0;
  width: 27%;
  height: 100%;
  z-index: 3;
}

.re-profile-node {
  position: absolute;
  left: 0;
  width: 100%;
  height: 15.833%; /* 76px */
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw;
  padding: 1cqw 1.75cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform: translateY(-50%);
  z-index: 3;
}

html[data-theme="dark"] .re-profile-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#re-prof-1 { top: 19.792%; } /* Y = 95px */
#re-prof-2 { top: 40.625%; } /* Y = 195px */

.re-avatar-wrap {
  position: relative;
  width: 4.75cqw; /* 38px */
  height: 4.75cqw;
  flex-shrink: 0;
}

.re-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.re-avatar-presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid var(--bg-primary);
}

html[data-theme="dark"] .re-avatar-presence-dot {
  border-color: #1e1b1a;
}

.re-profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 1.5cqw;
}

.re-profile-name {
  font-family: var(--font-body);
  font-size: 1.625cqw;
  font-weight: 600;
  color: var(--color-dark-ink);
  line-height: 1.2;
}

.re-profile-status {
  font-family: var(--font-body);
  font-size: 1.25cqw;
  font-weight: 500;
  color: #10B981;
  margin-top: 0.1cqw;
}

.re-profile-icon {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25cqw; /* 26px */
  height: 3.25cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #10B981;
  flex-shrink: 0;
}

.re-profile-icon svg {
  width: 1.75cqw;
  height: 1.75cqw;
  stroke: currentColor;
}

/* ---- Offer Sent Card ---- */
.re-offer-node {
  position: absolute;
  left: 0;
  top: 73.958%; /* Y = 355px */
  width: 100%;
  height: 39.583%; /* 190px */
  background: var(--bg-primary);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 1.5cqw;
  padding: 1.5cqw;
  box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  transform: translateY(-50%);
  z-index: 3;
}

html[data-theme="dark"] .re-offer-node {
  background: #1e1b1a;
  box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.08);
}

.re-offer-header {
  display: flex;
  align-items: center;
  gap: 1.25cqw;
}

.re-offer-plane-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5cqw;
  height: 3.5cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #10B981;
  flex-shrink: 0;
}

.re-plane-svg {
  width: 1.75cqw;
  height: 1.75cqw;
  stroke: currentColor;
}

.re-offer-title {
  font-family: var(--font-body);
  font-size: 1.625cqw;
  font-weight: 600;
  color: var(--color-dark-ink);
}

.re-offer-check-circle {
  margin-left: auto;
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  border: 1.5px solid #10B981;
  background: rgba(16, 185, 129, 0.04);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.re-offer-check-circle svg {
  width: 1.25cqw;
  height: 1.25cqw;
}

.re-offer-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.75cqw 0;
  opacity: 0.8;
}

html[data-theme="dark"] .re-offer-divider {
  background: rgba(255, 255, 255, 0.06);
}

.re-offer-body {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
}

.re-table-photo-svg {
  width: 5.5cqw;
  height: 5.5cqw;
  flex-shrink: 0;
}

.re-offer-body-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4cqw;
}

.re-offer-body-title {
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-weight: 600;
  color: var(--color-dark-ink);
}

.re-offer-badge {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 0.75cqw;
  padding: 0.2cqw 0.6cqw;
}

.re-badge-icon {
  width: 1.25cqw;
  height: 1.25cqw;
  stroke: #10B981;
}

.re-badge-text {
  font-family: var(--font-body);
  font-size: 1.15cqw;
  font-weight: 600;
  color: #10B981;
}

.re-offer-footer {
  display: flex;
  align-items: center;
  background: rgba(16, 185, 129, 0.06);
  border-radius: 1cqw;
  padding: 0.75cqw 1.25cqw;
  margin-top: 0.5cqw;
}

html[data-theme="dark"] .re-offer-footer {
  background: rgba(16, 185, 129, 0.1);
}

.re-footer-checkmark {
  width: 2.25cqw;
  height: 2.25cqw;
  border-radius: 50%;
  background: #10B981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.re-footer-checkmark svg {
  width: 1.25cqw;
  height: 1.25cqw;
}

.re-footer-claimed {
  font-family: var(--font-body);
  font-size: 1.5cqw;
  font-weight: 700;
  color: #10B981;
  margin-left: 1cqw;
}

.re-footer-value {
  font-family: var(--font-body);
  font-size: 1.625cqw;
  font-weight: 700;
  color: var(--color-dark-ink);
  margin-left: auto;
}

/* SVG Line and Empty Circle Styles */
.re-svg-lines path.path-bg,
.re-svg-lines line.path-bg {
  stroke: rgba(16, 185, 129, 0.45);
  stroke-dasharray: 3 4;
  transition: stroke 0.3s ease;
}

html[data-theme="dark"] .re-svg-lines path.path-bg,
html[data-theme="dark"] .re-svg-lines line.path-bg {
  stroke: rgba(16, 185, 129, 0.55);
}

.re-empty-circle {
  stroke: #10B981;
  stroke-width: 1.5;
  fill: var(--bg-primary);
  transition: fill 0.3s ease;
}

html[data-theme="dark"] .re-empty-circle {
  fill: #161413;
}

/* Staggered Animations */
@keyframes reInputPulse {
  0%, 100% {
    border-color: var(--color-border);
    transform: translateY(-50%) rotate(var(--rot)) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.12);
    transform: translateY(-50%) rotate(var(--rot)) scale(1.03);
  }
}

html[data-theme="dark"] @keyframes reInputPulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.06);
    transform: translateY(-50%) rotate(var(--rot)) scale(1);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0 1cqw rgba(16, 185, 129, 0.22);
    transform: translateY(-50%) rotate(var(--rot)) scale(1.03);
  }
}

#re-in-1 { --rot: -4deg; animation: reInputPulse 6.4s infinite ease-in-out; animation-delay: 0s; }
#re-in-2 { --rot: -2deg; animation: reInputPulse 6.4s infinite ease-in-out; animation-delay: 2.13s; }
#re-in-3 { --rot: 3deg; animation: reInputPulse 6.4s infinite ease-in-out; animation-delay: 4.27s; }

@keyframes reProfileActive {
  0%, 100% {
    border-color: var(--color-border);
    box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.1);
    transform: translateY(-50%) scale(1.03);
  }
}

html[data-theme="dark"] @keyframes reProfileActive {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.25);
    transform: translateY(-50%) scale(1.03);
  }
}

@keyframes reOfferActive {
  0%, 100% {
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.04);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0.5cqw 2cqw rgba(16, 185, 129, 0.18);
    transform: translateY(-50%) scale(1.03);
  }
}

html[data-theme="dark"] @keyframes reOfferActive {
  0%, 100% {
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.08);
  }
  5%, 15% {
    border-color: #10B981;
    box-shadow: 0 0.5cqw 2cqw rgba(16, 185, 129, 0.3);
    transform: translateY(-50%) scale(1.03);
  }
}

#re-prof-1 { animation: reProfileActive 6.4s infinite ease-in-out; animation-delay: 3.2s; }
#re-prof-2 { animation: reProfileActive 6.4s infinite ease-in-out; animation-delay: 5.33s; }
#re-offer-card { animation: reOfferActive 6.4s infinite ease-in-out; animation-delay: 1.07s; }

/* Mobile responsive sizing for Card 4 Visualizer */
@media (max-width: 768px) {
  #na-card-4 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }
}

/* ---- Card 5: Retention Crowd (Bring Back the Crowd) Visualizer ---- */
.na-card-visual-retention-crowd {
  height: auto !important;
  aspect-ratio: 800 / 500;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.rc-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 500;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .rc-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.rc-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ---- Left Column: Input Nodes ---- */
.rc-inputs-col {
  position: absolute;
  left: 5%;
  top: 0;
  width: 28%;
  height: 100%;
  z-index: 3;
}

.rc-profile-node {
  position: absolute;
  left: 0;
  width: 100%;
  height: 16.8%; /* 84px */
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw;
  padding: 1cqw 1.5cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform-origin: center;
  transform: translateY(-50%);
  z-index: 3;
}

html[data-theme="dark"] .rc-profile-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#rc-left-1 { top: 20%; --rot: -3deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); }
#rc-left-2 { top: 50%; --rot: 2deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); }
#rc-left-3 { top: 80%; --rot: -2deg; transform: translateY(-50%) rotate(var(--rot)) scale(1); }

.rc-avatar-wrap {
  position: relative;
  width: 4.75cqw; /* 38px */
  height: 4.75cqw;
  flex-shrink: 0;
}

.rc-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.rc-avatar-presence-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.1cqw;
  height: 1.1cqw;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid var(--bg-primary);
}

html[data-theme="dark"] .rc-avatar-presence-dot {
  border-color: #1e1b1a;
}

.rc-profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 1.5cqw;
  overflow: hidden;
}

.rc-profile-name {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 600;
  color: var(--color-dark-ink);
  line-height: 1.25;
}

.rc-profile-status {
  font-family: var(--font-body);
  font-size: 1.25cqw; /* 10px */
  font-weight: 500;
  color: #10B981;
  margin-top: 0.15cqw;
}

.rc-profile-info-row {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  margin-top: 0.25cqw;
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .rc-profile-info-row {
  color: #8c8380;
}

.rc-info-icon {
  width: 1.35cqw;
  height: 1.35cqw;
  stroke: currentColor;
}

.rc-info-text {
  font-family: var(--font-body);
  font-size: 1.15cqw;
  white-space: nowrap;
}

/* ---- W Hub Node ---- */
.rc-hub-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11.25%; /* 90px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  animation: rcHubPulseNode 6.4s infinite ease-in-out;
}

html[data-theme="dark"] .rc-hub-node {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.15);
}

.rc-hub-inner-circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .rc-hub-inner-circle {
  background: #1e1b1a;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.25);
}

.rc-hub-w {
  font-family: var(--font-body);
  font-size: 4cqw;
  font-weight: 800;
  color: #10B981;
  margin-top: -0.25cqw;
  user-select: none;
}

.rc-hub-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  z-index: -1;
  pointer-events: none;
  animation: rcPulseRing 6.4s infinite ease-in-out;
}

@keyframes rcPulseRing {
  0%, 100% { transform: scale(1); opacity: 0; }
  25%, 58.28%, 91.72% { transform: scale(1.3); opacity: 1; border-color: rgba(16, 185, 129, 0.6); }
  28.75%, 62.03%, 95.47% { transform: scale(1.6); opacity: 0; }
}

@keyframes rcHubPulseNode {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  25%, 58.28%, 91.72% { transform: translate(-50%, -50%) scale(1.08); }
  28.75%, 62.03%, 95.47% { transform: translate(-50%, -50%) scale(1); }
}

/* ---- Right Column: Outcome Cards ---- */
.rc-outputs-col {
  position: absolute;
  left: 67%;
  top: 0;
  width: 28%;
  height: 100%;
  z-index: 3;
}

.rc-card-node {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw;
  padding: 1.2cqw 1.5cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform: translateY(-50%);
  z-index: 3;
}

html[data-theme="dark"] .rc-card-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#rc-right-1 {
  top: 20%;
  height: 22%; /* 110px */
}

#rc-right-2 {
  top: 50%;
  height: 31%; /* 155px */
  border-color: rgba(16, 185, 129, 0.22);
  box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.04);
}

html[data-theme="dark"] #rc-right-2 {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.5cqw rgba(16, 185, 129, 0.08);
}

#rc-right-3 {
  top: 80%;
  height: 18%; /* 90px */
}

.rc-card-header {
  display: flex;
  align-items: center;
  gap: 1.25cqw;
}

.rc-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5cqw; /* 28px */
  height: 3.5cqw;
  border-radius: 50%;
  flex-shrink: 0;
}

.rc-icon-wrap.bg-green-light {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.rc-icon-wrap.bg-green-solid {
  background: #10B981;
  color: #FFF;
}

.rc-svg-icon {
  width: 1.75cqw;
  height: 1.75cqw;
  stroke: currentColor;
}

.rc-svg-icon-white {
  width: 1.6cqw;
  height: 1.6cqw;
  stroke: #FFF;
}

.rc-card-title {
  font-family: var(--font-body);
  font-size: 1.625cqw; /* 13px */
  font-weight: 600;
  color: var(--color-dark-ink);
}

/* Bullet list in Venue Behavior */
.rc-bullet-list {
  margin: 0.6cqw 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3cqw;
}

.rc-bullet-list li {
  font-family: var(--font-body);
  font-size: 1.3cqw;
  color: var(--color-slate-gray);
  display: flex;
  align-items: center;
  gap: 0.625cqw;
}

html[data-theme="dark"] .rc-bullet-list li {
  color: #8c8380;
}

.rc-bullet-list li::before {
  content: "";
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}

/* Matched Offer Body */
.rc-offer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0.5cqw;
  gap: 0.2cqw;
}

.rc-offer-subtitle {
  font-family: var(--font-body);
  font-size: 1.3cqw;
  font-weight: 600;
  color: #10B981;
}

.rc-offer-desc {
  font-family: var(--font-body);
  font-size: 1.25cqw;
  color: var(--color-slate-gray);
}

html[data-theme="dark"] .rc-offer-desc {
  color: #8c8380;
}

/* Green pill */
.rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.12);
  border-radius: 100px;
  padding: 0.35cqw 0.75cqw;
  margin-top: 0.5cqw;
}

.rc-pill-icon {
  width: 1.3cqw;
  height: 1.3cqw;
  stroke: #10B981;
}

.rc-pill span {
  font-family: var(--font-body);
  font-size: 1.15cqw;
  font-weight: 500;
  color: #10B981;
}

/* Back Tonight Body */
.rc-back-body {
  margin-top: 0.5cqw;
}

.rc-back-text {
  font-family: var(--font-body);
  font-size: 1.3cqw;
  font-weight: 600;
  color: #10B981;
}

/* ---- Animation Timing Details ---- */
#rc-left-1 { animation: rcLeftPulse1 6.4s infinite ease-in-out; }
#rc-left-2 { animation: rcLeftPulse2 6.4s infinite ease-in-out; }
#rc-left-3 { animation: rcLeftPulse3 6.4s infinite ease-in-out; }

#rc-right-1 { animation: rcRightPulse1 6.4s infinite ease-in-out; }
#rc-right-2 { animation: rcRightPulse2 6.4s infinite ease-in-out; }
#rc-right-3 { animation: rcRightPulse3 6.4s infinite ease-in-out; }

@keyframes rcLeftPulse1 {
  0% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  5%, 100% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes rcLeftPulse2 {
  33.3% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  38.3%, 100%, 0%, 28.3% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes rcLeftPulse3 {
  66.7% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  71.7%, 100%, 0%, 61.7% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes rcRightPulse1 {
  0%, 45%, 55%, 100% { transform: translateY(-50%) scale(1); border-color: var(--color-border); }
  50% { transform: translateY(-50%) scale(1.03); border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0.5cqw 1.25cqw rgba(16, 185, 129, 0.05); }
}

@keyframes rcRightPulse2 {
  0%, 78%, 88%, 100% { transform: translateY(-50%) scale(1); border-color: rgba(16, 185, 129, 0.22); }
  83.3% { transform: translateY(-50%) scale(1.03); border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 0.5cqw 1.25cqw rgba(16, 185, 129, 0.1); }
}

@keyframes rcRightPulse3 {
  0%, 11%, 21%, 100% { transform: translateY(-50%) scale(1); border-color: var(--color-border); }
  16.7% { transform: translateY(-50%) scale(1.03); border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0.5cqw 1.25cqw rgba(16, 185, 129, 0.05); }
}

/* Mobile responsive sizing for Card 5 Visualizer */
@media (max-width: 768px) {
  #na-card-5 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }
}

/* ---- Card 6: Team Briefing (Brief the Team) Visualizer ---- */
.na-card-visual-team-brief {
  height: auto !important;
  aspect-ratio: 800 / 480;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

.tb-visualizer-container {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 480;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--bg-primary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
  container-type: inline-size;
}

html[data-theme="dark"] .tb-visualizer-container {
  background: #161413;
  border-color: rgba(255, 255, 255, 0.06);
}

.tb-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ---- Left Column: Inputs ---- */
.tb-inputs-col {
  position: absolute;
  left: 5%;
  top: 0;
  width: 28%;
  height: 100%;
  z-index: 3;
}

.tb-pill-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.25cqw;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.25cqw;
  padding: 0.8cqw 1.5cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  transform-origin: center;
  transform: translateY(-50%) rotate(var(--rot)) scale(1);
  z-index: 3;
}

html[data-theme="dark"] .tb-pill-node {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.15);
}

#tb-in-1 { top: 15.625%; --rot: -2deg; left: 0; width: 89.3%; }
#tb-in-2 { top: 41.667%; --rot: 1deg; left: 28%; width: 82.1%; }
#tb-in-3 { top: 58.333%; --rot: -1deg; left: -3.6%; width: 82.1%; }
#tb-in-4 { top: 81.25%; --rot: 2deg; left: 26.8%; width: 92.9%; }

.tb-pill-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5cqw;
  height: 3.5cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.15);
  color: #10B981;
  flex-shrink: 0;
}

.tb-pill-svg {
  width: 1.85cqw;
  height: 1.85cqw;
  stroke: currentColor;
}

.tb-pill-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tb-pill-title {
  font-family: var(--font-body);
  font-size: 1.55cqw;
  font-weight: 600;
  color: var(--color-dark-ink);
  line-height: 1.2;
}

.tb-pill-desc {
  font-family: var(--font-body);
  font-size: 1.2cqw;
  color: var(--color-slate-gray);
  margin-top: 0.15cqw;
}

html[data-theme="dark"] .tb-pill-desc {
  color: #8c8380;
}

/* ---- W Hub Node ---- */
.tb-hub-node {
  position: absolute;
  left: 53.75%; /* X = 430px */
  top: 50%;
  width: 11.25%; /* 90px */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  animation: tbHubPulseNode 6.4s infinite ease-in-out;
}

html[data-theme="dark"] .tb-hub-node {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0.5cqw 1.875cqw rgba(0, 0, 0, 0.15);
}

.tb-hub-inner-circle {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .tb-hub-inner-circle {
  background: #1e1b1a;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.25);
}

.tb-hub-w {
  font-family: var(--font-body);
  font-size: 4cqw;
  font-weight: 800;
  color: #10B981;
  margin-top: -0.25cqw;
  user-select: none;
}

.tb-hub-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  z-index: -1;
  pointer-events: none;
  animation: tbPulseRing 6.4s infinite ease-in-out;
}

@keyframes tbPulseRing {
  0%, 100%, 13.75%, 23.75%, 38.75%, 48.75%, 63.75%, 73.75%, 88.75% { transform: scale(1); opacity: 0; }
  18.75%, 43.75%, 68.75%, 93.75% { transform: scale(1.3); opacity: 1; border-color: rgba(16, 185, 129, 0.6); }
  22.75%, 47.75%, 72.75%, 97.75% { transform: scale(1.6); opacity: 0; }
}

@keyframes tbHubPulseNode {
  0%, 100%, 13.75%, 23.75%, 38.75%, 48.75%, 63.75%, 73.75%, 88.75% { transform: translate(-50%, -50%) scale(1); }
  18.75%, 43.75%, 68.75%, 93.75% { transform: translate(-50%, -50%) scale(1.08); }
}

/* ---- Right Column: Outputs ---- */
.tb-outputs-col {
  position: absolute;
  left: 65%;
  top: 0;
  width: 30%;
  height: 100%;
  z-index: 3;
}

.tb-brief-card {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 80%;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 1.5cqw;
  padding: 1.25cqw 1.5cqw;
  box-shadow: 0 0.5cqw 1.25cqw rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.2cqw;
  transition: all 0.3s ease;
  z-index: 3;
}

html[data-theme="dark"] .tb-brief-card {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5cqw 1.5cqw rgba(0, 0, 0, 0.15);
}

.tb-card-header {
  display: flex;
  align-items: center;
  gap: 1cqw;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.8cqw;
}

html[data-theme="dark"] .tb-card-header {
  border-color: rgba(255, 255, 255, 0.06);
}

.tb-header-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25cqw;
  height: 3.25cqw;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #10B981;
  flex-shrink: 0;
}

.tb-header-svg {
  width: 1.7cqw;
  height: 1.7cqw;
  stroke: currentColor;
}

.tb-card-title {
  font-family: var(--font-body);
  font-size: 1.625cqw;
  font-weight: 700;
  color: var(--color-dark-ink);
}

.tb-rows-list {
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  margin: 0;
}

.tb-brief-row {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.6cqw 1cqw;
  border-radius: 0.85cqw;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.tb-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75cqw;
  height: 2.75cqw;
  border-radius: 50%;
  flex-shrink: 0;
}

.tb-row-icon.bg-green-light {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.tb-row-svg {
  width: 1.4cqw;
  height: 1.4cqw;
  stroke: currentColor;
}

.tb-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tb-row-title {
  font-family: var(--font-body);
  font-size: 1.35cqw;
  font-weight: 600;
  color: var(--color-dark-ink);
}

.tb-row-title.color-green {
  color: #10B981;
}

.tb-row-desc {
  font-family: var(--font-body);
  font-size: 1.15cqw;
  color: var(--color-slate-gray);
  margin-top: 0.1cqw;
}

html[data-theme="dark"] .tb-row-desc {
  color: #8c8380;
}

.tb-row-desc.color-dark-ink {
  color: var(--color-dark-ink);
}

.tb-row-desc.font-semibold {
  font-weight: 550;
}

/* Highlighted best move row */
.tb-brief-row.tb-row-best {
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: rgba(16, 185, 129, 0.04);
}

html[data-theme="dark"] .tb-brief-row.tb-row-best {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
}

.tb-row-check-badge {
  margin-left: auto;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 50%;
  background: #10B981;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tb-row-check-badge svg {
  width: 1.25cqw;
  height: 1.25cqw;
  stroke: #FFF;
}

/* Card footer and 1-click send button */
.tb-card-footer {
  display: flex;
  justify-content: center;
  margin-top: auto;
}

.tb-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  background: var(--bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.5cqw 1cqw;
  font-family: var(--font-body);
  font-size: 1.2cqw;
  font-weight: 600;
  color: var(--color-slate-gray);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

html[data-theme="dark"] .tb-action-btn {
  background: #1e1b1a;
  border-color: rgba(255, 255, 255, 0.06);
  color: #8c8380;
}

.tb-action-btn:hover {
  border-color: #10B981;
  color: #10B981;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.08);
}

.tb-btn-lightning {
  width: 1.3cqw;
  height: 1.3cqw;
  stroke: #10B981;
  fill: rgba(16, 185, 129, 0.08);
}

/* ---- Animation timing loops ---- */
#tb-in-1 { animation: tbPillPulse1 6.4s infinite ease-in-out; }
#tb-in-2 { animation: tbPillPulse2 6.4s infinite ease-in-out; }
#tb-in-3 { animation: tbPillPulse3 6.4s infinite ease-in-out; }
#tb-in-4 { animation: tbPillPulse4 6.4s infinite ease-in-out; }

@keyframes tbPillPulse1 {
  0% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  5%, 100% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes tbPillPulse2 {
  25% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  30%, 100%, 0%, 20% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes tbPillPulse3 {
  50% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  55%, 100%, 0%, 45% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

@keyframes tbPillPulse4 {
  75% { transform: translateY(-50%) rotate(var(--rot)) scale(1.03); border-color: rgba(16, 185, 129, 0.35); }
  80%, 100%, 0%, 70% { transform: translateY(-50%) rotate(var(--rot)) scale(1); border-color: var(--color-border); }
}

/* Sync row pulse animations on telemetry dot arrival */
#tb-row-1 { animation: tbRowPulse1 6.4s infinite ease-in-out; }
#tb-row-2 { animation: tbRowPulse2 6.4s infinite ease-in-out; }
#tb-row-3 { animation: tbRowPulse3 6.4s infinite ease-in-out; }
#tb-row-4 { animation: tbRowPulse4 6.4s infinite ease-in-out; }

@keyframes tbRowPulse1 {
  0%, 23.125%, 33.125%, 100% { border-color: transparent; background: transparent; }
  28.125% { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.03); }
}

@keyframes tbRowPulse2 {
  0%, 98.125%, 8.125%, 100% { border-color: transparent; background: transparent; }
  3.125% { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.03); }
}

@keyframes tbRowPulse3 {
  0%, 48.125%, 58.125%, 100% { border-color: transparent; background: transparent; }
  53.125% { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.03); }
}

@keyframes tbRowPulse4 {
  0%, 73.125%, 83.125%, 100% { transform: scale(1); }
  78.125% { transform: scale(1.03); border-color: rgba(16, 185, 129, 0.6); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
}

/* Mobile responsive sizing for Card 6 Visualizer */
@media (max-width: 768px) {
  #na-card-6 {
    padding: 1.1rem 1.1rem 2rem 1.1rem !important;
  }
}
/* =========================================================================
   Interactive Ecosystem Constellation Visualizer (Built from the ground up)
   ========================================================================= */
.eco-visualizer-wrapper {
  position: relative;
  width: 1200px;
  height: 800px;
  overflow: visible;
  margin: 0 auto;
  z-index: 2;
}

.eco-visualizer-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 800px;
  background: transparent;
  overflow: visible;
  z-index: 3;
  transform-origin: top left;
  transition: transform 0.1s ease;
}


.eco-background-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.eco-active-line {
  animation: ecoLineDash 20s infinite linear;
}

@keyframes ecoLineDash {
  to { stroke-dashoffset: -80; }
}

/* ---- Center Core W Badge ---- */
.eco-center-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 10;
}

.eco-center-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #10b981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 12;
  transition: transform 0.3s ease;
}

.eco-center-circle:hover {
  transform: scale(1.08);
}

.eco-center-letter {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 2.5rem;
  color: #10b981;
  line-height: 1;
  position: relative;
  left: -2px;
}

.eco-center-sparkle {
  font-size: 1.1rem;
  color: #10b981;
  position: absolute;
  top: 22px;
  right: 20px;
  animation: sparkleFlash 3s infinite ease-in-out;
}

@keyframes sparkleFlash {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.eco-center-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  z-index: 9;
  animation: ecoPulseRing 3s infinite ease-in-out;
}

.eco-orbital-ring {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1.5px dashed rgba(16, 185, 129, 0.3);
  z-index: 8;
  animation: ecoOrbitRotation 20s infinite linear;
  pointer-events: none;
}

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

@keyframes ecoPulseRing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ---- Rebuild Connected Operations Showcase with 8 Floating Images ---- */
.co-center-logo-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  z-index: 10;
}

.co-center-logo-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #10b981;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 12;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.co-center-logo-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 0 45px rgba(16, 185, 129, 0.45);
}

.co-center-logo-w {
  font-family: var(--font-body);
  font-weight: 850;
  font-size: 3.4rem;
  color: #10b981;
  line-height: 1;
  position: relative;
  top: -1px;
}

.co-center-logo-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  z-index: 9;
  animation: ecoPulseRing 3s infinite ease-in-out;
  pointer-events: none;
}

.co-center-logo-orbital {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1.5px dashed rgba(16, 185, 129, 0.2);
  z-index: 8;
  animation: ecoOrbitRotation 30s infinite linear;
  pointer-events: none;
}

/* ---- 7 Interactive HTML/CSS Dashboard Widgets ---- */
.co-widget {
  position: absolute;
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.015);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, z-index 0.3s ease;
  z-index: 7;
  overflow: hidden;
  font-family: var(--font-body);
  text-align: left;
}

.co-widget:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 35px rgba(16, 185, 129, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
  border-color: #10b981;
  z-index: 12;
}

.co-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 8px;
}

.co-widget-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.co-widget-icon svg {
  width: 12px;
  height: 12px;
}

.co-widget-title {
  font-size: 0.75rem;
  font-weight: 750;
  color: #111827;
  letter-spacing: -0.01em;
}

.co-widget-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.co-widget-metric-left {
  display: flex;
  flex-direction: column;
}

.co-widget-value {
  font-size: 1.45rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.co-widget-sub {
  font-size: 0.68rem;
  color: #6b7280;
  margin-top: 2px;
}

.co-widget-trend {
  font-size: 0.65rem;
  font-weight: 650;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 8px;
  display: inline-block;
}

.co-widget-trend.green {
  color: #059669;
  background: #ecfdf5;
}

.co-widget-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
}

.co-widget-list-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #374151;
  line-height: 1.3;
}

.co-item-name {
  font-weight: 550;
}

.co-item-meta {
  color: #9ca3af;
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.co-widget-footer {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 650;
  color: #10b981;
  text-decoration: none;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
  transition: color 0.2s ease;
}

.co-widget-footer:hover {
  color: #059669;
}

/* Mini Chart Columns */
.co-widget-chart-mini {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}

.co-chart-bar {
  width: 4px;
  background: #10b981;
  border-radius: 2px;
  min-height: 4px;
}

/* Staff Item Layout */
.staff-item {
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.staff-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
}

.staff-avatar.green {
  background: #10b981;
}

.staff-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.staff-name {
  font-weight: 600;
  font-size: 0.72rem;
  color: #111827;
  line-height: 1.1;
}

.staff-role {
  font-size: 0.62rem;
  color: #6b7280;
  margin-top: 1px;
}

.staff-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Payout Content */
.co-widget-payout-content {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.payout-label {
  font-size: 0.68rem;
  color: #6b7280;
}

.payout-value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.payout-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: -0.02em;
}

.payout-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #059669;
  background: #ecfdf5;
}

.payout-chart, .activity-chart {
  margin-top: 10px;
  width: 100%;
}

/* Customer Activity */
.co-widget-activity-content {
  display: flex;
  flex-direction: column;
}

.activity-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
}

.activity-text {
  display: flex;
  flex-direction: column;
}

.activity-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.1;
}

.activity-date {
  font-size: 0.62rem;
  color: #6b7280;
  margin-top: 1px;
}

.activity-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: #059669;
  background: #ecfdf5;
}

/* Campaigns Widget */
.co-widget-campaign-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.camp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camp-avatar svg {
  width: 12px;
  height: 12px;
}

.camp-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.camp-name {
  font-weight: 650;
  font-size: 0.72rem;
  color: #111827;
  line-height: 1.1;
}

.camp-sub {
  font-size: 0.62rem;
  color: #6b7280;
  margin-top: 1px;
}

.camp-status-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #059669;
  background: #ecfdf5;
  text-transform: uppercase;
}

.co-widget-campaign-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 10px;
  border-top: 1px solid #f3f4f6;
  padding-top: 8px;
  text-align: center;
}

.camp-metric {
  display: flex;
  flex-direction: column;
}

.camp-m-val {
  font-size: 0.82rem;
  font-weight: 850;
  color: #111827;
}

.camp-m-lbl {
  font-size: 0.62rem;
  color: #6b7280;
  margin-top: 1px;
}

/* Messages Widget */
.msg-item {
  gap: 8px;
  padding: 3px 0;
}

.msg-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.msg-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.msg-name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  line-height: 1;
}

.msg-name {
  font-weight: 650;
  font-size: 0.72rem;
  color: #111827;
}

.msg-time {
  font-size: 0.62rem;
  color: #9ca3af;
  font-family: var(--font-mono);
}

.msg-text {
  font-size: 0.68rem;
  color: #4b5563;
  margin-top: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- Widget Positioning Coordinates ---- */
#co-wid-bookings { left: 240px; top: 150px; width: 175px; }
#co-wid-staff { left: 190px; top: 370px; width: 170px; }
#co-wid-payouts { left: 220px; top: 590px; width: 170px; }
#co-wid-activity { left: 510px; top: 550px; width: 180px; }
#co-wid-campaigns { left: 800px; top: 560px; width: 185px; }
#co-wid-scans { left: 840px; top: 330px; width: 180px; }
#co-wid-messages { left: 780px; top: 95px; width: 185px; }


/* ---- 8 Surrounding Floating Photo Cards ---- */
.co-photo-card {
  position: absolute;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease, z-index 0.3s ease;
  z-index: 6;
}

.co-photo-card:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.22);
  border-color: #10b981;
  z-index: 12;
}

.co-photo-card img,
.co-photo-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Photo Positioning Coordinates (Standardized & Roomier layout) ---- */
#co-photo-dj { left: 540px; top: 15px; width: 120px; height: 80px; }
#co-photo-lounge { left: 1020px; top: 40px; width: 120px; height: 80px; }
#co-photo-scan { left: 1070px; top: 290px; width: 90px; height: 90px; }
#co-photo-street { left: 1030px; top: 600px; width: 120px; height: 80px; }
#co-photo-palm { left: 255px; top: 20px; width: 120px; height: 80px; }
#co-photo-ferris { left: 55px; top: 600px; width: 120px; height: 80px; }
#co-photo-cocktail { left: 25px; top: 290px; width: 120px; height: 80px; }
#co-photo-crowd { left: 70px; top: 40px; width: 120px; height: 80px; }


/* ---- Float Animations Keyframes (Enhanced Sway) ---- */
@keyframes coFloat1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0.8deg); }
}

@keyframes coFloat2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-1.0deg); }
}

@keyframes coFloat3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(0.9deg); }
}

@keyframes coFloat4 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(-1.1deg); }
}

.co-float-1, .co-photo-card:nth-of-type(8n+1) { animation: coFloat1 6s ease-in-out infinite; }
.co-float-2, .co-photo-card:nth-of-type(8n+2) { animation: coFloat2 6.5s ease-in-out infinite; }
.co-float-3, .co-photo-card:nth-of-type(8n+3) { animation: coFloat3 7s ease-in-out infinite; }
.co-float-4, .co-photo-card:nth-of-type(8n+4) { animation: coFloat4 6.2s ease-in-out infinite; }
.co-widget:nth-of-type(7n+1) { animation: coFloat1 7.2s ease-in-out infinite; }
.co-widget:nth-of-type(7n+2) { animation: coFloat2 6.8s ease-in-out infinite; }
.co-widget:nth-of-type(7n+3) { animation: coFloat3 7.5s ease-in-out infinite; }
.co-widget:nth-of-type(7n+4) { animation: coFloat4 7s ease-in-out infinite; }

/* Freeze/Lock animations on mobile/tablet viewports to prevent layout shifts and maintain stability */
@media (max-width: 768px) {
  .co-widget,
  .co-photo-card {
    animation: none !important;
  }
}



/* ---- Dark Mode Overrides ---- */
html[data-theme="dark"] .co-center-logo-circle {
  background: #022c22;
}

html[data-theme="dark"] .co-widget {
  background: #0a0e0c;
  border-color: rgba(16, 185, 129, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .co-widget-header {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .co-widget-title {
  color: #ffffff;
}

html[data-theme="dark"] .co-widget-value {
  color: #ffffff;
}

html[data-theme="dark"] .co-widget-sub {
  color: #9ca3af;
}

html[data-theme="dark"] .co-widget-list-item {
  color: #d1d5db;
}

html[data-theme="dark"] .co-widget-list {
  border-top-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .co-widget-footer {
  border-top-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .staff-name {
  color: #ffffff;
}

html[data-theme="dark"] .staff-role {
  color: #9ca3af;
}

html[data-theme="dark"] .activity-label {
  color: #ffffff;
}

html[data-theme="dark"] .activity-date {
  color: #9ca3af;
}

html[data-theme="dark"] .activity-footer-row {
  border-top-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .camp-name {
  color: #ffffff;
}

html[data-theme="dark"] .camp-sub {
  color: #9ca3af;
}

html[data-theme="dark"] .co-widget-campaign-metrics {
  border-top-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .camp-m-val {
  color: #ffffff;
}

html[data-theme="dark"] .camp-m-lbl {
  color: #9ca3af;
}

html[data-theme="dark"] .msg-name {
  color: #ffffff;
}

html[data-theme="dark"] .msg-text {
  color: #d1d5db;
}

html[data-theme="dark"] .msg-avatar {
  background: #1f2937;
  color: #d1d5db;
}

html[data-theme="dark"] .co-photo-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Explicit Contrast Adjustments for Secondary Meta and Labels in Dark Mode */
html[data-theme="dark"] .co-item-meta {
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .msg-time {
  color: rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .payout-label {
  color: rgba(255, 255, 255, 0.45);
}

/* Premium styling for Green Badges and Trends in Dark Mode */
html[data-theme="dark"] .co-widget-trend.green,
html[data-theme="dark"] .payout-badge,
html[data-theme="dark"] .activity-badge,
html[data-theme="dark"] .camp-status-badge {
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}

html[data-theme="dark"] .co-widget-footer:hover {
  color: #34d399;
}