@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* === IV REVIVAL === */
:root {
    --color-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --space-lg: 1.5rem;
    --space-md: 1rem;
    --space-sm: 0.5rem;
    --space-xl: 2rem;
    --space-xs: 0.25rem;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 4px;
    --radius-xl: 16px;
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    --space-2xl: 3rem;
    --color-star: #fbbf24;
    --color-text: #000000;
    --transition: 0.3s ease;
    --color-black: #000000;
    --color-error: #ef4444;
    --color-white: #ffffff;
    --primary-dim: #8bc73f;
    --radius-full: 9999px;
    --color-accent: #0caae6;
    --color-bg-alt: #f8f9fb;
    --color-border: #e2e8f0;
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --glass-border: rgba(255, 255, 255, 0.2);
    --color-bg-dark: #0f172a;
    --color-primary: #8bc73f;
    --color-star-bg: #fef3c7;
    --color-success: #10b981;
    --color-surface: #ffffff;
    --color-warning: #f59e0b;
    --gradient-dark: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(139, 199, 63, 0.1) 0%, rgba(139, 199, 63, 0.2) 30%, rgba(12, 170, 230, 0.15) 60%, rgba(12, 170, 230, 0.25) 100%);
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    --color-bg-darker: #020617;
    --color-secondary: #0caae6;
    --color-star-text: #92400e;
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    --color-accent-rgb: #8bc73f;
    --color-primary-50: rgba(139, 199, 63, 0.05);
    --color-text-muted: #94a3b8;
    --gradient-overlay: linear-gradient(135deg, rgba(139, 199, 63, 0.85) 0%, rgba(12, 170, 230, 0.85) 100%);
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --color-accent-dark: #0877a3;
    --color-primary-100: rgba(139, 199, 63, 0.10);
    --color-primary-200: rgba(139, 199, 63, 0.20);
    --color-primary-300: rgba(139, 199, 63, 0.30);
    --color-primary-rgb: 139, 199, 63;
    --color-surface-alt: #ffffff;
    --color-border-light: #f1f5f9;
    --color-primary-dark: #5a8129;
    --color-surface-dark: #ffffff;
    --color-text-on-dark: #ffffff;
    --color-primary-light: #a5d462;
    --color-text-tertiary: #64748b;
    --color-text-secondary: #475569;
    --color-secondary-light: #3fc3f5;
}

/* === VARIABLES === */
:root {
    /* Typography - Fallbacks only, themes provide actual fonts */
    --font-primary: system-ui, sans-serif;
    --font-heading: system-ui, sans-serif;
    --font-mono: monospace;
    
    /* Typography Scale - BUG12-FIX: Shared font size variables */
    --text-h1: clamp(2.25rem, 5vw, 3.5rem);      /* Page title (hero) */
    --text-h2: clamp(1.75rem, 4vw, 2.5rem);      /* Section titles */
    --text-h3: clamp(1.25rem, 3vw, 1.5rem);      /* Card/feature titles */
    --text-h4: 1.125rem;                          /* Sub-headings */
    --text-body: 1rem;                            /* Body copy */
    --text-body-lg: 1.125rem;                     /* Large body (subtitles) */
    --text-small: 0.875rem;                       /* Small text, labels */
    --text-xs: 0.8125rem;                         /* Extra small */
    
    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --leading-loose: 1.8;
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    
    /* Animation */
    --transition: 0.3s ease;
}

/* NOTE: All color variables (--color-*, --gradient-*) come from brand themes.
   Do NOT add color defaults here - each brand defines their own palette. */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; line-height: 1.2; font-weight: 600; font-family: var(--font-heading); }
p { margin: 0 0 1rem; }
a { color: var(--color-primary); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
button { cursor: pointer; font-family: inherit; }

/* === CONTAINER === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === BUTTONS === */
/* Base Buttons - Theme-aware */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    position: relative;
    overflow: hidden;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Primary - Theme gradient */
.btn--primary {
    background: var(--gradient-btn, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn--primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Secondary - Theme accent */
.btn--secondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.btn--secondary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

/* Accent - Theme accent gradient */
.btn--accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-dark) 100%);
    color: #ffffff !important;
}
.btn--accent:hover { 
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.btn--white {
    background: var(--color-white);
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-sm);
}
.btn--white:hover { 
    background: var(--color-bg-alt);
    transform: translateY(-2px);
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary) !important;
}
.btn--outline:hover {
    background: var(--color-primary);
    color: #ffffff !important;
}

.btn--outline-light {
    background: transparent;
    border: 2px solid var(--color-white);
    color: #ffffff !important;
}
.btn--outline-light:hover {
    background: var(--color-white);
    color: var(--color-text) !important;
}

.btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; min-height: 36px; }
.btn--lg { padding: 1rem 2rem; font-size: 1.125rem; min-height: 52px; }

@media (max-width: 640px) {
    .btn--mobile-full { width: 100%; }
}

/* Link color overrides */
a.btn--primary,
a.btn--primary:visited,
a.btn--primary:link {
    color: #ffffff !important;
}

a.btn--secondary,
a.btn--secondary:visited {
    color: #ffffff !important;
}

/* Ghost button */
.btn--ghost {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Dark background button overrides */
[data-bg="dark"] .btn--outline,
.section--dark .btn--outline {
    border-color: var(--color-white);
    color: #ffffff !important;
}

[data-bg="dark"] .btn--outline:hover,
.section--dark .btn--outline:hover {
    background: var(--color-white);
    color: var(--color-primary) !important;
}

/* CTA button styling */
.cta__btn--primary {
    background: #ffffff !important;
    color: var(--color-primary) !important;
}

.cta__btn--secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

.cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
}


/* === SECTION === */
section { padding: 4rem 0; }
@media (min-width: 768px) { section { padding: 5rem 0; } }

/* === SKIP LINK === */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  background: var(--color-primary, #2563eb);
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0.5rem;
  z-index: 9999;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid var(--color-accent, #1d4ed8);
  outline-offset: 2px;
}

/* === SECTION COMPONENTS === */
/* Section Components - Shared styles across all sections */

/* Section Header - Used by multiple sections */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-header__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.section-header__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.section-header__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Dark background variants */
[data-bg="dark"] .section-header__title { color: var(--color-white); }
[data-bg="dark"] .section-header__subtitle { color: rgba(255, 255, 255, 0.7); }
[data-bg="dark"] .section-header__eyebrow { color: var(--color-primary-light); }

/* Base Section Classes - Required by HTML structure */
.hero { position: relative; }
.services { position: relative; }
.why { position: relative; }
.testimonials { position: relative; }
.faq { position: relative; }
.areas { position: relative; }
.cta { position: relative; }
.footer { position: relative; }

/* Section Backgrounds */
.hero[data-bg="gradient"] { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.hero[data-bg="image"] { background-size: cover; background-position: center; }

/* Card Base Styles - NO HOVER EFFECTS */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
}

.badge--outline {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.badge--light {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

/* Rating Stars */
.stars {
    display: flex;
    gap: 0.25rem;
    color: var(--color-accent);
}

.stars svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 0.75rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: all var(--transition);
}

.social-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Link with Arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: gap var(--transition);
}

.link-arrow:hover {
    gap: 0.75rem;
}

.link-arrow svg {
    transition: transform var(--transition);
}

.link-arrow:hover svg {
    transform: translateX(3px);
}

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

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

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* === THEME APPLICATION === */
/* ═══════════════════════════════════════════════════════════════════════════
   THEME APPLICATION
   Applies CSS custom properties (variables) to common elements.
   This bridges theme definitions to actual element styling.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   BODY & DOCUMENT
   ───────────────────────────────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg, #ffffff);
    color: var(--color-text, #18181b);
    font-family: var(--font-body, Inter, system-ui, -apple-system, sans-serif);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text, #18181b);
    font-family: var(--font-heading, var(--font-body, Inter, system-ui, sans-serif));
    font-weight: 700;
    line-height: 1.2;
}

p {
    color: var(--color-text-muted, #71717a);
}

a {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent, var(--color-primary, #3b82f6));
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION BACKGROUNDS
   ───────────────────────────────────────────────────────────────────────────── */
section {
    background: var(--color-bg, #ffffff);
}

section.bg-alt,
section[data-bg="alt"] {
    background: var(--color-bg-alt, var(--color-bg, #f4f4f5));
}

section.bg-surface,
section[data-bg="surface"] {
    background: var(--color-surface, #f4f4f5);
}

section.bg-gradient,
section[data-bg="gradient"] {
    background: var(--gradient-hero, linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%));
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */
/* Hero sections - only target the section itself, NOT child elements */
.hero:not(.hero--modular):not(.hero--embed-centered),
section.hero--centered,
section.hero--split,
section.hero--slideshow,
section.hero--video,
section.hero--gallery {
    background: var(--gradient-hero, var(--color-bg, #ffffff));
}

/* Modular hero - transparent to show space-dust */
section.hero--modular {
    background: transparent;
    padding-top: 8rem;
}

.hero__title,
.hero h1 {
    color: var(--color-text, #18181b);
}

.hero__subtitle,
.hero p {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD ELEMENTS
   Only match actual card containers, not their children.
   Uses [class$="__card"] (ends with) and [class*="__card "] (followed by space)
   to avoid matching child elements like __card-image, __card-title, etc.
   ───────────────────────────────────────────────────────────────────────────── */
.card,
[class$="__card"],
[class*="__card "],
[class$="-card"],
[class*="-card "] {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-lg, 12px);
}

.card__title,
[class*="__card-title"],
[class*="-card__title"] {
    color: var(--color-text, #18181b);
}

.card__text,
[class*="__card-text"],
[class*="-card__text"] {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICES SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.services {
    background: var(--color-bg-alt, var(--color-bg, #ffffff));
}

.services__title {
    color: var(--color-text, #18181b);
}

.services__subtitle {
    color: var(--color-text-muted, #71717a);
}

.services__card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
}

.services__card-icon {
    color: var(--color-primary, #3b82f6);
}

.services__card-title {
    color: var(--color-text, #18181b);
}

.services__card-text {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TWO-COLUMN SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.two-col {
    background: var(--color-bg, #ffffff);
}

.two-col:nth-child(even) {
    background: var(--color-bg-alt, var(--color-bg, #ffffff));
}

.two-col__title {
    color: var(--color-text, #18181b);
}

.two-col__text {
    color: var(--color-text-muted, #71717a);
}

.two-col__eyebrow {
    color: var(--color-primary, #3b82f6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.faq {
    background: var(--color-bg, #ffffff);
}

.faq__title {
    color: var(--color-text, #18181b);
}

.faq__item {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
}

.faq__question {
    color: var(--color-text, #18181b);
}

.faq__answer {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CTA SECTIONS
   ───────────────────────────────────────────────────────────────────────────── */
.cta {
    background: var(--gradient-hero, var(--color-bg-alt, #f4f4f5));
}

.cta__title {
    color: var(--color-text, #18181b);
}

.cta__text {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────────────────────────────────────────── */
.testimonials {
    background: var(--color-bg-alt, var(--color-bg, #ffffff));
}

.testimonials__card {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
}

.testimonials__quote {
    color: var(--color-text, #18181b);
}

.testimonials__name {
    color: var(--color-text, #18181b);
}

.testimonials__role {
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS - THEME COLORS
   ───────────────────────────────────────────────────────────────────────────── */
.btn--primary,
.btn--accent {
    background: var(--gradient-btn, var(--color-primary, #3b82f6));
    color: var(--color-white, #ffffff);
    border: none;
}

.btn--primary:hover,
.btn--accent:hover {
    filter: brightness(1.1);
}

.btn--secondary {
    background: var(--color-surface, #f4f4f5);
    color: var(--color-text, #18181b);
    border: 1px solid var(--color-border, #e4e4e7);
}

.btn--secondary:hover {
    background: var(--color-bg-alt, #e4e4e7);
    border-color: var(--color-primary, #3b82f6);
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--color-border, #e4e4e7);
    color: var(--color-text, #18181b);
}

.btn--outline:hover {
    border-color: var(--color-primary, #3b82f6);
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
    color: var(--color-primary, #3b82f6);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text, #18181b);
}

.btn--ghost:hover {
    background: var(--color-surface, #f4f4f5);
    color: var(--color-primary, #3b82f6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
input,
textarea,
select {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e4e4e7);
    color: var(--color-text, #18181b);
    border-radius: var(--radius-md, 8px);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary, #3b82f6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted, #a1a1aa);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCENT ELEMENTS
   ───────────────────────────────────────────────────────────────────────────── */
.accent,
[class*="--accent"] {
    color: var(--color-primary, #3b82f6);
}

.bg-primary {
    background: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
}

.bg-accent {
    background: var(--color-accent, var(--color-primary, #3b82f6));
    color: var(--color-white, #ffffff);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ICONS
   ───────────────────────────────────────────────────────────────────────────── */
.icon,
[class*="__icon"] {
    color: var(--color-primary, #3b82f6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BORDERS & DIVIDERS
   ───────────────────────────────────────────────────────────────────────────── */
hr {
    border-color: var(--color-border, #e4e4e7);
}

.divider {
    background: var(--color-border, #e4e4e7);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TABS & ACCORDIONS
   ───────────────────────────────────────────────────────────────────────────── */
.tabs__btn,
.accordion__trigger {
    background: var(--color-surface, #f4f4f5);
    color: var(--color-text-muted, #71717a);
    border: 1px solid var(--color-border, #e4e4e7);
}

.tabs__btn:hover,
.accordion__trigger:hover {
    color: var(--color-text, #18181b);
    border-color: var(--color-primary, #3b82f6);
}

.tabs__btn.active,
.tabs__btn[aria-selected="true"],
.accordion__trigger[aria-expanded="true"] {
    background: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
    border-color: var(--color-primary, #3b82f6);
}

.tabs__panel,
.accordion__content {
    background: var(--color-surface, #ffffff);
    color: var(--color-text-muted, #71717a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CODE BLOCKS (for MCP Sovereign)
   ───────────────────────────────────────────────────────────────────────────── */
code,
pre {
    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', monospace);
    background: var(--color-surface, #f4f4f5);
    border-radius: var(--radius-sm, 4px);
}

pre {
    border: 1px solid var(--color-border, #e4e4e7);
    padding: 1rem;
    overflow-x: auto;
}

code {
    padding: 0.125rem 0.375rem;
    color: var(--color-primary, #3b82f6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGES & TAGS
   ───────────────────────────────────────────────────────────────────────────── */
.badge,
.tag {
    background: var(--color-surface, #f4f4f5);
    color: var(--color-text-muted, #71717a);
    border: 1px solid var(--color-border, #e4e4e7);
    border-radius: var(--radius-full, 9999px);
}

.badge--primary,
.tag--primary {
    background: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
    border-color: var(--color-primary, #3b82f6);
}

/* === SPACE DUST BACKGROUND === */
/* ============================================
   SPACE DUST BACKGROUND
   Usage: data-bg="space-dust" on any section
   Creates a FIXED parallax particle field
   ============================================ */

/* Fixed particle canvas - attached to body, shared by all sections */
body > .space-particles-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0d0d14 100%);
}

/* Hide fixed canvas when no space-dust sections exist */
body:not(:has([data-bg="space-dust"])) > .space-particles-fixed {
    display: none;
}

/* Sections with space-dust get TRANSPARENT background so canvas shows through */
[data-bg="space-dust"] {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

[data-bg="space-dust"] > .container {
    position: relative;
    z-index: 2;
}

/* Text colors on dark space background */
[data-bg="space-dust"] h1,
[data-bg="space-dust"] h2,
[data-bg="space-dust"] h3,
[data-bg="space-dust"] .hero__title,
[data-bg="space-dust"] .cta__title,
[data-bg="space-dust"] .twocol__title,
[data-bg="space-dust"] .widget-split__title,
[data-bg="space-dust"] .services__title,
[data-bg="space-dust"] .faq__title,
[data-bg="space-dust"] .testimonials__title,
[data-bg="space-dust"] .comparison__title,
[data-bg="space-dust"] .section-header__title {
    color: var(--color-white) !important;
}

[data-bg="space-dust"] p,
[data-bg="space-dust"] .hero__subtitle,
[data-bg="space-dust"] .cta__subtitle,
[data-bg="space-dust"] .twocol__subtitle,
[data-bg="space-dust"] .widget-split__desc,
[data-bg="space-dust"] .services__subtitle,
[data-bg="space-dust"] .faq__subtitle,
[data-bg="space-dust"] .testimonials__subtitle,
[data-bg="space-dust"] .section-header__desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-bg="space-dust"] .hero__eyebrow,
[data-bg="space-dust"] .cta__eyebrow,
[data-bg="space-dust"] .services__eyebrow {
    color: var(--color-primary);
}

/* BUTTONS on space-dust - force visibility */
[data-bg="space-dust"] .btn--primary,
[data-bg="space-dust"] a.btn--primary,
[data-bg="space-dust"] a.btn--primary:visited,
[data-bg="space-dust"] a.btn--primary:link {
    background: var(--gradient-btn, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(16, 185, 129, 0.15);
}

[data-bg="space-dust"] .btn--primary:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 30px rgba(16, 185, 129, 0.25);
}

[data-bg="space-dust"] .btn--secondary,
[data-bg="space-dust"] a.btn--secondary {
    background: var(--color-secondary) !important;
    color: #ffffff !important;
}

[data-bg="space-dust"] .cta__btn--primary,
[data-bg="space-dust"] a.cta__btn--primary {
    background: var(--gradient-btn, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)) !important;
    color: #ffffff !important;
}

[data-bg="space-dust"] .cta__btn--secondary,
[data-bg="space-dust"] a.cta__btn--secondary {
    background: var(--color-secondary) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Glass cards on space background */
section[data-bg="space-dust"] .hero__embed-card,
section[data-bg="space-dust"] .hero__embed-wrap,
section[data-bg="space-dust"] .cta__card,
section[data-bg="space-dust"] .widget-split__embed,
.hero--embed-centered[data-bg="space-dust"] .hero__embed-card {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Cards and items get glass effect */
[data-bg="space-dust"] .services__card,
[data-bg="space-dust"] .faq__item,
[data-bg="space-dust"] .faq-numbered__item,
[data-bg="space-dust"] .testimonials__card,
[data-bg="space-dust"] .comparison__card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* FAQ specific on space-dust */
[data-bg="space-dust"] .faq-numbered__q-text {
    color: var(--color-white) !important;
}

[data-bg="space-dust"] .faq-numbered__desc {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-bg="space-dust"] .faq-numbered__cta {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bg="space-dust"] .faq-numbered__cta-text {
    color: var(--color-white) !important;
}

/* Trust bars and dividers */
[data-bg="space-dust"] .hero__trust-divider,
[data-bg="space-dust"] .cta__divider {
    background: rgba(255, 255, 255, 0.2);
}

[data-bg="space-dust"] .hero__trust-value,
[data-bg="space-dust"] .hero__trust-label {
    color: var(--color-white);
}

/* Footer on space dust */
[data-bg="space-dust"].footer,
footer[data-bg="space-dust"] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-bg="space-dust"] .footer__link,
[data-bg="space-dust"] .footer__text {
    color: rgba(255, 255, 255, 0.7);
}

[data-bg="space-dust"] .footer__link:hover {
    color: var(--color-primary);
}

/* === BLUEPRINT GRID BACKGROUND === */
/* Blueprint Grid Background - Fixed parallax grid for construction brands */
[data-bg="blueprint-grid"] {
  position: relative;
}

[data-bg="blueprint-grid"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--bg-blueprint, #0d1b2a);
  background-image:
    linear-gradient(var(--blueprint-line, rgba(59,130,246,0.1)) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line, rgba(59,130,246,0.1)) 1px, transparent 1px),
    linear-gradient(var(--blueprint-grid, rgba(59,130,246,0.05)) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-grid, rgba(59,130,246,0.05)) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  pointer-events: none;
}

body[data-bg="blueprint-grid"] {
  background-color: var(--bg-blueprint, #0d1b2a);
}

/* Ensure sections on blueprint have transparent backgrounds by default */
[data-bg="blueprint-grid"] .section {
  background-color: transparent;
}

/* Solid background override for sections that need it */
[data-bg="blueprint-grid"] .section[data-section-bg="solid"] {
  background-color: var(--color-bg-alt, #1b263b);
}

/* Glass effect for cards on blueprint */
[data-bg="blueprint-grid"] .section[data-section-bg="glass"] {
  background: var(--glass-bg, rgba(27,38,59,0.8));
  backdrop-filter: var(--glass-blur, blur(20px));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
}


/* === SECTION MODIFIERS === */
/* =====================================================
   SECTION MODIFIERS - Mix & Match on Any Section
   Use !important to override block-specific backgrounds
   ===================================================== */

/* -----------------------------------------------------
   BACKGROUND MODIFIERS
   ----------------------------------------------------- */

/* Solid Background */
.section--bg-solid {
    background: var(--color-bg) !important;
}

/* Gradient Backgrounds */
.section--bg-gradient {
    background: var(--gradient-hero) !important;
}
.section--bg-gradient-dark {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 50%, var(--color-text-tertiary) 100%) !important;
    color: var(--color-white) !important;
}
.section--bg-gradient-dark .hero__title,
.section--bg-gradient-dark .hero__subtitle,
.section--bg-gradient-dark .hero__eyebrow,
.section--bg-gradient-dark .hero__trust-number,
.section--bg-gradient-dark .hero__trust-label {
    color: var(--color-white) !important;
}
.section--bg-gradient-dark .hero__eyebrow {
    color: var(--color-primary-light) !important;
}
.section--bg-gradient-dark .hero__trust-number {
    color: var(--color-primary-light) !important;
}
.section--bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-white) !important;
}

/* -----------------------------------------------------
   LAYOUT MODIFIERS
   ----------------------------------------------------- */

/* Centered layout */
.section--centered {
    text-align: center !important;
}
.section--centered .section__content {
    max-width: 800px;
    margin: 0 auto;
}
.section--centered .section__media {
    display: none !important;
}
.section--centered .hero__cta-group {
    justify-content: center !important;
}
.section--centered .hero__trust {
    justify-content: center !important;
}

/* Split layout (content + media) */
.section--split .section__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem;
    align-items: center;
}
.section--split .section__content {
    text-align: left !important;
}
.section--split .section__media {
    display: block !important;
}
.section--split .hero__cta-group {
    justify-content: flex-start !important;
}
.section--split .hero__trust {
    justify-content: flex-start !important;
}
@media (max-width: 768px) {
    .section--split .section__grid {
        grid-template-columns: 1fr !important;
    }
    .section--split .section__content {
        text-align: center !important;
    }
    .section--split .hero__cta-group,
    .section--split .hero__trust {
        justify-content: center !important;
    }
}

/* Reverse split (media on left) */
.section--split-reverse .section__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem;
    align-items: center;
}
.section--split-reverse .section__media {
    display: block !important;
    order: -1;
}

/* -----------------------------------------------------
   MEDIA TYPE MODIFIERS
   ----------------------------------------------------- */

/* Hide all media by default */
.section__media .section__media-image,
.section__media .section__media-gallery,
.section__media .section__media-slideshow,
.section__media .section__media-video {
    display: none !important;
}

/* Single Image */
.section__media--image .section__media-image {
    display: block !important;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Image Gallery (2x2 grid) */
.section__media--gallery .section__media-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.section__media--gallery .section__media-gallery img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Slideshow */
.section__media--slideshow .section__media-slideshow {
    display: block !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

/* Video Player */
.section__media--video .section__media-video {
    display: block !important;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.section__media--video video {
    width: 100%;
}

/* === RESPONSIVE NEMESIS RANGE === */
/* =========================================
   * RESPONSIVE: NEMESIS RANGE (800-1100px)
   * The problematic zone between tablet and desktop
   * ========================================= */

/* Force 2-column max in nemesis range */
@media (min-width: 800px) and (max-width: 1100px) {
  /* Grid layouts: collapse to 2 columns */
  .grid-cols-3,
  .grid-cols-4,
  .grid-auto-fill-3,
  [class*="grid"][class*="cols-3"],
  [class*="grid"][class*="cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* Prevent text overflow with responsive sizing */
  h1 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; }
  h3 { font-size: clamp(1.25rem, 3vw, 1.5rem) !important; }

  /* Button sizing - maintain touch targets */
  .btn,
  .cta-button,
  [class*="btn-"],
  button[type="submit"] {
    min-width: 180px;
    padding: 14px 28px;
    font-size: 1rem;
  }

  /* Stack two-column layouts if cramped */
  .two-col:not(.force-side-by-side),
  .split:not(.force-side-by-side) {
    flex-direction: column;
    gap: 2rem;
  }

  .two-col:not(.force-side-by-side) > *,
  .split:not(.force-side-by-side) > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form fields - stack and size properly */
  .form-row,
  .form-inline {
    flex-direction: column;
  }

  .form-row > *,
  .form-inline > * {
    width: 100%;
  }

  /* Container padding adjustments */
  .section-content,
  .section-inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Cards need minimum width */
  .card,
  .service-card,
  [class*="-card"] {
    min-width: 280px;
  }

  /* Image grids - prevent tiny images */
  .gallery-grid,
  .image-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero content centering */
  .hero-content {
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
 * RESPONSIVE: MOBILE FIRST BASE
 * ========================================= */

/* Touch target minimums */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Full-width CTAs on mobile */
  .cta-button,
  .btn-primary,
  .hero-cta {
    width: 100%;
    display: block;
    text-align: center;
  }

  /* Stack all grids on mobile */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Phone links always tappable */
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary, #00d4aa);
    color: #000 !important;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
  }
}

/* =========================================
 * RESPONSIVE: TABLET RANGE (641-800px)
 * ========================================= */
@media (min-width: 641px) and (max-width: 799px) {
  /* 2-column grids are fine here */
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Allow side-by-side if not too cramped */
  .two-col {
    flex-direction: row;
    gap: 1.5rem;
  }

  .two-col > * {
    width: 50%;
  }
}

/* =========================================
 * RESPONSIVE: LARGE DESKTOP (1280px+)
 * ========================================= */
@media (min-width: 1280px) {
  /* Max content width on large screens */
  .section-content,
  .section-inner {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Allow 4-column grids on large screens */
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* === IMAGE OVERLAYS === */
/* IMAGE OVERLAY SYSTEM - Progressive Disclosure on Hover
   Apply .image-hover to any container with an image to enable overlay effects
   Use .image-hover__content for the text that appears on hover
   
   THEME-AWARE: Uses --gradient-brand from kit_themes for brand-specific colors
*/

.image-hover {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.image-hover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* Overlay backdrop - Uses theme gradient */
.image-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-brand);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

/* Text content container - FIXED: Better text handling */
.image-hover__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    z-index: 2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow: hidden;
}

.image-hover__title {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.image-hover__text {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    color: rgba(255,255,255,0.95);
    line-height: 1.4;
    max-width: 100%;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.image-hover__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--color-white);
    opacity: 0.9;
}

/* Hover state */
.image-hover:hover::after {
    opacity: 0.9;
}

.image-hover:hover img {
    transform: scale(1.05);
    filter: blur(2px);
}

.image-hover:hover .image-hover__content {
    opacity: 1;
    transform: translateY(0);
}

/* Focus state for keyboard accessibility */
.image-hover:focus-within::after {
    opacity: 0.9;
}

.image-hover:focus-within img {
    transform: scale(1.05);
    filter: blur(2px);
}

.image-hover:focus-within .image-hover__content {
    opacity: 1;
    transform: translateY(0);
}

/* Variant: Dark overlay */
.image-hover--dark::after {
    background: var(--gradient-dark);
}

/* Variant: Primary color overlay */
.image-hover--primary::after {
    background: var(--gradient-primary);
}

/* Variant: Accent color overlay */
.image-hover--accent::after {
    background: var(--gradient-accent);
}

/* Variant: Hero gradient overlay */
.image-hover--hero::after {
    background: var(--gradient-hero);
}

/* Variant: Slide up reveal */
.image-hover--slide-up::after {
    transform: translateY(100%);
    opacity: 0.9;
    transition: transform 0.4s ease;
}

.image-hover--slide-up:hover::after {
    transform: translateY(0);
}

.image-hover--slide-up .image-hover__content {
    justify-content: flex-end;
    padding-bottom: 2rem;
}

/* Variant: No blur on image */
.image-hover--no-blur:hover img {
    filter: brightness(0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .image-hover__title {
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
    }
    
    .image-hover__text {
        font-size: 0.8rem;
        -webkit-line-clamp: 2;
    }
    
    .image-hover__content {
        padding: 0.75rem;
    }
    
    .image-hover__icon {
        width: 32px;
        height: 32px;
        margin-bottom: 0.5rem;
    }
}

/* Gallery/grid specific overlays */
.gallery-hover {
    display: grid;
    gap: 1rem;
}

.gallery-hover .image-hover {
    aspect-ratio: 4/3;
}

.gallery-hover .image-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Touch device handling - show overlay on tap */
@media (hover: none) {
    .image-hover:active::after {
        opacity: 0.9;
    }
    
    .image-hover:active .image-hover__content {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === TWO-COL BASE === */
/* =============================================================
   MODULAR TWO-COLUMN SYSTEM - BASE SHELL
   Theme-aware, fully responsive, slot-based architecture
   ============================================================= */

/* Base Section */
.twocol {
    padding: var(--section-padding-y, 4rem) 0;
    background: var(--color-bg);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

/* Background Modifiers */
.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="gradient"] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.twocol[data-bg="gradient"] .twocol__eyebrow,
.twocol[data-bg="gradient"] .twocol__title,
.twocol[data-bg="gradient"] .twocol__desc,
.twocol[data-bg="gradient"] .tcb-text__eyebrow,
.twocol[data-bg="gradient"] .tcb-text__title,
.twocol[data-bg="gradient"] .tcb-text__desc,
.twocol[data-bg="gradient"] .tcb-text__list li {
    color: var(--color-white);
}

.twocol[data-bg="gradient"] .twocol__desc,
.twocol[data-bg="gradient"] .tcb-text__desc {
    opacity: 0.9;
}

.twocol[data-bg="gradient"] .tcb-text__cta {
    background: var(--color-white);
    color: var(--color-primary);
}

.twocol[data-bg="gradient-dark"] {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%);
    color: var(--color-white);
}

.twocol[data-bg="gradient-dark"] .twocol__eyebrow,
.twocol[data-bg="gradient-dark"] .tcb-text__eyebrow {
    color: var(--color-primary-light);
}

.twocol[data-bg="gradient-dark"] .twocol__title,
.twocol[data-bg="gradient-dark"] .tcb-text__title {
    color: var(--color-white);
}

.twocol[data-bg="gradient-dark"] .twocol__desc,
.twocol[data-bg="gradient-dark"] .tcb-text__desc,
.twocol[data-bg="gradient-dark"] .tcb-text__list li {
    color: var(--color-text-muted);
}

/* Spacing Modifiers */
.twocol[data-spacing="compact"] {
    padding: 2.5rem 0;
}

.twocol[data-spacing="spacious"] {
    padding: 6rem 0;
}

/* Header Section */
.twocol__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.twocol__header:empty {
    display: none;
}

.twocol__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.twocol__eyebrow:empty {
    display: none;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol__title:empty {
    display: none;
}

.twocol__desc {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--color-text-tertiary);
    margin: 0;
}

.twocol__desc:empty {
    display: none;
}

/* Grid Layout */
.twocol__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

/* Alignment Modifiers */
.twocol[data-align="top"] .twocol__grid {
    align-items: start;
}

.twocol[data-align="bottom"] .twocol__grid {
    align-items: end;
}

/* Slots */
.twocol__slot {
    min-width: 0;
}

/* =============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================= */

/* Mobile: Stack vertically */
@media (max-width: 767px) {
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .twocol[data-direction="reverse"] .twocol__slot--left {
        order: 2;
    }
    
    .twocol[data-direction="reverse"] .twocol__slot--right {
        order: 1;
    }
    
    .twocol__header {
        text-align: left;
        margin-bottom: 2rem;
    }
}

/* Tablet and up: Side by side */
@media (min-width: 768px) {
    .twocol__grid {
        gap: 3rem;
    }
    
    /* Ratio Modifiers */
    .twocol[data-ratio="50-50"] .twocol__grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .twocol[data-ratio="60-40"] .twocol__grid {
        grid-template-columns: 1.5fr 1fr;
    }
    
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr 1.5fr;
    }
    
    .twocol[data-ratio="70-30"] .twocol__grid {
        grid-template-columns: 2.33fr 1fr;
    }
    
    .twocol[data-ratio="30-70"] .twocol__grid {
        grid-template-columns: 1fr 2.33fr;
    }
    
    /* Direction Modifier - Swap columns */
    .twocol[data-direction="reverse"] .twocol__slot--left {
        order: 2;
    }
    
    .twocol[data-direction="reverse"] .twocol__slot--right {
        order: 1;
    }
}

/* Desktop: Wider gaps */
@media (min-width: 1024px) {
    .twocol__grid {
        gap: 4rem;
    }
    
    .twocol[data-spacing="spacious"] {
        padding: 8rem 0;
    }
}

/* === TWO-COL CONTENT BLOCKS === */


/* =============================================================
TWO-COL CONTENT BLOCKS
Modular content components for the slot system
All blocks are theme-aware and responsive
============================================================= */

/* =============================================================
1. TEXT BLOCK
Title, description, optional bullet list, optional CTA
============================================================= */
.tcb-text {}

.tcb-text__eyebrow {
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary);
margin-bottom: 0.75rem;
}

.tcb-text__title {
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 1rem;
}

.tcb-text__desc {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0 0 1.5rem;
}

.tcb-text__list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.tcb-text__list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
color: var(--color-text-secondary);
font-size: 1rem;
}

.tcb-text__list li::before {
content: "";
width: 20px;
height: 20px;
min-width: 20px;
background: var(--color-primary);
border-radius: 50%;
margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
}

.tcb-text__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
background: var(--color-primary);
color: var(--color-white);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border-radius: var(--radius-md);
transition: background 0.2s ease, transform 0.2s ease;
}

.tcb-text__cta:hover {
background: var(--color-primary-dark);
transform: translateY(-2px);
}

/* Dark background adjustments */
[data-bg="gradient"] .tcb-text__title,
[data-bg="gradient-dark"] .tcb-text__title {
color: var(--color-white);
}

[data-bg="gradient"] .tcb-text__desc,
[data-bg="gradient"] .tcb-text__list li,
[data-bg="gradient-dark"] .tcb-text__desc,
[data-bg="gradient-dark"] .tcb-text__list li {
color: rgba(255, 255, 255, 0.9);
}

[data-bg="gradient"] .tcb-text__cta,
[data-bg="gradient-dark"] .tcb-text__cta {
background: var(--color-white);
color: var(--color-primary);
}

/* =============================================================
2. IMAGE BLOCK
Single image with optional overlay caption
============================================================= */
.tcb-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
}

.tcb-image__img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease;
}

.tcb-image:hover .tcb-image__img {
transform: scale(1.03);
}

.tcb-image__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
opacity: 0;
transition: opacity 0.3s ease;
}

.tcb-image:hover .tcb-image__overlay {
opacity: 1;
}

.tcb-image__title {
color: var(--color-white);
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.25rem;
}

.tcb-image__caption {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9375rem;
margin: 0;
}

/* =============================================================
3. ACCORDION BLOCK
Expandable content panels
============================================================= */
.tcb-accordion {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.tcb-accordion__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-bg);
}

.tcb-accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
background: transparent;
border: none;
text-align: left;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
transition: background 0.2s ease;
}

.tcb-accordion__trigger:hover {
background: var(--color-bg-alt);
}

.tcb-accordion__icon {
width: 24px;
height: 24px;
min-width: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-bg-alt);
transition: transform 0.3s ease, background 0.2s ease;
}

.tcb-accordion__icon svg {
width: 12px;
height: 12px;
stroke: var(--color-text-secondary);
stroke-width: 2;
fill: none;
}

.tcb-accordion__item.active .tcb-accordion__icon {
transform: rotate(180deg);
background: var(--color-primary);
}

.tcb-accordion__item.active .tcb-accordion__icon svg {
stroke: var(--color-white);
}

.tcb-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

.tcb-accordion__item.active .tcb-accordion__content {
max-height: 500px;
}

.tcb-accordion__body {
padding: 0 1.25rem 1.25rem;
color: var(--color-text-secondary);
font-size: 0.9375rem;
line-height: 1.6;
}

/* Dark backgrounds */
[data-bg="gradient-dark"] .tcb-accordion__item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}

[data-bg="gradient-dark"] .tcb-accordion__trigger {
color: var(--color-white);
}

[data-bg="gradient-dark"] .tcb-accordion__trigger:hover {
background: rgba(255, 255, 255, 0.1);
}

[data-bg="gradient-dark"] .tcb-accordion__body {
color: var(--color-text-muted);
}

/* =============================================================
4. TABS BLOCK
Tabbed content panels
============================================================= */
.tcb-tabs {}

.tcb-tabs__nav {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
border-bottom: 2px solid var(--color-border);
padding-bottom: 0;
}

.tcb-tabs__btn {
padding: 0.75rem 1.25rem;
font-size: 0.9375rem;
font-weight: 500;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
color: var(--color-text-secondary);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}

.tcb-tabs__btn:hover {
color: var(--color-text);
}

.tcb-tabs__btn.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}

.tcb-tabs__panel {
display: none;
padding-top: 0.5rem;
}

.tcb-tabs__panel.active {
display: block;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

.tcb-tabs__content {
color: var(--color-text-secondary);
font-size: 1rem;
line-height: 1.6;
}

.tcb-tabs__content p {
margin: 0 0 1rem;
}

/* Dark backgrounds */
[data-bg="gradient-dark"] .tcb-tabs__nav {
border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bg="gradient-dark"] .tcb-tabs__btn {
color: var(--color-text-muted);
}

[data-bg="gradient-dark"] .tcb-tabs__btn:hover,
[data-bg="gradient-dark"] .tcb-tabs__btn.active {
color: var(--color-white);
}

[data-bg="gradient-dark"] .tcb-tabs__content {
color: var(--color-text-muted);
}

/* =============================================================
5. FAQ BLOCK
Question/Answer accordion style
============================================================= */
.tcb-faq {
display: flex;
flex-direction: column;
gap: 1rem;
}

.tcb-faq__item {
border-bottom: 1px solid var(--color-border);
padding-bottom: 1rem;
}

.tcb-faq__item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.tcb-faq__question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0;
background: transparent;
border: none;
text-align: left;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text);
cursor: pointer;
}

.tcb-faq__question:hover {
color: var(--color-primary);
}

.tcb-faq__icon {
font-size: 1.5rem;
font-weight: 300;
color: var(--color-primary);
transition: transform 0.3s ease;
}

.tcb-faq__item.active .tcb-faq__icon {
transform: rotate(45deg);
}

.tcb-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}

.tcb-faq__item.active .tcb-faq__answer {
max-height: 500px;
padding-top: 1rem;
}

.tcb-faq__answer p {
margin: 0;
color: var(--color-text-secondary);
font-size: 1rem;
line-height: 1.6;
}

/* Dark backgrounds */
[data-bg="gradient-dark"] .tcb-faq__item {
border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bg="gradient-dark"] .tcb-faq__question {
color: var(--color-white);
}

[data-bg="gradient-dark"] .tcb-faq__answer p {
color: var(--color-text-muted);
}

/* =============================================================
6. CHECKLIST BLOCK
Simple checkmark list
============================================================= */
.tcb-checklist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}

.tcb-checklist__item {
display: flex;
align-items: flex-start;
gap: 1rem;
}

.tcb-checklist__icon {
width: 24px;
height: 24px;
min-width: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-success);
border-radius: 50%;
margin-top: 2px;
}

.tcb-checklist__icon svg {
width: 14px;
height: 14px;
stroke: var(--color-white);
stroke-width: 3;
fill: none;
}

.tcb-checklist__text {
font-size: 1rem;
line-height: 1.5;
color: var(--color-text);
}

.tcb-checklist__text strong {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}

.tcb-checklist__text span {
color: var(--color-text-secondary);
font-size: 0.9375rem;
}

/* Dark backgrounds */
[data-bg="gradient-dark"] .tcb-checklist__text {
color: var(--color-white);
}

[data-bg="gradient-dark"] .tcb-checklist__text span {
color: var(--color-text-muted);
}

/* =============================================================
7. FORM BLOCK
Contact/Lead capture form
============================================================= */
.tcb-form {
background: var(--color-bg);
padding: 2rem;
border-radius: var(--radius-lg);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.tcb-form__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
margin: 0 0 0.5rem;
}

.tcb-form__desc {
color: var(--color-text-secondary);
font-size: 0.9375rem;
margin: 0 0 1.5rem;
}

.tcb-form__group {
margin-bottom: 1rem;
}

.tcb-form__label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text);
margin-bottom: 0.5rem;
}

.tcb-form__input,
.tcb-form__textarea,
.tcb-form__select {
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
background: var(--color-bg);
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tcb-form__input:focus,
.tcb-form__textarea:focus,
.tcb-form__select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tcb-form__textarea {
min-height: 120px;
resize: vertical;
}

.tcb-form__submit {
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 600;
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.2s ease;
}

.tcb-form__submit:hover {
background: var(--color-primary-dark);
}

/* Dark backgrounds - form stays light for contrast */
[data-bg="gradient"] .tcb-form,
[data-bg="gradient-dark"] .tcb-form {
background: var(--color-white);
}

/* =============================================================
8. VIDEO BLOCK
Video player with poster
============================================================= */
.tcb-video {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-black);
}

.tcb-video__player {
width: 100%;
aspect-ratio: 16/9;
display: block;
}

.tcb-video__poster {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
cursor: pointer;
transition: opacity 0.3s ease;
}

.tcb-video__poster.hidden {
opacity: 0;
pointer-events: none;
}

.tcb-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.tcb-video__poster:hover .tcb-video__play {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.tcb-video__play svg {
width: 32px;
height: 32px;
fill: var(--color-primary);
margin-left: 4px;
}

/* =============================================================
9. GALLERY BLOCK
Image grid
============================================================= */
.tcb-gallery {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, 1fr);
}

.tcb-gallery--3col {
grid-template-columns: repeat(3, 1fr);
}

.tcb-gallery__item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 1;
}

.tcb-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.tcb-gallery__item:hover img {
transform: scale(1.05);
}

.tcb-gallery__item--featured {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
}

@media (max-width: 639px) {
.tcb-gallery--3col {
grid-template-columns: repeat(2, 1fr);
}
}

/* =============================================================
10. TESTIMONIAL BLOCK
Quote/Review display
============================================================= */
.tcb-testimonial {
background: var(--color-bg-alt);
padding: 2rem;
border-radius: var(--radius-lg);
position: relative;
}

.tcb-testimonial__quote {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 1.5rem;
font-style: italic;
}

.tcb-testimonial__quote::before {
content: '“';
position: absolute;
top: 1rem;
left: 1.5rem;
font-size: 4rem;
color: var(--color-primary);
opacity: 0.2;
font-family: Georgia, serif;
line-height: 1;
}

.tcb-testimonial__author {
display: flex;
align-items: center;
gap: 1rem;
}

.tcb-testimonial__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}

.tcb-testimonial__name {
font-weight: 600;
color: var(--color-text);
margin: 0;
}

.tcb-testimonial__role {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}

.tcb-testimonial__stars {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
}

.tcb-testimonial__stars svg {
width: 20px;
height: 20px;
fill: var(--color-warning);
}

/* Dark backgrounds */
[data-bg="gradient-dark"] .tcb-testimonial {
background: rgba(255, 255, 255, 0.05);
}

[data-bg="gradient-dark"] .tcb-testimonial__quote,
[data-bg="gradient-dark"] .tcb-testimonial__name {
color: var(--color-white);
}

[data-bg="gradient-dark"] .tcb-testimonial__role {
color: var(--color-text-muted);
}

/* =============================================================
11. STATS BLOCK
Number statistics display
============================================================= */
.tcb-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}

.tcb-stats__item {
text-align: center;
}

.tcb-stats__number {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}

.tcb-stats__label {
font-size: 0.9375rem;
color: var(--color-text-secondary);
}

/* Dark backgrounds */
[data-bg="gradient"] .tcb-stats__number,
[data-bg="gradient-dark"] .tcb-stats__number {
color: var(--color-white);
}

[data-bg="gradient"] .tcb-stats__label,
[data-bg="gradient-dark"] .tcb-stats__label {
color: rgba(255, 255, 255, 0.8);
}

/* =============================================================
12. SLIDESHOW BLOCK
Image carousel
============================================================= */
.tcb-slideshow {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
}

.tcb-slideshow__track {
display: flex;
transition: transform 0.5s ease;
}

.tcb-slideshow__slide {
min-width: 100%;
}

.tcb-slideshow__slide img {
width: 100%;
height: auto;
display: block;
}

.tcb-slideshow__nav {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
}

.tcb-slideshow__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: background 0.2s ease;
}

.tcb-slideshow__dot.active {
background: var(--color-white);
}

.tcb-slideshow__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease;
z-index: 2;
}

.tcb-slideshow__arrow:hover {
background: var(--color-white);
}

.tcb-slideshow__arrow--prev {
left: 1rem;
}

.tcb-slideshow__arrow--next {
right: 1rem;
}

.tcb-slideshow__arrow svg {
width: 20px;
height: 20px;
stroke: var(--color-text);
stroke-width: 2;
fill: none;
}






/* === SCHEMAREPORTS WIDGETS === */
/* SchemaReports Custom Widget Components */

/* ========================================
   UNIFIED CHROME CARD SYSTEM
   All widget frames share identical styling.
   Three class systems aliased to one look:
   - sr-widget-frame / sr-widget-header / sr-dots / sr-dot
   - terminal-phase-card / terminal-header / terminal-dots / terminal-dot
   - sr-terminal-frame / sr-terminal-header / sr-terminal-dots / sr-dot
   ======================================== */

/* Widget Frame (Terminal Chrome - Dark Version) */
.sr-widget-frame,
.terminal-phase-card,
.sr-terminal-frame {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sr-widget-frame:hover,
.terminal-phase-card:hover,
.sr-terminal-frame:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.3),
    0 15px 50px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(100, 116, 139, 0.2);
}

/* Header Bar */
.sr-widget-header,
.terminal-header,
.sr-terminal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 15px 15px 0 0;
}

/* Title */
.sr-widget-title,
.terminal-title,
.sr-terminal-title,
.phase-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f5f9;
}

.sr-widget-title,
.terminal-title {
  flex: 1;
}

/* Body */
.sr-widget-body {
  padding: 20px;
  overflow: visible;
}

/* Dots Container */
.sr-dots,
.terminal-dots,
.sr-terminal-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Individual Dots - Glossy with glow */
.sr-dot,
.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sr-dot.red,
.terminal-dot.red {
  background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(255, 95, 86, 0.4);
}

.sr-dot.yellow,
.terminal-dot.yellow {
  background: linear-gradient(180deg, #ffcc4d 0%, #f5ba3c 50%, #e5aa2c 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(255, 189, 46, 0.4);
}

.sr-dot.green,
.terminal-dot.green {
  background: linear-gradient(180deg, #4ade80 0%, #3ace70 50%, #2abe60 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(40, 205, 65, 0.4);
}

/* Badge Score */
.terminal-badge {
  display: flex;
  align-items: center;
}

.badge-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.badge-score.pending {
  background: rgba(100, 116, 139, 0.3);
  color: var(--text-muted, #64748b);
}

/* ========================================
   WIDGET INTERNALS
   ======================================== */

/* Section Header */
.sr-section-header {
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* CWV Grid */
.sr-cwv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  overflow: visible;
}

.sr-cwv-metric {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  overflow: visible;
}

.sr-cwv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
}

.sr-cwv-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.sr-cwv-val {
  font-size: 16px;
  font-weight: 700;
}

.sr-cwv-val.good { color: #22c55e; }
.sr-cwv-val.ok { color: #fbbf24; }
.sr-cwv-val.poor { color: #ef4444; }

/* CWV Track (Gradient Bar) */
.sr-cwv-track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  overflow: visible;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.sr-cwv-track:hover {
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

.sr-cwv-gradient {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #22c55e 0%,
    #22c55e 30%,
    #84cc16 35%,
    #fbbf24 50%,
    #f97316 65%,
    #ef4444 80%,
    #dc2626 100%
  );
}

.sr-cwv-line {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: white;
  border-radius: 2px;
  box-shadow: 
    0 0 8px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  z-index: 2;
}

.sr-cwv-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.6);
  margin-top: 4px;
}

/* Tooltip */
.sr-tip {
  position: relative;
  z-index: 100;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-text-muted);
}

.sr-tip:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 400;
  color: white;
  white-space: nowrap;
  z-index: 999999;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Grade Badge */
.sr-grade-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(96, 165, 250, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  margin-bottom: 24px;
}

.sr-grade-letter {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #10B981, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sr-grade-score {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Range Bars */
.sr-range-bar-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}

.sr-range-bar-item span {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.sr-range-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.sr-range-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-out;
}

.sr-range-fill.good {
  background: linear-gradient(90deg, #22c55e, #34d399);
}

.sr-range-fill.warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.sr-range-fill.poor {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* Status Grid (Issues) */
.sr-status-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.sr-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 13px;
}

.sr-status-row.sr-status-x {
  border-left: 3px solid #ef4444;
}

.sr-status-row.sr-status-check {
  border-left: 3px solid #22c55e;
}

.sr-status-badge {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.sr-status-icon {
  color: #22c55e;
  font-size: 16px;
}

/* AI Insight Box */
.sr-ai-insight {
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.08), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.sr-ai-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.sr-ai-quote {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 12px;
}

.sr-ai-recommendation {
  font-size: 12px;
  color: var(--color-text-muted);
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Donut Gauge */
.sr-donut-gauge {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.sr-donut-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sr-donut-segment {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}

.sr-donut-segment.seg-1 { stroke: #10B981; }
.sr-donut-segment.seg-2 { stroke: #60a5fa; }
.sr-donut-segment.seg-3 { stroke: #8B5CF6; }

.sr-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}

/* Checklist */
.sr-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border-left: 3px solid transparent;
}

.sr-check-item[data-status="pass"] {
  border-left-color: #22c55e;
}

.sr-check-item[data-status="warn"] {
  border-left-color: #f59e0b;
}

.sr-check-item[data-status="fail"] {
  border-left-color: #ef4444;
}

.sr-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.sr-check-item[data-status="pass"] .sr-check-icon {
  background: #22c55e;
}

.sr-check-item[data-status="pass"] .sr-check-icon::after {
  content: "✓";
  color: white;
}

.sr-check-item[data-status="warn"] .sr-check-icon {
  background: #f59e0b;
}

.sr-check-item[data-status="warn"] .sr-check-icon::after {
  content: "!";
  color: white;
}

.sr-check-item[data-status="fail"] .sr-check-icon {
  background: #ef4444;
}

.sr-check-item[data-status="fail"] .sr-check-icon::after {
  content: "✕";
  color: white;
}

.sr-check-text {
  font-size: 13px;
  color: var(--color-text);
}

/* Stat Box */
.sr-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.sr-stat-icon {
  font-size: 24px;
}

.sr-stat-value {
  font-size: clamp(16px, 2.5vw, 24px) !important;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.sr-stat-label {
  font-size: clamp(10px, 1.5vw, 13px);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sr-stat-change {
  font-size: 12px;
  font-weight: 600;
}

.sr-stat-change[data-trend="up"] {
  color: #22c55e;
}

.sr-stat-change[data-trend="down"] {
  color: #ef4444;
}

/* Animation */
.sr-animate .sr-cwv-line {
  animation: slideIn 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  to { 
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

.sr-cwv-metric:nth-child(1) .sr-cwv-line { animation-delay: 0.1s; }
.sr-cwv-metric:nth-child(2) .sr-cwv-line { animation-delay: 0.2s; }
.sr-cwv-metric:nth-child(3) .sr-cwv-line { animation-delay: 0.3s; }
.sr-cwv-metric:nth-child(4) .sr-cwv-line { animation-delay: 0.4s; }

/* Responsive */
@media (max-width: 640px) {
  .sr-cwv-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .sr-grade-letter {
    font-size: 48px;
  }
}

/* === UTILITIES === */
/* Utility Classes */

/* Icons */
.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }

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

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flex Utilities */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Spacing - Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-xl { margin-bottom: 3rem; }
.mb-2xl { margin-bottom: 4rem; }
.mb-3xl { margin-bottom: 5rem; }

/* Spacing - Padding */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Width */
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* Font */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

/* Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-white); }
.bg-primary { background-color: var(--color-primary); }
.bg-alt { background-color: var(--color-bg-alt); }
.bg-dark { background-color: var(--color-bg-dark); }

/* Border Radius */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Accessibility */
.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    border: 0; 
}

/* Transitions */
.transition { transition: all var(--transition); }
.transition-colors { transition: color var(--transition), background-color var(--transition), border-color var(--transition); }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Empty Element Handling - Hide empty list items and paragraphs */
li:empty, p:empty { display: none; }
ul:has(> li:only-child:empty), 
ol:has(> li:only-child:empty) { display: none; }

/* === TERMINAL PHASE CARDS & WIND ROSE === */
/* ========================================
   TERMINAL GUI PHASE CARDS
   Matches sr-widget-frame chrome card style
   ======================================== */

.terminal-phase-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 16px;
    overflow: visible;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 0 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.terminal-phase-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 20px rgba(16, 185, 129, 0.15),
        0 0 40px rgba(96, 165, 250, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

/* ========================================
   TERMINAL HEADER BAR
   Matches sr-widget-header gradient style
   ======================================== */

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.terminal-dots {
    display: flex;
    gap: 8px;
}

.terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-dot.red {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 95, 86, 0.4);
}
.terminal-dot.yellow {
    background: linear-gradient(180deg, #ffcc4d 0%, #f5ba3c 50%, #e5aa2c 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 189, 46, 0.4);
}
.terminal-dot.green {
    background: linear-gradient(180deg, #4ade80 0%, #3ace70 50%, #2abe60 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(40, 205, 65, 0.4);
}

.terminal-title {
    flex: 1;
    text-align: center;
}

.phase-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
}

.terminal-badge {
    display: flex;
    align-items: center;
}

.badge-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.badge-score.pending {
    background: rgba(100, 116, 139, 0.3);
    color: var(--text-muted, #64748b);
}

/* ========================================
   TERMINAL TABS
   ======================================== */

.terminal-tabs {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(15, 20, 35, 0.8);
    border-radius: 12px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.terminal-tab {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.03);
    color: var(--sr-text-subtle, #64748b);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terminal-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--sr-text-muted, #94a3b8);
}

.terminal-tab.active {
    background: rgba(100, 116, 139, 0.15);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* ========================================
   TERMINAL TAB CONTENT
   ======================================== */

.terminal-tab-content {
    display: none;
    padding: 16px;
    background: linear-gradient(180deg, rgba(18, 25, 42, 0.98) 0%, rgba(15, 22, 38, 0.99) 100%);
    overflow: visible;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 15px 15px;
}

.terminal-tab-content.active {
    display: block;
}

/* ========================================
   TERMINAL SECTION TITLES
   ======================================== */

.terminal-section {
    margin-bottom: 14px;
    padding-top: 4px;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.terminal-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.terminal-section-title-large {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   PHASE DATA TABLE
   ======================================== */

.phase-data-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.phase-data-table tr {
    border-bottom: 1px solid rgba(100, 116, 139, 0.2);
}

.phase-data-table tr:last-child {
    border-bottom: none;
}

.phase-data-table td {
    padding: 0.35rem 0;
}

.phase-data-table td:first-child {
    color: var(--text-muted, #64748b);
}

.phase-data-table td:last-child {
    text-align: right;
    font-weight: 500;
    color: var(--text-secondary, #94a3b8);
}

.phase-data-table .status-pass { color: var(--green, #10B981); }
.phase-data-table .status-fail { color: var(--red, #EF4444); }
.phase-data-table .status-warn { color: var(--yellow, #F59E0B); }

.table-label {
    color: var(--text-muted, #64748b);
}

/* Status Classes */
.status-pass { color: var(--green, #10B981); font-weight: 600; }
.status-fail { color: var(--red, #EF4444); font-weight: 600; }
.status-warn { color: var(--yellow, #F59E0B); font-weight: 600; }

/* ========================================
   WIND ROSE CHART
   ======================================== */

.windrose-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.windrose-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.windrose-container {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
}

.windrose-svg {
    width: 100%;
    height: 100%;
}

.windrose-segment {
    cursor: pointer;
    transition: fill-opacity 0.2s ease;
}

.windrose-segment:hover {
    fill-opacity: 1 !important;
}

.windrose-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-label {
    font-size: 0.65rem;
    color: var(--text-muted, #94a3b8);
}

.windrose-hover-info {
    margin-top: 0.5rem;
    text-align: center;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 6px;
    padding: 0.5rem 1rem;
}

.hover-phase-name {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

/* Terminal Body - content area below header */
.terminal-body {
    padding: 20px;
    overflow: visible;
}

/* === AREAS VARIANT 1 (tabbed-showcase) === */
/* AREAS: TABBED SHOWCASE */
.areas-tabs {
    background: var(--color-bg);
    padding: 5rem 0;
}

/* Tab Navigation */
.areas-tabs__nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.areas-tabs__tab {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: var(--transition);
    min-height: 44px;
}

.areas-tabs__tab:hover {
    background: var(--color-primary-light, rgba(var(--color-primary-rgb), 0.1));
}

.areas-tabs__tab.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Panel Container */
.areas-tabs__panels {
    position: relative;
    min-height: 500px;
}

.areas-tabs__panel {
    display: none;
}

.areas-tabs__panel.is-active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel Grid Layout */
.areas-tabs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Content Column */
.areas-tabs__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.areas-tabs__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.areas-tabs__desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Highlights Box */
.areas-tabs__highlights {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
}

.areas-tabs__highlights-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.areas-tabs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.areas-tabs__list li {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.areas-tabs__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.areas-tabs__list strong {
    color: var(--color-text);
    font-weight: 600;
}

/* CTA Buttons */
.areas-tabs__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Media Column */
.areas-tabs__media {
    position: relative;
}

.areas-tabs__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.areas-tabs__image-wrap img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}

.areas-tabs__image-wrap:hover img {
    transform: scale(1.03);
}

/* Image Overlay using theme variable */
.areas-tabs__overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-lg);
}

.areas-tabs__image-wrap:hover .areas-tabs__overlay {
    opacity: 1;
}

.areas-tabs__overlay-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.areas-tabs__overlay-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    max-width: 300px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .areas-tabs__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .areas-tabs__media {
        order: -1;
    }
    
    .areas-tabs__image-wrap img {
        height: 300px;
    }
    
    .areas-tabs__panels {
        min-height: auto;
    }
}

@media (max-width: 639px) {
    .areas-tabs__nav {
        gap: 0.375rem;
    }
    
    .areas-tabs__tab {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .areas-tabs__title {
        font-size: 1.5rem;
    }
    
    .areas-tabs__highlights {
        padding: 1.25rem 1.5rem;
    }
    
    .areas-tabs__ctas {
        flex-direction: column;
    }
    
    .areas-tabs__ctas .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === AREAS VARIANT 2 (service-grid) === */
/* AREAS: SERVICE GRID */
.areas-grid {
    background: var(--color-bg-alt);
}

.areas-grid[data-bg="white"] {
    background: var(--color-bg);
}

/* Cards Grid */
.areas-grid__cards {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Individual Card */
.areas-grid__card {
    background: var(--color-surface);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--color-border);
}

.areas-grid__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.areas-grid__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.areas-grid__desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Benefits List */
.areas-grid__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.areas-grid__benefits li {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.areas-grid__benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Additional Areas Callout */
.areas-grid__callout {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.areas-grid__callout-content {
    flex: 1;
    min-width: 280px;
}

.areas-grid__callout-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.areas-grid__callout-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.areas-grid__callout-action .btn {
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
}

.areas-grid__callout-action .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Responsive Grid */
@media (min-width: 640px) {
    .areas-grid__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .areas-grid__cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 639px) {
    .areas-grid__card {
        padding: 1.5rem;
    }
    
    .areas-grid__callout {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .areas-grid__callout-action {
        width: 100%;
    }
    
    .areas-grid__callout-action .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === COMPARISON VARIANT 1 (table) === */
/* COMPARISON: TABLE */
.comparison-table { background: var(--color-bg); }
.comparison-table[data-bg="alt"] { background: var(--color-bg-alt); }
.comparison-table[data-bg="dark"] { background: var(--color-bg-dark); }
.comparison-table[data-bg="dark"] .section-header__title { color: var(--color-white); }
.comparison-table[data-bg="dark"] .section-header__desc { color: rgba(255,255,255,0.8); }

.comparison-table__wrapper {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table__grid {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-width: 500px;
}

.comparison-table__header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--color-secondary);
    color: #ffffff;
}

.comparison-table__header .comparison-table__cell {
    padding: 1rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    color: #ffffff !important;
}

.comparison-table__header .comparison-table__cell--feature {
    text-align: left;
}

.comparison-table__row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.comparison-table__row:last-child {
    border-bottom: none;
}

.comparison-table__row:nth-child(even) {
    background: var(--color-bg-alt);
}

.comparison-table__cell {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    text-align: center;
}

.comparison-table__cell--feature {
    justify-content: flex-start;
    text-align: left;
    font-weight: 500;
    color: var(--color-text);
}

.comparison-table__cell--highlight {
    background: rgba(37, 99, 235, 0.05);
    color: var(--color-success);
    font-weight: 600;
}

.comparison-table__row .comparison-table__cell:last-child {
    color: var(--color-text);
}

.comparison-table__footer {
    text-align: center;
    margin-top: 2rem;
}

.comparison-table[data-bg="dark"] .comparison-table__grid {
    border: 1px solid rgba(255,255,255,0.1);
}

.comparison-table[data-bg="dark"] .comparison-table__row {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.1);
}

.comparison-table[data-bg="dark"] .comparison-table__row:nth-child(even) {
    background: rgba(255,255,255,0.05);
}

.comparison-table[data-bg="dark"] .comparison-table__cell--feature {
    color: var(--color-white);
}

@media (max-width: 767px) {
    .comparison-table__header .comparison-table__cell,
    .comparison-table__cell {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

/* === COMPARISON VARIANT 2 (cards) === */
/* COMPARISON: CARDS */
.comparison-cards { background: var(--color-bg-alt); }
.comparison-cards[data-bg="white"] { background: var(--color-bg); }
.comparison-cards[data-bg="dark"] { background: var(--color-bg-dark); }
.comparison-cards[data-bg="dark"] .section-header__title { color: var(--color-white); }
.comparison-cards[data-bg="dark"] .section-header__desc { color: rgba(255,255,255,0.8); }

.comparison-cards__grid {
    display: grid;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.comparison-cards__card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.comparison-cards__card--other {
    border: 1px solid var(--color-border);
}

.comparison-cards__card--us {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
}

.comparison-cards__header {
    margin-bottom: 1rem;
}

.comparison-cards__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.comparison-cards__desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.comparison-cards__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comparison-cards__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.comparison-cards__item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.comparison-cards__item--positive svg {
    color: var(--color-success);
}

.comparison-cards__item--negative svg {
    color: var(--color-error);
}

.comparison-cards__item--positive span {
    color: var(--color-text);
}

.comparison-cards__item--negative span {
    color: var(--color-text-secondary);
}

.comparison-cards__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.comparison-cards__ctas .btn {
    flex: 1;
    min-width: 140px;
    text-align: center;
    justify-content: center;
}

.comparison-cards[data-bg="dark"] .comparison-cards__card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.comparison-cards[data-bg="dark"] .comparison-cards__card--us {
    border-color: var(--color-primary);
}

.comparison-cards[data-bg="dark"] .comparison-cards__title {
    color: var(--color-white);
}

.comparison-cards[data-bg="dark"] .comparison-cards__desc {
    border-color: rgba(255,255,255,0.1);
}

.comparison-cards[data-bg="dark"] .comparison-cards__item--positive span {
    color: var(--color-white);
}

.comparison-cards[data-bg="dark"] .comparison-cards__item--negative span {
    color: rgba(255,255,255,0.6);
}

@media (min-width: 768px) {
    .comparison-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .comparison-cards__card--us {
        transform: scale(1.02);
    }
}

@media (max-width: 767px) {
    .comparison-cards__card {
        padding: 1.5rem;
    }
    
    .comparison-cards__ctas {
        flex-direction: column;
    }
}

/* === COMPARISON VARIANT 3 (accordion-compare) === */
/* ==========================================================================
   COMPARISON V3: Accordion Compare
   6 expandable categories with two-column Us vs Them comparison
   ========================================================================== */

.compare-accordion {
    padding: var(--section-spacing-y) 0;
    background: var(--color-bg);
}

/* Header */
.compare-accordion__header {
    text-align: center;
    margin-bottom: 3rem;
}

.compare-accordion__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.compare-accordion__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Accordion List */
.compare-accordion__list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Accordion Item */
.compare-accordion__item {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.compare-accordion__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.compare-accordion__item[open] {
    border-color: var(--color-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Accordion Trigger */
.compare-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.2s ease;
}

.compare-accordion__trigger::-webkit-details-marker {
    display: none;
}

.compare-accordion__trigger:hover {
    background: var(--color-bg-alt);
}

.compare-accordion__category-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Icon Toggle */
.compare-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.2s ease;
}

.compare-accordion__icon-plus,
.compare-accordion__icon-minus {
    transition: opacity 0.2s ease;
}

.compare-accordion__icon-minus {
    display: none;
}

.compare-accordion__item[open] .compare-accordion__icon-plus {
    display: none;
}

.compare-accordion__item[open] .compare-accordion__icon-minus {
    display: block;
}

.compare-accordion__item[open] .compare-accordion__icon {
    background: var(--color-primary-dark);
    transform: rotate(180deg);
}

/* Accordion Content */
.compare-accordion__content {
    padding: 0 1.5rem 1.5rem;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Two-Column Comparison */
.compare-accordion__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.compare-accordion__col {
    padding: 1.25rem;
    border-radius: 8px;
}

.compare-accordion__col--us {
    background: linear-gradient(135deg, rgba(var(--color-success-rgb, 34, 197, 94), 0.08), rgba(var(--color-success-rgb, 34, 197, 94), 0.03));
    border: 1px solid rgba(var(--color-success-rgb, 34, 197, 94), 0.2);
}

.compare-accordion__col--them {
    background: linear-gradient(135deg, rgba(var(--color-error-rgb, 239, 68, 68), 0.08), rgba(var(--color-error-rgb, 239, 68, 68), 0.03));
    border: 1px solid rgba(var(--color-error-rgb, 239, 68, 68), 0.2);
}

/* Column Header */
.compare-accordion__col-header {
    margin-bottom: 0.75rem;
}

.compare-accordion__col-label {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.compare-accordion__col--us .compare-accordion__col-label {
    color: var(--color-success, var(--color-success, #22c55e));
}

.compare-accordion__col--them .compare-accordion__col-label {
    color: var(--color-error, var(--color-error, #ef4444));
}

/* Column Description */
.compare-accordion__col-desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Points List */
.compare-accordion__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compare-accordion__point {
    font-size: 0.9375rem;
    color: var(--color-text);
    padding-left: 1.75rem;
    position: relative;
    line-height: 1.4;
}

.compare-accordion__point::before {
    position: absolute;
    left: 0;
    top: 0.125rem;
    font-size: 1rem;
}

.compare-accordion__point--positive::before {
    content: "✓";
    color: var(--color-success, var(--color-success, #22c55e));
    font-weight: 700;
}

.compare-accordion__point--negative::before {
    content: "✗";
    color: var(--color-error, var(--color-error, #ef4444));
    font-weight: 700;
}

/* Bottom CTA */
.compare-accordion__cta {
    text-align: center;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .compare-accordion__columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .compare-accordion__trigger {
        padding: 1rem 1.25rem;
    }

    .compare-accordion__category-title {
        font-size: 1rem;
    }

    .compare-accordion__content {
        padding: 0 1.25rem 1.25rem;
    }

    .compare-accordion__col {
        padding: 1rem;
    }
}

/* === CTA VARIANT 1 (centered) === */
/* CTA Centered - Variant 1 - Cyan */
.cta--centered {
    padding: var(--section-padding-y, 5rem) 0;
    background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
    text-align: center;
}

.cta--centered[data-bg="solid"] {
    background: #00d4ff;
}

.cta--centered[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.cta--centered[data-bg="light"] {
    background: var(--color-bg-alt);
}

.cta--centered[data-bg="purple"] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.cta--centered[data-bg="light"] .cta__title,
.cta--centered[data-bg="light"] .cta__desc {
    color: var(--color-text);
}

.cta--centered[data-bg="light"] .cta__btn--primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0891b2 100%);
    color: var(--color-white);
}

.cta--centered[data-bg="light"] .cta__btn--primary:hover {
    background: linear-gradient(135deg, #00c4ef 0%, #0782a3 100%);
}

.cta--centered[data-bg="light"] .cta__btn--secondary {
    color: #00d4ff;
    border-color: #00d4ff;
}

.cta--centered[data-spacing="compact"] {
    padding: 3rem 0;
}

.cta--centered[data-spacing="spacious"] {
    padding: 7rem 0;
}

.cta--centered .cta__content {
    max-width: 700px;
    margin: 0 auto;
}

.cta--centered .cta__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.cta--centered .cta__desc {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.cta--centered .cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
}

.cta__btn:hover {
    transform: translateY(-2px);
}

.cta__btn--primary {
    background: var(--color-white);
    color: #0891b2;
}

.cta__btn--primary:hover {
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-lg);
}

.cta__btn--secondary {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.5);
}

.cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* Responsive */
@media (max-width: 640px) {
    .cta--centered .cta__buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta__btn {
        width: 100%;
        max-width: 300px;
        padding: 1rem 1.5rem;
    }
}

/* Explicit link color overrides for contrast compliance */
a.cta__btn--primary,
a.cta__btn--primary:visited,
a.cta__btn--primary:link {
    color: #0891b2 !important;
}

a.cta__btn--secondary,
a.cta__btn--secondary:visited,
a.cta__btn--secondary:link {
    color: var(--color-white) !important;
}

/* === CTA VARIANT 2 (inline) === */
/* CTA Inline - Variant 2 */
.cta--inline {
    padding: var(--section-padding-y, 4rem) 0;
    background: var(--color-bg-alt);
}

.cta--inline[data-bg="white"] {
    background: var(--color-bg);
}

.cta--inline[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.cta--inline[data-bg="dark"] .cta__title,
.cta--inline[data-bg="dark"] .cta__desc {
    color: var(--color-white);
}

.cta--inline[data-bg="primary"] {
    background: var(--color-primary);
}

.cta--inline[data-bg="primary"] .cta__title,
.cta--inline[data-bg="primary"] .cta__desc {
    color: var(--color-white);
}

.cta--inline[data-bg="primary"] .cta__btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.cta--inline[data-spacing="compact"] {
    padding: 2.5rem 0;
}

.cta--inline[data-spacing="spacious"] {
    padding: 5rem 0;
}

.cta--inline .cta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta--inline .cta__text {
    flex: 1;
    max-width: 600px;
}

.cta--inline .cta__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.cta--inline .cta__desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cta--inline .cta__action {
    flex-shrink: 0;
}

.cta--inline .cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
}

.cta--inline .cta__btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.cta--inline .cta__btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.cta--inline .cta__btn--primary svg {
    transition: transform var(--transition);
}

.cta--inline .cta__btn--primary:hover svg {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
    .cta--inline .cta__row {
        flex-direction: column;
        text-align: center;
    }
    
    .cta--inline .cta__text {
        max-width: 100%;
    }
    
    .cta--inline .cta__btn {
        width: 100%;
        justify-content: center;
        max-width: 300px;
    }
}

/* Explicit link color overrides for contrast compliance */
a.cta__btn--primary,
a.cta__btn--primary:visited,
a.cta__btn--primary:link {
    color: var(--color-white) !important;
}

a.cta__btn--secondary,
a.cta__btn--secondary:visited,
a.cta__btn--secondary:link {
    color: var(--color-white) !important;
}


/* === CTA VARIANT 3 (split) === */
/* CTA Split - Variant 3 */
.cta--split {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.cta--split[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.cta--split[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.cta--split[data-bg="dark"] .cta__title,
.cta--split[data-bg="dark"] .cta__desc,
.cta--split[data-bg="dark"] .cta__list li {
    color: var(--color-white);
}

.cta--split[data-bg="dark"] .cta__eyebrow {
    color: var(--color-primary-light);
}

.cta--split[data-spacing="compact"] {
    padding: 3rem 0;
}

.cta--split[data-spacing="spacious"] {
    padding: 7rem 0;
}

.cta--split .cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta--split[data-direction="reverse"] .cta__grid {
    direction: rtl;
}

.cta--split[data-direction="reverse"] .cta__grid > * {
    direction: ltr;
}

/* CTA Content Container */
.cta--split .cta__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cta--split .cta__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.cta--split .cta__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.2;
}

.cta--split .cta__desc {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.cta--split .cta__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.cta--split .cta__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.cta--split .cta__list li:last-child {
    margin-bottom: 0;
}

.cta--split .cta__list svg {
    flex-shrink: 0;
    color: var(--color-success);
    margin-top: 2px;
}

.cta--split .cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cta--split .cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    border: 2px solid transparent;
}

.cta--split .cta__btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.cta--split .cta__btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.cta--split .cta__btn--secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    border-color: var(--color-secondary);
}

.cta--split .cta__btn--secondary:hover {
    background: var(--color-secondary-dark, var(--color-secondary));
    border-color: var(--color-secondary-dark, var(--color-secondary));
    transform: translateY(-2px);
}

.cta--split .cta__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.cta--split .cta__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cta--split .cta__image:hover img {
    transform: scale(1.03);
}

.cta--split .cta__image .image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: white;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cta--split .cta__image:hover .image-hover__content {
    opacity: 1;
}

.cta--split .cta__image .image-hover__title {
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.cta--split .cta__image .image-hover__text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
    .cta--split .cta__grid {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .cta--split .cta__grid,
    .cta--split[data-direction="reverse"] .cta__grid {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 2rem;
    }
    
    .cta--split .cta__image {
        order: -1;
    }
    
    .cta--split .cta__buttons {
        flex-direction: column;
    }
    
    .cta--split .cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* Explicit link color overrides for contrast compliance */
a.cta__btn--primary,
a.cta__btn--primary:visited,
a.cta__btn--primary:link {
    color: var(--color-white) !important;
}

a.cta__btn--secondary,
a.cta__btn--secondary:visited,
a.cta__btn--secondary:link {
    color: var(--color-white) !important;
}

/* === CTA VARIANT 4 (banner) === */
/* CTA Banner - Variant 4 */
.cta--banner {
    position: relative;
    padding: var(--section-padding-y, 6rem) 0;
    text-align: center;
    overflow: hidden;
}

.cta--banner[data-spacing="compact"] {
    padding: 4rem 0;
}

.cta--banner[data-spacing="spacious"] {
    padding: 8rem 0;
}

.cta--banner .cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cta--banner .cta__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta--banner .cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}

.cta--banner .container {
    position: relative;
    z-index: 2;
}

.cta--banner .cta__content {
    max-width: 700px;
    margin: 0 auto;
}

.cta--banner .cta__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1rem;
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta--banner .cta__desc {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.cta--banner .cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.cta--banner .cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    border: 2px solid transparent;
}

.cta--banner .cta__btn:hover {
    transform: translateY(-2px);
}

.cta--banner .cta__btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.cta--banner .cta__btn--primary:hover {
    background: var(--color-primary-light);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.cta--banner .cta__btn--primary svg {
    transition: transform var(--transition);
}

.cta--banner .cta__btn--primary:hover svg {
    transform: translateX(3px);
}

.cta--banner .cta__btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
}

.cta--banner .cta__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-white);
}

/* Responsive */
@media (max-width: 640px) {
    .cta--banner .cta__buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta--banner .cta__btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

/* Explicit link color overrides for contrast compliance */
a.cta__btn--primary,
a.cta__btn--primary:visited,
a.cta__btn--primary:link {
    color: var(--color-white) !important;
}

a.cta__btn--secondary,
a.cta__btn--secondary:visited,
a.cta__btn--secondary:link {
    color: var(--color-white) !important;
}


/* === CTA VARIANT 5 (minimal) === */
/* CTA Minimal - Variant 5 */
.cta--minimal {
    padding: 2.5rem 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cta--minimal[data-bg="alt"] {
    background: var(--color-bg-alt);
    border-color: transparent;
}

.cta--minimal[data-bg="dark"] {
    background: var(--color-bg-dark);
    border-color: rgba(255, 255, 255, 0.1);
}

.cta--minimal[data-bg="dark"] .cta__text {
    color: rgba(255, 255, 255, 0.8);
}

.cta--minimal[data-bg="dark"] .cta__link {
    color: var(--color-primary-light);
}

.cta--minimal[data-bg="primary"] {
    background: var(--color-primary);
    border-color: transparent;
}

.cta--minimal[data-bg="primary"] .cta__text {
    color: rgba(255, 255, 255, 0.9);
}

.cta--minimal[data-bg="primary"] .cta__link {
    color: var(--color-white);
}

.cta--minimal[data-spacing="compact"] {
    padding: 1.5rem 0;
}

.cta--minimal[data-spacing="spacious"] {
    padding: 3.5rem 0;
}

.cta--minimal .cta__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cta--minimal .cta__text {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cta--minimal .cta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: gap var(--transition);
}

.cta--minimal .cta__link:hover {
    gap: 0.75rem;
}

.cta--minimal .cta__link svg {
    transition: transform var(--transition);
}

.cta--minimal .cta__link:hover svg {
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 640px) {
    .cta--minimal .cta__row {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* Explicit link color overrides for contrast compliance */
a.cta__btn--primary,
a.cta__btn--primary:visited,
a.cta__btn--primary:link {
    color: var(--color-white) !important;
}

a.cta__btn--secondary,
a.cta__btn--secondary:visited,
a.cta__btn--secondary:link {
    color: var(--color-white) !important;
}


/* === CTA VARIANT 6 (dual-dev) === */
.cta--dual-dev {
    padding: 5rem 0;
    background: var(--color-bg-dark, #080810);
    border-top: 1px solid var(--color-border, #27272a);
    border-bottom: 1px solid var(--color-border, #27272a);
}

.cta--dual-dev .cta__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta--dual-dev .cta__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--color-white, #fafafa);
    margin-bottom: 0.75rem;
}

.cta--dual-dev .cta__desc {
    font-size: 1.125rem;
    color: var(--color-text-muted, #a1a1aa);
    margin-bottom: 2rem;
}

.cta--dual-dev .cta__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .cta--dual-dev .cta__buttons {
        flex-direction: row;
        justify-content: center;
    }
}

.cta--dual-dev .cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.cta--dual-dev .cta__btn--github {
    background: var(--color-white, #fafafa);
    color: var(--color-bg-dark, #080810);
}

.cta--dual-dev .cta__btn--github:hover {
    background: var(--color-text-muted, #e4e4e7);
    transform: translateY(-2px);
}

.cta--dual-dev .cta__btn-icon {
    flex-shrink: 0;
}

.cta--dual-dev .cta__npm-group {
    display: flex;
    align-items: stretch;
    background: var(--color-surface, #12121c);
    border: 1px solid var(--color-border, #27272a);
    border-radius: 8px;
    overflow: hidden;
}

.cta--dual-dev .cta__npm-command {
    padding: 0.875rem 1rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.9rem;
    color: var(--color-primary, #f7931a);
    background: transparent;
    white-space: nowrap;
}

.cta--dual-dev .cta__btn--copy {
    padding: 0.875rem 1.25rem;
    background: var(--color-primary, #f7931a);
    color: var(--color-bg-dark, #080810);
    border-left: 1px solid var(--color-border, #27272a);
    font-weight: 600;
    font-size: 0.875rem;
}

.cta--dual-dev .cta__btn--copy:hover {
    background: var(--color-primary-light, #fbbf24);
}

/* === CTA VARIANT 7 (split-media) === */
/* CTA: SPLIT-MEDIA */
.cta--split-media {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.cta--split-media[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.cta--split-media[data-bg="dark"] .cta__title,
.cta--split-media[data-bg="dark"] .cta__desc {
    color: var(--color-white);
}

.cta--split-media[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.cta--split-media[data-bg="primary"] {
    background: var(--color-primary);
}

.cta--split-media[data-bg="primary"] .cta__title,
.cta--split-media[data-bg="primary"] .cta__desc {
    color: var(--color-white);
}

.cta--split-media[data-bg="gradient"] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.cta--split-media[data-bg="gradient"] .cta__title,
.cta--split-media[data-bg="gradient"] .cta__desc {
    color: var(--color-white);
}

.cta--split-media .cta__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Reverse direction */
.cta--split-media[data-direction="reverse"] .cta__content { order: 2; }
.cta--split-media[data-direction="reverse"] .cta__media { order: 1; }

.cta--split-media .cta__content {
    max-width: 550px;
}

.cta--split-media .cta__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--color-text);
}

.cta--split-media .cta__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 2rem;
}

.cta--split-media .cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Media slot - flexible container for images OR embeds */
.cta--split-media .cta__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt, #f5f5f5);
}

/* When media slot contains an image */
.cta--split-media .cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* When media slot contains an embed/widget */
.cta--split-media .cta__media > div {
    width: 100%;
    padding: 1.5rem;
}

/* SchemaReports widget frames */
.cta--split-media .cta__media .sr-widget-frame {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* iframes in media slot */
.cta--split-media .cta__media iframe {
    width: 100%;
    min-height: 300px;
    border: none;
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .cta--split-media .cta__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .cta--split-media .cta__media {
        order: -1;
        min-height: 250px;
    }
    
    .cta--split-media[data-direction="reverse"] .cta__media { order: -1; }
    .cta--split-media[data-direction="reverse"] .cta__content { order: 1; }
    
    .cta--split-media .cta__actions {
        flex-direction: column;
    }
    
    .cta--split-media .cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === FAQ VARIANT 1 (interactive-split) === */
/* FAQ Interactive Split Layout */
.faq-split {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.faq-split[data-bg="alt"] { background: var(--color-bg-alt); }
.faq-split[data-bg="dark"] { background: var(--color-bg-dark); }

.faq-split[data-spacing="compact"] { padding: 3rem 0; }
.faq-split[data-spacing="spacious"] { padding: 7rem 0; }

.faq-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Left Content */
.faq-split__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.faq-split__header {
    margin-bottom: 0.5rem;
}

.faq-split__title {
    font-size: var(--text-h2, clamp(1.75rem, 4vw, 2.5rem));
    font-weight: var(--font-bold, 700);
    color: var(--color-text);
    margin: 0 0 0.75rem;
    line-height: var(--leading-snug, 1.25);
}

.faq-split__subtitle {
    font-size: var(--text-body-lg, 1.125rem);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--leading-normal, 1.5);
}

/* FAQ List */
.faq-split__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* FAQ Item - Using theme colors */
.faq-split__item {
    background: var(--color-surface, var(--color-bg-alt));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow, 0 8px 24px -8px rgba(0,0,0,0.2));
    border-color: var(--color-primary);
}

.faq-split__item[open] {
    background: var(--color-surface-alt, var(--color-bg-alt));
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow, 0 8px 24px -8px rgba(0,0,0,0.2));
    transform: translateY(-2px);
}

/* Question/Summary */
.faq-split__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: var(--text-body, 1rem);
    font-weight: var(--font-semibold, 600);
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__question::-webkit-details-marker { display: none; }

.faq-split__q-text {
    flex: 1;
    line-height: 1.4;
}

/* Animated Icon */
.faq-split__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    position: relative;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__icon::before,
.faq-split__icon::after {
    content: '';
    position: absolute;
    background: var(--color-primary);
    top: 50%;
    left: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__icon::before {
    width: 10px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-split__icon::after {
    width: 2px;
    height: 10px;
    transform: translate(-50%, -50%);
}

.faq-split__item[open] .faq-split__icon {
    background: var(--color-primary);
    transform: rotate(180deg);
}

.faq-split__item[open] .faq-split__icon::before,
.faq-split__item[open] .faq-split__icon::after {
    background: var(--color-white);
}

.faq-split__item[open] .faq-split__icon::after {
    opacity: 0;
}

.faq-split__question:hover .faq-split__icon {
    background: var(--color-primary);
    transform: scale(1.1);
}

.faq-split__question:hover .faq-split__icon::before,
.faq-split__question:hover .faq-split__icon::after {
    background: var(--color-white);
}

/* Answer Content - Smooth reveal */
.faq-split__answer {
    padding: 0 1.5rem 1.5rem;
    animation: faqSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes faqSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(-12px);
    }
    to { 
        opacity: 1; 
        transform: translateY(0);
    }
}

.faq-split__desc {
    font-size: var(--text-body, 1rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed, 1.65);
    margin: 0 0 1rem;
}

.faq-split__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-split__points li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--text-body, 1rem);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal, 1.5);
    opacity: 0;
    animation: faqPointIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.faq-split__points li:nth-child(1) { animation-delay: 0.1s; }
.faq-split__points li:nth-child(2) { animation-delay: 0.2s; }
.faq-split__points li:nth-child(3) { animation-delay: 0.3s; }
.faq-split__points li:nth-child(4) { animation-delay: 0.4s; }

@keyframes faqPointIn {
    from { 
        opacity: 0; 
        transform: translateX(-8px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

.faq-split__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Right Media - Sticky */
.faq-split__media {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-split__image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.25);
}

.faq-split__image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__image-wrap:hover .faq-split__image {
    transform: scale(1.03);
}

.faq-split__image-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-split__image-wrap:hover .faq-split__image-overlay {
    opacity: 1;
}

.faq-split__overlay-text {
    font-size: var(--text-body, 1rem);
    color: var(--color-white);
    font-weight: var(--font-medium, 500);
}

/* CTA Under Image */
.faq-split__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-surface, var(--color-bg-alt));
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--color-border);
}

.faq-split__cta-text {
    margin: 0;
    font-size: var(--text-body, 1rem);
    color: var(--color-text-secondary);
}

.faq-split__cta .btn {
    width: 100%;
}

/* Mobile */
@media (max-width: 900px) {
    .faq-split__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .faq-split__media {
        position: relative;
        top: 0;
        order: -1;
    }
    
    .faq-split__image {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 640px) {
    .faq-split__question {
        padding: 1rem 1.25rem;
    }
    
    .faq-split__answer {
        padding: 0 1.25rem 1.25rem;
    }
}

/* === FAQ VARIANT 2 (clean-stack) === */
/* FAQ Stack (Clean) */
.faq-numbered {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-alt);
}

.faq-numbered[data-bg="white"] { background: var(--color-bg); }
.faq-numbered[data-bg="dark"] { background: var(--color-bg-dark); }
.faq-numbered[data-bg="dark"] .section-header__title,
.faq-numbered[data-bg="dark"] .faq-numbered__q-text { color: var(--color-white); }
.faq-numbered[data-bg="dark"] .section-header__desc,
.faq-numbered[data-bg="dark"] .faq-numbered__desc { color: rgba(255,255,255,0.8); }
.faq-numbered[data-bg="dark"] .faq-numbered__item { 
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.faq-numbered[data-spacing="compact"] { padding: 3rem 0; }
.faq-numbered[data-spacing="spacious"] { padding: 7rem 0; }

/* List */
.faq-numbered__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Item */
.faq-numbered__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-numbered__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.1);
}

.faq-numbered__item[open] {
    border-color: var(--color-primary);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12);
}

/* Question */
.faq-numbered__question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-numbered__question::-webkit-details-marker { display: none; }

.faq-numbered__question:hover {
    background: var(--color-bg-alt);
}

/* Question Text */
.faq-numbered__q-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

/* Toggle Icon */
.faq-numbered__toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-numbered__toggle svg {
    transition: transform 0.3s ease;
}

.faq-numbered__item[open] .faq-numbered__toggle {
    background: var(--color-primary);
    color: var(--color-white);
}

.faq-numbered__item[open] .faq-numbered__toggle svg {
    transform: rotate(180deg);
}

.faq-numbered__question:hover .faq-numbered__toggle {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Answer */
.faq-numbered__answer {
    padding: 0 1.5rem 1.5rem;
    animation: faqSlideDown 0.3s ease;
}

@keyframes faqSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-numbered__desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.faq-numbered__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.faq-numbered__points li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.faq-numbered__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 2px;
    transform: rotate(45deg);
}

/* Bottom CTA */
.faq-numbered__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 1.5rem 2rem;
    background: var(--color-bg);
    border-radius: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-numbered__cta-text {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--color-text);
}

/* Mobile */
@media (max-width: 768px) {
    .faq-numbered__question {
        padding: 1.25rem;
    }
    
    .faq-numbered__q-text {
        font-size: 1rem;
    }
    
    .faq-numbered__cta {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* === FAQ VARIANT 3 (icon-cards) === */
/* FAQ Icon Cards Grid */
.faq-cards {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.faq-cards[data-bg="alt"] { background: var(--color-bg-alt); }
.faq-cards[data-bg="dark"] { background: var(--color-bg-dark); }
.faq-cards[data-bg="dark"] .section-header__title,
.faq-cards[data-bg="dark"] .faq-cards__question { color: var(--color-white); }
.faq-cards[data-bg="dark"] .section-header__desc,
.faq-cards[data-bg="dark"] .faq-cards__desc { color: rgba(255,255,255,0.8); }
.faq-cards[data-bg="dark"] .faq-cards__card { 
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.faq-cards[data-spacing="compact"] { padding: 3rem 0; }
.faq-cards[data-spacing="spacious"] { padding: 7rem 0; }

/* Grid */
.faq-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Card */
.faq-cards__card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-cards__card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15);
}

.faq-cards__card.is-open {
    background: var(--color-bg);
    border-color: var(--color-primary);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15);
}

/* Trigger Button */
.faq-cards__trigger {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.faq-cards__trigger:hover {
    background: rgba(0,0,0,0.02);
}

/* Icon */
.faq-cards__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light, rgba(37, 99, 235, 0.1));
    border-radius: 12px;
    color: var(--color-primary);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-cards__card:hover .faq-cards__icon,
.faq-cards__card.is-open .faq-cards__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.05);
}

/* Question */
.faq-cards__question {
    flex: 1;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
    padding-top: 0.25rem;
}

/* Expand Indicator */
.faq-cards__expand {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.faq-cards__expand::before,
.faq-cards__expand::after {
    content: '';
    position: absolute;
    background: var(--color-text-secondary);
    top: 50%;
    left: 50%;
    transition: all 0.3s ease;
}

.faq-cards__expand::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-cards__expand::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
}

.faq-cards__card.is-open .faq-cards__expand::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-cards__card:hover .faq-cards__expand::before,
.faq-cards__card:hover .faq-cards__expand::after {
    background: var(--color-primary);
}

/* Content (Hidden by default) */
.faq-cards__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-cards__card.is-open .faq-cards__content {
    max-height: 400px;
    padding: 0 1.5rem 1.5rem;
}

.faq-cards__desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem;
    padding-left: calc(48px + 1rem); /* Align with question */
    animation: faqCardFade 0.4s ease 0.1s both;
}

.faq-cards__points {
    margin: 0;
    padding: 0;
    padding-left: calc(48px + 1rem);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-cards__points li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    animation: faqCardFade 0.4s ease 0.2s both;
}

.faq-cards__points li:nth-child(2) { animation-delay: 0.25s; }

.faq-cards__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

@keyframes faqCardFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Support Banner */
.faq-cards__support {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 16px;
    color: var(--color-white);
}

.faq-cards__support-content {
    flex: 1;
}

.faq-cards__support-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.faq-cards__support-text {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0;
}

.faq-cards__support-actions {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.faq-cards__support .btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.faq-cards__support .btn--primary:hover {
    background: rgba(255,255,255,0.9);
}

.faq-cards__support .btn--outline {
    border-color: rgba(255,255,255,0.5);
    color: var(--color-white);
}

.faq-cards__support .btn--outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
}

/* Mobile */
@media (max-width: 900px) {
    .faq-cards__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .faq-cards__trigger {
        padding: 1.25rem;
    }
    
    .faq-cards__icon {
        width: 40px;
        height: 40px;
    }
    
    .faq-cards__desc,
    .faq-cards__points {
        padding-left: calc(40px + 1rem);
    }
    
    .faq-cards__support {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    
    .faq-cards__support-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .faq-cards__support-actions .btn {
        width: 100%;
    }
}

/* === FAQ VARIANT 4 (sidebar-nav) === */
/* FAQ Sidebar Navigation */
.faq-sidebar {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-alt);
}

.faq-sidebar[data-bg="white"] { background: var(--color-bg); }
.faq-sidebar[data-bg="dark"] { background: var(--color-bg-dark); }
.faq-sidebar[data-bg="dark"] .section-header__title,
.faq-sidebar[data-bg="dark"] .faq-sidebar__nav-text,
.faq-sidebar[data-bg="dark"] .faq-sidebar__answer-title { color: var(--color-white); }
.faq-sidebar[data-bg="dark"] .section-header__desc,
.faq-sidebar[data-bg="dark"] .faq-sidebar__answer-desc { color: rgba(255,255,255,0.8); }
.faq-sidebar[data-bg="dark"] .faq-sidebar__nav { background: rgba(255,255,255,0.05); }
.faq-sidebar[data-bg="dark"] .faq-sidebar__nav-item { border-color: rgba(255,255,255,0.1); }
.faq-sidebar[data-bg="dark"] .faq-sidebar__panel { background: rgba(255,255,255,0.05); }

.faq-sidebar[data-spacing="compact"] { padding: 3rem 0; }
.faq-sidebar[data-spacing="spacious"] { padding: 7rem 0; }

/* Layout - Equal columns */
.faq-sidebar__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

/* Navigation - Left */
.faq-sidebar__nav {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: sticky;
    top: 2rem;
}

.faq-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.125rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    position: relative;
}

.faq-sidebar__nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s ease;
}

.faq-sidebar__nav-item:hover {
    background: var(--color-bg-alt);
}

.faq-sidebar__nav-item.is-active {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.08));
}

.faq-sidebar__nav-item.is-active::before {
    height: 60%;
}

/* Number */
.faq-sidebar__nav-number {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    opacity: 0.4;
    min-width: 1.5rem;
    transition: all 0.2s ease;
    font-feature-settings: 'tnum';
}

.faq-sidebar__nav-item:hover .faq-sidebar__nav-number,
.faq-sidebar__nav-item.is-active .faq-sidebar__nav-number {
    color: var(--color-primary);
    opacity: 1;
}

/* Nav Text */
.faq-sidebar__nav-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.faq-sidebar__nav-item.is-active .faq-sidebar__nav-text {
    font-weight: 600;
    color: var(--color-primary);
}

/* Arrow */
.faq-sidebar__nav-arrow {
    color: var(--color-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

.faq-sidebar__nav-item:hover .faq-sidebar__nav-arrow,
.faq-sidebar__nav-item.is-active .faq-sidebar__nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

.faq-sidebar__nav-item.is-active .faq-sidebar__nav-arrow {
    color: var(--color-primary);
}

/* Panel - Right */
.faq-sidebar__panel {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 2.5rem;
    min-height: 400px;
    position: relative;
}

/* Answer */
.faq-sidebar__answer {
    display: none;
    animation: faqSidebarFade 0.4s ease;
}

.faq-sidebar__answer.is-active {
    display: block;
}

@keyframes faqSidebarFade {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-sidebar__answer-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1.25rem;
    line-height: 1.3;
}

.faq-sidebar__answer-desc {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.faq-sidebar__answer-points {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-sidebar__answer-points li {
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.faq-sidebar__answer-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
    opacity: 0.2;
}

.faq-sidebar__answer-points li::after {
    content: '';
    position: absolute;
    left: 3px;
    top: calc(0.5rem + 3px);
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    border-radius: 50%;
}

.faq-sidebar__answer-cta {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Mobile: Stack and convert to accordion */
@media (max-width: 900px) {
    .faq-sidebar__layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .faq-sidebar__nav {
        position: relative;
        top: 0;
        padding: 0.375rem;
    }
    
    .faq-sidebar__nav-item {
        padding: 0.875rem 1rem;
    }
    
    .faq-sidebar__panel {
        padding: 1.5rem;
        min-height: auto;
    }
    
    .faq-sidebar__answer-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 640px) {
    .faq-sidebar__nav-number {
        display: none;
    }
    
    .faq-sidebar__nav-text {
        font-size: 0.9375rem;
    }
}

/* === FAQ VARIANT 5 (cta-image) === */
/* FAQ CTA + Image Layout */
.faq-cta {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.faq-cta[data-bg="alt"] { background: var(--color-bg-alt); }
.faq-cta[data-bg="dark"] { background: var(--color-bg-dark); }
.faq-cta[data-bg="dark"] .faq-cta__title,
.faq-cta[data-bg="dark"] .faq-cta__q { color: var(--color-white); }
.faq-cta[data-bg="dark"] .faq-cta__subtitle,
.faq-cta[data-bg="dark"] .faq-cta__desc { color: rgba(255,255,255,0.8); }
.faq-cta[data-bg="dark"] .faq-cta__item { border-color: rgba(255,255,255,0.1); }

.faq-cta[data-spacing="compact"] { padding: 3rem 0; }
.faq-cta[data-spacing="spacious"] { padding: 7rem 0; }

/* Grid Layout */
.faq-cta__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3rem;
    align-items: start;
}

.faq-cta[data-direction="reverse"] .faq-cta__media { order: 2; }

/* Left: Media + CTA */
.faq-cta__media {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

/* Image */
.faq-cta__image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15);
}

.faq-cta__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.faq-cta__image:hover img {
    transform: scale(1.03);
}

.faq-cta__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-cta__image:hover .faq-cta__image-overlay {
    opacity: 1;
}

.faq-cta__overlay-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.25rem;
}

.faq-cta__overlay-text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.5;
}

/* CTA Card */
.faq-cta__card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    padding: 1.75rem;
    border-radius: 16px;
    text-align: center;
}

.faq-cta__card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.faq-cta__card-desc {
    font-size: 0.9375rem;
    opacity: 0.9;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.faq-cta__card-btn {
    display: block;
    background: var(--color-white);
    color: var(--color-primary);
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 0.75rem;
}

.faq-cta__card-btn:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

.faq-cta__card-link {
    display: inline-block;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.faq-cta__card-link:hover {
    color: var(--color-white);
}

/* Right: FAQ Content */
.faq-cta__content {
    display: flex;
    flex-direction: column;
}

.faq-cta__header {
    margin-bottom: 2rem;
}

.faq-cta__title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.faq-cta__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* FAQ List */
.faq-cta__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* FAQ Item */
.faq-cta__item {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-cta__item:hover {
    border-color: var(--color-primary-light);
}

.faq-cta__item.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.1);
}

/* Trigger */
.faq-cta__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.125rem 1.25rem;
    background: var(--color-bg-alt);
    border: none;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-cta__trigger:hover {
    background: var(--color-bg);
}

.faq-cta__item.is-active .faq-cta__trigger {
    background: var(--color-primary);
    color: var(--color-white);
}

.faq-cta__q {
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.faq-cta__item.is-active .faq-cta__q {
    color: var(--color-white);
}

.faq-cta__chevron {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: transform 0.3s ease, color 0.2s ease;
}

.faq-cta__item.is-active .faq-cta__chevron {
    transform: rotate(180deg);
    color: var(--color-white);
}

/* Panel */
.faq-cta__panel {
    display: none;
    padding: 1.25rem;
    background: var(--color-bg);
    animation: faqCtaSlide 0.3s ease;
}

.faq-cta__item.is-active .faq-cta__panel {
    display: block;
}

@keyframes faqCtaSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-cta__desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.faq-cta__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq-cta__points li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.faq-cta__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 992px) {
    .faq-cta__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .faq-cta__media {
        position: relative;
        top: 0;
        flex-direction: row;
        align-items: stretch;
    }
    
    .faq-cta__image {
        flex: 1;
    }
    
    .faq-cta__image img {
        aspect-ratio: 1;
        height: 100%;
    }
    
    .faq-cta__card {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .faq-cta__media {
        flex-direction: column;
    }
    
    .faq-cta__image img {
        aspect-ratio: 16/9;
    }
    
    .faq-cta__trigger {
        padding: 1rem;
        font-size: 0.9375rem;
    }
}

/* === FAQ VARIANT 6 (terminal-accordion) === */
/* FAQ: Terminal Accordion */
.faq--terminal {
    position: relative;
    background: linear-gradient(135deg, #0a0f1a 0%, #060d21 50%, #030812 100%);
}

.faq--terminal .faq__terminal-container {
    max-width: 800px;
    margin: 2rem auto 0;
}

.faq--terminal .faq__terminal-card {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 13, 33, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.05);
}

.faq--terminal .faq__terminal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary, #10b981);
}

.faq--terminal .terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.faq--terminal .terminal-dots {
    display: flex;
    gap: 8px;
}

.faq--terminal .terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.faq--terminal .terminal-dot.red {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
}

.faq--terminal .terminal-dot.yellow {
    background: linear-gradient(180deg, #ffd93d 0%, #ffcc2e 50%, #f5bd1f 100%);
}

.faq--terminal .terminal-dot.green {
    background: linear-gradient(180deg, #6bcb77 0%, #4ade80 50%, #3dd672 100%);
}

.faq--terminal .terminal-title-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #fff);
}

.faq--terminal .terminal-badge {
    padding: 4px 12px;
    background: rgba(6, 13, 33, 0.8);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary, #10b981);
}

.faq--terminal .terminal-content {
    padding: 0;
}

.faq--terminal .faq__accordion {
    display: flex;
    flex-direction: column;
}

.faq--terminal .faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.faq--terminal .faq__item:last-child {
    border-bottom: none;
}

.faq--terminal .faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    color: var(--color-text, #fff);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq--terminal .faq__question:hover {
    background: rgba(16, 185, 129, 0.05);
}

.faq--terminal .faq__question span {
    flex: 1;
    padding-right: 16px;
}

.faq--terminal .faq__icon {
    flex-shrink: 0;
    color: var(--color-primary, #10b981);
    transition: transform 0.3s ease;
}

.faq--terminal .faq__item.active .faq__icon {
    transform: rotate(180deg);
}

.faq--terminal .faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq--terminal .faq__item.active .faq__answer {
    max-height: 500px;
}

.faq--terminal .faq__answer p {
    padding: 0 24px 24px;
    color: var(--color-text-secondary, #cbd5e1);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}


/* === FAQ VARIANT 7 (8-item-stack) === */
/* FAQ 8-Item Stack V7 */
.faq-numbered {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-alt);
}

.faq-numbered[data-bg="white"] { background: var(--color-bg); }
.faq-numbered[data-bg="dark"] { background: var(--color-bg-dark, #0a1628); }
.faq-numbered[data-bg="dark"] .section-header__title,
.faq-numbered[data-bg="dark"] .faq-numbered__q-text { color: var(--color-white, #fff); }
.faq-numbered[data-bg="dark"] .section-header__desc,
.faq-numbered[data-bg="dark"] .faq-numbered__desc { color: rgba(255,255,255,0.8); }
.faq-numbered[data-bg="dark"] .faq-numbered__item { 
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
}
.faq-numbered[data-bg="dark"] .faq-numbered__cta {
    background: rgba(255,255,255,0.03);
}
.faq-numbered[data-bg="dark"] .faq-numbered__cta-text {
    color: rgba(255,255,255,0.8);
}

.faq-numbered[data-spacing="compact"] { padding: 3rem 0; }
.faq-numbered[data-spacing="spacious"] { padding: 7rem 0; }

/* List */
.faq-numbered__list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Item */
.faq-numbered__item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-numbered__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px -4px rgba(0,0,0,0.1);
}

.faq-numbered__item[open] {
    border-color: var(--color-accent, var(--color-primary));
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12);
}

/* Question */
.faq-numbered__question {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease;
}

.faq-numbered__question::-webkit-details-marker { display: none; }

.faq-numbered__question:hover {
    background: rgba(255,255,255,0.02);
}

/* Question Text */
.faq-numbered__q-text {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

/* Toggle Icon */
.faq-numbered__toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-numbered__toggle svg {
    transition: transform 0.3s ease;
}

.faq-numbered__item[open] .faq-numbered__toggle {
    background: var(--color-accent, var(--color-primary));
    color: var(--color-bg-dark, #0a1628);
}

.faq-numbered__item[open] .faq-numbered__toggle svg {
    transform: rotate(180deg);
}

.faq-numbered__question:hover .faq-numbered__toggle {
    background: rgba(var(--color-accent-rgb, 0, 212, 255), 0.2);
    color: var(--color-accent, #00d4ff);
}

/* Answer */
.faq-numbered__answer {
    padding: 0 1.5rem 1.5rem;
    animation: faqSlideDown 0.3s ease;
}

@keyframes faqSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-numbered__desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Points - hidden if empty */
.faq-numbered__points {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.faq-numbered__points:empty,
.faq-numbered__points:has(li:empty):not(:has(li:not(:empty))) {
    display: none;
}

.faq-numbered__points li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.faq-numbered__points li:empty {
    display: none;
}

.faq-numbered__points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 8px;
    height: 8px;
    background: var(--color-accent, var(--color-primary));
    border-radius: 2px;
    transform: rotate(45deg);
}

/* Bottom CTA */
.faq-numbered__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: 1.5rem 2rem;
    background: var(--color-bg);
    border-radius: 16px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-numbered__cta-text {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--color-text);
}

/* Mobile */
@media (max-width: 768px) {
    .faq-numbered__question {
        padding: 1.25rem;
    }
    
    .faq-numbered__q-text {
        font-size: 1rem;
    }
    
    .faq-numbered__cta {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* === FAQ VARIANT 8 (split-media) === */
/* FAQ: SPLIT-MEDIA */
.faq--split-media {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.faq--split-media[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.faq--split-media[data-bg="dark"] .faq__title,
.faq--split-media[data-bg="dark"] .faq__subtitle,
.faq--split-media[data-bg="dark"] .faq__question,
.faq--split-media[data-bg="dark"] .faq__answer p {
    color: var(--color-white);
}

.faq--split-media[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.faq--split-media .faq__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.faq--split-media .faq__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.faq--split-media .faq__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.faq--split-media .faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Reverse direction */
.faq--split-media[data-direction="reverse"] .faq__content { order: 2; }
.faq--split-media[data-direction="reverse"] .faq__media { order: 1; }

.faq--split-media .faq__accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq--split-media .faq__item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.faq--split-media .faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq--split-media .faq__question:hover {
    background: var(--color-bg-alt);
}

.faq--split-media .faq__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq--split-media .faq__item.is-open .faq__icon {
    transform: rotate(180deg);
}

.faq--split-media .faq__answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
}

.faq--split-media .faq__item.is-open .faq__answer {
    display: block;
}

.faq--split-media .faq__answer p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Media slot - flexible container for images OR embeds */
.faq--split-media .faq__media {
    position: sticky;
    top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt, #f5f5f5);
}

/* When media slot contains an image */
.faq--split-media .faq__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* When media slot contains an embed/widget */
.faq--split-media .faq__media > div {
    width: 100%;
    padding: 1.5rem;
}

/* SchemaReports widget frames */
.faq--split-media .faq__media .sr-widget-frame {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* iframes in media slot */
.faq--split-media .faq__media iframe {
    width: 100%;
    min-height: 300px;
    border: none;
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .faq--split-media .faq__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .faq--split-media .faq__media {
        position: static;
        order: -1;
        min-height: 250px;
    }
    
    .faq--split-media[data-direction="reverse"] .faq__media { order: -1; }
    .faq--split-media[data-direction="reverse"] .faq__content { order: 1; }
}

/* === FOOTER VARIANT 1 (standard) === */
/* Footer Standard - Clean 3-Column Centered */
.footer--standard {
    background: var(--color-bg-dark);
    color: var(--color-text-muted, var(--color-text-muted));
    padding: 3rem 0 2rem;
}

.footer__grid {
    display: grid;
    gap: 2.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
    justify-content: center;
}

/* Brand Column */
.footer__brand {
    max-width: 320px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer__logo-icon {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
}

.footer__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
}

.footer__tagline {
    line-height: 1.6;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
}

.footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer__social a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

.footer__social svg {
    width: 18px;
    height: 18px;
}

/* Link Columns */
.footer__links {
    min-width: 140px;
}

.footer__heading {
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 0.9375rem;
}

.footer__list a:hover {
    color: var(--color-white);
}

/* Bottom Bar */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 1rem 0;
    margin: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.footer__copyright {
    margin: 0;
}

.footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer__legal {
    display: flex;
    gap: 1.5rem;
}

.footer__legal a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__legal a:hover {
    color: var(--color-white);
}

/* Tablet: 3 columns centered */
@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        padding: 0;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding: 2rem 0 0;
    }
}

/* Desktop: 3 columns centered */
@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 4rem;
        max-width: 900px;
        margin: 0 auto 2rem;
    }
}

/* === FOOTER VARIANT 2 (minimal) === */
/* Footer Minimal - Single Row Layout */
.footer--minimal {
    background: var(--color-bg-dark);
    color: var(--color-text-muted, var(--color-text-muted));
    padding: 2rem 0;
}

.footer--minimal .footer__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo */
.footer--minimal .footer__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.footer--minimal .footer__logo-img {
    height: 32px;
    width: auto;
}

.footer--minimal .footer__logo-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-white);
}

/* Navigation */
.footer--minimal .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.footer--minimal .footer__nav a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.footer--minimal .footer__nav a:hover {
    color: var(--color-white);
}

/* Social */
.footer--minimal .footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer--minimal .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: background 0.2s ease;
}

.footer--minimal .footer__social a:hover {
    background: var(--color-primary);
}

.footer--minimal .footer__social svg {
    width: 16px;
    height: 16px;
}

/* Bottom */
.footer--minimal .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    font-size: 0.8125rem;
}

.footer--minimal .footer__copyright {
    margin: 0;
}

.footer--minimal .footer__legal {
    display: flex;
    gap: 1rem;
}

.footer--minimal .footer__legal a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--minimal .footer__legal a:hover {
    color: var(--color-white);
}

/* Tablet */
@media (min-width: 640px) {
    .footer--minimal .footer__row {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .footer--minimal .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer--minimal .footer__nav {
        gap: 2rem;
    }
}

/* === FOOTER VARIANT 3 (centered) === */
/* Footer Centered - Everything Centered */
.footer--centered {
    background: var(--color-bg-dark);
    color: var(--color-text-muted, var(--color-text-muted));
    padding: 4rem 0 2rem;
    text-align: center;
}

/* Brand Section */
.footer--centered .footer__brand {
    margin-bottom: 2rem;
}

.footer--centered .footer__logo {
    display: inline-block;
    margin-bottom: 0.75rem;
}

.footer--centered .footer__logo-img {
    height: 48px;
    width: auto;
}

.footer--centered .footer__logo-text {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

/* Navigation */
.footer--centered .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.footer--centered .footer__nav a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-size: 0.9375rem;
    padding: 0.25rem 0.5rem;
    transition: color 0.2s ease;
}

.footer--centered .footer__nav a:hover {
    color: var(--color-white);
}

.footer--centered .footer__nav-divider {
    display: none;
    width: 4px;
    height: 4px;
    background: var(--color-text-muted, var(--color-text-muted));
    border-radius: 50%;
    opacity: 0.5;
}

/* Contact Centered */
.footer--centered .footer__contact-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
}

.footer--centered .footer__contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--centered .footer__contact-link:hover {
    color: var(--color-primary);
}

.footer--centered .footer__contact-divider {
    display: none;
    color: var(--color-text-muted, var(--color-text-muted));
    opacity: 0.5;
}

/* Social */
.footer--centered .footer__social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.footer--centered .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer--centered .footer__social a:hover {
    background: var(--color-primary);
    transform: scale(1.1);
}

.footer--centered .footer__social svg {
    width: 20px;
    height: 20px;
}

/* Bottom */
.footer--centered .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    font-size: 0.8125rem;
}

.footer--centered .footer__copyright {
    margin: 0 0 0.75rem;
}

.footer--centered .footer__legal {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer--centered .footer__legal a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--centered .footer__legal a:hover {
    color: var(--color-white);
}

/* Tablet */
@media (min-width: 640px) {
    .footer--centered .footer__nav-divider {
        display: block;
    }
    
    .footer--centered .footer__contact-centered {
        flex-direction: row;
        gap: 1rem;
    }
    
    .footer--centered .footer__contact-divider {
        display: inline;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer--centered .footer__nav a {
        padding: 0.25rem 1rem;
    }
}

/* === FOOTER VARIANT 4 (split) === */
/* Footer Split - 2 Column Layout */
.footer--split {
    background: var(--color-bg-dark);
    color: var(--color-text-muted, var(--color-text-muted));
    padding: 4rem 0 2rem;
}

.footer--split .footer__grid {
    display: grid;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Left Column */
.footer--split .footer__left {
    max-width: 400px;
}

.footer--split .footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-bottom: 1rem;
}

.footer--split .footer__logo-img {
    height: 44px;
    width: auto;
}

.footer--split .footer__logo-text {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-white);
}

.footer--split .footer__tagline {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.footer--split .footer__contact-group {
    margin-bottom: 1.5rem;
}

.footer--split .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-style: normal;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.footer--split .footer__contact-item:hover {
    color: var(--color-white);
}

.footer--split .footer__contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer--split .footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer--split .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer--split .footer__social a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

.footer--split .footer__social svg {
    width: 18px;
    height: 18px;
}

/* Right Column */
.footer--split .footer__links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.footer--split .footer__heading {
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer--split .footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer--split .footer__list a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.footer--split .footer__list a:hover {
    color: var(--color-white);
}

/* Bottom */
.footer--split .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.footer--split .footer__copyright {
    margin: 0;
}

.footer--split .footer__legal {
    display: flex;
    gap: 1.5rem;
}

.footer--split .footer__legal a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--split .footer__legal a:hover {
    color: var(--color-white);
}

/* Tablet */
@media (min-width: 768px) {
    .footer--split .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .footer--split .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer--split .footer__grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 6rem;
    }
    
    .footer--split .footer__links-grid {
        gap: 3rem;
    }
}

/* === FOOTER VARIANT 5 (cta-banner) === */
/* Footer CTA Banner - CTA + Columns */
.footer--cta-banner {
    background: var(--color-bg-dark);
    color: var(--color-text-muted, var(--color-text-muted));
    padding: 0 0 2rem;
}

/* CTA Banner */
.footer__cta-banner {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: 2.5rem 1.5rem;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.footer__cta-content {
    max-width: 500px;
    margin: 0 auto;
}

.footer__cta-title {
    color: var(--color-white);
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.footer__cta-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.5;
}

.footer__cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.footer__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.footer__cta-btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.footer__cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer__cta-btn--secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.footer__cta-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Main Grid */
.footer--cta-banner .footer__grid {
    display: grid;
    gap: 2.5rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

/* Brand Column */
.footer--cta-banner .footer__brand {
    max-width: 280px;
}

.footer--cta-banner .footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    margin-bottom: 1rem;
}

.footer--cta-banner .footer__logo-img {
    height: 40px;
    width: auto;
}

.footer--cta-banner .footer__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
}

.footer--cta-banner .footer__tagline {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.footer--cta-banner .footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer--cta-banner .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-white);
    transition: background 0.2s ease;
}

.footer--cta-banner .footer__social a:hover {
    background: var(--color-primary);
}

.footer--cta-banner .footer__social svg {
    width: 18px;
    height: 18px;
}

/* Link Columns */
.footer--cta-banner .footer__heading {
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.footer--cta-banner .footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer--cta-banner .footer__list a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.footer--cta-banner .footer__list a:hover {
    color: var(--color-white);
}

/* Contact */
.footer--cta-banner .footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    font-style: normal;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.footer--cta-banner .footer__contact-item:hover {
    color: var(--color-white);
}

.footer--cta-banner .footer__contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Bottom */
.footer--cta-banner .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
    text-align: center;
}

.footer--cta-banner .footer__copyright {
    margin: 0;
}

.footer--cta-banner .footer__legal {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer--cta-banner .footer__legal a {
    color: var(--color-text-muted, var(--color-text-muted));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--cta-banner .footer__legal a:hover {
    color: var(--color-white);
}

/* Tablet */
@media (min-width: 640px) {
    .footer__cta-banner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 2.5rem 2rem;
    }
    
    .footer__cta-content {
        margin: 0;
    }
    
    .footer__cta-actions {
        flex-direction: row;
    }
    
    .footer--cta-banner .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    
    .footer--cta-banner .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 2rem 0 0;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer__cta-banner {
        padding: 3rem 4rem;
    }
    
    .footer--cta-banner .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 3rem;
    }
}

/* === FOOTER VARIANT 6 (simple-4col) === */
/* FOOTER SIMPLE 4-COL */
.footer-simple {
    background: var(--color-bg-dark, var(--color-text, #1f2937));
    color: white;
    padding: 2.5rem 0 1.5rem;
}

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

.footer-simple__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-simple__company {
    display: flex;
    flex-direction: column;
}

.footer-simple__logo-link {
    display: block;
    margin-bottom: 1rem;
    text-decoration: none;
}

.footer-simple__logo {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    object-position: left;
}

.footer-simple__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
}

.footer-simple__desc {
    color: var(--color-border, #d1d5db);
    line-height: 1.5;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.footer-simple__social {
    display: flex;
    gap: 1rem;
}

.footer-simple__social a {
    color: var(--color-text-muted, #9ca3af);
    transition: color 0.2s;
}

.footer-simple__social a:hover {
    color: var(--color-primary, var(--color-primary-light, #60a5fa));
}

.footer-simple__social svg {
    width: 20px;
    height: 20px;
}

/* Links Columns */
.footer-simple__links {
    min-width: 140px;
}

.footer-simple__heading {
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-simple__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-simple__links li {
    margin-bottom: 0.5rem;
}

.footer-simple__links a {
    color: var(--color-border, #d1d5db);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.footer-simple__links a:hover {
    color: var(--color-primary, var(--color-primary-light, #60a5fa));
}

/* Contact Column */
.footer-simple__contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-border, #d1d5db);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    transition: color 0.2s;
}

a.footer-simple__contact-item:hover {
    color: var(--color-primary, var(--color-primary-light, #60a5fa));
}

.footer-simple__cta {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary, var(--color-primary-light, #60a5fa));
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}

.footer-simple__cta:hover {
    background: var(--color-primary-dark, var(--color-primary, #3b82f6));
    transform: translateY(-2px);
}

/* Bottom Bar */
.footer-simple__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #9ca3af);
}

.footer-simple__bottom p {
    margin: 0;
}

.footer-simple__legal {
    display: flex;
    gap: 1.5rem;
}

.footer-simple__legal a {
    color: var(--color-text-muted, #9ca3af);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-simple__legal a:hover {
    color: white;
}

@media (max-width: 640px) {
    .footer-simple__grid {
        grid-template-columns: 1fr;
    }

    .footer-simple__bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* === FOOTER VARIANT 7 (saas-minimal) === */
/* Footer SaaS Minimal - Clean tech/developer footer */
.footer--saas {
    background: var(--color-bg-dark, var(--color-bg-dark, #0f172a));
    color: var(--color-text-muted, rgba(255,255,255,0.6));
    padding: 3rem 0 1.5rem;
}

.footer--saas .footer__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Brand */
.footer--saas .footer__brand {
    text-align: center;
}

.footer--saas .footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.footer--saas .footer__logo-img {
    height: 36px;
    width: auto;
}

.footer--saas .footer__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white, var(--color-text-on-dark, #fff));
}

.footer--saas .footer__tagline {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    max-width: 280px;
}

/* Navigation */
.footer--saas .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

.footer--saas .footer__nav a {
    color: var(--color-text-muted, rgba(255,255,255,0.7));
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer--saas .footer__nav a:hover {
    color: var(--color-white, var(--color-text-on-dark, #fff));
}

/* Social */
.footer--saas .footer__social {
    display: flex;
    gap: 0.75rem;
}

.footer--saas .footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--color-white, var(--color-text-on-dark, #fff));
    transition: background 0.2s ease, transform 0.2s ease;
}

.footer--saas .footer__social a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

.footer--saas .footer__social svg {
    width: 18px;
    height: 18px;
}

/* Bottom */
.footer--saas .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    font-size: 0.8125rem;
}

.footer--saas .footer__copyright {
    margin: 0;
    color: var(--color-text-muted, rgba(255,255,255,0.5));
}

.footer--saas .footer__legal {
    display: flex;
    gap: 1.5rem;
}

.footer--saas .footer__legal a {
    color: var(--color-text-muted, rgba(255,255,255,0.5));
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer--saas .footer__legal a:hover {
    color: var(--color-white, var(--color-text-on-dark, #fff));
}

/* Tablet+ */
@media (min-width: 768px) {
    .footer--saas .footer__row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .footer--saas .footer__brand {
        text-align: left;
    }
    
    .footer--saas .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .footer--saas .footer__nav {
        gap: 2rem;
    }
}

/* === FOOTER VARIANT 8 (dynamic-columns) === */
/* DYNAMIC FOOTER v8 - Columns from JSON Config */

.footer--dynamic {
    background: var(--color-bg, #060d21);
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    padding: 4rem 0 0;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* Subtle gradient line */
.footer--dynamic::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary, #10B981), var(--color-secondary, #60a5fa), transparent);
    opacity: 0.5;
}

/* Top Section */
.footer__top {
    display: grid; grid-template-columns: 1fr; gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}
@media (min-width: 768px) { .footer__top { grid-template-columns: 1.2fr 2fr; gap: 4rem; } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.5fr 3fr; gap: 5rem; } }

/* Brand */
.footer__brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo-img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.footer__logo-text { font-size: 1.5rem; font-weight: 700; color: #ffffff; }
.footer__tagline { color: var(--color-text-muted, #94a3b8); font-size: 0.9375rem; line-height: 1.6; max-width: 280px; margin: 0; }

/* Social */
.footer__social { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)); color: var(--color-text-secondary, #e2e8f0); transition: all 0.2s ease; }
.footer__social-link:hover { background: rgba(16, 185, 129, 0.1); border-color: var(--color-primary, #10B981); color: var(--color-primary, #10B981); transform: translateY(-2px); }
.footer__social-link svg { width: 18px; height: 18px; }

/* Columns */
.footer__columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 640px) { .footer__columns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .footer__columns { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }

.footer__column { display: flex; flex-direction: column; gap: 1rem; }
.footer__heading { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text, #fff); margin: 0 0 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-primary, #10B981); display: inline-block; }
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.footer__list a { color: var(--color-text-muted, #94a3b8); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease, padding-left 0.2s ease; display: inline-block; }
.footer__list a:hover { color: var(--color-primary, #10B981); padding-left: 4px; }

/* Bottom */
.footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem 0; text-align: center; }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer__copyright { color: var(--color-text-muted, #94a3b8); font-size: 0.875rem; margin: 0; }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
@media (min-width: 768px) { .footer__legal { justify-content: flex-end; } }
.footer__legal a { color: var(--color-text-muted, #94a3b8); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; }
.footer__legal a:hover { color: var(--color-primary, #10B981); }

/* Focus & reduced motion */
.footer__social-link:focus, .footer__list a:focus, .footer__legal a:focus, .footer__logo:focus { outline: 2px solid var(--color-primary, #10B981); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .footer__social-link, .footer__list a { transition: none; } }
.footer__columns noscript .footer__column, .footer__social noscript a { display: inline-block; }

/* === FOOTER VARIANT 9 (ivrevival-custom) === */
.ivr-footer {
    background: #1f2937;
    color: white;
    padding: 40px 0 20px;
    font-family: 'Poppins', sans-serif;
}
.ivr-footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
.ivr-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}
.ivr-footer__logo {
    height: 50px;
    width: auto;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
    display: block;
}
.ivr-footer__desc {
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95em;
}
.ivr-footer__social {
    display: flex;
    gap: 15px;
    align-items: center;
}
.ivr-footer__social-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s;
}
.ivr-footer__social-link:hover { color: #8bc73f; }
.ivr-footer__heading {
    color: #8bc73f;
    margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: 600;
}
.ivr-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ivr-footer__links li { margin-bottom: 6px; }
.ivr-footer__links a {
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s;
}
.ivr-footer__links a:hover { color: #8bc73f; }
.ivr-footer__contact-item {
    color: #d1d5db;
    margin-bottom: 6px;
    font-size: 0.9em;
}
.ivr-footer__contact-item a { color: #d1d5db; text-decoration: none; }
.ivr-footer__contact-item a:hover { color: #8bc73f; }
.ivr-footer__cta {
    background: #0caae6;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    display: inline-block;
    margin-top: 10px;
    transition: background 0.3s;
}
.ivr-footer__cta:hover { background: #0b99d0; }
.ivr-footer__bottom {
    border-top: 1px solid #374151;
    padding-top: 20px;
    text-align: center;
}
.ivr-footer__bottom p {
    color: #9ca3af;
    margin: 0;
    font-size: 0.85em;
}

/* === GALLERY VARIANT 1 (grid-3col) === */
/* Gallery Grid 3-Column */
.gallery--grid {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.gallery--grid[data-bg="alt"] { background: var(--color-bg-alt); }
.gallery--grid[data-bg="dark"] { background: var(--color-bg-dark); }
.gallery--grid[data-bg="dark"] .gallery__title,
.gallery--grid[data-bg="dark"] .gallery__subtitle { color: var(--color-white); }

.gallery--grid[data-spacing="compact"] { padding: 3rem 0; }
.gallery--grid[data-spacing="spacious"] { padding: 7rem 0; }

.gallery__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.gallery__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.gallery__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.gallery__grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.gallery__item {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery__item:hover img {
    transform: scale(1.05);
}

/* Centered overlay with theme gradient */
.gallery__caption {
    position: absolute;
    inset: 0;
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary-dark)) 100%));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery__item:hover .gallery__caption {
    opacity: 0.92;
}

.gallery__caption h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.gallery__caption p {
    font-size: 0.9375rem;
    opacity: 0.95;
    margin: 0;
    line-height: 1.5;
    max-width: 90%;
}

/* Hide items with empty/placeholder images */
.gallery__item:has(img[src=""]),
.gallery__item:has(img[src*="[GALLERY"]) {
    display: none;
}

@media (max-width: 992px) {
    .gallery__grid--3col {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

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

/* === GALLERY VARIANT 2 (masonry) === */
/* Gallery Masonry */
.gallery--masonry {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.gallery--masonry[data-bg="alt"] { background: var(--color-bg-alt); }
.gallery--masonry[data-bg="dark"] { background: var(--color-bg-dark); }
.gallery--masonry[data-bg="dark"] .gallery__title,
.gallery--masonry[data-bg="dark"] .gallery__subtitle { color: var(--color-white); }

.gallery--masonry[data-spacing="compact"] { padding: 3rem 0; }
.gallery--masonry[data-spacing="spacious"] { padding: 7rem 0; }

.gallery--masonry .gallery__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.gallery--masonry .gallery__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.gallery--masonry .gallery__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Grid-based masonry with varied spans */
.gallery__masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 1.25rem;
}

.gallery__masonry-item {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
}

/* Vary the sizes for masonry effect */
.gallery__masonry-item:nth-child(1) { grid-row: span 2; }
.gallery__masonry-item:nth-child(4) { grid-column: span 2; }
.gallery__masonry-item:nth-child(7) { grid-row: span 2; }
.gallery__masonry-item:nth-child(10) { grid-column: span 2; }

.gallery__masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery__masonry-item:hover img {
    transform: scale(1.05);
}

/* Centered overlay with theme gradient */
.gallery__masonry-item figcaption {
    position: absolute;
    inset: 0;
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary-dark)) 100%));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery__masonry-item:hover figcaption {
    opacity: 1;
}

.gallery__masonry-item figcaption h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.gallery__masonry-item figcaption p {
    font-size: 0.9375rem;
    opacity: 0.95;
    margin: 0;
    line-height: 1.5;
    max-width: 90%;
}

@media (max-width: 992px) {
    .gallery__masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 1rem;
    }
    
    .gallery__masonry-item:nth-child(4),
    .gallery__masonry-item:nth-child(10) { 
        grid-column: span 1; 
    }
}

@media (max-width: 640px) {
    .gallery__masonry {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    
    .gallery__masonry-item {
        aspect-ratio: 4/3;
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
}

/* === GALLERY VARIANT 3 (featured) === */
/* Gallery Featured - Large Images with Overlay Content */
.gallery--featured {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.gallery--featured[data-bg="alt"] { background: var(--color-bg-alt); }
.gallery--featured[data-bg="dark"] { background: var(--color-bg-dark); }
.gallery--featured[data-bg="dark"] .gallery__title,
.gallery--featured[data-bg="dark"] .gallery__subtitle { color: var(--color-white); }

.gallery--featured[data-spacing="compact"] { padding: 3rem 0; }
.gallery--featured[data-spacing="spacious"] { padding: 7rem 0; }

.gallery--featured .gallery__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.gallery--featured .gallery__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.gallery--featured .gallery__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.gallery__featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery__featured-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-bg-alt, #1a1a1a);
}

.gallery__featured-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.gallery__featured-item:hover img {
    transform: scale(1.03);
}

/* Overlay using theme variable */
.gallery__featured-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery__featured-item:hover .gallery__featured-overlay {
    opacity: 1;
}

.gallery__featured-title {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
    color: var(--color-white);
}

.gallery__featured-desc {
    font-size: 0.9375rem;
    margin: 0 0 1rem;
    line-height: 1.5;
    max-width: 95%;
    color: rgba(255, 255, 255, 0.95);
}

.gallery__featured-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
}

.gallery__featured-bullets li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.gallery__featured-bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--color-secondary-light, #fbbf24);
}

/* Empty bullet handling */
.gallery__featured-bullets li:empty {
    display: none;
}

@media (max-width: 992px) {
    .gallery__featured-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .gallery__featured-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .gallery__featured-overlay {
        padding: 1.25rem;
    }
    
    .gallery__featured-title {
        font-size: 1.125rem;
    }
    
    .gallery__featured-desc {
        font-size: 0.875rem;
    }
}

/* === GALLERY VARIANT 4 (grid-rows) === */
/* Gallery Rows - Large Grid */
.gallery--rows {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.gallery--rows[data-bg="alt"] { background: var(--color-bg-alt); }
.gallery--rows[data-bg="dark"] { background: var(--color-bg-dark); }
.gallery--rows[data-bg="dark"] .gallery__title,
.gallery--rows[data-bg="dark"] .gallery__subtitle { color: var(--color-white); }

.gallery--rows[data-spacing="compact"] { padding: 3rem 0; }
.gallery--rows[data-spacing="spacious"] { padding: 7rem 0; }

.gallery--rows .gallery__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.gallery--rows .gallery__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.gallery--rows .gallery__subtitle {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.gallery__rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.gallery__row-item {
    position: relative;
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.gallery__row-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery__row-item:hover img {
    transform: scale(1.05);
}

/* Centered overlay with theme gradient */
.gallery__row-item figcaption {
    position: absolute;
    inset: 0;
    background: var(--gradient-primary, linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent, var(--color-primary-dark)) 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery__row-item:hover figcaption {
    opacity: 1;
}

/* Hide empty items */
.gallery__row-item:has(img[src=""]),
.gallery__row-item:has(img:not([src])) {
    display: none;
}

@media (max-width: 992px) {
    .gallery__rows {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .gallery__rows {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery__rows {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .gallery__row-item {
        border-radius: var(--radius-sm);
    }
    
    .gallery__row-item figcaption {
        font-size: 0.875rem;
        padding: 1rem;
    }
}


/* === HERO VARIANT 1 (centered) === */
/* HERO: CENTERED */
.hero--centered {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero--centered .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero--centered .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--centered .hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.hero--centered[data-bg="light"] .hero__overlay {
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(248,250,252,0.75) 100%);
}

.hero--centered .container {
    position: relative;
    z-index: 2;
}

.hero--centered .hero__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 2rem 1rem;
}

.hero--centered .hero__eyebrow {
    display: inline-block;
    font-size: var(--text-small, 0.875rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
}

.hero--centered .hero__title {
    font-size: var(--text-h1, clamp(2.25rem, 5vw, 3.5rem));
    font-weight: var(--font-extrabold, 800);
    line-height: var(--leading-tight, 1.1);
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

.hero--centered[data-bg="light"] .hero__title {
    color: var(--color-text);
}

.hero--centered .hero__subtitle {
    font-size: var(--text-body-lg, 1.125rem);
    line-height: var(--leading-relaxed, 1.65);
    color: rgba(255,255,255,0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero--centered[data-bg="light"] .hero__subtitle {
    color: var(--color-text-secondary);
}

.hero--centered .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.hero--centered .hero__cta .btn {
    min-height: 52px;
    padding: 0.875rem 2rem;
}

.hero--centered .hero__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.hero--centered .hero__trust-item {
    text-align: center;
}

.hero--centered .hero__trust-number {
    display: block;
    font-size: 1.75rem;
    font-weight: var(--font-bold, 700);
    color: var(--color-white);
}

.hero--centered[data-bg="light"] .hero__trust-number {
    color: var(--color-primary);
}

.hero--centered .hero__trust-label {
    font-size: var(--text-xs, 0.8125rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.7);
}

.hero--centered[data-bg="light"] .hero__trust-label {
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .hero--centered {
        min-height: 90vh;
    }
    
    .hero--centered .hero__cta {
        flex-direction: column;
        align-items: center;
    }
    
    .hero--centered .hero__cta .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .hero--centered .hero__trust {
        gap: 1.5rem;
    }
}

/* === HERO VARIANT 2 (split) === */
/* HERO: SPLIT - Enhanced with Social Proof */
.hero--split {
    background: var(--color-bg);
    padding: 4rem 0;
}

.hero--split[data-bg="alt"] { background: var(--color-bg-alt); }
.hero--split[data-bg="dark"] { background: var(--color-bg-dark); }

.hero--split .hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero--split .hero__content {
    order: 1;
}

.hero--split .hero__media {
    order: 2;
}

.hero--split[data-direction="reverse"] .hero__content {
    order: 2;
}

.hero--split[data-direction="reverse"] .hero__media {
    order: 1;
}

.hero--split .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--split .hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--split[data-bg="dark"] .hero__title { color: var(--color-white); }

.hero--split .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.hero--split[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); }

/* Social Proof - Static HTML for SEO */
.hero__social-proof {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.875rem 1.25rem;
    background: var(--color-star-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

.hero__stars {
    display: flex;
    gap: 2px;
}

.hero__star {
    color: var(--color-accent);
    font-size: 1.25rem;
    line-height: 1;
}

.hero__star--partial {
    background: linear-gradient(90deg, var(--color-accent) 80%, var(--color-border) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__rating-value {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-star-text);
}

.hero__rating-separator {
    color: var(--color-accent-dark);
}

.hero__review-count {
    color: var(--color-star-text);
    font-weight: 500;
}

.hero--split .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero--split .hero__cta .btn {
    min-height: 48px;
}

/* GitHub button with white icon */
.hero--split .btn--primary {
    color: var(--color-white) !important;
}

.hero--split .btn--primary .btn__icon {
    fill: var(--color-white) !important;
    color: var(--color-white) !important;
}

/* Developer CTA with npm command */
.hero__cta--dev {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.hero--split .hero__npm-group {
    display: flex;
    align-items: stretch;
    background: var(--color-surface, #12121c);
    border: 1px solid var(--color-border, #27272a);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hero--split .hero__npm-command {
    padding: 0.875rem 1rem;
    font-family: var(--font-mono, 'Monaco', 'Consolas', monospace);
    font-size: 0.9rem;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.hero--split .hero__npm-copy {
    padding: 0.875rem 1rem;
    background: var(--color-primary);
    color: var(--color-bg-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.hero--split .hero__npm-copy:hover {
    background: var(--color-primary-dark);
}

.hero--split .hero__npm-copy .btn__icon {
    width: 16px;
    height: 16px;
}

.hero--split .hero__npm-copy-text {
    font-size: 0.875rem;
}

/* Trust Items - Horizontal with Icons */
.hero--split .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hero--split .hero__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.hero--split .hero__trust-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.hero--split[data-bg="dark"] .hero__trust-item { color: rgba(255,255,255,0.7); }
.hero--split[data-bg="dark"] .hero__trust-icon { color: var(--color-primary-light); }

/* Media Section */
.hero--split .hero__media {
    position: relative;
}

.hero--split .hero__img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero__media-badge {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
}

.hero__media-badge strong {
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .hero--split .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--split {
        padding: 5rem 0;
    }
}

@media (max-width: 991px) {
    .hero--split .hero__content {
        text-align: center;
    }
    
    .hero__social-proof {
        justify-content: center;
    }
    
    .hero--split .hero__cta,
    .hero--split .hero__cta--dev {
        justify-content: center;
    }
    
    .hero--split .hero__trust {
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .hero--split .hero__cta {
        flex-direction: column;
        align-items: center;
    }
    
    .hero--split .hero__cta .btn {
        width: 100%;
        max-width: 280px;
    }
    
    .hero__social-proof {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .hero__star {
        font-size: 1rem;
    }
    
    .hero--split .hero__cta--dev {
        flex-direction: column;
        align-items: center;
    }
    
    .hero--split .hero__npm-group {
        width: 100%;
        max-width: 300px;
    }
    
    .hero--split .hero__npm-command {
        flex: 1;
        justify-content: center;
    }
}

/* === HERO VARIANT 3 (slideshow) === */
/* HERO: SLIDESHOW */
.hero--slideshow {
    background: var(--color-bg);
    padding: 4rem 0;
}

.hero--slideshow[data-bg="alt"] { background: var(--color-bg-alt); }
.hero--slideshow[data-bg="dark"] { background: var(--color-bg-dark); }

.hero--slideshow .hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero--slideshow .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--slideshow .hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--slideshow[data-bg="dark"] .hero__title { color: var(--color-white); }

.hero--slideshow .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero--slideshow[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); }

.hero--slideshow .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero--slideshow .hero__cta .btn {
    min-height: 48px;
}

.hero--slideshow .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--slideshow .hero__trust-item { text-align: center; }

.hero--slideshow .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero--slideshow .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* Slideshow */
.hero__slideshow {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero__slides {
    position: relative;
    aspect-ratio: 4 / 3;
}

.hero__slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero__slide-item.is-active {
    opacity: 1;
}

.hero__slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__slideshow-nav {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.hero__slideshow-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.hero__slideshow-dot::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    background: transparent;
    transition: var(--transition);
}

.hero__slideshow-dot.is-active::before,
.hero__slideshow-dot:hover::before {
    background: var(--color-white);
}

@media (min-width: 992px) {
    .hero--slideshow .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--slideshow {
        padding: 5rem 0;
    }
}

@media (max-width: 991px) {
    .hero--slideshow .hero__content {
        text-align: center;
    }
    
    .hero--slideshow .hero__cta {
        justify-content: center;
    }
    
    .hero--slideshow .hero__trust {
        justify-content: center;
    }
}

/* === HERO VARIANT 4 (video) === */
/* HERO: VIDEO */
.hero--video {
    background: var(--color-bg);
    padding: 4rem 0;
}

.hero--video[data-bg="alt"] { background: var(--color-bg-alt); }
.hero--video[data-bg="dark"] { background: var(--color-bg-dark); }

.hero--video .hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero--video .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--video .hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--video[data-bg="dark"] .hero__title { color: var(--color-white); }

.hero--video .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero--video[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); }

.hero--video .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero--video .hero__cta .btn {
    min-height: 48px;
}

.hero--video .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--video .hero__trust-item { text-align: center; }

.hero--video .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero--video .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* Video Container */
.hero__video-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 16 / 9;
}

.hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__video-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    border: none;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: var(--shadow-lg);
}

.hero__video-toggle:hover {
    background: var(--color-primary-dark);
    transform: scale(1.1);
}

.hero__video-icon {
    width: 20px;
    height: 20px;
}

.hero__video-icon--play { display: none; }
.hero__video-icon--pause { display: block; }

.hero__video-toggle.is-paused .hero__video-icon--play { display: block; }
.hero__video-toggle.is-paused .hero__video-icon--pause { display: none; }

@media (min-width: 992px) {
    .hero--video .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--video {
        padding: 5rem 0;
    }
}

@media (max-width: 991px) {
    .hero--video .hero__content {
        text-align: center;
    }
    
    .hero--video .hero__cta {
        justify-content: center;
    }
    
    .hero--video .hero__trust {
        justify-content: center;
    }
}

/* === HERO VARIANT 5 (gallery) === */
/* HERO: GALLERY */
.hero--gallery {
    background: var(--gradient-brand);
    padding: 4rem 0;
}

.hero--gallery[data-bg="white"] { background: var(--color-bg); }
.hero--gallery[data-bg="alt"] { background: var(--color-bg-alt); }
.hero--gallery[data-bg="dark"] { background: var(--color-bg-dark); }
.hero--gallery[data-bg="gradient"] { background: var(--gradient-brand); }
.hero--gallery[data-bg="gradient-dark"] { background: linear-gradient(135deg, var(--color-bg-dark, #1a1a2e) 0%, var(--color-bg-darker, #16213e) 50%, var(--color-surface-dark, #0f3460) 100%); }
.hero--gallery[data-bg="gradient-primary"] { background: var(--gradient-primary); }

/* White text on gradient/dark backgrounds */
.hero--gallery,
.hero--gallery[data-bg="gradient"],
.hero--gallery[data-bg="gradient-dark"],
.hero--gallery[data-bg="gradient-primary"],
.hero--gallery[data-bg="dark"] {
    color: var(--color-white);
}

.hero--gallery .hero__title,
.hero--gallery[data-bg="gradient"] .hero__title,
.hero--gallery[data-bg="gradient-dark"] .hero__title,
.hero--gallery[data-bg="gradient-primary"] .hero__title,
.hero--gallery[data-bg="dark"] .hero__title { 
    color: var(--color-white); 
}

.hero--gallery .hero__subtitle,
.hero--gallery[data-bg="gradient"] .hero__subtitle,
.hero--gallery[data-bg="gradient-dark"] .hero__subtitle,
.hero--gallery[data-bg="gradient-primary"] .hero__subtitle,
.hero--gallery[data-bg="dark"] .hero__subtitle { 
    color: rgba(255,255,255,0.9); 
}

.hero--gallery .hero__eyebrow,
.hero--gallery[data-bg="gradient"] .hero__eyebrow,
.hero--gallery[data-bg="gradient-dark"] .hero__eyebrow,
.hero--gallery[data-bg="gradient-primary"] .hero__eyebrow { 
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    display: inline-block;
}

.hero--gallery .hero__trust-number,
.hero--gallery[data-bg="gradient"] .hero__trust-number,
.hero--gallery[data-bg="gradient-dark"] .hero__trust-number,
.hero--gallery[data-bg="gradient-primary"] .hero__trust-number { 
    color: var(--color-white); 
}

.hero--gallery .hero__trust-label,
.hero--gallery[data-bg="gradient"] .hero__trust-label,
.hero--gallery[data-bg="gradient-dark"] .hero__trust-label,
.hero--gallery[data-bg="gradient-primary"] .hero__trust-label { 
    color: rgba(255,255,255,0.8); 
}

/* White background overrides */
.hero--gallery[data-bg="white"] .hero__title { color: var(--color-text); }
.hero--gallery[data-bg="white"] .hero__subtitle { color: var(--color-text-secondary); }
.hero--gallery[data-bg="white"] .hero__eyebrow { color: var(--color-primary); background: transparent; }
.hero--gallery[data-bg="white"] .hero__trust-number { color: var(--color-primary); }
.hero--gallery[data-bg="white"] .hero__trust-label { color: var(--color-text-muted); }

.hero--gallery .hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero--gallery .hero__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.hero--gallery .hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero--gallery .hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero--gallery .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero--gallery .hero__cta .btn {
    min-height: 48px;
}

/* Button styling for gradient background */
.hero--gallery .btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.hero--gallery .btn--primary:hover {
    background: rgba(255,255,255,0.9);
}

.hero--gallery .btn--outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: var(--color-white);
}

.hero--gallery .btn--outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
}

.hero--gallery .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--gallery .hero__trust-item { text-align: center; }

.hero--gallery .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.hero--gallery .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.hero__gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 1;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero__gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.hero__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hero__gallery-item:hover img {
    transform: scale(1.05);
}

@media (min-width: 992px) {
    .hero--gallery .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--gallery {
        padding: 5rem 0;
    }
    
    .hero__gallery-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 991px) {
    .hero--gallery .hero__content {
        text-align: center;
    }
    
    .hero--gallery .hero__cta {
        justify-content: center;
    }
    
    .hero--gallery .hero__trust {
        justify-content: center;
    }
    
    .hero__gallery-grid {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* === HERO VARIANT 6 (gradient) === */
/* HERO: GRADIENT */
.hero--gradient {
    position: relative;
    padding: 4rem 0;
    overflow: hidden;
}

.hero__gradient-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--gradient-brand);
}

.hero--gradient[data-bg="gradient-dark"] .hero__gradient-bg {
    background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 50%, var(--color-bg-dark) 100%);
}

.hero--gradient[data-bg="gradient-primary"] .hero__gradient-bg {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
}

.hero--gradient .container {
    position: relative;
    z-index: 1;
}

.hero--gradient .hero__grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.hero--gradient .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
}

.hero--gradient .hero__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-white);
}

.hero--gradient .hero__subtitle {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.hero--gradient .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero--gradient .hero__cta .btn {
    min-height: 48px;
}

/* Button styling for gradient background - white bg, orange text and icon */
.hero--gradient .btn--accent {
    background: var(--color-white) !important;
    color: var(--color-primary) !important;
}

.hero--gradient .btn--accent .btn__icon {
    fill: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.hero--gradient .btn--accent:hover {
    background: rgba(255,255,255,0.9) !important;
}

.hero--gradient .btn--white {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: var(--color-white);
}

.hero--gradient .btn--white:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--color-white);
}

/* Developer CTA with npm command */
.hero__cta--dev {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.hero__npm-group {
    display: flex;
    align-items: stretch;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hero__npm-command {
    padding: 0.875rem 1rem;
    font-family: var(--font-mono, 'Monaco', 'Consolas', monospace);
    font-size: 0.9rem;
    color: var(--color-white);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.hero__npm-copy {
    padding: 0.875rem 1rem;
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.hero__npm-copy:hover {
    background: rgba(255,255,255,0.2);
}

.hero__npm-copy .btn__icon {
    width: 16px;
    height: 16px;
}

.hero__npm-copy-text {
    font-size: 0.875rem;
}

/* Features List */
.hero__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
}

.hero__feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-success);
    flex-shrink: 0;
}

/* Trust Stats */
.hero--gradient .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--gradient .hero__trust-item { text-align: center; }

.hero--gradient .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
}

.hero--gradient .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.8);
}

/* Image Frame */
.hero__image-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero__image-frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: calc(var(--radius-lg) + 4px);
    z-index: -1;
}

.hero__image-frame .hero__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

@media (min-width: 992px) {
    .hero--gradient .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--gradient {
        padding: 5rem 0;
    }
}

@media (max-width: 991px) {
    .hero--gradient .hero__content {
        text-align: center;
    }
    
    .hero--gradient .hero__cta,
    .hero__cta--dev {
        justify-content: center;
    }
    
    .hero__features {
        align-items: center;
    }
    
    .hero--gradient .hero__trust {
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .hero__cta--dev {
        flex-direction: column;
        align-items: center;
    }
    
    .hero__npm-group {
        width: 100%;
        max-width: 300px;
    }
    
    .hero__npm-command {
        flex: 1;
        justify-content: center;
    }
}

/* === HERO VARIANT 7 (modular) === */
/* HERO: MODULAR - Base */
.hero--modular {
    position: relative;
    padding: 8rem 0 5rem;
    background: transparent;
    overflow: hidden;
}

.hero--modular[data-bg="alt"] { background: transparent; }
.hero--modular[data-bg="dark"] { background: transparent; }
.hero--modular[data-bg="space-dust"] { background: transparent; }

/* Background layers - hidden by default */
.hero--modular .hero__bg-image,
.hero--modular .hero__bg-video,
.hero--modular .hero__bg-slideshow,
.hero--modular .hero__overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Activate backgrounds via data-bg */
.hero--modular[data-bg="image"] .hero__bg-image {
    display: block;
    background-size: cover;
    background-position: center;
}

.hero--modular[data-bg="video"] .hero__bg-video {
    display: block;
}

.hero--modular[data-bg="video"] .hero__bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--modular[data-bg="slideshow"] .hero__bg-slideshow {
    display: block;
}

.hero--modular[data-bg="image"] .hero__overlay,
.hero--modular[data-bg="video"] .hero__overlay,
.hero--modular[data-bg="slideshow"] .hero__overlay {
    display: block;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.hero--modular .container {
    position: relative;
    z-index: 2;
}

/* Grid layout - default centered */
.hero--modular .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero--modular .hero__content {
    max-width: 800px;
}

.hero--modular .hero__media {
    display: none;
}

/* Split layout */
.hero--modular[data-layout="split"] .hero__grid,
.hero--modular[data-layout="split-reverse"] .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
}

.hero--modular[data-layout="split"] .hero__media,
.hero--modular[data-layout="split-reverse"] .hero__media {
    display: block;
}

/* Content styles */
.hero--modular .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--modular[data-bg="image"] .hero__eyebrow,
.hero--modular[data-bg="video"] .hero__eyebrow {
    color: var(--color-accent);
}

.hero--modular .hero__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--modular[data-bg="image"] .hero__title,
.hero--modular[data-bg="video"] .hero__title,
.hero--modular[data-bg="dark"] .hero__title {
    color: var(--color-white);
}

.hero--modular .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero--modular[data-bg="image"] .hero__subtitle,
.hero--modular[data-bg="video"] .hero__subtitle,
.hero--modular[data-bg="dark"] .hero__subtitle {
    color: rgba(255,255,255,0.9);
}

.hero--modular .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero--modular[data-layout="centered"] .hero__cta {
    justify-content: center;
}

.hero--modular .hero__cta .btn {
    min-height: 48px;
}

.hero--modular .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--modular[data-layout="centered"] .hero__trust {
    justify-content: center;
}

.hero--modular .hero__trust-item { text-align: center; }

.hero--modular .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero--modular[data-bg="image"] .hero__trust-number,
.hero--modular[data-bg="video"] .hero__trust-number,
.hero--modular[data-bg="dark"] .hero__trust-number {
    color: var(--color-white);
}

.hero--modular .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.hero--modular[data-bg="image"] .hero__trust-label,
.hero--modular[data-bg="video"] .hero__trust-label,
.hero--modular[data-bg="dark"] .hero__trust-label {
    color: rgba(255,255,255,0.7);
}

/* Media elements - hidden by default */
.hero--modular .hero__media-image,
.hero--modular .hero__media-gallery,
.hero--modular .hero__media-slideshow,
.hero--modular .hero__media-video {
    display: none;
}

/* Activate media via data-media */
.hero--modular[data-media="image"] .hero__media-image {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="gallery"] .hero__media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero--modular[data-media="gallery"] .hero__media-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.hero--modular[data-media="slideshow"] .hero__media-slideshow {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="video"] .hero__media-video {
    display: block;
}

.hero--modular[data-media="video"] .hero__media-video video {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Slideshow styles */
.hero__media-slides {
    position: relative;
    aspect-ratio: 4 / 3;
}

.hero__media-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero__media-slide.is-active {
    opacity: 1;
}

.hero__media-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

/* Background slideshow */
.hero__bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero__bg-slide.is-active {
    opacity: 1;
}

@media (min-width: 992px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__content {
        order: 2;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__media {
        order: 1;
    }
}

@media (max-width: 991px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        text-align: center;
    }
    
    .hero--modular[data-layout="split"] .hero__cta,
    .hero--modular[data-layout="split-reverse"] .hero__cta {
        justify-content: center;
    }
    
    .hero--modular[data-layout="split"] .hero__trust,
    .hero--modular[data-layout="split-reverse"] .hero__trust {
        justify-content: center;
    }
}

/* === HERO VARIANT 8 (sdk-youtube) === */
.hero--sdk {
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.hero__grid--video-left {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero__youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-border, #27272a);
}

.hero__youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero__npm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface, #12121c);
    border: 1px solid var(--color-border, #27272a);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 1.5rem 0;
}

.hero__npm-code {
    font-family: var(--font-mono, monospace);
    font-size: 1rem;
    color: var(--color-primary, #f7931a);
}

.hero__npm-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-text-muted, #a1a1aa);
    transition: color 0.2s;
}

.hero__npm-copy:hover {
    color: var(--color-primary, #f7931a);
}

.hero__npm-copy svg {
    width: 18px;
    height: 18px;
}

.hero__npm-copy.copied {
    color: #10b981;
}

@media (max-width: 968px) {
    .hero__grid--video-left {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .hero__media {
        order: -1;
    }
}

/* === HERO VARIANT 9 (sdk-youtube-right) === */
/* Hero SDK YouTube Right - Video on right, content on left */

/* Section keeps gradient background */
.hero--sdk {
    position: relative;
    min-height: auto;
    padding: 4rem 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, #080810 0%, #0c0c14 50%, #12121c 100%);
}

/* CRITICAL: Override base hero rule - only CHILD elements are transparent, not the section */
.hero--sdk [class^="hero__"],
.hero--sdk [class*=" hero__"] {
    background: transparent !important;
}

/* Hide gradient bg element if present */
.hero--sdk .hero__gradient-bg {
    display: none !important;
}

.hero--sdk .hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero--sdk .hero__grid--video-right .hero__content {
    order: 1;
}

.hero--sdk .hero__grid--video-right .hero__media {
    order: 2;
}

.hero--sdk .hero__content {
    background: transparent !important;
}

.hero--sdk .hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--color-white, #fff);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: transparent !important;
}

.hero--sdk .hero__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-soft, #e4e4e7);
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 540px;
    background: transparent !important;
}

/* npm badge - transparent background */
.hero--sdk .hero__npm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent !important;
    border: 1px solid var(--color-border, #27272a);
    border-radius: var(--radius-md, 8px);
    padding: 0.75rem 1rem;
    margin-bottom: 2rem;
}

.hero--sdk .hero__npm-code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-primary, #f7931a);
    background: transparent !important;
}

.hero--sdk .hero__npm-copy {
    background: transparent !important;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted, #a1a1aa);
    transition: color 0.2s;
}

.hero--sdk .hero__npm-copy:hover {
    color: var(--color-primary, #f7931a);
}

.hero--sdk .hero__npm-copy svg {
    width: 18px;
    height: 18px;
}

/* CTA buttons - transparent backgrounds */
.hero--sdk .hero__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    background: transparent !important;
}

.hero--sdk .hero__cta .btn {
    background: transparent;
}

.hero--sdk .hero__cta .btn--accent {
    background: var(--color-primary, #f7931a);
    color: #fff;
}

.hero--sdk .hero__cta .btn--accent:hover {
    background: var(--color-primary-dark, #d97706);
}

/* Force GitHub icon to be white */
.hero--sdk .hero__cta .btn--accent .btn__icon,
.hero--sdk .hero__cta .btn--accent svg {
    fill: #ffffff !important;
    color: #ffffff !important;
    width: 1.25em;
    height: 1.25em;
}

.hero--sdk .hero__cta .btn--outline {
    background: transparent;
    border: 2px solid var(--color-border, #27272a);
    color: var(--color-text-soft, #e4e4e7);
}

.hero--sdk .hero__cta .btn--outline:hover {
    border-color: var(--color-primary, #f7931a);
    color: var(--color-primary, #f7931a);
}

.hero--sdk .hero__media {
    background: transparent !important;
}

.hero--sdk .hero__youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-border, #27272a);
    background: transparent !important;
}

.hero--sdk .hero__youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 968px) {
    .hero--sdk {
        padding: 3rem 0;
    }

    .hero--sdk .hero__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero--sdk .hero__grid--video-right .hero__content {
        order: 1;
    }

    .hero--sdk .hero__grid--video-right .hero__media {
        order: 2;
    }
}

/* === HERO VARIANT 10 (legal) === */
/* Hero Legal - Minimal text-only for legal pages */
.hero--legal {
    background: linear-gradient(180deg, #0a0a0f 0%, #12121a 100%);
    padding: 4rem 0 3rem;
    text-align: center;
}

.hero--legal .hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.hero--legal .hero__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary, #f7931a);
    margin-bottom: 1rem;
}

.hero--legal .hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.hero--legal .hero__subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.hero--legal .hero__meta {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* === HERO VARIANT 11 (modular-dark) === */
/* HERO: MODULAR - Base */
.hero--modular {
    position: relative;
    padding: 8rem 0 5rem;
    background: transparent;
    overflow: hidden;
}

.hero--modular[data-bg="alt"] { background: transparent; }
.hero--modular[data-bg="dark"] { background: transparent; }

/* Background layers - hidden by default */
.hero--modular .hero__bg-image,
.hero--modular .hero__bg-video,
.hero--modular .hero__bg-slideshow,
.hero--modular .hero__overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Activate backgrounds via data-bg */
.hero--modular[data-bg="image"] .hero__bg-image {
    display: block;
    background-size: cover;
    background-position: center;
}

.hero--modular[data-bg="video"] .hero__bg-video {
    display: block;
}

.hero--modular[data-bg="video"] .hero__bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--modular[data-bg="slideshow"] .hero__bg-slideshow {
    display: block;
}

.hero--modular[data-bg="image"] .hero__overlay,
.hero--modular[data-bg="video"] .hero__overlay,
.hero--modular[data-bg="slideshow"] .hero__overlay {
    display: block;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.hero--modular .container {
    position: relative;
    z-index: 2;
}

/* Grid layout - default centered */
.hero--modular .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero--modular .hero__content {
    max-width: 800px;
}

.hero--modular .hero__media {
    display: none;
}

/* Split layout */
.hero--modular[data-layout="split"] .hero__grid,
.hero--modular[data-layout="split-reverse"] .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
}

.hero--modular[data-layout="split"] .hero__media,
.hero--modular[data-layout="split-reverse"] .hero__media {
    display: block;
}

/* Content styles */
.hero--modular .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--modular[data-bg="image"] .hero__eyebrow,
.hero--modular[data-bg="video"] .hero__eyebrow {
    color: var(--color-accent);
}

.hero--modular .hero__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--modular[data-bg="image"] .hero__title,
.hero--modular[data-bg="video"] .hero__title,
.hero--modular[data-bg="dark"] .hero__title {
    color: var(--color-white);
}

.hero--modular .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero--modular[data-bg="image"] .hero__subtitle,
.hero--modular[data-bg="video"] .hero__subtitle,
.hero--modular[data-bg="dark"] .hero__subtitle {
    color: rgba(255,255,255,0.9);
}

.hero--modular .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.hero--modular[data-layout="centered"] .hero__cta {
    justify-content: center;
}

.hero--modular .hero__cta .btn {
    min-height: 48px;
}

.hero--modular .hero__trust {
    display: flex;
    gap: 2rem;
}

.hero--modular[data-layout="centered"] .hero__trust {
    justify-content: center;
}

.hero--modular .hero__trust-item { text-align: center; }

.hero--modular .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero--modular[data-bg="image"] .hero__trust-number,
.hero--modular[data-bg="video"] .hero__trust-number,
.hero--modular[data-bg="dark"] .hero__trust-number {
    color: var(--color-white);
}

.hero--modular .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.hero--modular[data-bg="image"] .hero__trust-label,
.hero--modular[data-bg="video"] .hero__trust-label,
.hero--modular[data-bg="dark"] .hero__trust-label {
    color: rgba(255,255,255,0.7);
}

/* Media elements - hidden by default */
.hero--modular .hero__media-image,
.hero--modular .hero__media-gallery,
.hero--modular .hero__media-slideshow,
.hero--modular .hero__media-video {
    display: none;
}

/* Activate media via data-media */
.hero--modular[data-media="image"] .hero__media-image {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="gallery"] .hero__media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero--modular[data-media="gallery"] .hero__media-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.hero--modular[data-media="slideshow"] .hero__media-slideshow {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="video"] .hero__media-video {
    display: block;
}

.hero--modular[data-media="video"] .hero__media-video video {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Slideshow styles */
.hero__media-slides {
    position: relative;
    aspect-ratio: 4 / 3;
}

.hero__media-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero__media-slide.is-active {
    opacity: 1;
}

.hero__media-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

/* Background slideshow */
.hero__bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero__bg-slide.is-active {
    opacity: 1;
}

@media (min-width: 992px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__content {
        order: 2;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__media {
        order: 1;
    }
}

@media (max-width: 991px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        text-align: center;
    }
    
    .hero--modular[data-layout="split"] .hero__cta,
    .hero--modular[data-layout="split-reverse"] .hero__cta {
        justify-content: center;
    }
    
    .hero--modular[data-layout="split"] .hero__trust,
    .hero--modular[data-layout="split-reverse"] .hero__trust {
        justify-content: center;
    }
}

/* === HERO VARIANT 12 (audit-form) === */
.hero--terminal {
    position: relative;
    background: transparent;
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* Hero Content */
.hero--terminal .hero__content--centered {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero--terminal .hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hero--terminal .hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

/* Terminal Card Base - Chrome Window Style */
.hero__terminal-form {
    position: relative;
    max-width: 600px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 13, 33, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero__terminal-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #7c3aed, #f472b6);
}

/* Terminal Header */
.hero__terminal-form .terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}

/* Chrome Window Dots */
.hero__terminal-form .terminal-dots {
    display: flex;
    gap: 8px;
}

.hero__terminal-form .terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero__terminal-form .terminal-dot.red {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 95, 86, 0.4);
}

.hero__terminal-form .terminal-dot.yellow {
    background: linear-gradient(180deg, #ffd93d 0%, #ffcc2e 50%, #f5bd1f 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 189, 46, 0.4);
}

.hero__terminal-form .terminal-dot.green {
    background: linear-gradient(180deg, #6bcb77 0%, #4ade80 50%, #3dd672 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(39, 202, 64, 0.4);
}

/* Terminal Title */
.hero__terminal-form .terminal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero__terminal-form .terminal-title-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Terminal Badge */
.hero__terminal-form .terminal-badge {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    background: rgba(0, 212, 255, 0.15);
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #00d4ff;
}

/* Terminal Content */
.hero__terminal-form .terminal-content {
    padding: 24px;
}

/* Audit Form */
.hero__audit-form {
    width: 100%;
}

.hero__form-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.hero__input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(6, 13, 33, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hero__input-wrapper:focus-within {
    border-color: #00d4ff;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}

.hero__input-prefix {
    padding: 0 0 0 16px;
    color: #00d4ff;
    font-family: ui-monospace, monospace;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}

.hero__url-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 16px 16px 16px 4px;
    color: #fff;
    font-size: 1rem;
    font-family: ui-monospace, monospace;
    outline: none;
}

.hero__url-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.hero__submit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    white-space: nowrap;
}

.hero__submit-btn svg {
    transition: transform 0.3s ease;
}

.hero__submit-btn:hover svg {
    transform: translateX(4px);
}

.hero__form-note {
    margin-top: 12px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Trust Badges */
.hero__trust-badges {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hero__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.hero__badge svg {
    color: #00d4ff;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .hero__form-row {
        flex-direction: column;
    }

    .hero__submit-btn {
        width: 100%;
        justify-content: center;
    }

    .hero__trust-badges {
        gap: 1rem;
    }

    .hero__badge {
        font-size: 0.8rem;
    }
}

/* Space Dust Particles */
.space-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}


/* === HERO VARIANT 13 (modular-badge) === */
/* HERO: MODULAR - Base */
.hero--modular {
    position: relative;
    padding: 8rem 0 5rem;
    background: transparent;
    overflow: hidden;
}

.hero--modular[data-bg="alt"] { background: transparent; }
.hero--modular[data-bg="dark"] { background: transparent; }

/* Background layers - hidden by default */
.hero--modular .hero__bg-image,
.hero--modular .hero__bg-video,
.hero--modular .hero__bg-slideshow,
.hero--modular .hero__overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Activate backgrounds via data-bg */
.hero--modular[data-bg="image"] .hero__bg-image {
    display: block;
    background-size: cover;
    background-position: center;
}

.hero--modular[data-bg="video"] .hero__bg-video {
    display: block;
}

.hero--modular[data-bg="video"] .hero__bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--modular[data-bg="slideshow"] .hero__bg-slideshow {
    display: block;
}

.hero--modular[data-bg="image"] .hero__overlay,
.hero--modular[data-bg="video"] .hero__overlay,
.hero--modular[data-bg="slideshow"] .hero__overlay {
    display: block;
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
}

.hero--modular .container {
    position: relative;
    z-index: 2;
}

/* Grid layout - default centered */
.hero--modular .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero--modular .hero__content {
    max-width: 800px;
}

.hero--modular .hero__media {
    display: none;
}

/* Split layout */
.hero--modular[data-layout="split"] .hero__grid,
.hero--modular[data-layout="split-reverse"] .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
}

.hero--modular[data-layout="split"] .hero__media,
.hero--modular[data-layout="split-reverse"] .hero__media {
    display: block;
}

/* === BADGE VARIANT ADDITIONS === */
.hero__badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: rgba(var(--color-primary-rgb, 16, 185, 129), 0.15);
    border: 1px solid rgba(var(--color-primary-rgb, 16, 185, 129), 0.3);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero__badge:empty { display: none; }

.hero--modular[data-bg="dark"] .hero__badge {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--color-accent, #00d4ff);
}

.hero__title-accent {
    display: block;
    color: var(--color-primary);
}

.hero--modular[data-bg="dark"] .hero__title-accent {
    color: var(--color-accent, #00d4ff);
}

.hero__price-note {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
}

.hero__price-note:empty { display: none; }

.hero--modular[data-bg="dark"] .hero__price-note {
    color: rgba(255, 255, 255, 0.6);
}
/* === END BADGE VARIANT ADDITIONS === */

/* Content styles */
.hero--modular .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--modular[data-bg="image"] .hero__eyebrow,
.hero--modular[data-bg="video"] .hero__eyebrow {
    color: var(--color-accent);
}

.hero--modular .hero__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.hero--modular[data-bg="image"] .hero__title,
.hero--modular[data-bg="video"] .hero__title,
.hero--modular[data-bg="dark"] .hero__title {
    color: var(--color-white, #fff);
}

.hero--modular .hero__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero--modular[data-bg="image"] .hero__subtitle,
.hero--modular[data-bg="video"] .hero__subtitle,
.hero--modular[data-bg="dark"] .hero__subtitle {
    color: rgba(255,255,255,0.9);
}

.hero--modular .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero--modular[data-layout="centered"] .hero__cta {
    justify-content: center;
}

.hero--modular .hero__cta .btn {
    min-height: 48px;
}

.hero--modular .hero__trust {
    display: flex;
    gap: 2rem;
    margin-top: 2.5rem;
}

.hero--modular[data-layout="centered"] .hero__trust {
    justify-content: center;
}

.hero--modular .hero__trust-item { text-align: center; }

.hero--modular .hero__trust-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hero--modular[data-bg="image"] .hero__trust-number,
.hero--modular[data-bg="video"] .hero__trust-number,
.hero--modular[data-bg="dark"] .hero__trust-number {
    color: var(--color-white);
}

.hero--modular .hero__trust-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.hero--modular[data-bg="image"] .hero__trust-label,
.hero--modular[data-bg="video"] .hero__trust-label,
.hero--modular[data-bg="dark"] .hero__trust-label {
    color: rgba(255,255,255,0.7);
}

/* Media elements - hidden by default */
.hero--modular .hero__media-image,
.hero--modular .hero__media-gallery,
.hero--modular .hero__media-slideshow,
.hero--modular .hero__media-video {
    display: none;
}

/* Activate media via data-media */
.hero--modular[data-media="image"] .hero__media-image {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="gallery"] .hero__media-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.hero--modular[data-media="gallery"] .hero__media-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.hero--modular[data-media="slideshow"] .hero__media-slideshow {
    display: block;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.hero--modular[data-media="video"] .hero__media-video {
    display: block;
}

.hero--modular[data-media="video"] .hero__media-video video {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

/* Slideshow styles */
.hero__media-slides {
    position: relative;
    aspect-ratio: 4 / 3;
}

.hero__media-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero__media-slide.is-active {
    opacity: 1;
}

.hero__media-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
}

/* Background slideshow */
.hero__bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero__bg-slide.is-active {
    opacity: 1;
}

@media (min-width: 992px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__content {
        order: 2;
    }
    
    .hero--modular[data-layout="split-reverse"] .hero__media {
        order: 1;
    }
}

@media (max-width: 991px) {
    .hero--modular[data-layout="split"] .hero__grid,
    .hero--modular[data-layout="split-reverse"] .hero__grid {
        text-align: center;
    }
    
    .hero--modular[data-layout="split"] .hero__cta,
    .hero--modular[data-layout="split-reverse"] .hero__cta {
        justify-content: center;
    }
    
    .hero--modular[data-layout="split"] .hero__trust,
    .hero--modular[data-layout="split-reverse"] .hero__trust {
        justify-content: center;
    }
}

/* === HERO VARIANT 14 (split-terminal) === */
/* Hero Split Terminal */
.hero-split-terminal {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 120px 0 80px 0; /* More top padding for nav */
  min-height: 600px;
  position: relative;
}

/* Space dust effect for hero */
.hero-split-terminal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.sr-hero-split {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.sr-hero-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 20px;
}

.sr-hero-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sr-hero-h1 {
  font-size: 2.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
}

.sr-hero-subtitle {
  font-size: 1.125rem;
  color: #94a3b8;
  line-height: 1.7;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Terminal Frame - matches sr-widget-frame chrome card */
.sr-terminal-frame {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Domain Frame - left side terminal */
.sr-domain-frame {
  /* Inherits from .sr-terminal-frame */
}

/* Scan Terminal - right side animation terminal */
.sr-scan-terminal {
  margin-top: 1rem; /* Breathing room */
}

.sr-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 15px 15px 0 0;
}

.sr-terminal-dots {
  display: flex;
  gap: 8px;
}

.sr-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sr-dot.red {
  background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(255, 95, 86, 0.4);
}
.sr-dot.yellow {
  background: linear-gradient(180deg, #ffcc4d 0%, #f5ba3c 50%, #e5aa2c 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(255, 189, 46, 0.4);
}
.sr-dot.green {
  background: linear-gradient(180deg, #4ade80 0%, #3ace70 50%, #2abe60 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 8px rgba(40, 205, 65, 0.4);
}

.sr-terminal-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Domain Input */
.sr-domain-bar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
}

.sr-prompt {
  color: #34d399;
  font-weight: 600;
  font-size: 14px;
}

.sr-cmd {
  color: #60a5fa;
  font-size: 14px;
}

.sr-domain-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 14px;
  font-family: inherit;
  padding: 8px 12px;
  outline: none;
  transition: all 0.2s;
}

.sr-domain-input:focus {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(15, 23, 42, 0.6);
}

.sr-domain-input::placeholder {
  color: #64748b;
}

.sr-domain-submit {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.sr-domain-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Terminal Body */
.sr-terminal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Terminal Content - Fixed height, plain text */
.sr-terminal-content {
  height: 200px;
  overflow: hidden;
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.sr-term-line {
  margin-bottom: 6px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease-out;
}

.sr-term-line.visible {
  opacity: 1;
  transform: translateX(0);
}

.sr-term-line.cmd { color: #60a5fa; }
.sr-term-line.error { color: #f87171; }
.sr-term-line.success { color: #34d399; }
.sr-term-line.warning { color: #fbbf24; font-weight: 500; }

/* Metric Cards */
.sr-terminal-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sr-metric-card {
  background: rgba(51, 65, 85, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  padding: 14px;
}

.sr-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sr-metric-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sr-metric-value {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f1f5f9;
}

.sr-metric-track {
  height: 5px;
  background: rgba(100, 116, 139, 0.25);
  border-radius: 3px;
  overflow: hidden;
}

.sr-metric-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-metric-fill.perf { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.sr-metric-fill.seo { background: linear-gradient(90deg, #a78bfa, #8b5cf6); }
.sr-metric-fill.tech { background: linear-gradient(90deg, #34d399, #10b981); }
.sr-metric-fill.cont { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

/* Responsive */
@media (max-width: 900px) {
  .hero-split-terminal {
    padding: 100px 0 60px 0;
  }
  .sr-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sr-hero-left {
    padding-top: 0;
  }
  .sr-hero-h1 {
    font-size: 2rem;
  }
}

@media (max-width: 500px) {
  .sr-terminal-metrics {
    grid-template-columns: 1fr;
  }
}

/* === HERO VARIANT 15 (split-media) === */
/* HERO: SPLIT-MEDIA */
.hero--split-media {
    padding: var(--section-padding-y, 3rem) 0;
    background: var(--color-bg);
}

.hero--split-media[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.hero--split-media[data-bg="dark"] .hero__title,
.hero--split-media[data-bg="dark"] .hero__subtitle,
.hero--split-media[data-bg="dark"] .hero__eyebrow,
.hero--split-media[data-bg="dark"] .hero__rating-text {
    color: var(--color-white);
}

.hero--split-media[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.hero--split-media[data-bg="gradient"] {
    background: linear-gradient(135deg, #8bc73f 0%, #0caae6 100%) !important;
}

.hero--split-media[data-bg="gradient"] .hero__title,
.hero--split-media[data-bg="gradient"] .hero__subtitle,
.hero--split-media[data-bg="gradient"] .hero__eyebrow,
.hero--split-media[data-bg="gradient"] .hero__rating-text {
    color: var(--color-white);
}

/* Outline button on gradient hero — white background, green text, green hover */
.hero--split-media[data-bg="gradient"] .btn--outline {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--color-primary) !important;
    min-width: 0;
}
.hero--split-media[data-bg="gradient"] .btn--outline:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
}
.hero--split-media[data-bg="gradient"] .btn--outline .btn__icon {
    color: var(--color-primary);
}
.hero--split-media[data-bg="gradient"] .btn--outline:hover .btn__icon {
    color: #ffffff;
}

/* Match button sizes so both are equal */
.hero--split-media .hero__cta .btn {
    min-width: 180px;
    justify-content: center;
}

.hero--split-media .hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 60vh;
}

.hero--split-media .hero__content {
    max-width: 600px;
}

.hero--split-media .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--split-media .hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--color-text);
}

.hero--split-media .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 2rem;
}

.hero--split-media .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero--split-media .hero__trust {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero--split-media .hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero--split-media .hero__stars {
    color: #fbbf24;
    font-size: 1.125rem;
}

.hero--split-media .hero__rating-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Media slot - square image container */
.hero--split-media .hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,0.15);
}

/* When media slot contains an image */
.hero--split-media .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: block;
}

/* When media slot contains an embed/widget (not image-hover) */
.hero--split-media .hero__media > div:not(.image-hover) {
    width: 100%;
    padding: 1.5rem;
}

/* image-hover div injected via HERO.MEDIA token — must fill container edge to edge */
.hero--split-media .hero__media .image-hover {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
}
.hero--split-media .hero__media .image-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* SchemaReports widget frames */
.hero--split-media .hero__media .sr-widget-frame {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* iframes in media slot */
.hero--split-media .hero__media iframe {
    width: 100%;
    min-height: 350px;
    border: none;
    border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
    .hero--split-media .hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        min-height: auto;
        padding: 2rem 0;
    }
    
    .hero--split-media .hero__media {
        order: -1;
        aspect-ratio: 1 / 1;
        width: 100%;
    }
    
    .hero--split-media .hero__cta {
        flex-direction: column;
    }
    
    .hero--split-media .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === HERO VARIANT 16 (embed-split-left) === */
/* HERO: EMBED-SPLIT-LEFT */
.hero--embed-left {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.hero--embed-left[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.hero--embed-left[data-bg="dark"] .hero__title,
.hero--embed-left[data-bg="dark"] .hero__subtitle,
.hero--embed-left[data-bg="dark"] .hero__eyebrow,
.hero--embed-left[data-bg="dark"] .hero__rating-text {
    color: var(--color-white);
}

.hero--embed-left[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.hero--embed-left[data-bg="gradient"] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.hero--embed-left[data-bg="gradient"] .hero__title,
.hero--embed-left[data-bg="gradient"] .hero__subtitle,
.hero--embed-left[data-bg="gradient"] .hero__eyebrow,
.hero--embed-left[data-bg="gradient"] .hero__rating-text {
    color: var(--color-white);
}

.hero--embed-left .hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 70vh;
}

.hero--embed-left .hero__grid--reverse {
    direction: ltr;
}

.hero--embed-left .hero__content {
    max-width: 600px;
}

.hero--embed-left .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--embed-left .hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--color-text);
}

.hero--embed-left .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 2rem;
}

.hero--embed-left .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero--embed-left .hero__trust {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero--embed-left .hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero--embed-left .hero__stars {
    color: #fbbf24;
    font-size: 1.125rem;
}

.hero--embed-left .hero__rating-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Embed wrapper */
.hero--embed-left .hero__embed-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero--embed-left .hero__embed {
    width: 100%;
    max-width: 500px;
    padding: 1.5rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.hero--embed-left[data-bg="dark"] .hero__embed {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* iframe handling */
.hero--embed-left .hero__embed iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    border-radius: var(--radius-md);
}

/* Form styling within embed */
.hero--embed-left .hero__embed form {
    width: 100%;
}

@media (max-width: 768px) {
    .hero--embed-left .hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        min-height: auto;
        padding: 2rem 0;
    }
    
    .hero--embed-left .hero__embed-wrap {
        order: 1;
    }
    
    .hero--embed-left .hero__content {
        order: 2;
    }
    
    .hero--embed-left .hero__cta {
        flex-direction: column;
    }
    
    .hero--embed-left .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* === HERO VARIANT 17 (embed-split-right) === */
/* HERO: EMBED-SPLIT-RIGHT */
.hero--embed-right {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.hero--embed-right[data-bg="dark"] {
    background: var(--color-bg-dark);
}

.hero--embed-right[data-bg="dark"] .hero__title,
.hero--embed-right[data-bg="dark"] .hero__subtitle,
.hero--embed-right[data-bg="dark"] .hero__eyebrow,
.hero--embed-right[data-bg="dark"] .hero__rating-text,
.hero--embed-right[data-bg="dark"] .hero__feature span {
    color: var(--color-white);
}

.hero--embed-right[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.hero--embed-right[data-bg="gradient"] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.hero--embed-right[data-bg="gradient"] .hero__title,
.hero--embed-right[data-bg="gradient"] .hero__subtitle,
.hero--embed-right[data-bg="gradient"] .hero__eyebrow,
.hero--embed-right[data-bg="gradient"] .hero__rating-text,
.hero--embed-right[data-bg="gradient"] .hero__feature span {
    color: var(--color-white);
}

.hero--embed-right .hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 70vh;
}

.hero--embed-right .hero__content {
    max-width: 600px;
}

.hero--embed-right .hero__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero--embed-right .hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--color-text);
}

.hero--embed-right .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 2rem;
}

.hero--embed-right .hero__features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.hero--embed-right .hero__feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero--embed-right .hero__feature-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.hero--embed-right .hero__feature span {
    font-size: 1rem;
    color: var(--color-text);
}

.hero--embed-right .hero__trust {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero--embed-right .hero__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hero--embed-right .hero__stars {
    color: #fbbf24;
    font-size: 1.125rem;
}

.hero--embed-right .hero__rating-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* Embed card wrapper */
.hero--embed-right .hero__embed-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero--embed-right .hero__embed-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.hero--embed-right[data-bg="dark"] .hero__embed-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero--embed-right .hero__embed-header {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
}

.hero--embed-right .hero__embed-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.hero--embed-right[data-bg="dark"] .hero__embed-title {
    color: var(--color-white);
}

.hero--embed-right .hero__embed-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.hero--embed-right[data-bg="dark"] .hero__embed-desc {
    color: rgba(255, 255, 255, 0.7);
}

.hero--embed-right .hero__embed {
    padding: 1.5rem;
}

/* iframe handling */
.hero--embed-right .hero__embed iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .hero--embed-right .hero__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        min-height: auto;
        padding: 2rem 0;
    }
    
    .hero--embed-right .hero__embed-wrap {
        order: -1;
    }
}

/* === HERO VARIANT 18 (embed-centered) === */
.hero--embed-centered {
    position: relative;
    padding: calc(72px + 4rem) 0 4rem;
    background: var(--color-bg);
    overflow: hidden;
}
.hero--embed-centered .container { position: relative; z-index: 1; }
.hero--embed-centered .hero__stack { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.hero--embed-centered .hero__content { max-width: 700px; }
.hero--embed-centered .hero__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--color-text); margin: 0 0 1rem; }
.hero--embed-centered .hero__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; }
.hero--embed-centered .hero__embed-wrap { width: 100%; max-width: 700px; }

/* === LEGAL-CONTENT VARIANT 1 (default) === */
/* Legal Content Block - Long-form prose styling */
.legal-content {
    padding: 4rem 0;
    background: var(--color-bg, #ffffff);
}

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

.legal-content__body {
    color: var(--color-text, #1a1a2e);
    font-size: 1rem;
    line-height: 1.8;
}

/* Prose typography */
.legal-content__body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
    margin: 2.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
}

.legal-content__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content__body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
    margin: 2rem 0 0.75rem;
}

.legal-content__body p {
    margin: 0 0 1.25rem;
}

.legal-content__body ul,
.legal-content__body ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

.legal-content__body li {
    margin-bottom: 0.5rem;
}

.legal-content__body strong {
    font-weight: 600;
    color: var(--color-text, #1a1a2e);
}

.legal-content__body a {
    color: var(--color-primary, #f7931a);
    text-decoration: underline;
}

.legal-content__body a:hover {
    color: var(--color-primary-dark, #d97706);
}

/* Contact info styling */
.legal-content__body address {
    font-style: normal;
    background: var(--color-bg-alt, #f5f5f5);
    padding: 1.5rem;
    border-radius: var(--radius-md, 8px);
    margin: 1.5rem 0;
}

@media (max-width: 768px) {
    .legal-content {
        padding: 3rem 0;
    }
    
    .legal-content__body h2 {
        font-size: 1.375rem;
    }
}

/* === MODAL VARIANT 1 (default) === */
/* ==========================================
   MODAL BLOCK — v1 (standard)
   Triggered via: data-modal-trigger="modal-id"
   ========================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: modalFadeIn 0.2s ease;
}

.modal-overlay.is-open {
  display: flex;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: var(--color-white, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 2.5rem;
  animation: modalSlideUp 0.25s ease;
}

@keyframes modalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--color-neutral-100, #f3f4f6);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutral-600, #4b5563);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--color-neutral-200, #e5e7eb);
  color: var(--color-neutral-900, #111827);
}

.modal-header {
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.modal-title {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--color-neutral-900, #111827);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.modal-subtitle {
  font-size: 0.95rem;
  color: var(--color-neutral-500, #6b7280);
  margin: 0;
  line-height: 1.5;
}

.modal-body {
  font-size: 0.95rem;
  color: var(--color-neutral-700, #374151);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.modal-body:empty { display: none; }

.modal-embed {
  margin-bottom: 1.5rem;
}

.modal-embed:empty { display: none; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-neutral-100, #f3f4f6);
}

.modal-footer:has(.modal-cta[href=""]),
.modal-footer:has(.modal-cta:empty) {
  display: none;
}

.modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.modal-cta:hover {
  background: var(--color-primary-dark, #1d4ed8);
  transform: translateY(-1px);
}

/* Scrollbar inside modal */
.modal-box::-webkit-scrollbar { width: 6px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: var(--color-neutral-200, #e5e7eb); border-radius: 3px; }

/* Prevent body scroll when modal open */
body.modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .modal-box {
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
    max-height: 95vh;
  }
}

/* === NAV VARIANT 1 (standard) === */
/* ===========================================
   NAV STANDARD - With Accessibility Enhancements
   =========================================== */

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.nav--standard {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
}

.nav--standard .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 2rem;
}

/* Logo */
.nav--standard .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.nav--standard .nav__logo:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--standard .nav__logo-img {
    height: 40px;
    width: auto;
}
.nav--standard .nav__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Desktop Menu */
.nav--standard .nav__menu {
    display: none;
    align-items: center;
    gap: 2rem;
}
.nav--standard .nav__link {
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0;
    position: relative;
    transition: var(--transition);
}
.nav--standard .nav__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--standard .nav__link:hover,
.nav--standard .nav__link--active {
    color: var(--color-primary);
}
.nav--standard .nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: var(--transition);
}
.nav--standard .nav__link:hover::after {
    width: 100%;
}

/* Actions */
.nav--standard .nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav--standard .nav__phone {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.nav--standard .nav__phone:hover {
    color: var(--color-primary);
}
.nav--standard .nav__phone:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--standard .nav__phone-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.nav--standard .nav__actions .btn {
    display: none;
}

/* Mobile Toggle */
.nav--standard .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.nav--standard .nav__toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.nav--standard .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}
.nav--standard .nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav--standard .nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.nav--standard .nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav--standard .nav__mobile-menu {
    display: none;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--color-border);
}
.nav--standard .nav__mobile-menu.is-open {
    display: block;
}
.nav--standard .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.nav--standard .nav__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--standard .nav__mobile-link:hover,
.nav--standard .nav__mobile-link:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary);
    outline: none;
}
.nav--standard .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}
.nav--standard .nav__mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* =========== RESPONSIVE =========== */

@media (min-width: 768px) {
    .nav--standard .nav__menu {
        display: flex;
    }
    .nav--standard .nav__phone {
        display: flex;
    }
    .nav--standard .nav__toggle {
        display: none;
    }
    .nav--standard .nav__mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .nav--standard .nav__actions .btn {
        display: inline-flex;
    }
}

/* === NAV VARIANT 2 (split) === */
/* ===========================================
   NAV SPLIT - Logo left, links centered, CTA right
   =========================================== */

/* Override fixed nav body margin - sticky nav doesn't need offset */
body {
    margin-top: 0 !important;
}

.nav--split {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.nav--split .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

/* Logo */
.nav--split .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex: 0 0 auto;
}
.nav--split .nav__logo-img {
    height: 40px;
    width: auto;
}
.nav--split .nav__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Centered Menu */
.nav--split .nav__menu {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex: 1 1 auto;
}
.nav--split .nav__link {
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.nav--split .nav__link:hover {
    color: var(--color-primary);
}

/* Actions (right side) */
.nav--split .nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

/* CTA */
.nav--split .nav__cta {
    display: none;
}

/* Mobile Toggle */
.nav--split .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.nav--split .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}
.nav--split .nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav--split .nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.nav--split .nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav--split .nav__mobile-menu {
    display: none;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--color-border);
}
.nav--split .nav__mobile-menu.is-open {
    display: block;
}
.nav--split .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.nav--split .nav__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--split .nav__mobile-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}
.nav--split .nav__mobile-actions {
    padding: 0 1rem;
}

/* =========== RESPONSIVE =========== */

@media (min-width: 768px) {
    .nav--split .nav__menu {
        display: flex;
    }
    .nav--split .nav__cta {
        display: inline-flex;
    }
    .nav--split .nav__toggle {
        display: none;
    }
    .nav--split .nav__mobile-menu {
        display: none !important;
    }
}


/* === NAV VARIANT 3 (centered) === */
/* ===========================================
   NAV CENTERED - Logo centered, links below
   =========================================== */

.nav--centered {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.nav--centered .nav__inner {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

/* Top Row */
.nav--centered .nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

/* Logo - centered */
.nav--centered .nav__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
}
.nav--centered .nav__logo-img {
    height: 50px;
    width: auto;
}

/* Phone */
.nav--centered .nav__phone {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.nav--centered .nav__phone:hover {
    color: var(--color-primary);
}
.nav--centered .nav__phone-icon {
    flex-shrink: 0;
}

/* CTA */
.nav--centered .nav__cta {
    display: none;
    margin-left: auto;
}

/* Desktop Menu */
.nav--centered .nav__menu {
    display: none;
    justify-content: center;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.nav--centered .nav__link {
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: var(--transition);
}
.nav--centered .nav__link:hover {
    color: var(--color-primary);
}

/* Mobile Toggle */
.nav--centered .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
}
.nav--centered .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}
.nav--centered .nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav--centered .nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.nav--centered .nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav--centered .nav__mobile-menu {
    display: none;
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--color-border);
}
.nav--centered .nav__mobile-menu.is-open {
    display: block;
}
.nav--centered .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.nav--centered .nav__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition);
}
.nav--centered .nav__mobile-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}
.nav--centered .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}
.nav--centered .nav__mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

/* =========== RESPONSIVE =========== */

@media (min-width: 768px) {
    .nav--centered .nav__top {
        position: relative;
        margin-bottom: 0;
    }
    .nav--centered .nav__phone {
        display: flex;
    }
    .nav--centered .nav__cta {
        display: inline-flex;
    }
    .nav--centered .nav__menu {
        display: flex;
    }
    .nav--centered .nav__toggle {
        display: none;
    }
    .nav--centered .nav__mobile-menu {
        display: none !important;
    }
}

/* === NAV VARIANT 4 (minimal) === */
/* ===========================================
   NAV MINIMAL - Logo + hamburger always
   =========================================== */

.nav--minimal {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.nav--minimal .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

/* Logo */
.nav--minimal .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.nav--minimal .nav__logo-img {
    height: 40px;
    width: auto;
}
.nav--minimal .nav__logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Toggle - always visible */
.nav--minimal .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: var(--color-bg-alt);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.nav--minimal .nav__toggle:hover {
    background: var(--color-border);
}
.nav--minimal .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}

/* Drawer */
.nav--minimal .nav__drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: var(--color-bg);
    box-shadow: var(--shadow-xl);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}
.nav--minimal .nav__drawer.is-open {
    right: 0;
}

.nav--minimal .nav__drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}
.nav--minimal .nav__drawer-header .nav__logo-img {
    height: 36px;
}
.nav--minimal .nav__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.nav--minimal .nav__drawer-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.nav--minimal .nav__drawer-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    overflow-y: auto;
}
.nav--minimal .nav__drawer-link {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.nav--minimal .nav__drawer-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

.nav--minimal .nav__drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.nav--minimal .nav__drawer-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--minimal .nav__drawer-phone:hover {
    background: var(--color-border);
}

/* Overlay */
.nav--minimal .nav__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav--minimal .nav__overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* === NAV VARIANT 5 (transparent) === */
/* ===========================================
   NAV TRANSPARENT - Overlays hero, solid on scroll
   =========================================== */

.nav--transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state */
.nav--transparent.is-scrolled {
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
}

.nav--transparent .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    transition: padding 0.3s ease;
}
.nav--transparent.is-scrolled .nav__inner {
    padding: 0.75rem 0;
}

/* Logo - Icon + Text */
.nav--transparent .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.nav--transparent .nav__logo:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--transparent .nav__logo-icon {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    transition: height 0.3s ease, width 0.3s ease;
}
.nav--transparent.is-scrolled .nav__logo-icon {
    height: 32px;
    width: 32px;
}
.nav--transparent .nav__logo-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--transition);
    letter-spacing: -0.02em;
}
.nav--transparent.is-scrolled .nav__logo-text {
    color: var(--color-text);
    text-shadow: none;
}

/* Desktop Menu */
.nav--transparent .nav__menu {
    display: none;
    align-items: center;
    gap: 2rem;
}
.nav--transparent .nav__link {
    color: white;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--transition);
}
.nav--transparent .nav__link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--transparent.is-scrolled .nav__link {
    color: var(--color-text-secondary);
    text-shadow: none;
}
.nav--transparent .nav__link:hover {
    color: var(--color-primary-light);
}
.nav--transparent.is-scrolled .nav__link:hover {
    color: var(--color-primary);
}

/* Actions */
.nav--transparent .nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav--transparent .nav__phone {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--transition);
}
.nav--transparent .nav__phone:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.nav--transparent.is-scrolled .nav__phone {
    color: var(--color-text);
    text-shadow: none;
}
.nav--transparent .nav__phone:hover {
    color: var(--color-primary-light);
}
.nav--transparent .nav__phone-icon {
    flex-shrink: 0;
}
.nav--transparent .nav__actions .btn {
    display: none;
}

/* Mobile Toggle - BUG13-FIX: 44px touch target */
.nav--transparent .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.nav--transparent .nav__toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.nav--transparent .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    transition: var(--transition);
}
.nav--transparent.is-scrolled .nav__toggle span {
    background: var(--color-text);
}
.nav--transparent .nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav--transparent .nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.nav--transparent .nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav--transparent .nav__mobile-menu {
    display: none;
    padding: 1rem 0 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.nav--transparent .nav__mobile-menu.is-open {
    display: block;
}
.nav--transparent .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.nav--transparent .nav__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.nav--transparent .nav__mobile-link:hover,
.nav--transparent .nav__mobile-link:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-primary);
    outline: none;
}
.nav--transparent .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}
.nav--transparent .nav__mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    min-height: 44px;
}

/* =========== RESPONSIVE =========== */

@media (min-width: 768px) {
    .nav--transparent .nav__menu {
        display: flex;
    }
    .nav--transparent .nav__phone {
        display: flex;
    }
    .nav--transparent .nav__toggle {
        display: none;
    }
    .nav--transparent .nav__mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .nav--transparent .nav__actions .btn {
        display: inline-flex;
    }
}

/* === NAV VARIANT 7 (transparent-dropdowns) === */
/* ===========================================
   NAV TRANSPARENT DROPDOWNS
   Overlays hero, solid on scroll, with dropdowns
   =========================================== */

.nav--transparent-drop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav--transparent-drop.is-scrolled {
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
}

.nav--transparent-drop .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    transition: padding 0.3s ease;
}
.nav--transparent-drop.is-scrolled .nav__inner {
    padding: 0.75rem 0;
}

/* Logo - Icon + Text */
.nav--transparent-drop .nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.nav--transparent-drop .nav__logo-icon {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    transition: height 0.3s ease, width 0.3s ease;
}
.nav--transparent-drop.is-scrolled .nav__logo-icon {
    height: 32px;
    width: 32px;
}
.nav--transparent-drop .nav__logo-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--transition);
    letter-spacing: -0.02em;
}
.nav--transparent-drop.is-scrolled .nav__logo-text {
    color: var(--color-text);
    text-shadow: none;
}

/* Desktop Menu */
.nav--transparent-drop .nav__menu {
    display: none;
    align-items: center;
    gap: 1.75rem;
}
.nav--transparent-drop .nav__link {
    color: white;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.nav--transparent-drop.is-scrolled .nav__link {
    color: var(--color-text-secondary);
    text-shadow: none;
}
.nav--transparent-drop .nav__link:hover {
    color: var(--color-primary-light);
}
.nav--transparent-drop.is-scrolled .nav__link:hover {
    color: var(--color-primary);
}

/* Dropdown Arrow */
.nav--transparent-drop .nav__dropdown-arrow {
    transition: transform 0.2s ease;
}
.nav--transparent-drop .nav__dropdown:hover .nav__dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Container */
.nav--transparent-drop .nav__dropdown {
    position: relative;
}

/* Dropdown Menu */
.nav--transparent-drop .nav__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}
.nav--transparent-drop .nav__dropdown:hover .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown Items */
.nav--transparent-drop .nav__dropdown-item {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: var(--transition);
}
.nav--transparent-drop .nav__dropdown-item:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

/* Actions */
.nav--transparent-drop .nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav--transparent-drop .nav__actions .btn {
    display: none;
}

/* Mobile Toggle */
.nav--transparent-drop .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.nav--transparent-drop .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    transition: var(--transition);
}
.nav--transparent-drop.is-scrolled .nav__toggle span {
    background: var(--color-text);
}
.nav--transparent-drop .nav__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav--transparent-drop .nav__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.nav--transparent-drop .nav__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.nav--transparent-drop .nav__mobile-menu {
    display: none;
    padding: 1rem 0 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.nav--transparent-drop .nav__mobile-menu.is-open {
    display: block;
}
.nav--transparent-drop .nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.nav--transparent-drop .nav__mobile-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--transparent-drop .nav__mobile-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

/* Mobile Dropdown */
.nav--transparent-drop .nav__mobile-dropdown {
    display: flex;
    flex-direction: column;
}
.nav--transparent-drop .nav__mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--color-text);
    font-weight: 500;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--transparent-drop .nav__mobile-trigger:hover {
    background: var(--color-bg-alt);
}
.nav--transparent-drop .nav__mobile-trigger svg {
    transition: transform 0.2s ease;
}
.nav--transparent-drop .nav__mobile-dropdown.is-open .nav__mobile-trigger svg {
    transform: rotate(180deg);
}
.nav--transparent-drop .nav__mobile-submenu {
    display: none;
    padding-left: 1rem;
}
.nav--transparent-drop .nav__mobile-dropdown.is-open .nav__mobile-submenu {
    display: block;
}
.nav--transparent-drop .nav__mobile-submenu a {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.nav--transparent-drop .nav__mobile-submenu a:hover {
    background: var(--color-bg-alt);
    color: var(--color-primary);
}

.nav--transparent-drop .nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
}

/* =========== RESPONSIVE =========== */

@media (min-width: 768px) {
    .nav--transparent-drop .nav__menu {
        display: flex;
    }
    .nav--transparent-drop .nav__toggle {
        display: none;
    }
    .nav--transparent-drop .nav__mobile-menu {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .nav--transparent-drop .nav__actions .btn {
        display: inline-flex;
    }
}

/* === NAV VARIANT 8 (dynamic-mega) === */
/* DYNAMIC NAV v8.3 - Clean Nested Dropdowns */

.space-dust { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at 20% 20%, rgba(16,185,129,0.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(96,165,250,0.03) 0%, transparent 50%); }
.skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: var(--color-primary, #10B981); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0 0 8px 8px; font-weight: 600; z-index: 10000; transition: top 0.3s; }
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }

.main-nav--dynamic { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--color-bg, #060d21); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: none !important; transition: background 0.3s, box-shadow 0.3s; }
.main-nav--dynamic.nav-scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
.main-nav--dynamic .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 72px; }

.main-nav--dynamic .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.main-nav--dynamic .nav-logo-img { height: 36px; width: auto; }
.main-nav--dynamic .nav-logo-text { display: block !important; color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; white-space: nowrap; }

.main-nav--dynamic .nav-menu { display: none; flex: 1; justify-content: center; }
@media (min-width: 768px) { .main-nav--dynamic .nav-menu { display: flex; } }
.main-nav--dynamic .nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.main-nav--dynamic .nav-item { position: relative; }

.main-nav--dynamic .nav-link { display: flex; align-items: center; gap: 0.25rem; padding: 0.75rem 1rem; color: var(--color-text-secondary, #e2e8f0); text-decoration: none !important; font-size: 0.9375rem; font-weight: 500; border-radius: 8px; transition: color 0.2s, background 0.2s; background: none; border: none; cursor: pointer; font-family: inherit; }
.main-nav--dynamic .nav-link:hover, .main-nav--dynamic .nav-link:focus { color: #fff; background: rgba(255,255,255,0.05); }
.main-nav--dynamic .nav-link--active, .main-nav--dynamic .nav-item--active > .nav-link { color: var(--color-primary, #10B981); }
.main-nav--dynamic .nav-dropdown-arrow { width: 16px; height: 16px; transition: transform 0.2s; opacity: 0.7; }
.main-nav--dynamic .nav-item--open .nav-dropdown-arrow { transform: rotate(180deg); }

/* Dropdown Base */
.main-nav--dynamic .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 180px; background: #0a1628; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; box-shadow: 0 25px 80px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; pointer-events: none; transition: none; z-index: 9999; padding: 0.5rem; }
.main-nav--dynamic .nav-item--open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0s; }
.main-nav--dynamic .nav-dropdown-inner { position: relative; }

/* Simple list */
.main-nav--dynamic .nav-dropdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.main-nav--dynamic .nav-dropdown-item { display: block; padding: 0.625rem 1rem; color: var(--color-text-secondary, #e2e8f0); text-decoration: none !important; font-size: 0.9rem; border-radius: 6px; transition: background 0.15s, color 0.15s; }
.main-nav--dynamic .nav-dropdown-item:hover { background: rgba(16,185,129,0.15); color: var(--color-primary, #10B981); }
.main-nav--dynamic .nav-dropdown-item.nav-link--active { color: var(--color-primary, #10B981); }

/* Mega (with desc) */
.main-nav--dynamic .nav-dropdown--mega { min-width: 280px; max-width: 360px; padding: 0.75rem; }
.main-nav--dynamic .nav-dropdown-grid { display: flex; flex-direction: column; gap: 0.25rem; }
.main-nav--dynamic .nav-dropdown-item--desc { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; }
.main-nav--dynamic .nav-dropdown-item-label { font-weight: 600; color: #fff; font-size: 0.9rem; transition: color 0.2s; }
.main-nav--dynamic .nav-dropdown-item--desc:hover .nav-dropdown-item-label { color: var(--color-primary, #10B981); }
.main-nav--dynamic .nav-dropdown-item-desc { font-size: 0.8rem; color: #94a3b8; line-height: 1.4; }

/* ====== NESTED: Categories left, sub-pages fly out right ====== */
.main-nav--dynamic .nav-dropdown--nested { min-width: auto; width: auto; padding: 0.5rem; overflow: visible; }
.main-nav--dynamic .nav-dropdown--nested .nav-dropdown-inner { display: block; }

.nav-nested-categories { display: flex; flex-direction: column; gap: 0.125rem; min-width: 160px; }

.nav-nested-cat { position: relative; cursor: pointer; }
.nav-nested-cat-label { display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 1rem; color: var(--color-text-secondary, #e2e8f0); font-size: 0.9rem; font-weight: 500; border-radius: 6px; transition: background 0.15s, color 0.15s; }
.nav-nested-cat-desc { display: none; }
.nav-nested-cat-arrow { width: 12px; height: 12px; opacity: 0.4; flex-shrink: 0; }
.nav-nested-cat:hover .nav-nested-cat-label, .nav-nested-cat.is-active .nav-nested-cat-label { color: #fff; background: rgba(16,185,129,0.1); }
.nav-nested-cat.is-active .nav-nested-cat-arrow { opacity: 0.8; }

/* Fly-out panel to the right */
.nav-nested-panels { display: none; }
.nav-nested-panel { display: none; position: absolute; left: 100%; top: 0; min-width: 220px; background: #0a1628; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; box-shadow: 0 15px 50px rgba(0,0,0,0.5); padding: 0.5rem; margin-left: 4px; flex-direction: column; gap: 0.125rem; }
.nav-nested-cat.is-active .nav-nested-panel { display: flex; }

.nav-nested-link { display: block; padding: 0.625rem 1rem; border-radius: 6px; text-decoration: none !important; transition: background 0.15s; }
.nav-nested-link:hover { background: rgba(16,185,129,0.1); }
.nav-nested-link-label { font-weight: 500; color: #fff; font-size: 0.9rem; transition: color 0.15s; }
.nav-nested-link:hover .nav-nested-link-label { color: var(--color-primary, #10B981); }
.nav-nested-link-desc { display: none; }
.nav-nested-link.nav-link--active .nav-nested-link-label { color: var(--color-primary, #10B981); }

/* CTA */
.main-nav--dynamic .nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.main-nav--dynamic .nav-cta { display: none; padding: 0.625rem 1.25rem; background: var(--gradient-button, linear-gradient(135deg, #10b981 0%, #059669 100%)); color: #fff; text-decoration: none !important; font-size: 0.9375rem; font-weight: 600; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(16,185,129,0.3); }
@media (min-width: 768px) { .main-nav--dynamic .nav-cta { display: inline-flex; } }
.main-nav--dynamic .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(16,185,129,0.4); }

/* Mobile */
.main-nav--dynamic .nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; z-index: 1010; }
@media (min-width: 768px) { .main-nav--dynamic .nav-toggle { display: none; } }
.main-nav--dynamic .nav-toggle-bar { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 998; }
.nav-mobile-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; }
.nav-mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 85vw); background: var(--color-bg, #060d21); border-left: 1px solid rgba(255,255,255,0.1); transform: translateX(100%); transition: transform 0.3s; z-index: 999; display: flex; flex-direction: column; overflow: hidden; }
.nav-mobile-panel[aria-hidden="false"] { transform: translateX(0); }
.nav-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-mobile-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none !important; }
.nav-mobile-logo .nav-logo-img { height: 32px; width: auto; }
.nav-mobile-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; color: #e2e8f0; cursor: pointer; border-radius: 8px; }
.nav-mobile-close:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-mobile-close svg { width: 24px; height: 24px; }

.nav-mobile-menu { flex: 1; overflow-y: auto; padding: 1rem 0; }
.nav-mobile-list { list-style: none; margin: 0; padding: 0; }
.nav-mobile-item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-mobile-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 1.5rem; color: #fff; text-decoration: none !important; font-size: 1rem; font-weight: 500; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; }
.nav-mobile-link:hover { background: rgba(255,255,255,0.03); }
.nav-mobile-link--active { color: var(--color-primary, #10B981); }
.nav-mobile-arrow { width: 20px; height: 20px; transition: transform 0.2s; opacity: 0.6; }
.nav-mobile-link--open .nav-mobile-arrow { transform: rotate(180deg); }
.nav-mobile-dropdown { max-height: 0; overflow: hidden; background: rgba(0,0,0,0.2); transition: max-height 0.3s; }
.nav-mobile-sublist { list-style: none; margin: 0; padding: 0.5rem 0; }
.nav-mobile-sublink { display: block; padding: 0.75rem 1.5rem 0.75rem 2.5rem; color: #e2e8f0; text-decoration: none !important; font-size: 0.9375rem; transition: color 0.2s, background 0.2s; }
.nav-mobile-sublink:hover { color: var(--color-primary, #10B981); background: rgba(16,185,129,0.05); }
.nav-mobile-sublink-desc { display: none; }
.nav-mobile-nested { padding: 0.5rem 0; }
.nav-mobile-group { padding: 0.25rem 0; }
.nav-mobile-group + .nav-mobile-group { border-top: 1px solid rgba(255,255,255,0.05); }
.nav-mobile-group-title { display: block; padding: 0.5rem 1.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary, #10B981); }
.nav-mobile-group-desc { display: none; }
.nav-mobile-group .nav-mobile-sublink { padding-left: 2.5rem; }
.nav-mobile-footer { padding: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 1rem; }
.nav-mobile-cta { display: flex; align-items: center; justify-content: center; padding: 0.875rem; background: var(--gradient-button, linear-gradient(135deg, #10b981 0%, #059669 100%)); color: #fff; text-decoration: none !important; font-size: 1rem; font-weight: 600; border-radius: 8px; box-shadow: 0 4px 15px rgba(16,185,129,0.3); }
body.nav-mobile-open { overflow: hidden; }
.nav-fallback { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.nav-fallback a { color: #fff; text-decoration: none !important; }
.main-nav--dynamic .nav-link:focus, .main-nav--dynamic .nav-dropdown-item:focus, .main-nav--dynamic .nav-nested-link:focus, .nav-mobile-link:focus, .nav-mobile-sublink:focus, .main-nav--dynamic .nav-cta:focus { outline: 2px solid var(--color-primary, #10B981); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .main-nav--dynamic .nav-dropdown, .nav-mobile-panel, .nav-mobile-overlay, .main-nav--dynamic .nav-toggle-bar, .main-nav--dynamic .nav-dropdown-arrow, .nav-mobile-arrow, .nav-mobile-dropdown { transition: none; } }

/* === NAV VARIANT 9 (dynamic-mega-clean) === */
/* =====================================================
   DYNAMIC NAV v9 - Mega Menu Clean (No Border)
   ALL selectors namespaced under .main-nav--dynamic
   ===================================================== */

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary, #10B981);
    color: var(--color-white, #fff);
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-white, #fff);
    outline-offset: 2px;
}

/* Main Nav Container - NO BORDER */
.main-nav--dynamic {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-bg, #060d21);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none !important;
    border-bottom: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.main-nav--dynamic.nav-scrolled {
    background: var(--color-bg, #060d21);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.main-nav--dynamic .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

/* Logo - Always show both image and text side by side */
.main-nav--dynamic .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.main-nav--dynamic .nav-logo-img {
    height: 36px;
    width: auto;
}

.main-nav--dynamic .nav-logo-text {
    display: block !important;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Desktop Nav Menu */
.main-nav--dynamic .nav-menu {
    display: none;
    flex: 1;
    justify-content: center;
}

@media (min-width: 768px) {
    .main-nav--dynamic .nav-menu {
        display: flex;
    }
}

.main-nav--dynamic .nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav--dynamic .nav-item {
    position: relative;
}

/* Nav Links */
.main-nav--dynamic .nav-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    color: var(--color-text-secondary, #e2e8f0);
    text-decoration: none !important;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.main-nav--dynamic .nav-link:hover,
.main-nav--dynamic .nav-link:focus {
    color: var(--color-text, #fff);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none !important;
}

.main-nav--dynamic .nav-link--active,
.main-nav--dynamic .nav-item--active > .nav-link {
    color: var(--color-primary, #10B981);
}

.main-nav--dynamic .nav-link--dropdown {
    padding-right: 0.5rem;
}

.main-nav--dynamic .nav-dropdown-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.main-nav--dynamic .nav-item--open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

/* Desktop Dropdown - SOLID dark background */
.main-nav--dynamic .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 220px;
    background: #0a1628;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
    padding: 0.75rem;
}

.main-nav--dynamic .nav-item--open .nav-dropdown,
.main-nav--dynamic .nav-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.main-nav--dynamic .nav-dropdown-inner {
    position: relative;
}

/* Simple Dropdown List */
.main-nav--dynamic .nav-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav--dynamic .nav-dropdown-item {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--color-text-secondary, #e2e8f0);
    text-decoration: none !important;
    font-size: 0.9375rem;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.main-nav--dynamic .nav-dropdown-item:hover,
.main-nav--dynamic .nav-dropdown-item:focus {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-primary, #10B981);
    text-decoration: none !important;
}

.main-nav--dynamic .nav-dropdown-item.nav-link--active {
    color: var(--color-primary, #10B981);
    background: rgba(16, 185, 129, 0.1);
}

/* Mega Menu Style (with descriptions) */
.main-nav--dynamic .nav-dropdown--mega {
    min-width: 320px;
    max-width: 400px;
}

.main-nav--dynamic .nav-dropdown-grid {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.main-nav--dynamic .nav-dropdown-item--desc {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
}

.main-nav--dynamic .nav-dropdown-item-label {
    font-weight: 600;
    color: var(--color-text, #fff);
    transition: color 0.2s ease;
}

.main-nav--dynamic .nav-dropdown-item--desc:hover .nav-dropdown-item-label,
.main-nav--dynamic .nav-dropdown-item--desc:focus .nav-dropdown-item-label {
    color: var(--color-primary, #10B981);
}

.main-nav--dynamic .nav-dropdown-item-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.4;
}

/* Nav Actions (CTA + Phone) */
.main-nav--dynamic .nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.main-nav--dynamic .nav-phone {
    display: none;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary, #e2e8f0);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

@media (min-width: 1024px) {
    .main-nav--dynamic .nav-phone {
        display: flex;
    }
}

.main-nav--dynamic .nav-phone:hover {
    color: var(--color-primary, #10B981);
}

.main-nav--dynamic .nav-phone-icon {
    width: 18px;
    height: 18px;
}

.main-nav--dynamic .nav-cta {
    display: none;
    padding: 0.625rem 1.25rem;
    background: var(--gradient-button, linear-gradient(135deg, #10b981 0%, #059669 100%));
    color: var(--color-white, #fff);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

@media (min-width: 768px) {
    .main-nav--dynamic .nav-cta {
        display: inline-flex;
    }
}

.main-nav--dynamic .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4);
}

/* Mobile Toggle Button */
.main-nav--dynamic .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1010;
}

@media (min-width: 768px) {
    .main-nav--dynamic .nav-toggle {
        display: none;
    }
}

.main-nav--dynamic .nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text, #fff);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.main-nav--dynamic .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Overlay */
.nav-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.nav-mobile-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* Mobile Panel */
.nav-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--color-bg, #060d21);
    border-left: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nav-mobile-panel[aria-hidden="false"] {
    transform: translateX(0);
}

.nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

.nav-mobile-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.nav-mobile-logo .nav-logo-img {
    height: 32px;
    width: auto;
}

.nav-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--color-text-secondary, #e2e8f0);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-mobile-close:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text, #fff);
}

.nav-mobile-close svg {
    width: 24px;
    height: 24px;
}

/* Mobile Menu */
.nav-mobile-menu {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.nav-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile-item {
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.05));
}

.nav-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    color: var(--color-text, #fff);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-mobile-link:hover,
.nav-mobile-link:focus {
    background: rgba(255, 255, 255, 0.03);
}

.nav-mobile-link--active {
    color: var(--color-primary, #10B981);
}

.nav-mobile-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.nav-mobile-link--open .nav-mobile-arrow {
    transform: rotate(180deg);
}

/* Mobile Dropdown (Accordion) */
.nav-mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: max-height 0.3s ease;
}

.nav-mobile-sublist {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.nav-mobile-sublink {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    color: var(--color-text-secondary, #e2e8f0);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-mobile-sublink:hover,
.nav-mobile-sublink:focus {
    color: var(--color-primary, #10B981);
    background: rgba(16, 185, 129, 0.05);
}

.nav-mobile-sublink-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #94a3b8);
}

/* Mobile Footer */
.nav-mobile-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    color: var(--color-text, #fff);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
    border-radius: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-mobile-phone:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-primary, #10B981);
}

.nav-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    background: var(--gradient-button, linear-gradient(135deg, #10b981 0%, #059669 100%));
    color: var(--color-white, #fff);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* Body scroll lock when mobile menu open */
body.nav-mobile-open {
    overflow: hidden;
}

/* Fallback styles */
.nav-fallback {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-fallback a {
    color: var(--color-text, #fff);
    text-decoration: none;
}

/* Focus styles for accessibility */
.main-nav--dynamic .nav-link:focus,
.main-nav--dynamic .nav-dropdown-item:focus,
.nav-mobile-link:focus,
.nav-mobile-sublink:focus,
.main-nav--dynamic .nav-cta:focus,
.main-nav--dynamic .nav-phone:focus {
    outline: 2px solid var(--color-primary, #10B981);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .main-nav--dynamic .nav-dropdown,
    .nav-mobile-panel,
    .nav-mobile-overlay,
    .main-nav--dynamic .nav-toggle-bar,
    .main-nav--dynamic .nav-dropdown-arrow,
    .nav-mobile-arrow,
    .nav-mobile-dropdown {
        transition: none;
    }
}

/* === NAV VARIANT 10 (ivrevival-custom) === */
.main-nav--ivrevival {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(37,83,142,0.1);
    transition: all 0.3s ease;
    height: 80px;
}
.main-nav--ivrevival.scrolled {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 4px 20px rgba(37,83,142,0.15);
}
.main-nav--ivrevival .nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4rem;
}
.main-nav--ivrevival .nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.main-nav--ivrevival .nav-logo:hover { transform: scale(1.05); }
.main-nav--ivrevival .nav-logo img {
    height: 60px;
    width: auto;
    object-fit: contain;
}
.main-nav--ivrevival .nav-menu {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav--ivrevival .nav-menu a {
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}
.main-nav--ivrevival .nav-menu a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #8bc73f;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.main-nav--ivrevival .nav-menu a:hover { color: #8bc73f; }
.main-nav--ivrevival .nav-menu a:hover::before,
.main-nav--ivrevival .nav-menu a.active::before { width: 100%; }
.main-nav--ivrevival .nav-menu a.active { color: #8bc73f; }
.main-nav--ivrevival .nav-cta {
    background: #8bc73f !important;
    color: white !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: 2px solid #8bc73f !important;
    letter-spacing: 0.025em !important;
}
.main-nav--ivrevival .nav-cta:hover {
    background: white !important;
    color: #8bc73f !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139,199,63,0.3);
}
.main-nav--ivrevival .nav-cta-mobile { display: none; }
.main-nav--ivrevival .nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
}
.main-nav--ivrevival .nav-toggle span {
    width: 25px;
    height: 3px;
    background: #374151;
    margin: 3px 0;
    transition: 0.3s;
    display: block;
}
.main-nav--ivrevival .nav-dropdown { position: relative; display: inline-block; }
.main-nav--ivrevival .dropdown-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.main-nav--ivrevival .dropdown-trigger::after {
    content: '▼';
    font-size: 0.6rem;
    margin-left: 0.25rem;
    transition: transform 0.3s ease;
    color: #6b7280;
}
.main-nav--ivrevival .nav-dropdown:hover .dropdown-trigger::after {
    transform: rotate(180deg);
    color: #8bc73f;
}
.main-nav--ivrevival .dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: white;
    min-width: 240px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    display: none;
    z-index: 1000;
}
.main-nav--ivrevival .nav-dropdown:hover .dropdown-menu { display: block; }
.main-nav--ivrevival .dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #4b5563;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.main-nav--ivrevival .dropdown-menu a:hover {
    background-color: #f8fafc;
    color: #8bc73f;
}
@media (max-width: 1100px) {
    .main-nav--ivrevival .nav-container { justify-content: space-between; gap: 0.75rem; }
    .main-nav--ivrevival .nav-cta-mobile {
        display: block !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.85rem !important;
        order: 2;
    }
    .main-nav--ivrevival .nav-cta-desktop { display: none !important; }
    .main-nav--ivrevival .nav-logo { order: 1; }
    .main-nav--ivrevival .nav-toggle { order: 3; display: flex; }
    .main-nav--ivrevival .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        z-index: 999;
        gap: 0;
    }
    .main-nav--ivrevival .nav-menu.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .main-nav--ivrevival .nav-menu > a,
    .main-nav--ivrevival .nav-menu > .nav-dropdown { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid #f3f4f6; }
    .main-nav--ivrevival .nav-dropdown { position: static; width: 100%; }
    .main-nav--ivrevival .dropdown-menu {
        position: static;
        box-shadow: none;
        background: #f8fafc;
        margin-top: 8px;
        border-radius: 4px;
        display: none;
        transform: none;
        left: auto;
        width: 100%;
    }
}

/* === PRICING VARIANT 1 (3-tier-cards) === */
/* PRICING: 3-Tier Cards */
.pricing--3tier {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-dark, #0a1628);
}

.pricing__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pricing__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
}

.pricing__subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
}

/* Grid */
.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

/* Card Base */
.pricing__card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 16px);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.pricing__card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

/* Featured Card */
.pricing__card--featured {
    background: rgba(var(--color-accent-rgb, 0, 212, 255), 0.08);
    border-color: var(--color-accent, #00d4ff);
    transform: scale(1.02);
    box-shadow: 0 0 40px -10px rgba(var(--color-accent-rgb, 0, 212, 255), 0.3);
}

.pricing__card--featured:hover {
    transform: scale(1.02) translateY(-4px);
    border-color: var(--color-accent, #00d4ff);
    box-shadow: 0 0 60px -10px rgba(var(--color-accent-rgb, 0, 212, 255), 0.4);
}

/* Badge */
.pricing__card-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 1rem;
    background: var(--color-accent, #00d4ff);
    color: var(--color-bg-dark, #0a1628);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    white-space: nowrap;
}

.pricing__card-badge:empty {
    display: none;
}

/* Card Header */
.pricing__card-header {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 1.5rem;
}

.pricing__card-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
}

.pricing__card-price {
    margin-bottom: 0.75rem;
}

.pricing__price-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-white, #fff);
    line-height: 1;
}

.pricing__price-note {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.25rem;
}

.pricing__price-note:empty {
    display: none;
}

.pricing__card-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* Features List */
.pricing__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing__features li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.pricing__features li:empty {
    display: none;
}

.pricing__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 16px;
    height: 16px;
    background: var(--color-accent, #00d4ff);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* CTA Button */
.pricing__cta {
    width: 100%;
    text-align: center;
    padding: 1rem;
    font-weight: 600;
}

.pricing__card .btn--outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-white, #fff);
}

.pricing__card .btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white, #fff);
}

.pricing__card--featured .btn--primary {
    background: var(--color-accent, #00d4ff);
    color: var(--color-bg-dark, #0a1628);
}

.pricing__card--featured .btn--primary:hover {
    background: var(--color-white, #fff);
}

/* Responsive */
@media (max-width: 968px) {
    .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing__card--featured {
        transform: none;
        order: -1;
    }
    
    .pricing__card--featured:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 480px) {
    .pricing__card {
        padding: 1.5rem;
    }
    
    .pricing__price-amount {
        font-size: 2rem;
    }
}

/* === RESULTS VARIANT 1 (project-proof-cards) === */
/* RESULTS: Project Proof Cards */
.results--cards {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-dark, #0a1628);
}

.results__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.results__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
}

.results__subtitle {
    font-size: 1.25rem;
    color: var(--color-accent, #00d4ff);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.results__desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.6;
}

.results__desc:empty {
    display: none;
}

/* Grid */
.results__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card Base */
.results__card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 16px);
    padding: 2rem;
    transition: all 0.3s ease;
}

.results__card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.4);
}

/* Featured Card */
.results__card--featured {
    background: rgba(var(--color-accent-rgb, 0, 212, 255), 0.08);
    border-color: var(--color-accent, #00d4ff);
    transform: scale(1.02);
    box-shadow: 0 0 40px -10px rgba(var(--color-accent-rgb, 0, 212, 255), 0.3);
}

.results__card--featured:hover {
    transform: scale(1.02) translateY(-4px);
    border-color: var(--color-accent, #00d4ff);
    box-shadow: 0 0 60px -10px rgba(var(--color-accent-rgb, 0, 212, 255), 0.4);
}

/* Badge */
.results__card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--color-accent-rgb, 0, 212, 255), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb, 0, 212, 255), 0.3);
    color: var(--color-accent, #00d4ff);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
}

.results__card-badge:empty {
    display: none;
}

/* Card Header */
.results__card-header {
    margin-bottom: 1.5rem;
}

.results__card-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
    padding-right: 5rem;
}

/* Metrics */
.results__card-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.results__metric-primary {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent, #00d4ff);
    line-height: 1.1;
}

.results__metric-secondary {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.results__metric-secondary:empty {
    display: none;
}

/* Features List */
.results__features {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.results__features li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.results__features li:empty {
    display: none;
}

.results__features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 6px;
    height: 6px;
    background: var(--color-accent, #00d4ff);
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 968px) {
    .results__grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }
    
    .results__card--featured {
        transform: none;
        order: -1;
    }
    
    .results__card--featured:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 480px) {
    .results__card {
        padding: 1.5rem;
    }
    
    .results__metric-primary {
        font-size: 1.75rem;
    }
}

/* === SERVICES VARIANT 1 (tabs) === */
.services--tabs-simple {
    position: relative;
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
    overflow: hidden;
}
.services--tabs-simple .container { position: relative; z-index: 1; }

.services--tabs-simple .services__header { text-align: center; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.services--tabs-simple .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; }
.services--tabs-simple .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; }

.services__tabs-nav { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.services__tab { padding: 1rem 2rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 8px; font-size: 1rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all 0.3s; }
.services__tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.services__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.services__tabs-panels { width: 100%; }
.services__panel { display: none; }
.services__panel.is-active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.services__panel-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; }
.services__panel-image { overflow: hidden; position: relative; min-height: 100%; }
.services__panel-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.services__panel-image .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: white; opacity: 0; transition: opacity 0.4s; }
.services__panel-image:hover .image-hover__content { opacity: 1; }
.services__panel-image .image-hover__title { font-size: 1rem; font-weight: 600; display: block; margin-bottom: 0.25rem; }
.services__panel-image .image-hover__text { font-size: 0.875rem; opacity: 0.9; margin: 0; }
.services__panel-card:hover .services__panel-image img { transform: scale(1.03); }

.services__panel-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.services__panel-content h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 1rem; }
.services__panel-content > p { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 1.25rem; }
.services__panel-content ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.services__panel-content li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; font-size: 1rem; color: var(--color-text); }
.services__panel-content li:before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

@media (max-width: 768px) {
    .services__tabs-nav { flex-direction: column; }
    .services__panel-card { grid-template-columns: 1fr; }
    .services__panel-content { padding: 1.5rem; }
}

/* === SERVICES VARIANT 2 (accordion) === */
/* Services Accordion Simple V2 */
.services--accordion-simple {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--accordion-simple[data-bg="alt"] { background: var(--color-bg-alt); }
.services--accordion-simple[data-bg="dark"] { background: var(--color-bg-dark); }
.services--accordion-simple[data-bg="dark"] .services__title,
.services--accordion-simple[data-bg="dark"] .services__subtitle { color: var(--color-white); }
.services--accordion-simple[data-bg="dark"] .services__accordion-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.services--accordion-simple[data-bg="dark"] .services__accordion-title h3,
.services--accordion-simple[data-bg="dark"] .services__accordion-title p { color: var(--color-white); }

.services--accordion-simple .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--accordion-simple .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--accordion-simple .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--accordion-simple .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Accordions Container */
.services__accordions {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.services__accordion-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Header */
.services__accordion-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.services__accordion-header:hover {
    background: var(--color-bg-alt);
}

.services__accordion-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.services__accordion-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services__accordion-title {
    flex: 1;
    min-width: 0;
}

.services__accordion-title h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.services__accordion-title p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.services__accordion-arrow {
    flex-shrink: 0;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.services__accordion-item.is-open .services__accordion-arrow {
    transform: rotate(180deg);
}

/* Panel */
.services__accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.services__accordion-item.is-open .services__accordion-panel {
    max-height: 500px;
}

.services__accordion-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.services__accordion-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.services__accordion-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.services__accordion-details p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.services__accordion-details ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.services__accordion-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.services__accordion-details li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .services__accordion-content {
        grid-template-columns: 1fr;
    }
    .services__accordion-header {
        flex-wrap: wrap;
    }
    .services__accordion-icon {
        width: 50px;
        height: 50px;
    }
}

/* === SERVICES VARIANT 3 (grid-accordion) === */
/* Services Grid Accordion V3 */
.services--grid-accordion {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--grid-accordion[data-bg="alt"] { background: var(--color-bg-alt); }
.services--grid-accordion[data-bg="dark"] { background: var(--color-bg-dark); }
.services--grid-accordion[data-bg="dark"] .services__title,
.services--grid-accordion[data-bg="dark"] .services__subtitle,
.services--grid-accordion[data-bg="dark"] .services__grid-content h3,
.services--grid-accordion[data-bg="dark"] .services__grid-teaser { color: var(--color-white); }
.services--grid-accordion[data-bg="dark"] .services__grid-card { background: rgba(255,255,255,0.05); }

.services--grid-accordion .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--grid-accordion .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--grid-accordion .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--grid-accordion .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Grid */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.services__grid-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.services__grid-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.services__grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.services__grid-card:hover .services__grid-image img {
    transform: scale(1.05);
}

.services__grid-content {
    padding: 1.25rem;
}

.services__grid-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}

.services__grid-teaser {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 1rem;
}

/* Accordion inside card */
.services__grid-accordion {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.services__grid-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem;
    background: var(--color-bg-alt);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition);
}

.services__grid-trigger:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.services__grid-trigger svg {
    transition: transform 0.3s ease;
}

.services__grid-item.is-open .services__grid-trigger svg {
    transform: rotate(45deg);
}

.services__grid-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.services__grid-item.is-open .services__grid-panel {
    max-height: 350px;
}

.services__grid-panel > p {
    margin: 1rem 0 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.services__grid-panel ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.services__grid-panel li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text);
}

.services__grid-panel li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

.btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

@media (max-width: 992px) {
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services__grid {
        grid-template-columns: 1fr;
    }
}

/* === SERVICES VARIANT 4 (list-expand) === */
/* Services List Expand V4 - Wide */
.services--list-expand {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--list-expand[data-bg="alt"] { background: var(--color-bg-alt); }
.services--list-expand[data-bg="dark"] { background: var(--color-bg-dark); }
.services--list-expand[data-bg="dark"] .services__title,
.services--list-expand[data-bg="dark"] .services__subtitle { color: var(--color-white); }
.services--list-expand[data-bg="dark"] .services__list-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.services--list-expand[data-bg="dark"] .services__list-info h3,
.services--list-expand[data-bg="dark"] .services__list-info p { color: var(--color-white); }

.services--list-expand .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--list-expand .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--list-expand .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--list-expand .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Wide List */
.services__list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.services__list-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.services__list-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.services__list-header:hover {
    background: var(--color-bg-alt);
}

.services__list-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.services__list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services__list-info {
    flex: 1;
    min-width: 0;
}

.services__list-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.services__list-info p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.services__list-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.services__list-toggle svg {
    transition: transform 0.3s ease;
}

.services__list-item.is-open .services__list-toggle svg {
    transform: rotate(180deg);
}

/* Expand Panel */
.services__list-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.services__list-item.is-open .services__list-panel {
    max-height: 500px;
}

.services__list-panel-inner {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    padding: 0 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.services__list-panel-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.services__list-panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.services__list-panel-content p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.services__list-panel-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.services__list-panel-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: 0.9375rem;
}

.services__list-panel-content li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .services__list-header {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .services__list-toggle {
        width: 100%;
        justify-content: center;
        padding: 0.75rem;
        background: var(--color-bg-alt);
        border-radius: var(--radius-md);
    }
    .services__list-panel-inner {
        grid-template-columns: 1fr;
    }
}

/* === SERVICES VARIANT 5 (flip-cards) === */
/* Services Flip Cards V5 - Four Trades */
.services--flip {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--flip .container {
    max-width: 1600px;
    padding: 0 1rem;
}

.services--flip[data-bg="alt"] { background: var(--color-bg-alt); }
.services--flip[data-bg="dark"] { background: var(--color-bg-dark); }
.services--flip[data-bg="dark"] .services__title,
.services--flip[data-bg="dark"] .services__subtitle { color: var(--color-white); }

.services--flip .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--flip .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--flip .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--flip .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Flip Grid - 4 columns, wider cards */
.services__flip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

/* Flip Card Container - Much taller cards */
.services__flip-card {
    perspective: 1000px;
    height: 580px;
    cursor: pointer;
}

.services__flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* HOVER ANIMATION */
.services__flip-card:hover .services__flip-inner {
    transform: rotateY(-15deg) rotateX(5deg) translateY(-10px);
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
}

/* When flipped */
.services__flip-card.is-flipped .services__flip-inner {
    transform: rotateY(180deg);
}

.services__flip-card.is-flipped:hover .services__flip-inner {
    transform: rotateY(180deg) translateY(-5px);
}

/* Front and Back */
.services__flip-front,
.services__flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: box-shadow 0.3s ease;
}

/* Front */
.services__flip-front {
    background: var(--color-surface);
}

.services__flip-image {
    height: 50%;
    overflow: hidden;
}

.services__flip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.services__flip-card:hover .services__flip-image img {
    transform: scale(1.08);
}

.services__flip-preview {
    padding: 1.5rem;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.services__flip-preview h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.services__flip-teaser {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.services__flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 1rem;
    transition: transform 0.3s ease;
}

.services__flip-hint:after {
    content: "↻";
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.services__flip-card:hover .services__flip-hint {
    transform: translateX(4px);
}

.services__flip-card:hover .services__flip-hint:after {
    transform: rotate(45deg);
}

/* Back */
.services__flip-back {
    background: var(--gradient-brand, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%));
    transform: rotateY(180deg);
    color: var(--color-white);
}

.services__flip-back-content {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services__flip-back-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1.25rem;
}

.services__flip-back-content > p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    opacity: 0.95;
}

.services__flip-back-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}

.services__flip-back-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    opacity: 0.95;
}

.services__flip-back-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-white);
}

/* CRITICAL: Back button - force dark text on white bg */
.services__flip-back .btn,
.services__flip-back .btn--primary,
.services__flip-back a.btn {
    background: #ffffff !important;
    color: #0a0a0f !important;
    border: none !important;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    display: inline-block;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.services__flip-back .btn:hover,
.services__flip-back .btn--primary:hover,
.services__flip-back a.btn:hover {
    background: #f0f0f0 !important;
    color: #0a0a0f !important;
    transform: translateY(-2px);
}

@media (max-width: 1400px) {
    .services__flip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .services__flip-card {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .services__flip-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    .services__flip-card {
        height: 500px;
    }
    .services__flip-card:hover .services__flip-inner {
        transform: rotateY(-8deg) translateY(-5px);
    }
}

/* === SERVICES VARIANT 6 (zigzag-reveal) === */
/* Services Zigzag Reveal V6 */
.services--zigzag {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--zigzag[data-bg="alt"] { background: var(--color-bg-alt); }
.services--zigzag[data-bg="dark"] { background: var(--color-bg-dark); }
.services--zigzag[data-bg="dark"] .services__title,
.services--zigzag[data-bg="dark"] .services__subtitle,
.services--zigzag[data-bg="dark"] .services__zigzag-title,
.services--zigzag[data-bg="dark"] .services__zigzag-teaser { color: var(--color-white); }

.services--zigzag .services__header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--zigzag .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--zigzag .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--zigzag .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Zigzag Layout */
.services__zigzag-list {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.services__zigzag-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.services__zigzag-row--reverse {
    direction: rtl;
}

.services__zigzag-row--reverse > * {
    direction: ltr;
}

/* Image */
.services__zigzag-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.services__zigzag-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform var(--transition);
}

.services__zigzag-row:hover .services__zigzag-image img {
    transform: scale(1.03);
}

/* Content */
.services__zigzag-content {
    padding: 1rem 0;
}

.services__zigzag-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.services__zigzag-teaser {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

/* Toggle Button */
.services__zigzag-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: gap var(--transition);
}

.services__zigzag-toggle:hover {
    gap: 0.75rem;
}

.services__zigzag-toggle-more:after,
.services__zigzag-toggle-less:after {
    content: '↓';
    display: inline-block;
    margin-left: 0.25rem;
    transition: transform 0.3s ease;
}

.services__zigzag-toggle-less {
    display: none;
}

.services__zigzag-toggle-less:after {
    content: '↑';
}

.services__zigzag-row.is-expanded .services__zigzag-toggle-more {
    display: none;
}

.services__zigzag-row.is-expanded .services__zigzag-toggle-less {
    display: inline;
}

/* Expandable Details */
.services__zigzag-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin 0.3s ease;
}

.services__zigzag-row.is-expanded .services__zigzag-details {
    max-height: 400px;
    margin-top: 1.25rem;
}

.services__zigzag-details > p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.services__zigzag-details ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.services__zigzag-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: 0.9375rem;
}

.services__zigzag-details li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .services__zigzag-row,
    .services__zigzag-row--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 1.5rem;
    }
    .services__zigzag-image {
        order: -1;
    }
}

/* === SERVICES VARIANT 7 (hover-cards) === */
/* Services Hover Cards V7 */
.services--hover {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--hover[data-bg="alt"] { background: var(--color-bg-alt); }
.services--hover[data-bg="dark"] { background: var(--color-bg-dark); }
.services--hover[data-bg="dark"] .services__title,
.services--hover[data-bg="dark"] .services__subtitle { color: var(--color-white); }

.services--hover .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--hover .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--hover .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--hover .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.services__hover-grid {
    display: grid;
    gap: 1.5rem;
}

.services__hover-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 320px;
    cursor: pointer;
}

.services__hover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.services__hover-card:hover img {
    transform: scale(1.05);
}

.services__hover-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.services__hover-card:hover .services__hover-list {
    max-height: 200px;
    opacity: 1;
}

.services__hover-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.9);
}

.services__hover-list svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-success, var(--color-success, #22c55e));
    margin-top: 0.125rem;
}

@media (min-width: 640px) {
    .services__hover-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .services__hover-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .services__hover-card {
        height: 380px;
    }
}

@media (max-width: 639px) {
    .services__hover-card {
        height: 280px;
    }
    
    /* Show list by default on touch devices */
    .services__hover-list {
        max-height: 200px;
        opacity: 1;
    }
}

/* === SERVICES VARIANT 8 (accordion-4item) === */
/* Services Accordion 4-Item */
.services--accordion-4 {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--accordion-4[data-bg="alt"] { background: var(--color-bg-alt); }
.services--accordion-4[data-bg="dark"] { background: var(--color-bg-dark); }
.services--accordion-4[data-bg="dark"] .services__title,
.services--accordion-4[data-bg="dark"] .services__subtitle { color: var(--color-white); }
.services--accordion-4[data-bg="dark"] .services__accordion-item { background: var(--color-surface); border-color: var(--color-border); }
.services--accordion-4[data-bg="dark"] .services__accordion-title h3,
.services--accordion-4[data-bg="dark"] .services__accordion-title p { color: var(--color-white); }
.services--accordion-4[data-bg="dark"] .services__accordion-details p,
.services--accordion-4[data-bg="dark"] .services__accordion-details li { color: var(--color-text-secondary); }

.services--accordion-4 .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--accordion-4 .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--accordion-4 .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--accordion-4 .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Accordions Container */
.services--accordion-4 .services__accordions {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.services--accordion-4 .services__accordion-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.services--accordion-4 .services__accordion-item:hover {
    border-color: var(--color-primary);
}

.services--accordion-4 .services__accordion-item.is-open {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

/* Header */
.services--accordion-4 .services__accordion-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease;
}

.services--accordion-4 .services__accordion-header:hover {
    background: rgba(255,255,255,0.03);
}

.services--accordion-4 .services__accordion-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.services--accordion-4 .services__accordion-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services--accordion-4 .services__accordion-title {
    flex: 1;
    min-width: 0;
}

.services--accordion-4 .services__accordion-title h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.services--accordion-4 .services__accordion-title p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.services--accordion-4 .services__accordion-arrow {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    transition: transform 0.4s ease;
}

.services--accordion-4 .services__accordion-item.is-open .services__accordion-arrow {
    transform: rotate(180deg);
}

/* Panel - Use grid-template-rows for smooth animation */
.services--accordion-4 .services__accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s ease;
}

.services--accordion-4 .services__accordion-item.is-open .services__accordion-panel {
    grid-template-rows: 1fr;
}

.services--accordion-4 .services__accordion-panel > div {
    overflow: hidden;
}

/* Content grid - OVERRIDE generic .services__accordion-content rules */
.services--accordion-4 .services__accordion-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    padding: 1.5rem 2rem 2rem;
    max-height: none !important;
    overflow: visible;
    background: transparent;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.services--accordion-4 .services__accordion-item.is-open .services__accordion-content {
    opacity: 1;
    transform: translateY(0);
}

.services--accordion-4 .services__accordion-image {
    position: relative;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    aspect-ratio: 4/3;
    min-height: 180px;
}

.services--accordion-4 .services__accordion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.services--accordion-4 .services__accordion-image:hover img {
    transform: scale(1.05);
}

/* Image hover overlay */
.services--accordion-4 .image-hover__content {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.services--accordion-4 .services__accordion-image:hover .image-hover__content {
    opacity: 1;
}

.services--accordion-4 .image-hover__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.services--accordion-4 .image-hover__text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.services--accordion-4 .services__accordion-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
}

.services--accordion-4 .services__accordion-details p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.7;
}

.services--accordion-4 .services__accordion-details ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.services--accordion-4 .services__accordion-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.services--accordion-4 .services__accordion-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Mobile */
@media (max-width: 768px) {
    .services--accordion-4 .services__accordion-content {
        grid-template-columns: 1fr;
        padding: 1rem 1.5rem 1.5rem;
    }
    .services--accordion-4 .services__accordion-image {
        max-height: 200px;
    }
    .services--accordion-4 .services__accordion-details {
        min-height: auto;
    }
}


/* === SERVICES VARIANT 9 (tabs-4item) === */
/* Services 4-Tab Variant */
.services--tabs-4 .services__tabs-nav--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.services--tabs-4 .services__tab {
    padding: 1rem 1.5rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 8px);
    color: #475569;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.services--tabs-4 .services__tab:hover {
    border-color: #0caae6;
    color: #0c6ea8;
}

.services--tabs-4 .services__tab.is-active {
    background: linear-gradient(135deg, #0caae6, #0c6ea8);
    border-color: transparent;
    color: #fff;
}

.services--tabs-4 .services__panel {
    display: none;
}

.services--tabs-4 .services__panel.is-active {
    display: block;
}

.services--tabs-4 .services__panel-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg, 12px);
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.services--tabs-4 .services__panel-image {
    background: #f8fafc;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.services--tabs-4 .services__panel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-md, 8px);
    display: block;
}

/* Hover overlay on images */
.services--tabs-4 .services__panel-image::after {
    content: attr(data-hover);
    position: absolute;
    inset: 0;
    background: rgba(12, 170, 230, 0.82);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-md, 8px);
}

.services--tabs-4 .services__panel-image:hover::after {
    opacity: 1;
}

.services--tabs-4 .services__panel-content h3 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: #1e293b;
    margin-bottom: 1rem;
}

.services--tabs-4 .services__panel-content p {
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.services--tabs-4 .services__panel-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.services--tabs-4 .services__panel-content li {
    color: #475569;
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.services--tabs-4 .services__panel-content li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #0caae6;
}

/* CTA button */
.services--tabs-4 .services__panel-content .btn--accent {
    background: linear-gradient(135deg, #0caae6, #0c6ea8);
    color: #fff;
    border: none;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

@media (max-width: 768px) {
    .services--tabs-4 .services__tabs-nav--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .services--tabs-4 .services__panel-card {
        grid-template-columns: 1fr;
    }
}

/* === SERVICES VARIANT 10 (cards-tabs-4) === */

.services--cards-tabs {
    padding: 4rem 0;
    background: #ffffff;
}

.services--cards-tabs .services__header {
    text-align: center;
    margin-bottom: 3rem;
}

.services--cards-tabs .services__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--color-text, #1e293b);
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.services--cards-tabs .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary, #475569);
    max-width: 600px;
    margin: 0 auto;
}

.services__cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (max-width: 1200px) {
    .services__cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services__cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Card styling */
.services--cards-tabs .services__card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border, #e2e8f0);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* Tabs nav */
.services--cards-tabs .services__card-tabs-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
    margin-bottom: 1rem;
    justify-content: center;
}

.services__card-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.services__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.services__card-title {
    font-size: 1.25rem;
    color: var(--color-text, #1e293b);
    padding: 1.25rem 1.25rem 0.5rem;
    margin: 0;
    text-align: center;
    font-weight: 700;
}

.services__card-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary, #475569);
    padding: 0 1.25rem 1rem;
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

.services__card-tabs {
    padding: 0 1.25rem 1.25rem;
}

.services__card-tab {
    flex: 1;
    padding: 0.625rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #475569);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.services__card-tab:hover {
    color: var(--color-accent, #0caae6);
}

.services__card-tab.is-active {
    color: var(--color-primary, #8bc73f);
    border-bottom-color: var(--color-primary, #8bc73f);
}

.services__card-panel {
    display: none;
    color: var(--color-text-secondary, #475569);
    font-size: 0.875rem;
    line-height: 1.6;
    min-height: 80px;
    text-align: center;
}

.services__card-panel.is-active {
    display: block;
}


/* === SERVICES VARIANT 11 (terminal-cards) === */
/* SERVICES: Terminal Cards - Correct Report Colors */
.services--terminal .services__terminal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 2rem;
}

.services--terminal .services__terminal-grid--6 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .services--terminal .services__terminal-grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services--terminal .services__terminal-grid,
    .services--terminal .services__terminal-grid--6 {
        grid-template-columns: 1fr;
    }
}

.services--terminal .terminal-card {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 13, 33, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.services--terminal .terminal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 30px var(--category-glow);
    border-color: var(--category-color);
}

.services--terminal .terminal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--category-color);
}

/* Correct Category Colors from Report */
.services--terminal .terminal-card[data-category="foundation"] { 
    --category-color: #4AE8A8; 
    --category-glow: rgba(74, 232, 168, 0.15);
}
.services--terminal .terminal-card[data-category="content"] { 
    --category-color: #5CC8F0; 
    --category-glow: rgba(92, 200, 240, 0.15);
}
.services--terminal .terminal-card[data-category="trust"] { 
    --category-color: #F5D24A; 
    --category-glow: rgba(245, 210, 74, 0.15);
}
.services--terminal .terminal-card[data-category="technical"] { 
    --category-color: #F0788A; 
    --category-glow: rgba(240, 120, 138, 0.15);
}
.services--terminal .terminal-card[data-category="structure"] { 
    --category-color: #B88AF0; 
    --category-glow: rgba(184, 138, 240, 0.15);
}
.services--terminal .terminal-card[data-category="experience"] { 
    --category-color: #5AE8D8; 
    --category-glow: rgba(90, 232, 216, 0.15);
}

.services--terminal .terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
}

.services--terminal .terminal-dots {
    display: flex;
    gap: 8px;
}

.services--terminal .terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.services--terminal .terminal-dot.red {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 95, 86, 0.4);
}

.services--terminal .terminal-dot.yellow {
    background: linear-gradient(180deg, #ffd93d 0%, #ffcc2e 50%, #f5bd1f 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 189, 46, 0.4);
}

.services--terminal .terminal-dot.green {
    background: linear-gradient(180deg, #6bcb77 0%, #4ade80 50%, #3dd672 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(39, 202, 64, 0.4);
}

.services--terminal .terminal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hide empty icon element */
.services--terminal .terminal-title-num:empty {
    display: none;
}

.services--terminal .terminal-title-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--category-color);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0a0f1a;
}

.services--terminal .terminal-title-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.services--terminal .terminal-content {
    padding: 20px;
}

.services--terminal .terminal-description {
    color: var(--color-text-secondary, #e2e8f0);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.services--terminal .terminal-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services--terminal .terminal-features li {
    position: relative;
    padding-left: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.services--terminal .terminal-features li:last-child {
    border-bottom: none;
}

.services--terminal .terminal-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--category-color);
    border-radius: 2px;
}

/* === SERVICES VARIANT 12 (tabbed-accordion) === */
/* Services Tabbed Accordion */
.services--tabbed-accordion {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--tabbed-accordion[data-bg="alt"] { background: var(--color-bg-alt); }
.services--tabbed-accordion[data-bg="dark"] { background: var(--color-bg-dark); }
.services--tabbed-accordion[data-bg="dark"] .services__title,
.services--tabbed-accordion[data-bg="dark"] .services__subtitle,
.services--tabbed-accordion[data-bg="dark"] .services__panel-title,
.services--tabbed-accordion[data-bg="dark"] .services__accordion-trigger { color: var(--color-white); }

.services--tabbed-accordion .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--tabbed-accordion .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--tabbed-accordion .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Tabs */
.services__tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.services__tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--color-bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition);
    min-width: 200px;
}

.services__tab:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
    transform: translateY(-2px);
}

.services__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.services__tab.is-active .services__tab-label {
    color: var(--color-white);
}

.services__tab-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.services__tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services__tab-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
}

/* Panels */
.services__panels {
    max-width: 800px;
    margin: 0 auto;
}

.services__panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.services__panel.is-active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.services__panel-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.services__panel-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.services__panel-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.3;
}

/* Accordion */
.services__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.services__accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.services__accordion-item:has(.is-open) {
    box-shadow: var(--shadow-md);
}

.services__accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--color-bg-alt);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    transition: background var(--transition);
}

.services__accordion-trigger:hover {
    background: var(--color-bg);
}

.services__accordion-icon {
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: var(--color-primary);
}

.services__accordion-item:has(.is-open) .services__accordion-icon {
    transform: rotate(180deg);
}

.services__accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: var(--color-bg);
}

.services__accordion-content.is-open {
    max-height: 600px;
    padding: 1.25rem;
}

.services__accordion-content p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.services__accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services__accordion-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.services__accordion-content li:last-child {
    margin-bottom: 0;
}

.services__accordion-content li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.services__panel-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
}

.services__panel-image img {
    width: 100%;
    height: auto;
    display: block;
}

.services__image-caption {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
}

/* CTA */
.services__panel-cta {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Responsive */
@media (max-width: 640px) {
    .services__tabs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .services__tab {
        min-width: auto;
        justify-content: flex-start;
    }
}

/* === SERVICES VARIANT 13 (flip-cards-overlay) === */
/* Services Flip Cards V13 - With Image Hover Overlay */
.services--flip {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--flip .container {
    max-width: 1600px;
    padding: 0 1rem;
}

.services--flip[data-bg="alt"] { background: var(--color-bg-alt); }
.services--flip[data-bg="dark"] { background: var(--color-bg-dark); }
.services--flip[data-bg="dark"] .services__title,
.services--flip[data-bg="dark"] .services__subtitle { color: var(--color-white); }

.services--flip .services__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--flip .services__eyebrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.services--flip .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--flip .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Flip Grid - 4 columns, wider cards */
.services__flip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

/* Flip Card Container - Much taller cards */
.services__flip-card {
    perspective: 1000px;
    height: 580px;
    cursor: pointer;
}

.services__flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* HOVER ANIMATION */
.services__flip-card:hover .services__flip-inner {
    transform: rotateY(-15deg) rotateX(5deg) translateY(-10px);
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2);
}

/* When flipped */
.services__flip-card.is-flipped .services__flip-inner {
    transform: rotateY(180deg);
}

.services__flip-card.is-flipped:hover .services__flip-inner {
    transform: rotateY(180deg) translateY(-5px);
}

/* Front and Back */
.services__flip-front,
.services__flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: box-shadow 0.3s ease;
}

/* Front */
.services__flip-front {
    background: var(--color-surface);
}

.services__flip-image {
    height: 50%;
    overflow: hidden;
    position: relative;
}

.services__flip-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* IMAGE HOVER OVERLAY - Warm amber gradient */
.services__flip-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.85) 0%, rgba(180, 83, 9, 0.8) 50%, rgba(120, 53, 15, 0.85) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.services__flip-card:hover .services__flip-image::after {
    opacity: 1;
}

.services__flip-card:hover .services__flip-image img {
    transform: scale(1.08);
}

.services__flip-preview {
    padding: 1.5rem;
    height: 50%;
    display: flex;
    flex-direction: column;
}

.services__flip-preview h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.services__flip-teaser {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.services__flip-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 1rem;
    transition: transform 0.3s ease;
}

.services__flip-hint:after {
    content: "↻";
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.services__flip-card:hover .services__flip-hint {
    transform: translateX(4px);
}

.services__flip-card:hover .services__flip-hint:after {
    transform: rotate(45deg);
}

/* Back */
.services__flip-back {
    background: var(--gradient-brand, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%));
    transform: rotateY(180deg);
    color: var(--color-white);
}

.services__flip-back-content {
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.services__flip-back-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1.25rem;
}

.services__flip-back-content > p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    opacity: 0.95;
}

.services__flip-back-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}

.services__flip-back-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    opacity: 0.95;
}

.services__flip-back-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-white);
}

/* CRITICAL: Back button - force dark text on white bg */
.services__flip-back .btn,
.services__flip-back .btn--primary,
.services__flip-back a.btn {
    background: #ffffff !important;
    color: #0a0a0f !important;
    border: none !important;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    display: inline-block;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.services__flip-back .btn:hover,
.services__flip-back .btn--primary:hover,
.services__flip-back a.btn:hover {
    background: #f0f0f0 !important;
    color: #0a0a0f !important;
    transform: translateY(-2px);
}

@media (max-width: 1400px) {
    .services__flip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .services__flip-card {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .services__flip-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    .services__flip-card {
        height: 500px;
    }
    .services__flip-card:hover .services__flip-inner {
        transform: rotateY(-8deg) translateY(-5px);
    }
}


/* === SERVICES VARIANT 14 (8-tab-trades) === */
/* Services 8-Tab Trades V14 */
.services--8tabs {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-dark, #0a1628);
}

.services--8tabs .services__header {
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--8tabs .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
}

.services--8tabs .services__subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Tabs Nav - Flex Wrap for variable label lengths */
.services__tabs-nav--8 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.services--8tabs .services__tab {
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 8px);
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.services--8tabs .services__tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-accent, #00d4ff);
    color: var(--color-white, #fff);
}

.services--8tabs .services__tab.is-active {
    background: var(--color-accent, #00d4ff);
    border-color: var(--color-accent, #00d4ff);
    color: var(--color-bg-dark, #0a1628);
}

/* Panels */
.services--8tabs .services__panel {
    display: none;
}

.services--8tabs .services__panel.is-active {
    display: block;
    animation: fadeInPanel 0.3s ease;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel Content - Card Style */
.services--8tabs .services__panel-content {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 12px);
    padding: 2.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.services--8tabs .services__panel-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white, #fff);
    margin: 0 0 1rem;
}

.services--8tabs .services__panel-content > p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Bullet List - 2 columns on desktop */
.services--8tabs .services__panel-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 2rem;
}

.services--8tabs .services__panel-content li {
    position: relative;
    padding-left: 1.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Support inline bold labels */
.services--8tabs .services__panel-content li strong,
.services--8tabs .services__panel-content li b {
    color: var(--color-white, #fff);
    font-weight: 600;
}

.services--8tabs .services__panel-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: var(--color-accent, #00d4ff);
    border-radius: 50%;
}

/* Hide empty list items */
.services--8tabs .services__panel-content li:empty {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .services__tabs-nav--8 {
        gap: 0.375rem;
    }
    
    .services--8tabs .services__tab {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    .services--8tabs .services__panel-content {
        padding: 1.5rem;
    }
    
    .services--8tabs .services__panel-content ul {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
}

@media (max-width: 480px) {
    .services__tabs-nav--8 {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
    }
    
    .services__tabs-nav--8::-webkit-scrollbar {
        display: none;
    }
}

/* === SERVICES VARIANT 15 (tabs-media) === */
/* Services Tabs Media V15 - Supports images OR embeds */
.services--tabs-media {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.services--tabs-media[data-bg="alt"] { background: var(--color-bg-alt); }
.services--tabs-media[data-bg="dark"] { background: var(--color-bg-dark); }
.services--tabs-media[data-bg="dark"] .services__title,
.services--tabs-media[data-bg="dark"] .services__subtitle { color: var(--color-white); }
.services--tabs-media[data-bg="dark"] .services__panel-card { background: rgba(255,255,255,0.05); }
.services--tabs-media[data-bg="dark"] .services__panel-content h3,
.services--tabs-media[data-bg="dark"] .services__panel-content p,
.services--tabs-media[data-bg="dark"] .services__panel-content li { color: var(--color-white); }

.services--tabs-media .services__header {
    text-align: center;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.services--tabs-media .services__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--tabs-media .services__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Tabs Nav */
.services--tabs-media .services__tabs-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.services--tabs-media .services__tab {
    padding: 1rem 2rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--transition);
}

.services--tabs-media .services__tab:hover {
    border-color: var(--color-primary);
}

.services--tabs-media .services__tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Panels */
.services--tabs-media .services__tabs-panels {
    max-width: 1000px;
    margin: 0 auto;
}

.services--tabs-media .services__panel {
    display: none;
}

.services--tabs-media .services__panel.is-active {
    display: block;
}

.services--tabs-media .services__panel-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* Media slot - flexible container for images OR embeds */
.services--tabs-media .services__panel-media {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-alt, #f5f5f5);
    overflow: hidden;
}

/* When media slot contains an image */
.services--tabs-media .services__panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* When media slot contains an embed/widget */
.services--tabs-media .services__panel-media > div {
    width: 100%;
    padding: 1.5rem;
}

/* SchemaReports widget frames in media slot */
.services--tabs-media .services__panel-media .sr-widget-frame {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Content side */
.services--tabs-media .services__panel-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.services--tabs-media .services__panel-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.services--tabs-media .services__panel-content p {
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.services--tabs-media .services__panel-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.services--tabs-media .services__panel-content li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--color-text-secondary);
}

.services--tabs-media .services__panel-content li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .services--tabs-media .services__tabs-nav {
        flex-wrap: wrap;
    }
    
    .services--tabs-media .services__panel-card {
        grid-template-columns: 1fr;
    }
    
    .services--tabs-media .services__panel-media {
        min-height: 200px;
    }
}


/* === TESTIMONIALS VARIANT 1 (carousel) === */
/* Testimonials Carousel V1 */
.testimonials--carousel {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg-alt);
}

.testimonials--carousel[data-bg="white"] { background: var(--color-bg); }
.testimonials--carousel[data-bg="dark"] { background: var(--color-bg-dark); }
.testimonials--carousel[data-bg="dark"] .testimonials__title,
.testimonials--carousel[data-bg="dark"] .testimonials__quote,
.testimonials--carousel[data-bg="dark"] .testimonials__name { color: var(--color-white); }

.testimonials--carousel .testimonials__header {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials--carousel .testimonials__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.testimonials__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.testimonials__stars {
    color: var(--color-star, #fbbf24);
    font-size: 1.25rem;
    letter-spacing: 0.1em;
}

.testimonials__rating-text {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.testimonials__carousel-wrap {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 4rem;
}

.testimonials__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    color: var(--color-text);
}

.testimonials__nav:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.05);
}

.testimonials__nav--prev { left: 0; }
.testimonials__nav--next { right: 0; }

.testimonials__carousel-track {
    overflow: hidden;
}

.testimonials__slide {
    display: none;
    text-align: center;
    padding: 1rem 0;
    animation: fadeSlide 0.5s ease;
}

.testimonials__slide.active {
    display: block;
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.testimonials__quote {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

.testimonials__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.testimonials__name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 1rem;
}

.testimonials__source {
    font-size: 0.875rem;
    color: var(--color-primary);
}

.testimonials__dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.testimonials__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonials__dot:hover {
    background: var(--color-primary-light);
}

.testimonials__dot.active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .testimonials__carousel-wrap {
        padding: 0 3rem;
    }
    
    .testimonials__nav {
        width: 40px;
        height: 40px;
    }
}

/* Touch target fix - dots must be at least 24x24px */
.testimonials__dot {
    min-width: 24px \!important;
    min-height: 24px \!important;
    width: 12px;
    height: 12px;
    padding: 6px;
    box-sizing: content-box;
}


/* === TESTIMONIALS VARIANT 2 (ticker) === */
/* Testimonials Ticker V2 - Enhanced Visual Design */

.testimonials--ticker {
    padding: var(--section-padding-y, 6rem) 0;
    background: var(--color-bg);
    overflow: hidden;
}

.testimonials--ticker[data-bg="alt"] { 
    background: var(--color-bg-alt); 
}

.testimonials--ticker[data-bg="dark"] { 
    background: var(--color-bg-dark); 
}

.testimonials--ticker[data-bg="dark"] .testimonials__title,
.testimonials--ticker[data-bg="dark"] .testimonials__subtitle { 
    color: var(--color-white); 
}

.testimonials--ticker[data-bg="dark"] .testimonials__ticker-card { 
    background: rgba(255,255,255,0.06); 
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.testimonials--ticker[data-bg="dark"] .testimonials__ticker-card:hover {
    background: rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.testimonials--ticker[data-bg="dark"] .testimonials__ticker-text { 
    color: rgba(255,255,255,0.85); 
}

.testimonials--ticker[data-bg="dark"] .testimonials__ticker-author strong { 
    color: var(--color-white); 
}

.testimonials--ticker[data-spacing="compact"] { padding: 4rem 0; }
.testimonials--ticker[data-spacing="spacious"] { padding: 8rem 0; }

/* Header */
.testimonials--ticker .testimonials__header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}

.testimonials--ticker .testimonials__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.testimonials--ticker .testimonials__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.7;
}

/* Ticker Container */
.testimonials__ticker {
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.testimonials__ticker-track {
    display: flex;
    gap: 2rem;
    animation: tickerScroll 60s linear infinite;
    width: max-content;
}

.testimonials__ticker:hover .testimonials__ticker-track {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cards - Premium Design */
.testimonials__ticker-card {
    flex: 0 0 420px;
    min-height: 280px;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.06));
    border-radius: 1.25rem;
    padding: 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
}

.testimonials__ticker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary, #2563eb), var(--color-accent, #8b5cf6));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.testimonials__ticker-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
}

.testimonials__ticker-card:hover::before {
    transform: scaleX(1);
}

/* Stars */
.testimonials__ticker-stars {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    color: var(--color-accent, #f59e0b);
    margin-bottom: 1.5rem;
}

.testimonials__ticker-stars svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

/* Quote */
.testimonials__ticker-quote {
    margin: 0 0 auto;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.testimonials__ticker-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    line-height: 1;
    color: var(--color-primary-light, rgba(37, 99, 235, 0.15));
    font-family: Georgia, serif;
    pointer-events: none;
}

.testimonials__ticker-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    font-style: italic;
    padding-top: 1rem;
}

.testimonials__ticker-card.expanded .testimonials__ticker-text {
    display: block;
    -webkit-line-clamp: unset;
}

.testimonials__ticker-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary-light, rgba(37, 99, 235, 0.1));
    border: none;
    border-radius: 2rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    align-self: center;
}

.testimonials__ticker-more:hover {
    background: var(--color-primary);
    color: white;
    transform: scale(1.05);
}

.testimonials__ticker-card.expanded .testimonials__ticker-more {
    display: none;
}

/* Author */
.testimonials__ticker-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.06));
}

.testimonials__ticker-author strong {
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.testimonials__ticker-author span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Mobile */
@media (max-width: 768px) {
    .testimonials--ticker {
        padding: 4rem 0;
    }
    
    .testimonials__ticker-card {
        flex: 0 0 340px;
        min-height: 250px;
        padding: 2rem;
    }
    
    .testimonials__ticker-stars svg {
        width: 18px;
        height: 18px;
    }
    
    .testimonials__ticker-text {
        font-size: 0.95rem;
        -webkit-line-clamp: 3;
    }
}

/* === TESTIMONIALS VARIANT 3 (grid) === */
/* Testimonials Grid V3 - Enhanced Visual Design */

.testimonials--grid {
    padding: var(--section-padding-y, 6rem) 0;
    background: var(--color-bg);
    overflow: visible;
}

.testimonials--grid[data-bg="alt"] { 
    background: var(--color-bg-alt); 
}

.testimonials--grid[data-bg="dark"] { 
    background: var(--color-bg-dark); 
}

.testimonials--grid[data-bg="dark"] .testimonials__title,
.testimonials--grid[data-bg="dark"] .testimonials__subtitle { 
    color: var(--color-white); 
}

.testimonials--grid[data-bg="dark"] .testimonials__card { 
    background: rgba(255,255,255,0.06); 
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.testimonials--grid[data-bg="dark"] .testimonials__card:hover {
    background: rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.testimonials--grid[data-bg="dark"] .testimonials__card-text { 
    color: rgba(255,255,255,0.85); 
}

.testimonials--grid[data-bg="dark"] .testimonials__card-author strong { 
    color: var(--color-white); 
}

.testimonials--grid[data-bg="dark"] .testimonials__grid-arrow {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: white;
}

.testimonials--grid[data-bg="dark"] .testimonials__grid-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.testimonials--grid[data-spacing="compact"] { padding: 4rem 0; }
.testimonials--grid[data-spacing="spacious"] { padding: 8rem 0; }

/* Header */
.testimonials--grid .testimonials__header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials--grid .testimonials__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

.testimonials--grid .testimonials__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.7;
}

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

.testimonials__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: #1a1a2e;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
}

.testimonials__rating svg {
    color: var(--color-star, #fbbf24);
}

.testimonials__count {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

/* Grid Wrapper - allows overflow for hover effects */
.testimonials__grid-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
}

.testimonials__grid-container {
    flex: 1;
    overflow: visible;
    padding: 0.5rem;
    margin: -0.5rem;
}

/* True 3x2 Grid Layout */
.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cards - Premium styling */
.testimonials--grid .testimonials__card {
    background: var(--color-surface);
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.06));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.testimonials--grid .testimonials__card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.25rem;
    padding: 2px;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-primary) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.testimonials--grid .testimonials__card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    z-index: 10;
}

.testimonials--grid .testimonials__card:hover::before {
    opacity: 1;
}

/* Stars */
.testimonials__card-stars {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    color: var(--color-star, #fbbf24);
    margin-bottom: 1.5rem;
}

.testimonials__card-stars svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

/* Quote */
.testimonials--grid .testimonials__card-quote {
    margin: 0 0 1.5rem;
    text-align: center;
    flex: 1;
    position: relative;
}

.testimonials__card-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    font-style: italic;
}

.testimonials--grid .testimonials__card.expanded .testimonials__card-text {
    display: block;
    -webkit-line-clamp: unset;
}

.testimonials__card-more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    border: none;
    border-radius: 2rem;
    color: var(--color-white, #ffffff);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.testimonials__card-more:hover {
    background: var(--color-secondary);
    color: var(--color-white, #ffffff);
    transform: scale(1.05);
}

.testimonials--grid .testimonials__card.expanded .testimonials__card-more {
    display: none;
}

/* Author */
.testimonials--grid .testimonials__card-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.06));
    width: 100%;
}

.testimonials--grid .testimonials__card-author strong {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
}

.testimonials--grid .testimonials__card-author span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Navigation Arrows - Premium styling */
.testimonials__grid-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--color-border, rgba(0,0,0,0.1));
    background: var(--color-surface);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.testimonials__grid-arrow:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
}

.testimonials__grid-arrow svg {
    width: 24px;
    height: 24px;
}

.testimonials__grid-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Dots - Premium styling */
.testimonials__grid-dots {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.testimonials__grid-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-border, rgba(0,0,0,0.15));
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonials__grid-dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.testimonials__grid-dot:hover:not(.active) {
    background: var(--color-primary-light, rgba(37, 99, 235, 0.5));
    transform: scale(1.15);
}

/* Tablet: 2 columns, 3 rows */
@media (max-width: 1024px) {
    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .testimonials__grid-arrow {
        width: 48px;
        height: 48px;
    }
}

/* Mobile: 1 column slideshow */
@media (max-width: 640px) {
    .testimonials--grid {
        padding: 4rem 0;
    }
    
    .testimonials__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .testimonials--grid .testimonials__card {
        padding: 1.5rem;
    }
    
    .testimonials__grid-arrow {
        width: 44px;
        height: 44px;
        display: none;
    }
    
    .testimonials__grid-wrapper {
        gap: 0.75rem;
    }
    
    .testimonials__rating {
        font-size: 1.1rem;
        padding: 0.4rem 0.8rem;
    }
}

/* === TESTIMONIALS VARIANT 4 (terminal-cards) === */
/* TESTIMONIALS: Terminal Cards */
.testimonials--terminal {
    position: relative;
    background: linear-gradient(135deg, #0a0f1a 0%, #060d21 50%, #030812 100%);
}

.testimonials--terminal .testimonials__terminal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .testimonials--terminal .testimonials__terminal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .testimonials--terminal .testimonials__terminal-grid {
        grid-template-columns: 1fr;
    }
}

.testimonials--terminal .testimonials__card {
    height: 100%;
}

.testimonials--terminal .terminal-card {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(6, 13, 33, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 40px rgba(16, 185, 129, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.testimonials--terminal .terminal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 60px rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.testimonials--terminal .terminal-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary, #10b981);
}

.testimonials--terminal .terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(60, 60, 80, 0.6) 0%, rgba(40, 40, 60, 0.5) 50%, rgba(30, 30, 50, 0.4) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.testimonials--terminal .terminal-dots {
    display: flex;
    gap: 8px;
}

.testimonials--terminal .terminal-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.testimonials--terminal .terminal-dot.red {
    background: linear-gradient(180deg, #ff6b6b 0%, #ee5a5a 50%, #dd4a4a 100%);
}

.testimonials--terminal .terminal-dot.yellow {
    background: linear-gradient(180deg, #ffd93d 0%, #ffcc2e 50%, #f5bd1f 100%);
}

.testimonials--terminal .terminal-dot.green {
    background: linear-gradient(180deg, #6bcb77 0%, #4ade80 50%, #3dd672 100%);
}

.testimonials--terminal .terminal-title-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text, #fff);
}

.testimonials--terminal .terminal-badge {
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 16px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary, #10b981);
}

.testimonials--terminal .terminal-content {
    padding: 24px;
}

.testimonials--terminal .testimonials__rating {
    color: #ffd93d;
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.testimonials--terminal .testimonials__quote {
    color: var(--color-text-secondary, #e2e8f0);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 16px;
    font-style: italic;
}

.testimonials--terminal .testimonials__quote::before {
    content: "\"";
    color: var(--color-primary, #10b981);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 0;
    margin-right: 4px;
}

.testimonials--terminal .testimonials__cite {
    display: block;
    color: var(--color-text-muted, #94a3b8);
    font-size: 0.85rem;
    font-style: normal;
}


/* === TWO-COL VARIANT 1 (modular) === */
/* Two-Col V1: Text + Image with Hover */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag direction - reverse swaps content and media positions */
.twocol[data-direction="reverse"] .twocol__content {
    order: 2;
}
.twocol[data-direction="reverse"] .twocol__media {
    order: 1;
}

.twocol__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: inherit;
    margin: 0;
    line-height: 1.2;
}

.twocol__desc {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__desc { color: rgba(255,255,255,0.85); }

.twocol__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.twocol__list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .twocol__list li { color: rgba(255,255,255,0.9); }

.twocol__list li::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: 700;
}

/* CTA Button */
.twocol__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.twocol__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

/* Image with Hover Effect */
.twocol__image-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.twocol__image {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.twocol__image-wrap:hover .twocol__image {
    transform: scale(1.05);
}

.twocol__image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.twocol__image-wrap:hover .twocol__image-overlay {
    transform: translateY(0);
    opacity: 1;
}

.twocol__image-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.twocol__image-caption {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* On mobile, media always goes first, then content */
    .twocol__media {
        order: -1;
    }
    .twocol[data-direction="reverse"] .twocol__content,
    .twocol[data-direction="reverse"] .twocol__media {
        order: unset;
    }
    .twocol[data-direction="reverse"] .twocol__media {
        order: -1;
    }
    .twocol__image {
        min-height: 280px;
        max-height: 400px;
    }
    .twocol__cta {
        align-self: stretch;
        justify-content: center;
    }
}

/* === TWO-COL VARIANT 2 (duo-accordion) === */
/* Two-Col V2: Duo Accordion + Stacked Images */

.two-col[data-variant="duo-accordion"] {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.two-col[data-variant="duo-accordion"][data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.two-col[data-variant="duo-accordion"][data-bg="light"] { background: var(--color-bg-alt); }
.two-col[data-variant="duo-accordion"][data-spacing="compact"] { padding: 3rem 0; }
.two-col[data-variant="duo-accordion"][data-spacing="spacious"] { padding: 7rem 0; }

.two-col__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.two-col--50-50 { grid-template-columns: 1fr 1fr; }

.two-col--reverse .two-col__grid { direction: rtl; }
.two-col--reverse .two-col__slot { direction: ltr; }

.two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Hide eyebrow */
.two-col__eyebrow { display: none; }

.two-col__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.two-col__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); }

/* Stacked Images - Fixed sizing */
.img-grid--duo-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.img-grid--duo-stack .image-hover {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.img-grid--duo-stack img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.img-grid--duo-stack .image-hover:hover img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.image-hover__text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
}

/* Accordion - Enhanced with bullets and hover */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.two-col[data-bg="dark"] .accordion__item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.two-col[data-bg="dark"] .accordion__item:hover {
    border-color: var(--color-primary-light);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: inherit;
    transition: background 0.2s ease;
}

.accordion__trigger:hover {
    background: var(--color-bg-alt);
}

.two-col[data-bg="dark"] .accordion__trigger:hover {
    background: rgba(255,255,255,0.05);
}

.accordion__icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion__item.active .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion__item.active .accordion__content {
    max-height: 500px;
}

.accordion__content p {
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); }

/* CTA Button */
.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    align-self: flex-start;
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

@media (max-width: 768px) {
    .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .two-col--reverse .two-col__grid { direction: ltr; }
    .two-col__slot:first-child { order: 1; }
    .img-grid--duo-stack img { height: 180px; }
}

/* === TWO-COL VARIANT 3 (quad-faq) === */
/* Two-Col V3: Quad Image Grid + FAQ */

.two-col[data-variant="quad-faq"] {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.two-col[data-variant="quad-faq"][data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.two-col[data-variant="quad-faq"][data-bg="light"] { background: var(--color-bg-alt); }

/* Hide eyebrow */
.two-col__eyebrow { display: none; }

.two-col__header {
    text-align: center;
    margin-bottom: 3rem;
}

.two-col__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.two-col__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); }

.two-col__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.two-col--50-50 { grid-template-columns: 1fr 1fr; }
.two-col--reverse .two-col__grid { direction: rtl; }
.two-col--reverse .two-col__slot { direction: ltr; }

.two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Quad Image Grid */
.img-grid--quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.img-grid--quad .image-hover {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-grid--quad .image-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.img-grid--quad img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.img-grid--quad .image-hover:hover img {
    transform: scale(1.08);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.image-hover__text {
    font-size: 0.8rem;
    opacity: 0.9;
    margin: 0;
}

/* Accordion - V3 style (different from V2) */
.accordion[data-accordion="twocol-faq"] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.accordion__item {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion__item:hover {
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.two-col[data-bg="dark"] .accordion__item {
    background: rgba(255,255,255,0.03);
}

.two-col[data-bg="dark"] .accordion__item:hover {
    background: rgba(255,255,255,0.06);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.accordion__icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion__item.active .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion__item.active .accordion__content {
    max-height: 400px;
}

.accordion__content p {
    padding: 0 1.25rem 1.25rem;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); }

@media (max-width: 768px) {
    .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .two-col--reverse .two-col__grid { direction: ltr; }
    .two-col__slot:first-child { order: 1; }
    .img-grid--quad img { height: 140px; }
}

/* === TWO-COL VARIANT 4 (single-content) === */
/* Two-Col V4: Single Content + Large Image */

.two-col[data-variant="single-content"] {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.two-col[data-variant="single-content"][data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.two-col[data-variant="single-content"][data-bg="light"] { background: var(--color-bg-alt); }

/* Hide eyebrow */
.two-col__eyebrow { display: none; }

.two-col__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.two-col--50-50 { grid-template-columns: 1fr 1fr; }
.two-col--reverse .two-col__grid { direction: rtl; }
.two-col--reverse .two-col__slot { direction: ltr; }

.two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; }

.two-col__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.two-col__lead {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
}

.two-col__content p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.two-col[data-bg="dark"] .two-col__content p,
.two-col[data-bg="dark"] .two-col__lead { 
    color: rgba(255,255,255,0.85); 
}

/* Check List */
.check-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.two-col[data-bg="dark"] .check-list li { color: rgba(255,255,255,0.9); }

.check-list li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

/* CTA Group */
.two-col__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.btn--primary {
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.btn--outline {
    padding: 0.875rem 1.75rem;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Large Image with hover */
.image-hover--large {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.image-hover--large img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: 550px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover--large:hover img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-hover--large:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.image-hover__text {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .two-col--reverse .two-col__grid { direction: ltr; }
    .two-col__slot:first-child { order: 1; }
    .image-hover--large img {
        min-height: 300px;
        max-height: 400px;
    }
    .two-col__cta-group { flex-direction: column; }
    .two-col__cta-group a { text-align: center; }
}

/* === TWO-COL VARIANT 5 (tabs-faq) === */
/* Two-Col V5: Tabs + FAQ */

.two-col[data-variant="tabs-faq"] {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.two-col[data-variant="tabs-faq"][data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.two-col[data-variant="tabs-faq"][data-bg="light"] { background: var(--color-bg-alt); }

/* Hide eyebrow */
.two-col__eyebrow { display: none; }

.two-col__header {
    text-align: center;
    margin-bottom: 3rem;
}

.two-col__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.two-col__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); }

.two-col__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.two-col--50-50 { grid-template-columns: 1fr 1fr; }
.two-col--reverse .two-col__grid { direction: rtl; }
.two-col--reverse .two-col__slot { direction: ltr; }

.two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Tabs - Contained, no overflow */
.tabs {
    display: flex;
    flex-direction: column;
}

.tabs__nav {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--color-bg-alt);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.two-col[data-bg="dark"] .tabs__nav {
    background: rgba(255,255,255,0.06);
}

.tabs__btn {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.tabs__btn:hover {
    color: var(--color-text);
}

.tabs__btn.active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.two-col[data-bg="dark"] .tabs__btn {
    color: rgba(255,255,255,0.6);
}

.two-col[data-bg="dark"] .tabs__btn:hover,
.two-col[data-bg="dark"] .tabs__btn.active {
    color: var(--color-white);
}

.two-col[data-bg="dark"] .tabs__btn.active {
    background: rgba(255,255,255,0.1);
}

.tabs__panel {
    display: none;
}

.tabs__panel.active {
    display: block;
}

.tabs__panel h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.tabs__panel p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.two-col[data-bg="dark"] .tabs__panel p { color: rgba(255,255,255,0.8); }

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
}

.check-list li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 700;
}

/* Accordion */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.accordion__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion__item:hover {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
}

.two-col[data-bg="dark"] .accordion__item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.accordion__icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.accordion__item.active .accordion__icon {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.accordion__item.active .accordion__content {
    max-height: 400px;
}

.accordion__content p {
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); }

@media (max-width: 768px) {
    .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .two-col--reverse .two-col__grid { direction: ltr; }
    .tabs__nav { flex-wrap: wrap; }
    .tabs__btn { padding: 0.625rem 1rem; font-size: 0.85rem; }
}

/* === TWO-COL VARIANT 6 (text-image) === */
/* Two-Col V6: Text + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

/* Zigzag: reverse puts image on left, text on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="alt"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .tcb-text__list li,
.twocol[data-bg="alt"] .tcb-text__list li,
.twocol[data-bg="primary"] .tcb-text__list li {
    color: rgba(255, 255, 255, 0.9);
}

.tcb-text__list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.twocol[data-bg="primary"] .tcb-text__list li::before {
    background-color: rgba(255, 255, 255, 0.25);
}

.tcb-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.tcb-text__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.twocol[data-bg="primary"] .tcb-text__cta {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Image - proper sizing */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.image-hover__text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 7 (accordion-image) === */
/* Two-Col V7: Accordion + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__header {
    text-align: center;
    margin-bottom: 3rem;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.twocol__desc {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__desc,
.twocol[data-bg="alt"] .twocol__desc {
    color: rgba(255,255,255,0.8);
}

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag: reverse puts image on left, accordion on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Hide eyebrow */
.tcb-text__eyebrow,
.tcb-accordion__eyebrow { display: none; }

.tcb-accordion__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

/* Accordion - Enhanced */
.tcb-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* TRANSPARENT ACCORDION ITEMS */
.tcb-accordion__item {
    background: transparent !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.tcb-accordion__item:hover {
    border-color: var(--color-primary);
}

/* TRANSPARENT for dark/alt backgrounds too */
.twocol[data-bg="dark"] .tcb-accordion__item,
.twocol[data-bg="alt"] .tcb-accordion__item {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15);
}

.tcb-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: transparent !important;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.tcb-accordion__trigger:hover {
    background: rgba(255,255,255,0.05) !important;
}

.tcb-accordion__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.tcb-accordion__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.tcb-accordion__item.active .tcb-accordion__icon svg {
    transform: rotate(180deg);
}

.tcb-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.tcb-accordion__item.active .tcb-accordion__content {
    max-height: 500px;
}

.tcb-accordion__body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol[data-bg="dark"] .tcb-accordion__body,
.twocol[data-bg="alt"] .tcb-accordion__body { color: rgba(255,255,255,0.8); }

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 8 (tabs-image) === */
/* Two-Col V8: Tabs + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__header {
    text-align: center;
    margin-bottom: 3rem;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.twocol__desc {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__desc,
.twocol[data-bg="alt"] .twocol__desc {
    color: rgba(255,255,255,0.8);
}

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag: reverse puts image on left, tabs on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem;
}

/* Tabs - Contained pill style */
.tcb-tabs {
    display: flex;
    flex-direction: column;
}

.tcb-tabs__nav {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(255,255,255,0.06);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.tcb-tabs__btn {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tcb-tabs__btn:hover {
    color: var(--color-white);
}

.tcb-tabs__btn.active {
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.tcb-tabs__panel {
    display: none;
}

.tcb-tabs__panel.active {
    display: block;
}

.tcb-tabs__content p {
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
}

.tcb-text__list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
}

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.image-hover__text {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-tabs__nav { flex-wrap: wrap; }
    .tcb-tabs__btn { padding: 0.625rem 1rem; font-size: 0.85rem; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 9 (faq-image) === */
/* Two-Col V9: FAQ + Image */

/* SCOPED to .twocol--faq-image to avoid polluting other variants */
.twocol--faq-image {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol--faq-image[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol--faq-image[data-bg="light"] { background: var(--color-bg-alt); }
.twocol--faq-image[data-spacing="compact"] { padding: 3rem 0; }
.twocol--faq-image[data-spacing="spacious"] { padding: 7rem 0; }

.twocol--faq-image .twocol__header { display: none; }

.twocol--faq-image .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol--faq-image[data-direction="reverse"] .twocol__grid { direction: rtl; }
.twocol--faq-image[data-direction="reverse"] .twocol__slot { direction: ltr; }

.twocol--faq-image .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* FAQ - Clean style with single icon */
.twocol--faq-image .tcb-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.twocol--faq-image .tcb-faq__item {
    border-bottom: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}

.twocol--faq-image .tcb-faq__item:hover {
    border-color: var(--color-primary-light);
}

.twocol--faq-image[data-bg="dark"] .tcb-faq__item {
    border-color: rgba(255,255,255,0.1);
}

.twocol--faq-image .tcb-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.twocol--faq-image .tcb-faq__icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.twocol--faq-image .tcb-faq__item.active .tcb-faq__icon {
    transform: rotate(45deg);
}

.twocol--faq-image .tcb-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.twocol--faq-image .tcb-faq__item.active .tcb-faq__answer {
    max-height: 300px;
}

.twocol--faq-image .tcb-faq__answer p {
    padding: 0 0 1.25rem;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol--faq-image[data-bg="dark"] .tcb-faq__answer p { color: rgba(255,255,255,0.8); }

/* Image - Fixed sizing */
.twocol--faq-image .tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.twocol--faq-image .tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.twocol--faq-image .image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.twocol--faq-image .image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.twocol--faq-image .image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.twocol--faq-image .image-hover__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.twocol--faq-image .image-hover__text {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol--faq-image .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .twocol--faq-image[data-direction="reverse"] .twocol__grid { direction: ltr; }
    .twocol--faq-image .twocol__slot--right { order: -1; }
    .twocol--faq-image .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 10 (form-image) === */
/* Two-Col V10: Form + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-direction="reverse"] .twocol__grid { direction: rtl; }
.twocol[data-direction="reverse"] .twocol__slot { direction: ltr; }

.twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Hide eyebrow */
.tcb-form__eyebrow { display: none; }

.tcb-form__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.tcb-form__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem;
}

.twocol[data-bg="dark"] .tcb-form__desc { color: rgba(255,255,255,0.85); }

/* Form */
.tcb-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tcb-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.tcb-form__input,
.tcb-form__textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.tcb-form__input:focus,
.tcb-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.twocol[data-bg="dark"] .tcb-form__input,
.twocol[data-bg="dark"] .tcb-form__textarea {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--color-white);
}

.tcb-form__textarea {
    min-height: 120px;
    resize: vertical;
}

.tcb-form__submit {
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.tcb-form__submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: 550px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; }
    .twocol__slot--right { order: -1; }
    .tcb-form__row { grid-template-columns: 1fr; }
    .tcb-form__submit { width: 100%; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 12 (checklist-image) === */
/* Two-Col V12: Checklist + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag: reverse puts image on left, checklist on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

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

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="alt"] .tcb-text__desc { color: rgba(255,255,255,0.85); }

/* Checklist */
.tcb-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* TRANSPARENT CHECKLIST ITEMS */
.tcb-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.tcb-checklist__item:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

/* TRANSPARENT for dark/alt backgrounds too */
.twocol[data-bg="dark"] .tcb-checklist__item,
.twocol[data-bg="alt"] .tcb-checklist__item {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15);
}

.tcb-checklist__icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    margin-top: 2px;
}

.tcb-checklist__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--color-white);
    stroke-width: 3;
}

.tcb-checklist__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tcb-checklist__text strong {
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.tcb-checklist__text span {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.twocol[data-bg="dark"] .tcb-checklist__text span,
.twocol[data-bg="alt"] .tcb-checklist__text span { color: rgba(255,255,255,0.75); }

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-checklist__item { padding: 0.875rem 1rem; }
    .tcb-checklist__icon { width: 22px; height: 22px; min-width: 22px; }
    .tcb-checklist__icon svg { width: 12px; height: 12px; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 13 (text-video) === */
/* Two-Col V13: Text + Video */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-direction="reverse"] .twocol__grid { direction: rtl; }
.twocol[data-direction="reverse"] .twocol__slot { direction: ltr; }

.twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc { color: rgba(255,255,255,0.85); }

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .tcb-text__list li { color: rgba(255,255,255,0.9); }

.tcb-text__list li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.tcb-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.tcb-text__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Video */
.tcb-video {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    aspect-ratio: 16/9;
    background: var(--color-bg-dark);
}

.tcb-video__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tcb-video__player.is-playing {
    opacity: 1;
    z-index: 2;
}

.tcb-video__poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tcb-video__poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}

.tcb-video__poster:hover::before {
    background: rgba(0, 0, 0, 0.25);
}

.tcb-video__poster.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.tcb-video__play {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.tcb-video__poster:hover .tcb-video__play {
    transform: scale(1.1);
    background: var(--color-primary-dark);
}

.tcb-video__play svg {
    width: 28px;
    height: 28px;
    fill: var(--color-white);
    margin-left: 4px;
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; }
    .twocol__slot--right { order: -1; }
    .tcb-video__play { width: 60px; height: 60px; }
    .tcb-video__play svg { width: 24px; height: 24px; }
}

/* === TWO-COL VARIANT 14 (text-image-reverse) === */
/* Two-Col V6: Text + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

/* Zigzag: reverse puts image on left, text on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="alt"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .tcb-text__list li,
.twocol[data-bg="alt"] .tcb-text__list li,
.twocol[data-bg="primary"] .tcb-text__list li {
    color: rgba(255, 255, 255, 0.9);
}

.tcb-text__list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.twocol[data-bg="primary"] .tcb-text__list li::before {
    background-color: rgba(255, 255, 255, 0.25);
}

.tcb-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.tcb-text__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.twocol[data-bg="primary"] .tcb-text__cta {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Image - proper sizing */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.image-hover__text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 15 (accordion-image-reverse) === */
/* Two-Col V7: Accordion + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__header {
    text-align: center;
    margin-bottom: 3rem;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.twocol__desc {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__desc,
.twocol[data-bg="alt"] .twocol__desc {
    color: rgba(255,255,255,0.8);
}

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag: reverse puts image on left, accordion on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* Hide eyebrow */
.tcb-text__eyebrow,
.tcb-accordion__eyebrow { display: none; }

.tcb-accordion__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

/* Accordion - Enhanced */
.tcb-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tcb-accordion__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.tcb-accordion__item:hover {
    border-color: var(--color-primary);
}

.twocol[data-bg="dark"] .tcb-accordion__item,
.twocol[data-bg="alt"] .tcb-accordion__item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.tcb-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.tcb-accordion__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.tcb-accordion__icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.3s ease;
}

.tcb-accordion__item.active .tcb-accordion__icon svg {
    transform: rotate(180deg);
}

.tcb-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.tcb-accordion__item.active .tcb-accordion__content {
    max-height: 500px;
}

.tcb-accordion__body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol[data-bg="dark"] .tcb-accordion__body,
.twocol[data-bg="alt"] .tcb-accordion__body { color: rgba(255,255,255,0.8); }

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 16 (text-tabs-image) === */
/* Two-Col V16: Text + Tabs + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

/* Zigzag: reverse puts image on left, text on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

/* Tabs */
.twocol__tabs {
    margin-top: 0.5rem;
}

.twocol__tab-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.twocol__tab-btn {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.twocol__tab-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.twocol__tab-btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-bg="dark"] .twocol__tab-btn,
.twocol[data-bg="primary"] .twocol__tab-btn {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.twocol[data-bg="dark"] .twocol__tab-btn:hover,
.twocol[data-bg="primary"] .twocol__tab-btn:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}

.twocol[data-bg="dark"] .twocol__tab-btn.is-active,
.twocol[data-bg="primary"] .twocol__tab-btn.is-active {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.twocol__tab-panel {
    display: none;
}

.twocol__tab-panel.is-active {
    display: block;
}

.twocol__tab-panel p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__tab-panel p,
.twocol[data-bg="primary"] .twocol__tab-panel p {
    color: rgba(255, 255, 255, 0.85);
}

/* Image */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

/* Full Overlay using theme variable */
.image-hover__content {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-hover:hover .image-hover__content {
    opacity: 1;
}

.image-hover__title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.image-hover__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
    .twocol__tab-nav {
        gap: 0.375rem;
    }
    .twocol__tab-btn {
        padding: 0.375rem 0.875rem;
        font-size: 0.9rem;
    }
}

/* === TWO-COL VARIANT 17 (text-accordion-image-reverse) === */
/* Two-Col V17: Image + Text Accordion (Reverse) */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

/* Accordion */
.twocol__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.twocol__accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.twocol__accordion-item:hover {
    border-color: var(--color-primary);
}

.twocol__accordion-item.is-open {
    border-color: var(--color-primary);
}

.twocol[data-bg="dark"] .twocol__accordion-item,
.twocol[data-bg="primary"] .twocol__accordion-item {
    border-color: rgba(255, 255, 255, 0.2);
}

.twocol[data-bg="dark"] .twocol__accordion-item.is-open,
.twocol[data-bg="primary"] .twocol__accordion-item.is-open {
    border-color: rgba(255, 255, 255, 0.5);
}

.twocol__accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.twocol__accordion-trigger:hover {
    background: var(--color-bg-alt);
}

.twocol[data-bg="dark"] .twocol__accordion-trigger:hover,
.twocol[data-bg="primary"] .twocol__accordion-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.twocol__accordion-trigger svg {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.twocol__accordion-item.is-open .twocol__accordion-trigger svg {
    transform: rotate(180deg);
}

.twocol__accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.twocol__accordion-content.is-open {
    max-height: 500px;
    padding: 0 1.25rem 1rem;
}

.twocol__accordion-content p {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__accordion-content p,
.twocol[data-bg="primary"] .twocol__accordion-content p {
    color: rgba(255, 255, 255, 0.85);
}

/* Image */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

/* Full Overlay using theme variable */
.image-hover__content {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-hover:hover .image-hover__content {
    opacity: 1;
}

.image-hover__title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.image-hover__text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin: 0;
    max-width: 300px;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    .twocol__slot--left { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
    .twocol__accordion-trigger {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
    }
    .twocol__accordion-content.is-open {
        padding: 0 1rem 0.875rem;
    }
}

/* === TWO-COL VARIANT 18 (tabs-image-reverse) === */
/* Two-Col V8: Tabs + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol[data-bg="light"] { background: var(--color-bg-alt); }
.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__header {
    text-align: center;
    margin-bottom: 3rem;
}

.twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.twocol__desc {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .twocol__desc,
.twocol[data-bg="alt"] .twocol__desc {
    color: rgba(255,255,255,0.8);
}

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Zigzag: reverse puts image on left, tabs on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot { 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem;
}

/* Tabs - Contained pill style */
.tcb-tabs {
    display: flex;
    flex-direction: column;
}

.tcb-tabs__nav {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(255,255,255,0.06);
    padding: 0.375rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    align-self: flex-start;
}

.tcb-tabs__btn {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tcb-tabs__btn:hover {
    color: var(--color-white);
}

.tcb-tabs__btn.active {
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.tcb-tabs__panel {
    display: none;
}

.tcb-tabs__panel.active {
    display: block;
}

.tcb-tabs__content p {
    margin: 0 0 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
}

.tcb-text__list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
}

/* Image - Fixed sizing */
.tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.image-hover__text {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-tabs__nav { flex-wrap: wrap; }
    .tcb-tabs__btn { padding: 0.625rem 1rem; font-size: 0.85rem; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 19 (faq-image-reverse) === */
/* Two-Col V19: FAQ + Image Reverse */

/* SCOPED to .twocol--faq-image-reverse to avoid polluting other variants */
.twocol--faq-image-reverse {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol--faq-image-reverse[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol--faq-image-reverse[data-bg="light"] { background: var(--color-bg-alt); }
.twocol--faq-image-reverse[data-spacing="compact"] { padding: 3rem 0; }
.twocol--faq-image-reverse[data-spacing="spacious"] { padding: 7rem 0; }

.twocol--faq-image-reverse .twocol__header { display: none; }

.twocol--faq-image-reverse .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol--faq-image-reverse[data-direction="reverse"] .twocol__grid { direction: rtl; }
.twocol--faq-image-reverse[data-direction="reverse"] .twocol__slot { direction: ltr; }

.twocol--faq-image-reverse .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; }

/* FAQ - Clean style with single icon */
.twocol--faq-image-reverse .tcb-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.twocol--faq-image-reverse .tcb-faq__item {
    border-bottom: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}

.twocol--faq-image-reverse .tcb-faq__item:hover {
    border-color: var(--color-primary-light);
}

.twocol--faq-image-reverse[data-bg="dark"] .tcb-faq__item {
    border-color: rgba(255,255,255,0.1);
}

.twocol--faq-image-reverse .tcb-faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.twocol--faq-image-reverse .tcb-faq__icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.twocol--faq-image-reverse .tcb-faq__item.active .tcb-faq__icon {
    transform: rotate(45deg);
}

.twocol--faq-image-reverse .tcb-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.twocol--faq-image-reverse .tcb-faq__item.active .tcb-faq__answer {
    max-height: 300px;
}

.twocol--faq-image-reverse .tcb-faq__answer p {
    padding: 0 0 1.25rem;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol--faq-image-reverse[data-bg="dark"] .tcb-faq__answer p { color: rgba(255,255,255,0.8); }

/* Image - Fixed sizing */
.twocol--faq-image-reverse .tcb-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.twocol--faq-image-reverse .tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.twocol--faq-image-reverse .image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.twocol--faq-image-reverse .image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.twocol--faq-image-reverse .image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.twocol--faq-image-reverse .image-hover__title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.twocol--faq-image-reverse .image-hover__text {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol--faq-image-reverse .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .twocol--faq-image-reverse[data-direction="reverse"] .twocol__grid { direction: ltr; }
    .twocol--faq-image-reverse .twocol__slot--right { order: -1; }
    .twocol--faq-image-reverse .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* === TWO-COL VARIANT 20 (text-embed) === */
/* Two-Col V6: Text + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

/* Zigzag: reverse puts image on left, text on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="alt"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .tcb-text__list li,
.twocol[data-bg="alt"] .tcb-text__list li,
.twocol[data-bg="primary"] .tcb-text__list li {
    color: rgba(255, 255, 255, 0.9);
}

.tcb-text__list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.twocol[data-bg="primary"] .tcb-text__list li::before {
    background-color: rgba(255, 255, 255, 0.25);
}

.tcb-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.tcb-text__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.twocol[data-bg="primary"] .tcb-text__cta {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Image - proper sizing */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.image-hover__text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* Two-Col Embed Container - overflow visible for glow effects */
.tcb-embed {
    width: 100%;
    min-height: 300px;
    background: transparent;
    border-radius: var(--radius-lg, 12px);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tcb-embed > * {
    width: 100%;
    height: 100%;
}

.tcb-embed iframe {
    width: 100%;
    min-height: 350px;
    border: none;
    border-radius: var(--radius-lg, 12px);
}

/* SchemaReports widget frames inside tcb-embed */
.tcb-embed .sr-widget-frame {
    width: 100%;
    height: auto;
    min-height: 300px;
}

@media (max-width: 768px) {
    .tcb-embed {
        min-height: 250px;
    }
    .tcb-embed iframe {
        min-height: 280px;
    }
}

/* === TWO-COL VARIANT 21 (text-embed-reverse) === */
/* Two-Col V6: Text + Image */

.twocol {
    padding: 5rem 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.twocol[data-bg="dark"] {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.twocol[data-bg="alt"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="light"] {
    background: var(--color-bg-alt);
}

.twocol[data-bg="primary"] {
    background: var(--color-primary);
    color: var(--color-white);
}

.twocol[data-spacing="compact"] { padding: 3rem 0; }
.twocol[data-spacing="spacious"] { padding: 7rem 0; }
.twocol[data-spacing="large"] { padding: 6rem 0; }

.twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; }
.twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; }

/* Zigzag: reverse puts image on left, text on right */
.twocol[data-direction="reverse"] .twocol__slot--left { order: 2; }
.twocol[data-direction="reverse"] .twocol__slot--right { order: 1; }

.twocol__slot {
    display: flex;
    flex-direction: column;
}

/* Hide eyebrow */
.tcb-text__eyebrow { display: none; }

.tcb-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tcb-text__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.tcb-text__desc {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol[data-bg="dark"] .tcb-text__desc,
.twocol[data-bg="alt"] .tcb-text__desc,
.twocol[data-bg="primary"] .tcb-text__desc {
    color: rgba(255, 255, 255, 0.85);
}

.tcb-text__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.tcb-text__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

.twocol[data-bg="dark"] .tcb-text__list li,
.twocol[data-bg="alt"] .tcb-text__list li,
.twocol[data-bg="primary"] .tcb-text__list li {
    color: rgba(255, 255, 255, 0.9);
}

.tcb-text__list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.twocol[data-bg="primary"] .tcb-text__list li::before {
    background-color: rgba(255, 255, 255, 0.25);
}

.tcb-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    margin-top: 0.5rem;
    align-self: flex-start;
}

.tcb-text__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.twocol[data-bg="primary"] .tcb-text__cta {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Image - proper sizing */
.tcb-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.tcb-image__img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    max-height: 500px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-hover:hover .tcb-image__img {
    transform: scale(1.05);
}

.image-hover__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.image-hover:hover .image-hover__content {
    transform: translateY(0);
}

.image-hover__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.image-hover__text {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 768px) {
    .twocol { padding: 3rem 0; }
    .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .twocol[data-ratio="60-40"] .twocol__grid,
    .twocol[data-ratio="40-60"] .twocol__grid {
        grid-template-columns: 1fr;
    }
    /* On mobile, image always first */
    .twocol__slot--right { order: -1; }
    .twocol[data-direction="reverse"] .twocol__slot--left { order: 1; }
    .twocol[data-direction="reverse"] .twocol__slot--right { order: -1; }
    .tcb-image__img {
        min-height: 280px;
        max-height: 400px;
    }
}

/* Two-Col Embed Container - overflow visible for glow effects */
.tcb-embed {
    width: 100%;
    min-height: 300px;
    background: transparent;
    border-radius: var(--radius-lg, 12px);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tcb-embed > * {
    width: 100%;
    height: 100%;
}

.tcb-embed iframe {
    width: 100%;
    min-height: 350px;
    border: none;
    border-radius: var(--radius-lg, 12px);
}

/* SchemaReports widget frames inside tcb-embed */
.tcb-embed .sr-widget-frame {
    width: 100%;
    height: auto;
    min-height: 300px;
}

@media (max-width: 768px) {
    .tcb-embed {
        min-height: 250px;
    }
    .tcb-embed iframe {
        min-height: 280px;
    }
}

/* === TWO-COL VARIANT 22 (accordion-embed) === */
/* TWO-COL: ACCORDION-EMBED */
.twocol--accordion-embed {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.twocol--accordion-embed[data-bg="dark"] { background: var(--color-bg-dark); }
.twocol--accordion-embed[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol--accordion-embed[data-bg="primary"] { background: var(--color-primary); }

.twocol--accordion-embed[data-bg="dark"] .twocol__title,
.twocol--accordion-embed[data-bg="dark"] .twocol__subtitle,
.twocol--accordion-embed[data-bg="primary"] .twocol__title,
.twocol--accordion-embed[data-bg="primary"] .twocol__subtitle {
    color: var(--color-white);
}

.twocol--accordion-embed .twocol__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.twocol--accordion-embed .twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--accordion-embed .twocol__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol--accordion-embed .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Accordion Styles */
.tcb-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tcb-accordion__item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.twocol--accordion-embed[data-bg="dark"] .tcb-accordion__item {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(100, 116, 139, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tcb-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.twocol--accordion-embed[data-bg="dark"] .tcb-accordion__trigger,
.twocol--accordion-embed[data-bg="primary"] .tcb-accordion__trigger {
    color: var(--color-white);
}

.tcb-accordion__trigger:hover {
    background: var(--color-bg-alt);
}

.tcb-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.tcb-accordion__label {
    flex: 1;
}

.tcb-accordion__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.tcb-accordion__item.is-open .tcb-accordion__chevron {
    transform: rotate(180deg);
}

.twocol--accordion-embed .tcb-accordion__content {
    display: none;
    padding: 0 1.5rem 1.5rem;
    max-height: none !important;
    overflow: visible !important;
}

.twocol--accordion-embed .tcb-accordion__content.is-open {
    display: block;
}

.tcb-accordion__content p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol--accordion-embed[data-bg="dark"] .tcb-accordion__content p,
.twocol--accordion-embed[data-bg="primary"] .tcb-accordion__content p {
    color: rgba(255,255,255,0.85);
}

.tcb-accordion__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tcb-accordion__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.twocol--accordion-embed[data-bg="dark"] .tcb-accordion__list li,
.twocol--accordion-embed[data-bg="primary"] .tcb-accordion__list li {
    color: rgba(255,255,255,0.8);
}

.tcb-accordion__list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
}

/* CTA Button */
.tcb-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    transition: all 0.3s ease;
}

.tcb-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Embed Container - overflow visible for glow effects */
.twocol--accordion-embed .tcb-embed {
    position: sticky;
    top: 2rem;
    width: 100%;
    min-height: 400px;
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.twocol--accordion-embed .tcb-embed > * {
    width: 100%;
}

.twocol--accordion-embed .tcb-embed iframe {
    width: 100%;
    min-height: 400px;
    border: none;
}

.twocol--accordion-embed .tcb-embed .sr-widget-frame {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .twocol--accordion-embed .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .twocol--accordion-embed .tcb-embed {
        position: static;
        order: -1;
        min-height: 300px;
    }
}

/* === TWO-COL VARIANT 23 (tabs-embed) === */
/* TWO-COL: TABS-EMBED */
.twocol--tabs-embed {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.twocol--tabs-embed[data-bg="dark"] { background: var(--color-bg-dark); }
.twocol--tabs-embed[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol--tabs-embed[data-bg="primary"] { background: var(--color-primary); }

.twocol--tabs-embed[data-bg="dark"] .twocol__title,
.twocol--tabs-embed[data-bg="dark"] .twocol__subtitle,
.twocol--tabs-embed[data-bg="primary"] .twocol__title,
.twocol--tabs-embed[data-bg="primary"] .twocol__subtitle {
    color: var(--color-white);
}

.twocol--tabs-embed .twocol__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.twocol--tabs-embed .twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--tabs-embed .twocol__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol--tabs-embed .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Tabs Styles */
.tcb-tabs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tcb-tabs__nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tcb-tabs__btn {
    padding: 0.875rem 1.5rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.twocol--tabs-embed[data-bg="dark"] .tcb-tabs__btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: var(--color-white);
}

.tcb-tabs__btn:hover {
    border-color: var(--color-primary);
}

.tcb-tabs__btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Tab Panels */
.tcb-tabs__panels {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--color-border);
}

.twocol--tabs-embed[data-bg="dark"] .tcb-tabs__panels {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.tcb-tabs__panel {
    display: none;
}

.tcb-tabs__panel.is-active {
    display: block;
}

.tcb-tabs__panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--tabs-embed[data-bg="dark"] .tcb-tabs__panel-title,
.twocol--tabs-embed[data-bg="primary"] .tcb-tabs__panel-title {
    color: var(--color-white);
}

.tcb-tabs__panel-desc {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.twocol--tabs-embed[data-bg="dark"] .tcb-tabs__panel-desc,
.twocol--tabs-embed[data-bg="primary"] .tcb-tabs__panel-desc {
    color: rgba(255,255,255,0.85);
}

.tcb-tabs__panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.tcb-tabs__panel-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.twocol--tabs-embed[data-bg="dark"] .tcb-tabs__panel-list li,
.twocol--tabs-embed[data-bg="primary"] .tcb-tabs__panel-list li {
    color: rgba(255,255,255,0.8);
}

.tcb-tabs__panel-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* CTA Button */
.twocol--tabs-embed .tcb-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.twocol--tabs-embed .tcb-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Embed Container */
.twocol--tabs-embed .tcb-embed {
    position: sticky;
    top: 2rem;
    width: 100%;
    min-height: 450px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.twocol--tabs-embed .tcb-embed > * {
    width: 100%;
}

.twocol--tabs-embed .tcb-embed iframe {
    width: 100%;
    min-height: 450px;
    border: none;
}

.twocol--tabs-embed .tcb-embed .sr-widget-frame {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .twocol--tabs-embed .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .twocol--tabs-embed .tcb-embed {
        position: static;
        order: -1;
        min-height: 300px;
    }
    
    .tcb-tabs__panel-list {
        grid-template-columns: 1fr;
    }
}

/* === TWO-COL VARIANT 24 (accordion-embed-reverse) === */
/* TWO-COL: ACCORDION-EMBED-REVERSE */
.twocol--accordion-embed-reverse {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.twocol--accordion-embed-reverse[data-bg="dark"] { background: var(--color-bg-dark); }
.twocol--accordion-embed-reverse[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol--accordion-embed-reverse[data-bg="primary"] { background: var(--color-primary); }

.twocol--accordion-embed-reverse[data-bg="dark"] .twocol__title,
.twocol--accordion-embed-reverse[data-bg="dark"] .twocol__subtitle,
.twocol--accordion-embed-reverse[data-bg="primary"] .twocol__title,
.twocol--accordion-embed-reverse[data-bg="primary"] .twocol__subtitle {
    color: var(--color-white);
}

.twocol--accordion-embed-reverse .twocol__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.twocol--accordion-embed-reverse .twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--accordion-embed-reverse .twocol__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol--accordion-embed-reverse .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Accordion Styles */
.twocol--accordion-embed-reverse .tcb-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.twocol--accordion-embed-reverse .tcb-accordion__item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.twocol--accordion-embed-reverse[data-bg="dark"] .tcb-accordion__item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.twocol--accordion-embed-reverse .tcb-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.twocol--accordion-embed-reverse[data-bg="dark"] .tcb-accordion__trigger,
.twocol--accordion-embed-reverse[data-bg="primary"] .tcb-accordion__trigger {
    color: var(--color-white);
}

.twocol--accordion-embed-reverse .tcb-accordion__trigger:hover {
    background: var(--color-bg-alt);
}

.twocol--accordion-embed-reverse .tcb-accordion__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.twocol--accordion-embed-reverse .tcb-accordion__label {
    flex: 1;
}

.twocol--accordion-embed-reverse .tcb-accordion__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.twocol--accordion-embed-reverse .tcb-accordion__item.is-open .tcb-accordion__chevron {
    transform: rotate(180deg);
}

.twocol--accordion-embed-reverse .tcb-accordion__content {
    display: none;
    padding: 0 1.5rem 1.5rem;
}

.twocol--accordion-embed-reverse .tcb-accordion__content.is-open {
    display: block;
}

.twocol--accordion-embed-reverse .tcb-accordion__content p {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.twocol--accordion-embed-reverse[data-bg="dark"] .tcb-accordion__content p,
.twocol--accordion-embed-reverse[data-bg="primary"] .tcb-accordion__content p {
    color: rgba(255,255,255,0.85);
}

.twocol--accordion-embed-reverse .tcb-accordion__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.twocol--accordion-embed-reverse .tcb-accordion__list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.twocol--accordion-embed-reverse[data-bg="dark"] .tcb-accordion__list li,
.twocol--accordion-embed-reverse[data-bg="primary"] .tcb-accordion__list li {
    color: rgba(255,255,255,0.8);
}

.twocol--accordion-embed-reverse .tcb-accordion__list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
}

/* CTA Button */
.twocol--accordion-embed-reverse .tcb-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    transition: all 0.3s ease;
}

.twocol--accordion-embed-reverse .tcb-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Embed Container */
.twocol--accordion-embed-reverse .tcb-embed {
    position: sticky;
    top: 2rem;
    width: 100%;
    min-height: 400px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.twocol--accordion-embed-reverse .tcb-embed > * {
    width: 100%;
}

.twocol--accordion-embed-reverse .tcb-embed iframe {
    width: 100%;
    min-height: 400px;
    border: none;
}

.twocol--accordion-embed-reverse .tcb-embed .sr-widget-frame {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .twocol--accordion-embed-reverse .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .twocol--accordion-embed-reverse .tcb-embed {
        position: static;
        min-height: 300px;
    }
}

/* === TWO-COL VARIANT 25 (tabs-embed-reverse) === */
/* TWO-COL: TABS-EMBED-REVERSE */
.twocol--tabs-embed-reverse {
    padding: var(--section-padding-y, 5rem) 0;
    background: var(--color-bg);
}

.twocol--tabs-embed-reverse[data-bg="dark"] { background: var(--color-bg-dark); }
.twocol--tabs-embed-reverse[data-bg="alt"] { background: var(--color-bg-alt); }
.twocol--tabs-embed-reverse[data-bg="primary"] { background: var(--color-primary); }

.twocol--tabs-embed-reverse[data-bg="dark"] .twocol__title,
.twocol--tabs-embed-reverse[data-bg="dark"] .twocol__subtitle,
.twocol--tabs-embed-reverse[data-bg="primary"] .twocol__title,
.twocol--tabs-embed-reverse[data-bg="primary"] .twocol__subtitle {
    color: var(--color-white);
}

.twocol--tabs-embed-reverse .twocol__header {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.twocol--tabs-embed-reverse .twocol__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--tabs-embed-reverse .twocol__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.twocol--tabs-embed-reverse .twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Tabs Styles */
.twocol--tabs-embed-reverse .tcb-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.twocol--tabs-embed-reverse .twocol__slot--right {
    text-align: center;
}

.twocol--tabs-embed-reverse .tcb-tabs__nav {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    border-bottom: none;
}

.twocol--tabs-embed-reverse .tcb-tabs__btn {
    padding: 0.875rem 1.5rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
}

.twocol--tabs-embed-reverse[data-bg="dark"] .tcb-tabs__btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color: var(--color-white);
}

.twocol--tabs-embed-reverse .tcb-tabs__btn:hover {
    border-color: var(--color-primary);
}

.twocol--tabs-embed-reverse .tcb-tabs__btn.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Tab Panels */
.twocol--tabs-embed-reverse .tcb-tabs__panels {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid var(--color-border);
    text-align: center;
    width: 100%;
}

.twocol--tabs-embed-reverse[data-bg="dark"] .tcb-tabs__panels {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.twocol--tabs-embed-reverse .tcb-tabs__panel {
    display: none;
}

.twocol--tabs-embed-reverse .tcb-tabs__panel.is-active {
    display: block;
}

.twocol--tabs-embed-reverse .tcb-tabs__panel-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 1rem;
}

.twocol--tabs-embed-reverse[data-bg="dark"] .tcb-tabs__panel-title,
.twocol--tabs-embed-reverse[data-bg="primary"] .tcb-tabs__panel-title {
    color: var(--color-white);
}

.twocol--tabs-embed-reverse .tcb-tabs__panel-desc {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.twocol--tabs-embed-reverse[data-bg="dark"] .tcb-tabs__panel-desc,
.twocol--tabs-embed-reverse[data-bg="primary"] .tcb-tabs__panel-desc {
    color: rgba(255,255,255,0.85);
}

.twocol--tabs-embed-reverse .tcb-tabs__panel-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: fit-content;
    text-align: left;
}

.twocol--tabs-embed-reverse .tcb-tabs__panel-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.twocol--tabs-embed-reverse[data-bg="dark"] .tcb-tabs__panel-list li,
.twocol--tabs-embed-reverse[data-bg="primary"] .tcb-tabs__panel-list li {
    color: rgba(255,255,255,0.8);
}

.twocol--tabs-embed-reverse .tcb-tabs__panel-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

/* CTA Button */
.twocol--tabs-embed-reverse .tcb-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.twocol--tabs-embed-reverse .tcb-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* Embed Container - overflow visible for glow effects */
.twocol--tabs-embed-reverse .tcb-embed {
    position: sticky;
    top: 2rem;
    width: 100%;
    min-height: 450px;
    background: transparent;
    border-radius: var(--radius-lg);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.twocol--tabs-embed-reverse .tcb-embed > * {
    width: 100%;
}

.twocol--tabs-embed-reverse .tcb-embed iframe {
    width: 100%;
    min-height: 450px;
    border: none;
}

.twocol--tabs-embed-reverse .tcb-embed .sr-widget-frame {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .twocol--tabs-embed-reverse .twocol__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .twocol--tabs-embed-reverse .tcb-embed {
        position: static;
        min-height: 300px;
    }
    
    .twocol--tabs-embed-reverse .tcb-tabs__panel-list {
        grid-template-columns: 1fr;
    }
}

/* === WIDGET VARIANT 1 (centered) === */
/* Widget Section */
.widget-section {
    padding: var(--section-spacing, 5rem) 0;
    background: var(--color-bg);
}

.widget-section__header {
    text-align: center;
    margin-bottom: 3rem;
}

.widget-section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.widget-section__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.widget-section__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hide header if empty */
.widget-section__title:empty,
.widget-section__subtitle:empty {
    display: none;
}

.widget-section__header:has(.widget-section__title:empty):has(.widget-section__subtitle:empty) {
    display: none;
}

/* === WIDGET VARIANT 2 (full-width-embed) === */
/* Widget v2: Full-Width Embed */
.widget-fullwidth {
    padding: 2rem 0;
    background: var(--color-bg-dark, #0a0a0f);
    position: relative;
    overflow: hidden;
}

.widget-fullwidth::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.widget-fullwidth__header {
    text-align: center;
    padding: 0 1rem 1.5rem;
    position: relative;
    z-index: 1;
}

.widget-fullwidth__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    background: var(--gradient-text, linear-gradient(135deg, #10B981, #60a5fa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.widget-fullwidth__title:empty {
    display: none;
}

.widget-fullwidth__header:has(.widget-fullwidth__title:empty) {
    display: none;
}

.widget-fullwidth__embed {
    width: 100%;
    position: relative;
    z-index: 1;
    background: var(--glass-bg, rgba(15, 23, 42, 0.8));
    border-top: 1px solid var(--glass-border, rgba(16, 185, 129, 0.15));
    border-bottom: 1px solid var(--glass-border, rgba(16, 185, 129, 0.15));
    backdrop-filter: blur(10px);
}

/* Make iframes responsive */
.widget-fullwidth__embed iframe {
    width: 100%;
    min-height: 500px;
    border: none;
    display: block;
}

/* Common embed sources */
.widget-fullwidth__embed iframe[src*="calendly"] {
    min-height: 700px;
}

.widget-fullwidth__embed iframe[src*="typeform"],
.widget-fullwidth__embed iframe[src*="google.com/forms"] {
    min-height: 600px;
}

.widget-fullwidth__embed iframe[src*="youtube"],
.widget-fullwidth__embed iframe[src*="vimeo"] {
    aspect-ratio: 16/9;
    min-height: auto;
}

/* Loading shimmer placeholder */
.widget-fullwidth__embed:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 500px;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.05) 0%,
        rgba(16, 185, 129, 0.1) 50%,
        rgba(16, 185, 129, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
    .widget-fullwidth__embed iframe {
        min-height: 400px;
    }
    .widget-fullwidth__embed iframe[src*="calendly"] {
        min-height: 600px;
    }
}


/* === WIDGET VARIANT 3 (split-embed) === */
/* Widget v3: Split Embed (Content Left, Embed Right) */
.widget-split {
    padding: 5rem 0;
    background: var(--color-bg, #060d21);
    position: relative;
}

.widget-split::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(96, 165, 250, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.widget-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Reverse direction */
.widget-split[data-direction="reverse"] .widget-split__content { order: 2; }
.widget-split[data-direction="reverse"] .widget-split__embed-wrap { order: 1; }

.widget-split__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget-split__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    background: var(--gradient-text, linear-gradient(135deg, #10B981, #60a5fa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.widget-split__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary, rgba(255,255,255,0.8));
    margin: 0;
}

.widget-split__cta {
    margin-top: 0.5rem;
}

.widget-split__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--gradient-btn, linear-gradient(135deg, #10B981 0%, #059669 100%));
    color: var(--color-white, #fff);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--glow-green, 0 0 20px rgba(16, 185, 129, 0.3));
}

.widget-split__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-combined, 0 0 30px rgba(16, 185, 129, 0.4), 0 0 60px rgba(96, 165, 250, 0.2));
}

/* Hide CTA if empty */
.widget-split__btn:empty,
.widget-split__cta:has(.widget-split__btn:empty) {
    display: none;
}

/* Embed wrapper with glass card effect */
.widget-split__embed-wrap {
    position: relative;
}

.widget-split__embed {
    background: var(--glass-bg, rgba(15, 23, 42, 0.8));
    border: 1px solid var(--glass-border, rgba(16, 185, 129, 0.2));
    border-radius: var(--radius-lg, 12px);
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow, 0 4px 30px rgba(0, 0, 0, 0.3)),
                0 0 40px rgba(16, 185, 129, 0.1);
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.widget-split__embed:hover {
    border-color: var(--color-primary, #10B981);
    box-shadow: var(--glow-green, 0 0 20px rgba(16, 185, 129, 0.3)),
                0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Make iframes responsive */
.widget-split__embed iframe {
    width: 100%;
    min-height: 450px;
    border: none;
    display: block;
}

/* Common embed sources */
.widget-split__embed iframe[src*="calendly"] {
    min-height: 650px;
}

.widget-split__embed iframe[src*="typeform"],
.widget-split__embed iframe[src*="google.com/forms"] {
    min-height: 550px;
}

.widget-split__embed iframe[src*="youtube"],
.widget-split__embed iframe[src*="vimeo"] {
    aspect-ratio: 16/9;
    min-height: auto;
}

/* Loading shimmer */
.widget-split__embed:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 450px;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.05) 0%,
        rgba(16, 185, 129, 0.1) 50%,
        rgba(16, 185, 129, 0.05) 100%);
    background-size: 200% 100%;
    animation: widget-shimmer 1.5s infinite;
}

@keyframes widget-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 968px) {
    .widget-split__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Embed first on mobile */
    .widget-split__embed-wrap { order: -1; }
    .widget-split[data-direction="reverse"] .widget-split__embed-wrap { order: -1; }
    .widget-split[data-direction="reverse"] .widget-split__content { order: 1; }

    .widget-split__embed iframe {
        min-height: 400px;
    }

    .widget-split__embed iframe[src*="calendly"] {
        min-height: 550px;
    }
}

@media (max-width: 480px) {
    .widget-split {
        padding: 3rem 0;
    }

    .widget-split__title {
        font-size: 1.5rem;
    }

    .widget-split__btn {
        width: 100%;
        justify-content: center;
    }
}


/* === WIDGET VARIANT 4 (split-embed-reverse) === */
/* Widget v3: Split Embed (Content Left, Embed Right) */
.widget-split {
    padding: 5rem 0;
    background: var(--color-bg, #060d21);
    position: relative;
}

.widget-split::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 50%, rgba(96, 165, 250, 0.04) 0%, transparent 50%);
    pointer-events: none;
}

.widget-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Reverse direction */
.widget-split[data-direction="reverse"] .widget-split__content { order: 2; }
.widget-split[data-direction="reverse"] .widget-split__embed-wrap { order: 1; }

.widget-split__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget-split__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    background: var(--gradient-text, linear-gradient(135deg, #10B981, #60a5fa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.widget-split__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-secondary, rgba(255,255,255,0.8));
    margin: 0;
}

.widget-split__cta {
    margin-top: 0.5rem;
}

.widget-split__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: var(--gradient-btn, linear-gradient(135deg, #10B981 0%, #059669 100%));
    color: var(--color-white, #fff);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--glow-green, 0 0 20px rgba(16, 185, 129, 0.3));
}

.widget-split__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-combined, 0 0 30px rgba(16, 185, 129, 0.4), 0 0 60px rgba(96, 165, 250, 0.2));
}

/* Hide CTA if empty */
.widget-split__btn:empty,
.widget-split__cta:has(.widget-split__btn:empty) {
    display: none;
}

/* Embed wrapper - overflow visible for glow effects */
.widget-split__embed-wrap {
    position: relative;
    overflow: visible;
}

.widget-split__embed {
    background: transparent;
    border: none;
    border-radius: var(--radius-lg, 12px);
    overflow: visible;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Make iframes responsive */
.widget-split__embed iframe {
    width: 100%;
    min-height: 450px;
    border: none;
    display: block;
}

/* Common embed sources */
.widget-split__embed iframe[src*="calendly"] {
    min-height: 650px;
}

.widget-split__embed iframe[src*="typeform"],
.widget-split__embed iframe[src*="google.com/forms"] {
    min-height: 550px;
}

.widget-split__embed iframe[src*="youtube"],
.widget-split__embed iframe[src*="vimeo"] {
    aspect-ratio: 16/9;
    min-height: auto;
}

/* Loading shimmer */
.widget-split__embed:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 450px;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.05) 0%,
        rgba(16, 185, 129, 0.1) 50%,
        rgba(16, 185, 129, 0.05) 100%);
    background-size: 200% 100%;
    animation: widget-shimmer 1.5s infinite;
}

@keyframes widget-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 968px) {
    .widget-split__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Embed first on mobile */
    .widget-split__embed-wrap { order: -1; }
    .widget-split[data-direction="reverse"] .widget-split__embed-wrap { order: -1; }
    .widget-split[data-direction="reverse"] .widget-split__content { order: 1; }

    .widget-split__embed iframe {
        min-height: 400px;
    }

    .widget-split__embed iframe[src*="calendly"] {
        min-height: 550px;
    }
}

@media (max-width: 480px) {
    .widget-split {
        padding: 3rem 0;
    }

    .widget-split__title {
        font-size: 1.5rem;
    }

    .widget-split__btn {
        width: 100%;
        justify-content: center;
    }
}

/* === WIDGET VARIANT 5 (multi-embed) === */
/* Widget v5: Multi-Embed Grid */
.widget-multi {
    padding: 5rem 0;
    background: var(--color-bg, #060d21);
    position: relative;
}

.widget-multi::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.widget-multi__header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.widget-multi__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 1rem;
    background: var(--gradient-text, linear-gradient(135deg, #10B981, #60a5fa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.widget-multi__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary, rgba(255,255,255,0.8));
    max-width: 600px;
    margin: 0 auto;
}

/* Hide header if empty */
.widget-multi__title:empty { display: none; }
.widget-multi__subtitle:empty { display: none; }
.widget-multi__header:has(.widget-multi__title:empty):has(.widget-multi__subtitle:empty) {
    display: none;
}

.widget-multi__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

/* Hide empty cards */
.widget-multi__card:has(.widget-multi__embed:empty) {
    display: none;
}

/* Auto-adjust grid based on visible cards */
.widget-multi__grid:has(.widget-multi__card:nth-child(3):not(:has(.widget-multi__embed:empty))) {
    grid-template-columns: repeat(3, 1fr);
}

.widget-multi__card {
    background: var(--glass-bg, rgba(15, 23, 42, 0.8));
    border: 1px solid var(--glass-border, rgba(16, 185, 129, 0.15));
    border-radius: var(--radius-lg, 12px);
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow, 0 4px 30px rgba(0, 0, 0, 0.3));
    overflow: hidden;
    transition: all 0.3s ease;
}

.widget-multi__card:hover {
    border-color: var(--color-primary, #10B981);
    box-shadow: var(--glow-green, 0 0 20px rgba(16, 185, 129, 0.3)),
                0 8px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(-4px);
}

.widget-multi__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    padding: 1.25rem 1.5rem;
    margin: 0;
    border-bottom: 1px solid var(--glass-border, rgba(16, 185, 129, 0.1));
    background: rgba(16, 185, 129, 0.05);
}

.widget-multi__card-title:empty {
    display: none;
}

.widget-multi__embed {
    width: 100%;
    overflow: hidden;
}

/* Make iframes responsive */
.widget-multi__embed iframe {
    width: 100%;
    min-height: 350px;
    border: none;
    display: block;
}

/* Common embed sources */
.widget-multi__embed iframe[src*="calendly"] {
    min-height: 500px;
}

.widget-multi__embed iframe[src*="typeform"],
.widget-multi__embed iframe[src*="google.com/forms"] {
    min-height: 450px;
}

.widget-multi__embed iframe[src*="youtube"],
.widget-multi__embed iframe[src*="vimeo"] {
    aspect-ratio: 16/9;
    min-height: auto;
}

/* Loading shimmer */
.widget-multi__embed:empty::after {
    content: '';
    display: block;
    width: 100%;
    height: 350px;
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.05) 0%,
        rgba(16, 185, 129, 0.1) 50%,
        rgba(16, 185, 129, 0.05) 100%);
    background-size: 200% 100%;
    animation: multi-shimmer 1.5s infinite;
}

@keyframes multi-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 1024px) {
    .widget-multi__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Third card spans full width on 2-col */
    .widget-multi__card:nth-child(3) {
        grid-column: span 2;
    }

    .widget-multi__card:nth-child(3) .widget-multi__embed iframe {
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .widget-multi {
        padding: 3rem 0;
    }

    .widget-multi__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .widget-multi__card:nth-child(3) {
        grid-column: span 1;
    }

    .widget-multi__embed iframe {
        min-height: 300px;
    }

    .widget-multi__embed iframe[src*="calendly"] {
        min-height: 450px;
    }
}


/* === WIDGET VARIANT 6 (split-bullets) === */
/* Widget v6: Split with Bullets */
.widget-split__bullets {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.widget-split__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-secondary, rgba(255,255,255,0.9));
}

.widget-split__bullets .bullet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--gradient-btn, linear-gradient(135deg, #10B981 0%, #059669 100%));
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 0.1rem;
}

.widget-split__bullets .bullet-text {
    flex: 1;
}

/* Hide empty bullets */
.widget-split__bullets li:has(.bullet-text:empty) {
    display: none;
}


/* === WIDGET VARIANT 7 (split-tabs) === */
/* Widget v7: Split with Tabs */
.widget-tabs {
    margin: 1rem 0;
}

.widget-tabs__nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    padding-bottom: 0;
    margin-bottom: 1rem;
}

.widget-tab__btn {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary, rgba(255,255,255,0.6));
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
}

.widget-tab__btn:hover {
    color: var(--color-text, #fff);
    background: var(--glass-bg, rgba(15, 23, 42, 0.5));
}

.widget-tab__btn.active {
    color: var(--color-primary, #10B981);
    background: var(--glass-bg, rgba(15, 23, 42, 0.8));
}

.widget-tab__btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-btn, linear-gradient(135deg, #10B981 0%, #059669 100%));
}

.widget-tabs__content {
    min-height: 80px;
}

.widget-tab__panel {
    display: none;
    color: var(--color-text-secondary, rgba(255,255,255,0.8));
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.5rem 0;
    animation: tabFadeIn 0.3s ease;
}

.widget-tab__panel.active {
    display: block;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .widget-tabs__nav {
        flex-wrap: wrap;
    }
    .widget-tab__btn {
        flex: 1;
        min-width: 80px;
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
        text-align: center;
    }
}


/* === WIDGET VARIANT 8 (split-accordions) === */
/* Widget v8: Split with Accordions */
.sr-accordion-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.sr-accordion {
    background: var(--glass-bg, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.sr-accordion:hover {
    border-color: var(--color-primary, #10B981);
}

.sr-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--color-text, #fff);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.sr-accordion__trigger:hover {
    background: rgba(16, 185, 129, 0.05);
}

.sr-accordion__trigger .accordion-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    color: var(--color-primary, #10B981);
    transition: transform 0.3s ease;
}

.sr-accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.sr-accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--color-text-secondary, rgba(255,255,255,0.8));
    font-size: 0.95rem;
    line-height: 1.6;
}

.sr-accordion.open .sr-accordion__content {
    max-height: 500px;
    padding: 0 1.25rem 1rem 1.25rem;
}

/* Hide empty accordions */
.sr-accordion:has(.sr-accordion__trigger span:empty) {
    display: none;
}


/* === WIDGET VARIANT 9 (split-reverse-bullets) === */
/* Widget v9: Split Reverse with Bullets - CSS inherited from v6 */

/* === WIDGET VARIANT 10 (split-reverse-tabs) === */
/* Widget v10: Split Reverse with Tabs - CSS inherited from v7 */

/* === WIDGET VARIANT 11 (split-reverse-accordions) === */
/* Widget v11: Split Reverse with Accordions - CSS inherited from v8 */

/* === WIDGET VARIANT 12 (dual-embed) === */
/* Widget Dual Embed */
.widget-dual {
    padding: 4rem 0;
}
.widget-dual__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.widget-dual__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 0 0 1rem;
    line-height: 1.2;
}
.widget-dual__desc {
    font-size: 1.125rem;
    color: var(--color-text-muted, #94a3b8);
    line-height: 1.6;
    margin: 0;
}
.widget-dual__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.widget-dual__embed-wrap {
    width: 100%;
    overflow: visible;
}
.widget-dual__embed {
    border-radius: 12px;
    overflow: visible;
}
@media (max-width: 768px) {
    .widget-dual__grid {
        grid-template-columns: 1fr;
    }
}

/* === WIDGET VARIANT 13 (dual-embed-text) === */
/* Widget Dual Embed with Text */
.widget-dual-text {
    padding: 4rem 0;
}
.widget-dual-text__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.widget-dual-text__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.widget-dual-text__content {
    padding: 0 0.5rem;
}
.widget-dual-text__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}
.widget-dual-text__desc {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.5;
}
.widget-dual-text__embed {
    border-radius: 12px;
    overflow: hidden;
}
@media (max-width: 768px) {
    .widget-dual-text__grid {
        grid-template-columns: 1fr;
    }
}