/* ============================================================
   e-KYC.lu — Master Stylesheet
   Template: classic-sections / modern-tech
   ============================================================ */

/* --- CSS Custom Properties (Dark = default root) --- */
:root, [data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --text-heading: #f4f4f5;
  --text-body: #a1a1aa;
  --text-muted: #71717a;
  --accent: #60a5fa;
  --accent-secondary: #a78bfa;
  --accent-tertiary: #7AB51D;
  --border: rgba(255,255,255,0.08);
  --border-emphasis: rgba(255,255,255,0.15);
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-accent: 0 0 30px rgba(96,165,250,0.1);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(10,10,10,0.8);
  --nav-border: rgba(255,255,255,0.06);
  --btn-bg: #60a5fa;
  --btn-text: #ffffff;
  --btn-hover: #3b82f6;
  --section-alt: #0f0f1a;
  --footer-bg: #050505;
  --glass-blur: blur(20px);
  --ornament-display: none;
}
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: rgba(0,0,0,0.02);
  --bg-card-hover: rgba(0,0,0,0.04);
  --text-heading: #0f172a;
  --text-body: #475569;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-secondary: #7c3aed;
  --accent-tertiary: #6EA319;
  --border: rgba(0,0,0,0.08);
  --border-emphasis: rgba(0,0,0,0.15);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-accent: 0 0 20px rgba(59,130,246,0.08);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-border: rgba(0,0,0,0.06);
  --btn-bg: #3b82f6;
  --btn-text: #ffffff;
  --btn-hover: #2563eb;
  --section-alt: #f1f5f9;
  --footer-bg: #0f172a;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

/* Accent overrides for e-KYC brand green */
[data-accent="emerald"] {
  --accent: #7AB51D;
  --btn-bg: #7AB51D;
  --btn-hover: #649812;
  --shadow-accent: 0 0 30px rgba(122,181,29,0.15);
}
[data-accent="emerald"][data-theme="light"] {
  --accent: #6EA319;
  --btn-bg: #6EA319;
  --btn-hover: #5A8A10;
  --shadow-accent: 0 0 20px rgba(110,163,25,0.12);
}

/* --- Reset & Base --- */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap);

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--btn-hover); }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  line-height: 1.2;
  font-weight: 700;
}
::selection { background: var(--accent); color: var(--btn-text); }

/* --- Container --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* --- Section --- */
section { padding: 100px 0; position: relative; }
section.section-alt { background: var(--section-alt); }
.section-header { text-align: center; margin-bottom: 60px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.section-header p { font-size: 1.1rem; color: var(--text-muted); }
.section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding: 4px 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
}

/* --- Navigation --- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--nav-border);
  padding: 10px 0;
  box-shadow: var(--shadow);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.nav-brand { display: flex; align-items: center; text-decoration: none; }
.nav-brand img { height: 40px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-body);
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-heading); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  font-family: var(--font-body);
}
.nav-cta:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Theme toggle */
.theme-toggle {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  color: var(--text-body);
}
.theme-toggle:hover { background: var(--bg-card-hover); border-color: var(--border-emphasis); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Language selector */
.lang-selector {
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
}
.lang-selector select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  color: var(--text-heading);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
}
.lang-selector select:hover { border-color: var(--border-emphasis); }
.lang-selector::after {
  content: '';
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  pointer-events: none;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1010;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-heading);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav */
.nav-mobile {
  display: none;
  position: fixed;
  top: 0; right: -100%;
  width: 300px; height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  padding: 80px 32px 32px;
  transition: right 0.3s ease;
  z-index: 1005;
  overflow-y: auto;
}
.nav-mobile.open { right: 0; }
.nav-mobile a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease;
}
.nav-mobile a:hover { color: var(--accent); }
.nav-mobile .nav-cta-mobile {
  display: block;
  text-align: center;
  margin-top: 24px;
  padding: 14px 24px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}
.nav-mobile .nav-cta-mobile:hover { background: var(--btn-hover); color: var(--btn-text); }
.nav-mobile .mobile-extras {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-overlay.open { display: block; opacity: 1; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}
.btn-primary:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  transform: translateY(-2px);
}
.btn-white {
  background: #ffffff;
  color: var(--accent);
  font-weight: 600;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  color: var(--accent);
}
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 60px;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-tertiary) 6%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-content { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin-bottom: 20px;
  font-weight: 800;
}
.hero h1 .gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-body);
  margin-bottom: 32px;
  line-height: 1.7;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
  color: var(--accent);
}
.hero-badge svg { width: 14px; height: 14px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hero-stat {
  text-align: center;
  padding: 16px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.3s ease;
}
.hero-stat:hover { border-color: var(--border-emphasis); }
.hero-stat .stat-number {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 2px;
}
.hero-stat .stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Hero illustration */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illustration {
  width: 100%;
  max-width: 520px;
}
.hero-illustration svg { width: 100%; height: auto; }

/* --- Page Hero (inner pages) --- */
.page-hero {
  padding: 140px 0 80px;
  text-align: center;
  background: var(--bg-primary);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 16px;
  position: relative;
}
.page-hero p {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Spotlight effect on hover */
.card-spotlight::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 300px; height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-spotlight:hover::before { opacity: 1; }

/* Feature icon (glass-luxe) */
.feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.feature-icon svg { width: 26px; height: 26px; color: var(--accent); stroke: var(--accent); fill: none; }
.card:hover .feature-icon {
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.card h3 { font-size: 1.15rem; margin-bottom: 10px; font-weight: 600; }
.card p { font-size: 0.93rem; color: var(--text-body); line-height: 1.65; }

/* --- Key Figures Band --- */
.figures-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.figure-card {
  text-align: center;
  padding: 36px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.35s ease;
}
.figure-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.figure-card .feature-icon { margin: 0 auto 16px; }
.figure-card h3 { font-size: 1rem; font-weight: 600; }

/* --- Features Grid --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* --- Timeline (How it works) --- */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 36px;
  left: calc(16.666% + 20px);
  right: calc(16.666% + 20px);
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-tertiary));
  opacity: 0.3;
}
.timeline-step { text-align: center; position: relative; z-index: 1; }
.step-number {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  border-radius: 50%;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent) 30%, transparent);
}
.timeline-step h3 { font-size: 1.15rem; margin-bottom: 10px; }
.timeline-step p { font-size: 0.93rem; color: var(--text-body); line-height: 1.6; }

/* --- Pricing --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  transition: all 0.35s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}
.pricing-card.popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 2px;
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.popular-badge {
  display: inline-block;
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  border-radius: 999px;
  margin-bottom: 16px;
}
.pricing-card .pack-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.pricing-card .credits {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.pricing-card .price {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
}
.pricing-card .price-suffix {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pricing-card .price-per {
  font-size: 0.88rem;
  color: var(--accent);
  margin: 8px 0 24px;
  font-weight: 600;
}
.pricing-card .btn { width: 100%; justify-content: center; margin-top: auto; }
.pricing-note {
  text-align: center;
  margin-top: 32px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
/* --- Compliance Badges --- */
.compliance-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-heading);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: all 0.3s ease;
}
.compliance-badge:hover {
  background: var(--bg-card-hover);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent);
}
.compliance-badge svg { width: 18px; height: 18px; color: var(--accent); stroke: var(--accent); fill: none; }

/* --- Testimonials --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: all 0.35s ease;
  position: relative;
}
.testimonial-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.testimonial-card .quote-icon {
  color: var(--accent);
  opacity: 0.3;
  margin-bottom: 16px;
}
.testimonial-card .quote-icon svg { width: 40px; height: 40px; }
.testimonial-card blockquote {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 24px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}
.testimonial-info strong { display: block; font-size: 0.92rem; color: var(--text-heading); }
.testimonial-info span { font-size: 0.82rem; color: var(--text-muted); }

/* --- CTA Section --- */
.cta-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent-tertiary)));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cta-section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #ffffff; margin-bottom: 16px; }
.cta-section p { font-size: 1.1rem; color: rgba(255,255,255,0.85); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- Footer --- */
.site-footer {
  background: var(--footer-bg);
  padding: 60px 0 0;
  color: #94a3b8;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand img { height: 36px; margin-bottom: 16px; filter: brightness(0) invert(1); }
[data-theme="light"] .footer-brand img { filter: brightness(0) invert(1); }
.footer-brand p { font-size: 0.88rem; line-height: 1.6; color: #94a3b8; max-width: 280px; }
.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: #94a3b8;
  padding: 5px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: #ffffff; }
.footer-col p { font-size: 0.88rem; line-height: 1.6; }
.footer-col .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.footer-col .contact-item svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--accent); stroke: var(--accent); fill: none; }
.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 0.82rem;
  color: #64748b;
}
.footer-bottom a { color: #94a3b8; }
.footer-bottom a:hover { color: #ffffff; }

/* --- Contact Form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: start;
}
.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-item .info-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 10px;
  flex-shrink: 0;
}
.contact-info-item .info-icon svg { width: 20px; height: 20px; color: var(--accent); stroke: var(--accent); fill: none; }
.contact-info-item h4 { font-size: 0.92rem; font-weight: 600; color: var(--text-heading); margin-bottom: 4px; }
.contact-info-item p { font-size: 0.9rem; color: var(--text-body); }
.contact-form-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-heading);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --- Demo Request Modal --- */
.demo-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 20px;
}
.demo-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.demo-modal {
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 520px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.demo-modal-overlay.active .demo-modal {
  transform: translateY(0);
}
[data-theme="light"] .demo-modal {
  background: #ffffff;
}
.demo-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}
.demo-modal-close:hover {
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  color: var(--text-heading);
}
.demo-modal h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.demo-modal > p {
  font-size: 0.92rem;
  color: var(--text-body);
  margin-bottom: 24px;
}
.demo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .demo-modal {
    padding: 28px 20px;
  }
  .demo-form-row {
    grid-template-columns: 1fr;
  }
}

/* --- FAQ --- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.faq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all 0.35s ease;
}
.faq-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-2px);
}
.faq-card .feature-icon { margin-bottom: 16px; }
.faq-card h3 { font-size: 1.05rem; margin-bottom: 12px; }
.faq-card p { font-size: 0.9rem; color: var(--text-body); line-height: 1.65; }

/* --- Service Blocks (alternating) --- */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }
.service-block:nth-child(even) .service-visual { order: -1; }
.service-block .service-content h3 { font-size: 1.6rem; margin-bottom: 16px; }
.service-block .service-content > p { font-size: 1rem; margin-bottom: 24px; color: var(--text-body); line-height: 1.7; }
.service-feature-list { list-style: none; }
.service-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.95rem;
  color: var(--text-body);
}
.service-feature-list li svg { width: 20px; height: 20px; color: var(--accent); stroke: var(--accent); fill: none; flex-shrink: 0; margin-top: 2px; }
.service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-illustration {
  width: 100%;
  max-width: 450px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.service-illustration svg { width: 100%; height: auto; }

/* --- About page --- */
.about-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-mission .mission-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-mission .mission-illustration {
  width: 100%;
  max-width: 450px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}
.about-mission .mission-illustration svg { width: 100%; height: auto; }
.about-mission .mission-text h2 { font-size: 1.8rem; margin-bottom: 16px; }
.about-mission .mission-text p { font-size: 1rem; line-height: 1.8; margin-bottom: 16px; color: var(--text-body); }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.35s ease;
}
.team-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-tertiary));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
}
.team-card h3 { font-size: 1.05rem; margin-bottom: 4px; }
.team-card .team-role { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.team-card p { font-size: 0.85rem; color: var(--text-muted); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  transition: all 0.35s ease;
}
.value-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.value-card .feature-icon { margin: 0 auto 20px; }
.value-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.value-card p { font-size: 0.92rem; color: var(--text-body); }

.regulations-list {
  max-width: 800px;
  margin: 0 auto;
}
.regulation-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.regulation-item:last-child { border-bottom: none; }
.regulation-item .feature-icon { flex-shrink: 0; }
.regulation-item h4 { font-size: 1rem; margin-bottom: 6px; color: var(--text-heading); }
.regulation-item p { font-size: 0.9rem; color: var(--text-body); }

/* --- Legal page --- */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px;
}
.legal-content h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.15rem; margin-top: 28px; margin-bottom: 12px; }
.legal-content p, .legal-content ul, .legal-content ol {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 16px;
}
.legal-content ul { padding-left: 24px; list-style: disc; }
.legal-content li { margin-bottom: 8px; }

/* --- Toast notifications --- */
.toast {
  position: fixed;
  bottom: 30px; right: 30px;
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
  font-family: var(--font-body);
  z-index: 10000;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease;
  max-width: 400px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: #649812; color: #ffffff; }
.toast.error { background: #dc2626; color: #ffffff; }

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }
.reveal-delay-8 { transition-delay: 0.8s; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-badges { justify-content: center; }
  .hero-visual { margin-top: 40px; }
  .hero-illustration { max-width: 400px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .figures-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; gap: 32px; }
  .timeline::before { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 1fr; }
  .service-block:nth-child(even) .service-visual { order: 0; }
  .about-mission { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-mobile { display: block; }
}
@media (max-width: 768px) {
  section { padding: 70px 0; }
  .hero { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
  .hero h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .figures-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-stat .stat-number { font-size: 1.3rem; }
  .pricing-card { padding: 32px 20px; }
}

/* --- Blog --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-card {
  display: flex;
  flex-direction: column;
}
.blog-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-category {
  display: inline-block;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
  margin-bottom: 16px;
  width: fit-content;
}
.blog-category-digital {
  color: var(--accent-secondary);
  background: color-mix(in srgb, var(--accent-secondary) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-secondary) 20%, transparent);
}
.blog-card h2 {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 12px;
}
.blog-card h2 a {
  color: var(--text-heading);
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-card h2 a:hover { color: var(--accent); }
.blog-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.blog-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.blog-excerpt {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}
.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap 0.2s ease;
}
.blog-read-more:hover { gap: 12px; color: var(--btn-hover); }
.blog-read-more svg { width: 16px; height: 16px; }

/* Blog back link */
.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
  margin-bottom: 16px;
}
.blog-back-link:hover { color: var(--accent); }
.blog-back-link svg { width: 18px; height: 18px; }

/* Article meta */
.article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.article-meta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Article content */
.article-content {
  max-width: 800px;
  margin: 0 auto;
}
.article-content p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-body);
  margin-bottom: 20px;
}
.article-content h2 {
  font-size: 1.5rem;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.article-content h2:first-child { margin-top: 0; }
.article-content h3 {
  font-size: 1.15rem;
  margin-top: 32px;
  margin-bottom: 12px;
}
.article-content ul, .article-content ol {
  padding-left: 24px;
  list-style: disc;
  margin-bottom: 20px;
}
.article-content li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 8px;
}
.article-content strong { color: var(--text-heading); }

/* Related articles */
.related-articles {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.related-articles h3 {
  font-size: 1.3rem;
  margin-bottom: 24px;
}
.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.related-card {
  display: block;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s ease;
  text-decoration: none;
}
.related-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-emphasis);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.related-card .blog-category { margin-bottom: 10px; }
.related-card h4 {
  font-size: 1rem;
  color: var(--text-heading);
  margin-bottom: 8px;
  line-height: 1.4;
}
.blog-date-small {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Blog responsive */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
  .article-meta { gap: 12px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ═══════ MULTI-STYLE THEME VARIABLES ═══════ */
[data-style="modern-tech"][data-theme="dark"],
[data-style="modern-tech"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --text-heading: #f4f4f5;
  --text-body: #a1a1aa;
  --text-muted: #71717a;
  --accent: #60a5fa;
  --accent-secondary: #a78bfa;
  --accent-tertiary: #7AB51D;
  --border: rgba(255,255,255,0.08);
  --border-emphasis: rgba(255,255,255,0.15);
  --shadow: 0 8px 32px rgba(0,0,0,0.3);
  --shadow-accent: 0 0 30px rgba(96,165,250,0.1);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(10,10,10,0.8);
  --nav-border: rgba(255,255,255,0.06);
  --btn-bg: #60a5fa;
  --btn-text: #ffffff;
  --btn-hover: #3b82f6;
  --section-alt: #0f0f1a;
  --footer-bg: #050505;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

[data-style="modern-tech"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: rgba(0,0,0,0.02);
  --bg-card-hover: rgba(0,0,0,0.04);
  --text-heading: #0f172a;
  --text-body: #475569;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-secondary: #7c3aed;
  --accent-tertiary: #6EA319;
  --border: rgba(0,0,0,0.08);
  --border-emphasis: rgba(0,0,0,0.15);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-accent: 0 0 20px rgba(59,130,246,0.08);
  --radius: 16px;
  --radius-sm: 8px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(255,255,255,0.9);
  --nav-border: rgba(0,0,0,0.06);
  --btn-bg: #3b82f6;
  --btn-text: #ffffff;
  --btn-hover: #2563eb;
  --section-alt: #f1f5f9;
  --footer-bg: #0f172a;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

[data-style="professional"][data-theme="dark"],
[data-style="professional"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #1e293b;
  --bg-card-hover: #334155;
  --text-heading: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --accent: #3b82f6;
  --accent-secondary: #2563eb;
  --accent-tertiary: #1e40af;
  --border: #334155;
  --border-emphasis: #475569;
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #0f172a;
  --nav-border: #1e293b;
  --btn-bg: #2563eb;
  --btn-text: #ffffff;
  --btn-hover: #1d4ed8;
  --section-alt: #1e293b;
  --footer-bg: #020617;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="professional"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-secondary: #1e40af;
  --accent-tertiary: #3b82f6;
  --border: #e2e8f0;
  --border-emphasis: #cbd5e1;
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e2e8f0;
  --btn-bg: #2563eb;
  --btn-text: #ffffff;
  --btn-hover: #1d4ed8;
  --section-alt: #f8fafc;
  --footer-bg: #0f172a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="classic-elegant"][data-theme="dark"],
[data-style="classic-elegant"] {
  --bg-primary: #1a1410;
  --bg-secondary: #231e19;
  --bg-card: #2a2420;
  --bg-card-hover: #342d28;
  --text-heading: #f5e6c8;
  --text-body: #c9b99a;
  --text-muted: #8a7e76;
  --accent: #d4a574;
  --accent-secondary: #b8860b;
  --accent-tertiary: #8b6914;
  --border: rgba(184,134,11,0.2);
  --border-emphasis: rgba(184,134,11,0.35);
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --nav-bg: #1a1410;
  --nav-border: rgba(184,134,11,0.15);
  --btn-bg: #b8860b;
  --btn-text: #ffffff;
  --btn-hover: #d4a574;
  --section-alt: #231e19;
  --footer-bg: #0f0c09;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="classic-elegant"][data-theme="light"] {
  --bg-primary: #faf8f5;
  --bg-secondary: #f5f0eb;
  --bg-card: #fffef9;
  --bg-card-hover: #faf5ed;
  --text-heading: #2d2421;
  --text-body: #5c4f47;
  --text-muted: #8a7e76;
  --accent: #b8860b;
  --accent-secondary: #d4a574;
  --accent-tertiary: #8b6914;
  --border: rgba(184,134,11,0.15);
  --border-emphasis: rgba(45,36,33,0.15);
  --shadow: 0 2px 8px rgba(45,36,33,0.06);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --nav-bg: #faf8f5;
  --nav-border: rgba(184,134,11,0.12);
  --btn-bg: #b8860b;
  --btn-text: #ffffff;
  --btn-hover: #8b6914;
  --section-alt: #f5f0eb;
  --footer-bg: #2d2421;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="creative-bold"][data-theme="dark"],
[data-style="creative-bold"] {
  --bg-primary: #0a0a0b;
  --bg-secondary: #18181b;
  --bg-card: #1c1c1f;
  --bg-card-hover: #27272a;
  --text-heading: #fafafa;
  --text-body: #d4d4d8;
  --text-muted: #a1a1aa;
  --accent: #f43f5e;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #06b6d4;
  --border: #27272a;
  --border-emphasis: #3f3f46;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-accent: 0 8px 24px rgba(244,63,94,0.15);
  --radius: 16px;
  --radius-sm: 12px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #0a0a0b;
  --nav-border: #27272a;
  --btn-bg: #f43f5e;
  --btn-text: #ffffff;
  --btn-hover: #e11d48;
  --section-alt: #18181b;
  --footer-bg: #050505;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="creative-bold"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --text-heading: #18181b;
  --text-body: #3f3f46;
  --text-muted: #71717a;
  --accent: #f43f5e;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #06b6d4;
  --border: #e4e4e7;
  --border-emphasis: #d4d4d8;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-accent: 0 8px 24px rgba(244,63,94,0.15);
  --radius: 16px;
  --radius-sm: 12px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e4e4e7;
  --btn-bg: #f43f5e;
  --btn-text: #ffffff;
  --btn-hover: #e11d48;
  --section-alt: #fafafa;
  --footer-bg: #18181b;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="minimal-clean"][data-theme="dark"],
[data-style="minimal-clean"] {
  --bg-primary: #111111;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #f9fafb;
  --text-body: #d1d5db;
  --text-muted: #9ca3af;
  --accent: #f9fafb;
  --accent-secondary: #e5e7eb;
  --accent-tertiary: #9ca3af;
  --border: #222222;
  --border-emphasis: #374151;
  --shadow: none;
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #111111;
  --nav-border: #222222;
  --btn-bg: #f9fafb;
  --btn-text: #111111;
  --btn-hover: #e5e7eb;
  --section-alt: #1a1a1a;
  --footer-bg: #0a0a0a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="minimal-clean"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --text-heading: #111827;
  --text-body: #374151;
  --text-muted: #9ca3af;
  --accent: #111827;
  --accent-secondary: #374151;
  --accent-tertiary: #6366f1;
  --border: #f3f4f6;
  --border-emphasis: #e5e7eb;
  --shadow: none;
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #f3f4f6;
  --btn-bg: #111827;
  --btn-text: #ffffff;
  --btn-hover: #374151;
  --section-alt: #fafafa;
  --footer-bg: #111827;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="nature-organic"][data-theme="dark"],
[data-style="nature-organic"] {
  --bg-primary: #1a2218;
  --bg-secondary: #222d20;
  --bg-card: #263026;
  --bg-card-hover: #2f3a2e;
  --text-heading: #d4e6d0;
  --text-body: #a8bca6;
  --text-muted: #7a8a7c;
  --accent: #52b788;
  --accent-secondary: #2d6a4f;
  --accent-tertiary: #d4a373;
  --border: rgba(82,183,136,0.15);
  --border-emphasis: rgba(82,183,136,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.25);
  --shadow-accent: none;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Fraunces', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #1a2218;
  --nav-border: rgba(82,183,136,0.12);
  --btn-bg: #2d6a4f;
  --btn-text: #ffffff;
  --btn-hover: #52b788;
  --section-alt: #222d20;
  --footer-bg: #111a10;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="nature-organic"][data-theme="light"] {
  --bg-primary: #f7f5f0;
  --bg-secondary: #eae6dd;
  --bg-card: #fdfcf8;
  --bg-card-hover: #f5f2eb;
  --text-heading: #1a2e1c;
  --text-body: #4a5a4c;
  --text-muted: #7a8a7c;
  --accent: #2d6a4f;
  --accent-secondary: #52b788;
  --accent-tertiary: #d4a373;
  --border: rgba(45,106,79,0.12);
  --border-emphasis: rgba(26,46,28,0.15);
  --shadow: 0 2px 12px rgba(26,46,28,0.06);
  --shadow-accent: none;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Fraunces', serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #f7f5f0;
  --nav-border: rgba(45,106,79,0.1);
  --btn-bg: #2d6a4f;
  --btn-text: #ffffff;
  --btn-hover: #1b4332;
  --section-alt: #eae6dd;
  --footer-bg: #2c3a2e;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="startup-saas"][data-theme="dark"],
[data-style="startup-saas"] {
  --bg-primary: #0f0f1a;
  --bg-secondary: #1a1a2e;
  --bg-card: #1e1e35;
  --bg-card-hover: #28284a;
  --text-heading: #f9fafb;
  --text-body: #d1d5db;
  --text-muted: #9ca3af;
  --accent: #818cf8;
  --accent-secondary: #a78bfa;
  --accent-tertiary: #f472b6;
  --border: #2e2e4a;
  --border-emphasis: #4338ca;
  --shadow: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-accent: 0 4px 15px rgba(99,102,241,0.2);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --nav-bg: #0f0f1a;
  --nav-border: #2e2e4a;
  --btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --section-alt: #1a1a2e;
  --footer-bg: #080812;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="startup-saas"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --text-heading: #111827;
  --text-body: #4b5563;
  --text-muted: #9ca3af;
  --accent: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-tertiary: #ec4899;
  --border: #e5e7eb;
  --border-emphasis: #d1d5db;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-accent: 0 4px 15px rgba(99,102,241,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e5e7eb;
  --btn-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --btn-text: #ffffff;
  --btn-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --section-alt: #f9fafb;
  --footer-bg: #111827;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="dark-luxury"][data-theme="dark"],
[data-style="dark-luxury"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #f5f0e8;
  --text-body: #b8b0a4;
  --text-muted: #7a756e;
  --accent: #c9a84c;
  --accent-secondary: #e8d48b;
  --accent-tertiary: #a08030;
  --border: rgba(201,168,76,0.15);
  --border-emphasis: rgba(201,168,76,0.35);
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-accent: 0 0 20px rgba(201,168,76,0.08);
  --radius: 2px;
  --radius-sm: 0px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --nav-bg: #0a0a0a;
  --nav-border: rgba(201,168,76,0.1);
  --btn-bg: transparent;
  --btn-text: #c9a84c;
  --btn-hover: #c9a84c;
  --section-alt: #111111;
  --footer-bg: #050505;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="dark-luxury"][data-theme="light"] {
  --bg-primary: #faf8f4;
  --bg-secondary: #f0ece4;
  --bg-card: #ffffff;
  --bg-card-hover: #faf8f4;
  --text-heading: #1a1608;
  --text-body: #4a4538;
  --text-muted: #7a756e;
  --accent: #a08030;
  --accent-secondary: #c9a84c;
  --accent-tertiary: #8a6820;
  --border: rgba(160,128,48,0.15);
  --border-emphasis: rgba(160,128,48,0.3);
  --shadow: 0 2px 12px rgba(26,22,8,0.06);
  --shadow-accent: none;
  --radius: 2px;
  --radius-sm: 0px;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
  --nav-bg: #faf8f4;
  --nav-border: rgba(160,128,48,0.12);
  --btn-bg: #a08030;
  --btn-text: #ffffff;
  --btn-hover: #8a6820;
  --section-alt: #f0ece4;
  --footer-bg: #1a1608;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="playful-friendly"][data-theme="dark"],
[data-style="playful-friendly"] {
  --bg-primary: #1a1230;
  --bg-secondary: #231a40;
  --bg-card: #2a2050;
  --bg-card-hover: #332860;
  --text-heading: #e8deff;
  --text-body: #c4b5e8;
  --text-muted: #8b7fb8;
  --accent: #ff6b6b;
  --accent-secondary: #4ecdc4;
  --accent-tertiary: #ffe66d;
  --border: rgba(168,139,250,0.15);
  --border-emphasis: rgba(168,139,250,0.3);
  --shadow: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-accent: 0 4px 16px rgba(255,107,107,0.15);
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --nav-bg: #1a1230;
  --nav-border: rgba(168,139,250,0.12);
  --btn-bg: #ff6b6b;
  --btn-text: #ffffff;
  --btn-hover: #ee5a5a;
  --section-alt: #231a40;
  --footer-bg: #110c22;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="playful-friendly"][data-theme="light"] {
  --bg-primary: #fffbf5;
  --bg-secondary: #fff4e6;
  --bg-card: #ffffff;
  --bg-card-hover: #fffbf5;
  --text-heading: #2d1b69;
  --text-body: #5a4a8a;
  --text-muted: #8b7fb8;
  --accent: #ff6b6b;
  --accent-secondary: #4ecdc4;
  --accent-tertiary: #ffe66d;
  --border: rgba(45,27,105,0.08);
  --border-emphasis: rgba(45,27,105,0.15);
  --shadow: 0 4px 16px rgba(45,27,105,0.08);
  --shadow-accent: 0 4px 16px rgba(255,107,107,0.1);
  --radius: 20px;
  --radius-sm: 12px;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Nunito', sans-serif;
  --nav-bg: #fffbf5;
  --nav-border: rgba(45,27,105,0.06);
  --btn-bg: #ff6b6b;
  --btn-text: #ffffff;
  --btn-hover: #ee5a5a;
  --section-alt: #fff4e6;
  --footer-bg: #2d1b69;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="brutalist-raw"][data-theme="dark"],
[data-style="brutalist-raw"] {
  --bg-primary: #000000;
  --bg-secondary: #111111;
  --bg-card: #111111;
  --bg-card-hover: #1a1a1a;
  --text-heading: #ffffff;
  --text-body: #cccccc;
  --text-muted: #888888;
  --accent: #ff0000;
  --accent-secondary: #ffffff;
  --accent-tertiary: #ff0000;
  --border: #ffffff;
  --border-emphasis: #ff0000;
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Mono', monospace;
  --font-body: 'Space Mono', monospace;
  --nav-bg: #000000;
  --nav-border: #ffffff;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --btn-hover: #ff0000;
  --section-alt: #111111;
  --footer-bg: #000000;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="brutalist-raw"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f0f0;
  --text-heading: #000000;
  --text-body: #333333;
  --text-muted: #666666;
  --accent: #ff0000;
  --accent-secondary: #000000;
  --accent-tertiary: #ff0000;
  --border: #000000;
  --border-emphasis: #ff0000;
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Mono', monospace;
  --font-body: 'Space Mono', monospace;
  --nav-bg: #ffffff;
  --nav-border: #000000;
  --btn-bg: #000000;
  --btn-text: #ffffff;
  --btn-hover: #ff0000;
  --section-alt: #f0f0f0;
  --footer-bg: #000000;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="restaurant-warm"][data-theme="dark"],
[data-style="restaurant-warm"] {
  --bg-primary: #1a1410;
  --bg-secondary: #2a2218;
  --bg-card: #322a20;
  --bg-card-hover: #3d3428;
  --text-heading: #f5ede0;
  --text-body: #c9b99a;
  --text-muted: #a89880;
  --accent: #d4703c;
  --accent-secondary: #c9883b;
  --accent-tertiary: #c45a2d;
  --border: rgba(212,112,60,0.2);
  --border-emphasis: rgba(212,112,60,0.35);
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 4px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --nav-bg: #1a1410;
  --nav-border: rgba(212,112,60,0.15);
  --btn-bg: #d4703c;
  --btn-text: #ffffff;
  --btn-hover: #c45a2d;
  --section-alt: #2a2218;
  --footer-bg: #0f0c08;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="restaurant-warm"][data-theme="light"] {
  --bg-primary: #faf6f0;
  --bg-secondary: #f5ede0;
  --bg-card: #fffbf5;
  --bg-card-hover: #f5ede0;
  --text-heading: #2a2218;
  --text-body: #5c4a38;
  --text-muted: #a89880;
  --accent: #d4703c;
  --accent-secondary: #c9883b;
  --accent-tertiary: #c45a2d;
  --border: rgba(212,112,60,0.15);
  --border-emphasis: rgba(42,34,24,0.15);
  --shadow: 0 2px 12px rgba(42,34,24,0.08);
  --shadow-accent: none;
  --radius: 8px;
  --radius-sm: 4px;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;
  --nav-bg: #1a1410;
  --nav-border: rgba(212,112,60,0.12);
  --btn-bg: #d4703c;
  --btn-text: #ffffff;
  --btn-hover: #c45a2d;
  --section-alt: #f5ede0;
  --footer-bg: #1a1410;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="medical-trust"][data-theme="dark"],
[data-style="medical-trust"] {
  --bg-primary: #0c1829;
  --bg-secondary: #132236;
  --bg-card: #1a2d44;
  --bg-card-hover: #213752;
  --text-heading: #e0f2fe;
  --text-body: #bae6fd;
  --text-muted: #5b6b82;
  --accent: #06b6d4;
  --accent-secondary: #0891b2;
  --accent-tertiary: #0e7490;
  --border: #1e3a5f;
  --border-emphasis: #0891b2;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-accent: 0 4px 12px rgba(8,145,178,0.2);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --nav-bg: #0c1829;
  --nav-border: #1e3a5f;
  --btn-bg: #0891b2;
  --btn-text: #ffffff;
  --btn-hover: #0e7490;
  --section-alt: #132236;
  --footer-bg: #060d18;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="medical-trust"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f0f9ff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f9ff;
  --text-heading: #0c1829;
  --text-body: #334155;
  --text-muted: #5b6b82;
  --accent: #0891b2;
  --accent-secondary: #06b6d4;
  --accent-tertiary: #0e7490;
  --border: #e0f2fe;
  --border-emphasis: #bae6fd;
  --shadow: 0 2px 8px rgba(8,145,178,0.08);
  --shadow-accent: 0 4px 12px rgba(8,145,178,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --nav-bg: #ffffff;
  --nav-border: #e0f2fe;
  --btn-bg: #0891b2;
  --btn-text: #ffffff;
  --btn-hover: #0e7490;
  --section-alt: #f0f9ff;
  --footer-bg: #0c1829;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="construction-solid"][data-theme="dark"],
[data-style="construction-solid"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #242445;
  --bg-card: #2a2a50;
  --bg-card-hover: #333360;
  --text-heading: #f5f5f5;
  --text-body: #d1d5db;
  --text-muted: #9ca3af;
  --accent: #f59e0b;
  --accent-secondary: #d97706;
  --accent-tertiary: #dc2626;
  --border: #3d3d6b;
  --border-emphasis: #f59e0b;
  --shadow: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-accent: 0 4px 12px rgba(245,158,11,0.2);
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #1a1a2e;
  --nav-border: #3d3d6b;
  --btn-bg: #f59e0b;
  --btn-text: #1a1a2e;
  --btn-hover: #d97706;
  --section-alt: #242445;
  --footer-bg: #0f0f1e;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="construction-solid"][data-theme="light"] {
  --bg-primary: #f5f5f5;
  --bg-secondary: #e5e7eb;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --text-heading: #1a1a2e;
  --text-body: #374151;
  --text-muted: #64748b;
  --accent: #f59e0b;
  --accent-secondary: #d97706;
  --accent-tertiary: #dc2626;
  --border: #e2e8f0;
  --border-emphasis: #d1d5db;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-accent: 0 4px 12px rgba(245,158,11,0.15);
  --radius: 8px;
  --radius-sm: 6px;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --nav-bg: #1a1a2e;
  --nav-border: #e2e8f0;
  --btn-bg: #f59e0b;
  --btn-text: #1a1a2e;
  --btn-hover: #d97706;
  --section-alt: #e5e7eb;
  --footer-bg: #1a1a2e;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="portfolio-showcase"][data-theme="dark"],
[data-style="portfolio-showcase"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #ffffff;
  --text-body: #999999;
  --text-muted: #666666;
  --accent: #ffffff;
  --accent-secondary: #e5e5e5;
  --accent-tertiary: #ff3d00;
  --border: rgba(255,255,255,0.06);
  --border-emphasis: rgba(255,255,255,0.12);
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: transparent;
  --nav-border: transparent;
  --btn-bg: transparent;
  --btn-text: #ffffff;
  --btn-hover: #ffffff;
  --section-alt: #1a1a1a;
  --footer-bg: #000000;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="portfolio-showcase"][data-theme="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f0f0f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f5f5;
  --text-heading: #0a0a0a;
  --text-body: #555555;
  --text-muted: #999999;
  --accent: #0a0a0a;
  --accent-secondary: #333333;
  --accent-tertiary: #ff3d00;
  --border: rgba(0,0,0,0.06);
  --border-emphasis: rgba(0,0,0,0.12);
  --shadow: none;
  --shadow-accent: none;
  --radius: 0px;
  --radius-sm: 0px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: transparent;
  --nav-border: transparent;
  --btn-bg: transparent;
  --btn-text: #0a0a0a;
  --btn-hover: #0a0a0a;
  --section-alt: #f0f0f0;
  --footer-bg: #0a0a0a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="retro-vintage"][data-theme="dark"],
[data-style="retro-vintage"] {
  --bg-primary: #1a1410;
  --bg-secondary: #2a2018;
  --bg-card: #342a20;
  --bg-card-hover: #3e342a;
  --text-heading: #f4ede4;
  --text-body: #c9b99a;
  --text-muted: #8a7a68;
  --accent: #c44536;
  --accent-secondary: #e8a838;
  --accent-tertiary: #8b5e3c;
  --border: rgba(196,69,54,0.2);
  --border-emphasis: rgba(232,168,56,0.3);
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Abril Fatface', serif;
  --font-body: 'Lora', serif;
  --nav-bg: #1a1410;
  --nav-border: rgba(196,69,54,0.15);
  --btn-bg: #c44536;
  --btn-text: #f4ede4;
  --btn-hover: #a83828;
  --section-alt: #2a2018;
  --footer-bg: #0f0c08;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="retro-vintage"][data-theme="light"] {
  --bg-primary: #f4ede4;
  --bg-secondary: #efe5d8;
  --bg-card: #fffbf5;
  --bg-card-hover: #f4ede4;
  --text-heading: #2a1f14;
  --text-body: #4a3728;
  --text-muted: #8a7a68;
  --accent: #c44536;
  --accent-secondary: #e8a838;
  --accent-tertiary: #8b5e3c;
  --border: rgba(42,31,20,0.15);
  --border-emphasis: rgba(196,69,54,0.2);
  --shadow: 0 2px 8px rgba(42,31,20,0.08);
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Abril Fatface', serif;
  --font-body: 'Lora', serif;
  --nav-bg: #f4ede4;
  --nav-border: rgba(42,31,20,0.12);
  --btn-bg: #c44536;
  --btn-text: #f4ede4;
  --btn-hover: #a83828;
  --section-alt: #efe5d8;
  --footer-bg: #2a1f14;
  --glass-blur: none;
  --ornament-display: block;
}

[data-style="neubrutalism-pop"][data-theme="dark"],
[data-style="neubrutalism-pop"] {
  --bg-primary: #1a1a2e;
  --bg-secondary: #2d2d4a;
  --bg-card: #2d2d4a;
  --bg-card-hover: #3a3a5c;
  --text-heading: #fef3c7;
  --text-body: #e5e7eb;
  --text-muted: #9ca3af;
  --accent: #f472b6;
  --accent-secondary: #60a5fa;
  --accent-tertiary: #4ade80;
  --border: #fef3c7;
  --border-emphasis: #f472b6;
  --shadow: 6px 6px 0 rgba(254,243,199,0.3);
  --shadow-accent: 6px 6px 0 #f472b6;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #1a1a2e;
  --nav-border: #fef3c7;
  --btn-bg: #f472b6;
  --btn-text: #1a1a1a;
  --btn-hover: #f9a8d4;
  --section-alt: #2d2d4a;
  --footer-bg: #0f0f1e;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="neubrutalism-pop"][data-theme="light"] {
  --bg-primary: #fef3c7;
  --bg-secondary: #fce7f3;
  --bg-card: #ffffff;
  --bg-card-hover: #fffbeb;
  --text-heading: #1a1a1a;
  --text-body: #374151;
  --text-muted: #6b7280;
  --accent: #f472b6;
  --accent-secondary: #60a5fa;
  --accent-tertiary: #4ade80;
  --border: #1a1a1a;
  --border-emphasis: #f472b6;
  --shadow: 6px 6px 0 #1a1a1a;
  --shadow-accent: 6px 6px 0 #f472b6;
  --radius: 12px;
  --radius-sm: 8px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: #fef3c7;
  --nav-border: #1a1a1a;
  --btn-bg: #f472b6;
  --btn-text: #1a1a1a;
  --btn-hover: #f9a8d4;
  --section-alt: #dbeafe;
  --footer-bg: #1a1a1a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="agency-dynamic"][data-theme="dark"],
[data-style="agency-dynamic"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --text-heading: #ffffff;
  --text-body: #aaaaaa;
  --text-muted: #666666;
  --accent: #ff3d00;
  --accent-secondary: #ff6b35;
  --accent-tertiary: #cc3100;
  --border: rgba(255,255,255,0.06);
  --border-emphasis: rgba(255,61,0,0.3);
  --shadow: none;
  --shadow-accent: 0 0 30px rgba(255,61,0,0.1);
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #0a0a0a;
  --nav-border: rgba(255,255,255,0.06);
  --btn-bg: #ff3d00;
  --btn-text: #ffffff;
  --btn-hover: #ff6b35;
  --section-alt: #141414;
  --footer-bg: #050505;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="agency-dynamic"][data-theme="light"] {
  --bg-primary: #f5f5f5;
  --bg-secondary: #e8e8e8;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f5f5;
  --text-heading: #0a0a0a;
  --text-body: #555555;
  --text-muted: #999999;
  --accent: #ff3d00;
  --accent-secondary: #ff6b35;
  --accent-tertiary: #cc3100;
  --border: rgba(0,0,0,0.06);
  --border-emphasis: rgba(255,61,0,0.3);
  --shadow: none;
  --shadow-accent: none;
  --radius: 4px;
  --radius-sm: 2px;
  --font-heading: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --nav-bg: #f5f5f5;
  --nav-border: rgba(0,0,0,0.06);
  --btn-bg: #ff3d00;
  --btn-text: #ffffff;
  --btn-hover: #cc3100;
  --section-alt: #e8e8e8;
  --footer-bg: #0a0a0a;
  --glass-blur: none;
  --ornament-display: none;
}

[data-style="black-dark"][data-theme="dark"],
[data-style="black-dark"] {
  --bg-primary: #050508;
  --bg-secondary: #0a0a0f;
  --bg-card: rgba(255,255,255,0.025);
  --bg-card-hover: rgba(255,255,255,0.05);
  --text-heading: #f0f0f5;
  --text-body: #94949e;
  --text-muted: #5a5a66;
  --accent: #22d3ee;
  --accent-secondary: #34d399;
  --accent-tertiary: #a78bfa;
  --border: rgba(255,255,255,0.06);
  --border-emphasis: rgba(34,211,238,0.2);
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 40px rgba(34,211,238,0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(5,5,8,0.85);
  --nav-border: rgba(255,255,255,0.06);
  --btn-bg: #22d3ee;
  --btn-text: #050508;
  --btn-hover: #06b6d4;
  --section-alt: #0a0a0f;
  --footer-bg: #030305;
  --glass-blur: blur(20px);
  --ornament-display: none;
}

[data-style="black-dark"][data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text-heading: #0f172a;
  --text-body: #475569;
  --text-muted: #94a3b8;
  --accent: #0891b2;
  --accent-secondary: #059669;
  --accent-tertiary: #7c3aed;
  --border: rgba(0,0,0,0.08);
  --border-emphasis: rgba(8,145,178,0.25);
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-accent: 0 0 20px rgba(8,145,178,0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --nav-bg: rgba(248,250,252,0.9);
  --nav-border: rgba(0,0,0,0.06);
  --btn-bg: #0891b2;
  --btn-text: #ffffff;
  --btn-hover: #0e7490;
  --section-alt: #f1f5f9;
  --footer-bg: #0f172a;
  --glass-blur: blur(20px);
  --ornament-display: none;
}


/* ═══════ VARIABLE NAME BRIDGE ═══════ */
/* Maps standard theme vars → common alternative names used by older sites */
html[data-style] {
  /* Backgrounds */
  --bg-main: var(--bg-primary);
  --bg-body: var(--bg-primary);
  --bg-alt: var(--bg-secondary);
  --bg-subtle: var(--bg-secondary);
  --bg-tertiary: var(--bg-secondary);
  --bg-section-alt: var(--section-alt);
  --bg-deep: var(--bg-primary);

  /* Text */
  --text-primary: var(--text-heading);
  --text-secondary: var(--text-body);
  --text-on-dark: var(--text-heading);
  --text-on-accent: var(--btn-text);
  --text-inverse: var(--btn-text);
  --text-hero: var(--text-heading);
  --text-white: var(--text-heading);

  /* Accents */
  --primary: var(--accent);
  --primary-dark: var(--accent-secondary);
  --primary-light: var(--accent-tertiary);
  --accent-primary: var(--accent);
  --accent-hover: var(--btn-hover);
  --accent-blue: var(--accent);
  --accent-cyan: var(--accent);
  --brand: var(--accent);
  --brand-dark: var(--accent-secondary);
  --brand-light: var(--accent-tertiary);

  /* Navigation */
  --bg-nav: var(--nav-bg);
  --bg-nav-scroll: var(--nav-bg);
  --navbar-bg: var(--nav-bg);
  --nav-height: 72px;

  /* Cards */
  --bg-glass: var(--bg-card);
  --bg-glass-hover: var(--bg-card-hover);
  --bg-glass-strong: var(--bg-card-hover);
  --glass-bg: var(--bg-card);
  --glass-border: var(--border);
  --glass-border-hover: var(--border-emphasis);

  /* Borders */
  --border-color: var(--border);
  --border-light: var(--border);
  --border-subtle: var(--border);
  --border-primary: var(--border-emphasis);
  --border-card: var(--border);
  --border-strong: var(--border-emphasis);
  --border-medium: var(--border);
  --border-accent: var(--border-emphasis);

  /* Shadows */
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow);
  --shadow-lg: var(--shadow);
  --shadow-xl: var(--shadow);
  --shadow-card: var(--shadow);
  --shadow-glow: var(--shadow-accent);

  /* Radii */
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);

  /* Fonts */
  --font-display: var(--font-heading);
  --font-sans: var(--font-body);
  --font-titre: var(--font-heading);
  --font-corps: var(--font-body);
  --font-ui: var(--font-body);

  /* Footer */
  --bg-footer: var(--footer-bg);
  --bg-footer-secondary: var(--footer-bg);

  /* Input */
  --bg-input: var(--bg-card);
  --border-input: var(--border);
  --border-input-focus: var(--accent);
  --input-bg: var(--bg-card);
  --input-border: var(--border);

  /* Hero */
  --bg-hero: var(--bg-primary);
  --bg-hero-overlay: rgba(0,0,0,0.5);

  /* Misc */
  --transition: 0.3s ease;
  --transition-base: 0.3s ease;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --glass-blur: var(--glass-blur);
  --backdrop-blur: var(--glass-blur);
}


/* ═══════ ACCENT COLOR PRESETS ═══════ */
html[data-style][data-accent="sky"],
html[data-accent="sky"] {
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-secondary: #4d84c8;
  --accent-secondary-rgb: 77, 132, 200;
  --accent-tertiary: #90c0fc;
  --btn-bg: #60a5fa;
  --btn-hover: #528cd5;
  --shadow-accent: 0 4px 20px rgba(96,165,250,0.25);
}
html[data-style][data-accent="sky"][data-theme="light"],
html[data-accent="sky"][data-theme="light"] {
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-secondary: #2f68c5;
  --accent-secondary-rgb: 47, 104, 197;
  --accent-tertiary: #76a8f9;
  --btn-bg: #3b82f6;
  --btn-hover: #326fd1;
  --shadow-accent: 0 4px 20px rgba(59,130,246,0.25);
}
body[data-page-accent="sky"] {
  --accent: #60a5fa;
  --accent-rgb: 96, 165, 250;
  --accent-secondary: #4d84c8;
  --accent-secondary-rgb: 77, 132, 200;
  --accent-tertiary: #90c0fc;
  --btn-bg: #60a5fa;
  --btn-hover: #528cd5;
  --shadow-accent: 0 4px 20px rgba(96,165,250,0.25);
}
html[data-theme="light"] body[data-page-accent="sky"] {
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-secondary: #2f68c5;
  --accent-secondary-rgb: 47, 104, 197;
  --accent-tertiary: #76a8f9;
  --btn-bg: #3b82f6;
  --btn-hover: #326fd1;
  --shadow-accent: 0 4px 20px rgba(59,130,246,0.25);
}
html[data-style][data-accent="navy"],
html[data-accent="navy"] {
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-secondary: #2f68c5;
  --accent-secondary-rgb: 47, 104, 197;
  --accent-tertiary: #76a8f9;
  --btn-bg: #3b82f6;
  --btn-hover: #326fd1;
  --shadow-accent: 0 4px 20px rgba(59,130,246,0.25);
}
html[data-style][data-accent="navy"][data-theme="light"],
html[data-accent="navy"][data-theme="light"] {
  --accent: #1d4ed8;
  --accent-rgb: 29, 78, 216;
  --accent-secondary: #173ead;
  --accent-secondary-rgb: 23, 62, 173;
  --accent-tertiary: #6183e4;
  --btn-bg: #1d4ed8;
  --btn-hover: #1942b8;
  --shadow-accent: 0 4px 20px rgba(29,78,216,0.25);
}
body[data-page-accent="navy"] {
  --accent: #3b82f6;
  --accent-rgb: 59, 130, 246;
  --accent-secondary: #2f68c5;
  --accent-secondary-rgb: 47, 104, 197;
  --accent-tertiary: #76a8f9;
  --btn-bg: #3b82f6;
  --btn-hover: #326fd1;
  --shadow-accent: 0 4px 20px rgba(59,130,246,0.25);
}
html[data-theme="light"] body[data-page-accent="navy"] {
  --accent: #1d4ed8;
  --accent-rgb: 29, 78, 216;
  --accent-secondary: #173ead;
  --accent-secondary-rgb: 23, 62, 173;
  --accent-tertiary: #6183e4;
  --btn-bg: #1d4ed8;
  --btn-hover: #1942b8;
  --shadow-accent: 0 4px 20px rgba(29,78,216,0.25);
}
html[data-style][data-accent="emerald"],
html[data-accent="emerald"] {
  --accent: #7AB51D;
  --accent-rgb: 122, 181, 29;
  --accent-secondary: #649812;
  --accent-secondary-rgb: 100, 152, 18;
  --accent-tertiary: #9fd44e;
  --btn-bg: #7AB51D;
  --btn-hover: #649812;
  --shadow-accent: 0 4px 20px rgba(122,181,29,0.25);
}
html[data-style][data-accent="emerald"][data-theme="light"],
html[data-accent="emerald"][data-theme="light"] {
  --accent: #6EA319;
  --accent-rgb: 110, 163, 25;
  --accent-secondary: #5A8A10;
  --accent-secondary-rgb: 90, 138, 16;
  --accent-tertiary: #8ec83c;
  --btn-bg: #6EA319;
  --btn-hover: #5A8A10;
  --shadow-accent: 0 4px 20px rgba(110,163,25,0.25);
}
body[data-page-accent="emerald"] {
  --accent: #7AB51D;
  --accent-rgb: 122, 181, 29;
  --accent-secondary: #649812;
  --accent-secondary-rgb: 100, 152, 18;
  --accent-tertiary: #9fd44e;
  --btn-bg: #7AB51D;
  --btn-hover: #649812;
  --shadow-accent: 0 4px 20px rgba(122,181,29,0.25);
}
html[data-theme="light"] body[data-page-accent="emerald"] {
  --accent: #6EA319;
  --accent-rgb: 110, 163, 25;
  --accent-secondary: #5A8A10;
  --accent-secondary-rgb: 90, 138, 16;
  --accent-tertiary: #8ec83c;
  --btn-bg: #6EA319;
  --btn-hover: #5A8A10;
  --shadow-accent: 0 4px 20px rgba(110,163,25,0.25);
}
html[data-style][data-accent="forest"],
html[data-accent="forest"] {
  --accent: #059669;
  --accent-rgb: 5, 150, 105;
  --accent-secondary: #047854;
  --accent-secondary-rgb: 4, 120, 84;
  --accent-tertiary: #50b696;
  --btn-bg: #059669;
  --btn-hover: #048059;
  --shadow-accent: 0 4px 20px rgba(5,150,105,0.25);
}
html[data-style][data-accent="forest"][data-theme="light"],
html[data-accent="forest"][data-theme="light"] {
  --accent: #047857;
  --accent-rgb: 4, 120, 87;
  --accent-secondary: #036046;
  --accent-secondary-rgb: 3, 96, 70;
  --accent-tertiary: #4fa189;
  --btn-bg: #047857;
  --btn-hover: #03664a;
  --shadow-accent: 0 4px 20px rgba(4,120,87,0.25);
}
body[data-page-accent="forest"] {
  --accent: #059669;
  --accent-rgb: 5, 150, 105;
  --accent-secondary: #047854;
  --accent-secondary-rgb: 4, 120, 84;
  --accent-tertiary: #50b696;
  --btn-bg: #059669;
  --btn-hover: #048059;
  --shadow-accent: 0 4px 20px rgba(5,150,105,0.25);
}
html[data-theme="light"] body[data-page-accent="forest"] {
  --accent: #047857;
  --accent-rgb: 4, 120, 87;
  --accent-secondary: #036046;
  --accent-secondary-rgb: 3, 96, 70;
  --accent-tertiary: #4fa189;
  --btn-bg: #047857;
  --btn-hover: #03664a;
  --shadow-accent: 0 4px 20px rgba(4,120,87,0.25);
}
html[data-style][data-accent="rose"],
html[data-accent="rose"] {
  --accent: #f472b6;
  --accent-rgb: 244, 114, 182;
  --accent-secondary: #c35b92;
  --accent-secondary-rgb: 195, 91, 146;
  --accent-tertiary: #f79ccc;
  --btn-bg: #f472b6;
  --btn-hover: #cf619b;
  --shadow-accent: 0 4px 20px rgba(244,114,182,0.25);
}
html[data-style][data-accent="rose"][data-theme="light"],
html[data-accent="rose"][data-theme="light"] {
  --accent: #ec4899;
  --accent-rgb: 236, 72, 153;
  --accent-secondary: #bd3a7a;
  --accent-secondary-rgb: 189, 58, 122;
  --accent-tertiary: #f27fb8;
  --btn-bg: #ec4899;
  --btn-hover: #c93d82;
  --shadow-accent: 0 4px 20px rgba(236,72,153,0.25);
}
body[data-page-accent="rose"] {
  --accent: #f472b6;
  --accent-rgb: 244, 114, 182;
  --accent-secondary: #c35b92;
  --accent-secondary-rgb: 195, 91, 146;
  --accent-tertiary: #f79ccc;
  --btn-bg: #f472b6;
  --btn-hover: #cf619b;
  --shadow-accent: 0 4px 20px rgba(244,114,182,0.25);
}
html[data-theme="light"] body[data-page-accent="rose"] {
  --accent: #ec4899;
  --accent-rgb: 236, 72, 153;
  --accent-secondary: #bd3a7a;
  --accent-secondary-rgb: 189, 58, 122;
  --accent-tertiary: #f27fb8;
  --btn-bg: #ec4899;
  --btn-hover: #c93d82;
  --shadow-accent: 0 4px 20px rgba(236,72,153,0.25);
}
html[data-style][data-accent="red"],
html[data-accent="red"] {
  --accent: #ef4444;
  --accent-rgb: 239, 68, 68;
  --accent-secondary: #bf3636;
  --accent-secondary-rgb: 191, 54, 54;
  --accent-tertiary: #f47c7c;
  --btn-bg: #ef4444;
  --btn-hover: #cb3a3a;
  --shadow-accent: 0 4px 20px rgba(239,68,68,0.25);
}
html[data-style][data-accent="red"][data-theme="light"],
html[data-accent="red"][data-theme="light"] {
  --accent: #dc2626;
  --accent-rgb: 220, 38, 38;
  --accent-secondary: #b01e1e;
  --accent-secondary-rgb: 176, 30, 30;
  --accent-tertiary: #e76767;
  --btn-bg: #dc2626;
  --btn-hover: #bb2020;
  --shadow-accent: 0 4px 20px rgba(220,38,38,0.25);
}
body[data-page-accent="red"] {
  --accent: #ef4444;
  --accent-rgb: 239, 68, 68;
  --accent-secondary: #bf3636;
  --accent-secondary-rgb: 191, 54, 54;
  --accent-tertiary: #f47c7c;
  --btn-bg: #ef4444;
  --btn-hover: #cb3a3a;
  --shadow-accent: 0 4px 20px rgba(239,68,68,0.25);
}
html[data-theme="light"] body[data-page-accent="red"] {
  --accent: #dc2626;
  --accent-rgb: 220, 38, 38;
  --accent-secondary: #b01e1e;
  --accent-secondary-rgb: 176, 30, 30;
  --accent-tertiary: #e76767;
  --btn-bg: #dc2626;
  --btn-hover: #bb2020;
  --shadow-accent: 0 4px 20px rgba(220,38,38,0.25);
}
html[data-style][data-accent="bordeaux"],
html[data-accent="bordeaux"] {
  --accent: #be123c;
  --accent-rgb: 190, 18, 60;
  --accent-secondary: #980e30;
  --accent-secondary-rgb: 152, 14, 48;
  --accent-tertiary: #d25977;
  --btn-bg: #be123c;
  --btn-hover: #a20f33;
  --shadow-accent: 0 4px 20px rgba(190,18,60,0.25);
}
html[data-style][data-accent="bordeaux"][data-theme="light"],
html[data-accent="bordeaux"][data-theme="light"] {
  --accent: #9f1239;
  --accent-rgb: 159, 18, 57;
  --accent-secondary: #7f0e2e;
  --accent-secondary-rgb: 127, 14, 46;
  --accent-tertiary: #bc5974;
  --btn-bg: #9f1239;
  --btn-hover: #870f30;
  --shadow-accent: 0 4px 20px rgba(159,18,57,0.25);
}
body[data-page-accent="bordeaux"] {
  --accent: #be123c;
  --accent-rgb: 190, 18, 60;
  --accent-secondary: #980e30;
  --accent-secondary-rgb: 152, 14, 48;
  --accent-tertiary: #d25977;
  --btn-bg: #be123c;
  --btn-hover: #a20f33;
  --shadow-accent: 0 4px 20px rgba(190,18,60,0.25);
}
html[data-theme="light"] body[data-page-accent="bordeaux"] {
  --accent: #9f1239;
  --accent-rgb: 159, 18, 57;
  --accent-secondary: #7f0e2e;
  --accent-secondary-rgb: 127, 14, 46;
  --accent-tertiary: #bc5974;
  --btn-bg: #9f1239;
  --btn-hover: #870f30;
  --shadow-accent: 0 4px 20px rgba(159,18,57,0.25);
}
html[data-style][data-accent="slate"],
html[data-accent="slate"] {
  --accent: #94a3b8;
  --accent-rgb: 148, 163, 184;
  --accent-secondary: #768293;
  --accent-secondary-rgb: 118, 130, 147;
  --accent-tertiary: #b4bfcd;
  --btn-bg: #94a3b8;
  --btn-hover: #7e8b9c;
  --shadow-accent: 0 4px 20px rgba(148,163,184,0.25);
}
html[data-style][data-accent="slate"][data-theme="light"],
html[data-accent="slate"][data-theme="light"] {
  --accent: #64748b;
  --accent-rgb: 100, 116, 139;
  --accent-secondary: #505d6f;
  --accent-secondary-rgb: 80, 93, 111;
  --accent-tertiary: #939eae;
  --btn-bg: #64748b;
  --btn-hover: #556376;
  --shadow-accent: 0 4px 20px rgba(100,116,139,0.25);
}
body[data-page-accent="slate"] {
  --accent: #94a3b8;
  --accent-rgb: 148, 163, 184;
  --accent-secondary: #768293;
  --accent-secondary-rgb: 118, 130, 147;
  --accent-tertiary: #b4bfcd;
  --btn-bg: #94a3b8;
  --btn-hover: #7e8b9c;
  --shadow-accent: 0 4px 20px rgba(148,163,184,0.25);
}
html[data-theme="light"] body[data-page-accent="slate"] {
  --accent: #64748b;
  --accent-rgb: 100, 116, 139;
  --accent-secondary: #505d6f;
  --accent-secondary-rgb: 80, 93, 111;
  --accent-tertiary: #939eae;
  --btn-bg: #64748b;
  --btn-hover: #556376;
  --shadow-accent: 0 4px 20px rgba(100,116,139,0.25);
}
html[data-style][data-accent="brown"],
html[data-accent="brown"] {
  --accent: #a8763e;
  --accent-rgb: 168, 118, 62;
  --accent-secondary: #865e32;
  --accent-secondary-rgb: 134, 94, 50;
  --accent-tertiary: #c29f78;
  --btn-bg: #a8763e;
  --btn-hover: #8f6435;
  --shadow-accent: 0 4px 20px rgba(168,118,62,0.25);
}
html[data-style][data-accent="brown"][data-theme="light"],
html[data-accent="brown"][data-theme="light"] {
  --accent: #92651f;
  --accent-rgb: 146, 101, 31;
  --accent-secondary: #755119;
  --accent-secondary-rgb: 117, 81, 25;
  --accent-tertiary: #b39362;
  --btn-bg: #92651f;
  --btn-hover: #7c561a;
  --shadow-accent: 0 4px 20px rgba(146,101,31,0.25);
}
body[data-page-accent="brown"] {
  --accent: #a8763e;
  --accent-rgb: 168, 118, 62;
  --accent-secondary: #865e32;
  --accent-secondary-rgb: 134, 94, 50;
  --accent-tertiary: #c29f78;
  --btn-bg: #a8763e;
  --btn-hover: #8f6435;
  --shadow-accent: 0 4px 20px rgba(168,118,62,0.25);
}
html[data-theme="light"] body[data-page-accent="brown"] {
  --accent: #92651f;
  --accent-rgb: 146, 101, 31;
  --accent-secondary: #755119;
  --accent-secondary-rgb: 117, 81, 25;
  --accent-tertiary: #b39362;
  --btn-bg: #92651f;
  --btn-hover: #7c561a;
  --shadow-accent: 0 4px 20px rgba(146,101,31,0.25);
}
html[data-style][data-accent="amber"],
html[data-accent="amber"] {
  --accent: #b45309;
  --accent-rgb: 180, 83, 9;
  --accent-secondary: #904207;
  --accent-secondary-rgb: 144, 66, 7;
  --accent-tertiary: #cb8753;
  --btn-bg: #b45309;
  --btn-hover: #994708;
  --shadow-accent: 0 4px 20px rgba(180,83,9,0.25);
}
html[data-style][data-accent="amber"][data-theme="light"],
html[data-accent="amber"][data-theme="light"] {
  --accent: #92400e;
  --accent-rgb: 146, 64, 14;
  --accent-secondary: #75330b;
  --accent-secondary-rgb: 117, 51, 11;
  --accent-tertiary: #b37956;
  --btn-bg: #92400e;
  --btn-hover: #7c360c;
  --shadow-accent: 0 4px 20px rgba(146,64,14,0.25);
}
body[data-page-accent="amber"] {
  --accent: #b45309;
  --accent-rgb: 180, 83, 9;
  --accent-secondary: #904207;
  --accent-secondary-rgb: 144, 66, 7;
  --accent-tertiary: #cb8753;
  --btn-bg: #b45309;
  --btn-hover: #994708;
  --shadow-accent: 0 4px 20px rgba(180,83,9,0.25);
}
html[data-theme="light"] body[data-page-accent="amber"] {
  --accent: #92400e;
  --accent-rgb: 146, 64, 14;
  --accent-secondary: #75330b;
  --accent-secondary-rgb: 117, 51, 11;
  --accent-tertiary: #b37956;
  --btn-bg: #92400e;
  --btn-hover: #7c360c;
  --shadow-accent: 0 4px 20px rgba(146,64,14,0.25);
}
html[data-style][data-accent="purple"],
html[data-accent="purple"] {
  --accent: #a78bfa;
  --accent-rgb: 167, 139, 250;
  --accent-secondary: #866fc8;
  --accent-secondary-rgb: 134, 111, 200;
  --accent-tertiary: #c1aefc;
  --btn-bg: #a78bfa;
  --btn-hover: #8e76d5;
  --shadow-accent: 0 4px 20px rgba(167,139,250,0.25);
}
html[data-style][data-accent="purple"][data-theme="light"],
html[data-accent="purple"][data-theme="light"] {
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-secondary: #6f4ac5;
  --accent-secondary-rgb: 111, 74, 197;
  --accent-tertiary: #ae8df9;
  --btn-bg: #8b5cf6;
  --btn-hover: #764ed1;
  --shadow-accent: 0 4px 20px rgba(139,92,246,0.25);
}
body[data-page-accent="purple"] {
  --accent: #a78bfa;
  --accent-rgb: 167, 139, 250;
  --accent-secondary: #866fc8;
  --accent-secondary-rgb: 134, 111, 200;
  --accent-tertiary: #c1aefc;
  --btn-bg: #a78bfa;
  --btn-hover: #8e76d5;
  --shadow-accent: 0 4px 20px rgba(167,139,250,0.25);
}
html[data-theme="light"] body[data-page-accent="purple"] {
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-secondary: #6f4ac5;
  --accent-secondary-rgb: 111, 74, 197;
  --accent-tertiary: #ae8df9;
  --btn-bg: #8b5cf6;
  --btn-hover: #764ed1;
  --shadow-accent: 0 4px 20px rgba(139,92,246,0.25);
}
html[data-style][data-accent="violet"],
html[data-accent="violet"] {
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-secondary: #6f4ac5;
  --accent-secondary-rgb: 111, 74, 197;
  --accent-tertiary: #ae8df9;
  --btn-bg: #8b5cf6;
  --btn-hover: #764ed1;
  --shadow-accent: 0 4px 20px rgba(139,92,246,0.25);
}
html[data-style][data-accent="violet"][data-theme="light"],
html[data-accent="violet"][data-theme="light"] {
  --accent: #7c3aed;
  --accent-rgb: 124, 58, 237;
  --accent-secondary: #632ebe;
  --accent-secondary-rgb: 99, 46, 190;
  --accent-tertiary: #a375f2;
  --btn-bg: #7c3aed;
  --btn-hover: #6931c9;
  --shadow-accent: 0 4px 20px rgba(124,58,237,0.25);
}
body[data-page-accent="violet"] {
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-secondary: #6f4ac5;
  --accent-secondary-rgb: 111, 74, 197;
  --accent-tertiary: #ae8df9;
  --btn-bg: #8b5cf6;
  --btn-hover: #764ed1;
  --shadow-accent: 0 4px 20px rgba(139,92,246,0.25);
}
html[data-theme="light"] body[data-page-accent="violet"] {
  --accent: #7c3aed;
  --accent-rgb: 124, 58, 237;
  --accent-secondary: #632ebe;
  --accent-secondary-rgb: 99, 46, 190;
  --accent-tertiary: #a375f2;
  --btn-bg: #7c3aed;
  --btn-hover: #6931c9;
  --shadow-accent: 0 4px 20px rgba(124,58,237,0.25);
}
html[data-style][data-accent="yellow"],
html[data-accent="yellow"] {
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --accent-secondary: #c9991d;
  --accent-secondary-rgb: 201, 153, 29;
  --accent-tertiary: #fcd266;
  --btn-bg: #fbbf24;
  --btn-hover: #d5a21f;
  --shadow-accent: 0 4px 20px rgba(251,191,36,0.25);
}
html[data-style][data-accent="yellow"][data-theme="light"],
html[data-accent="yellow"][data-theme="light"] {
  --accent: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-secondary: #ae5f05;
  --accent-secondary-rgb: 174, 95, 5;
  --accent-tertiary: #e4a051;
  --btn-bg: #d97706;
  --btn-hover: #b86505;
  --shadow-accent: 0 4px 20px rgba(217,119,6,0.25);
}
body[data-page-accent="yellow"] {
  --accent: #fbbf24;
  --accent-rgb: 251, 191, 36;
  --accent-secondary: #c9991d;
  --accent-secondary-rgb: 201, 153, 29;
  --accent-tertiary: #fcd266;
  --btn-bg: #fbbf24;
  --btn-hover: #d5a21f;
  --shadow-accent: 0 4px 20px rgba(251,191,36,0.25);
}
html[data-theme="light"] body[data-page-accent="yellow"] {
  --accent: #d97706;
  --accent-rgb: 217, 119, 6;
  --accent-secondary: #ae5f05;
  --accent-secondary-rgb: 174, 95, 5;
  --accent-tertiary: #e4a051;
  --btn-bg: #d97706;
  --btn-hover: #b86505;
  --shadow-accent: 0 4px 20px rgba(217,119,6,0.25);
}
html[data-style][data-accent="orange"],
html[data-accent="orange"] {
  --accent: #f97316;
  --accent-rgb: 249, 115, 22;
  --accent-secondary: #c75c12;
  --accent-secondary-rgb: 199, 92, 18;
  --accent-tertiary: #fb9d5c;
  --btn-bg: #f97316;
  --btn-hover: #d46213;
  --shadow-accent: 0 4px 20px rgba(249,115,22,0.25);
}
html[data-style][data-accent="orange"][data-theme="light"],
html[data-accent="orange"][data-theme="light"] {
  --accent: #ea580c;
  --accent-rgb: 234, 88, 12;
  --accent-secondary: #bb460a;
  --accent-secondary-rgb: 187, 70, 10;
  --accent-tertiary: #f08a55;
  --btn-bg: #ea580c;
  --btn-hover: #c74b0a;
  --shadow-accent: 0 4px 20px rgba(234,88,12,0.25);
}
body[data-page-accent="orange"] {
  --accent: #f97316;
  --accent-rgb: 249, 115, 22;
  --accent-secondary: #c75c12;
  --accent-secondary-rgb: 199, 92, 18;
  --accent-tertiary: #fb9d5c;
  --btn-bg: #f97316;
  --btn-hover: #d46213;
  --shadow-accent: 0 4px 20px rgba(249,115,22,0.25);
}
html[data-theme="light"] body[data-page-accent="orange"] {
  --accent: #ea580c;
  --accent-rgb: 234, 88, 12;
  --accent-secondary: #bb460a;
  --accent-secondary-rgb: 187, 70, 10;
  --accent-tertiary: #f08a55;
  --btn-bg: #ea580c;
  --btn-hover: #c74b0a;
  --shadow-accent: 0 4px 20px rgba(234,88,12,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   TEMPLATE SYSTEM — Layout CSS for each template
   Uses [data-template="..."] selectors for CSS-only switching.
   Colors/fonts come from [data-style="..."] variables.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base template reset — shared across all templates ── */
.tpl-nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 70px; }
.tpl-nav-brand { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--text-heading); text-decoration: none; }
.tpl-nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tpl-nav-links a { font-size: 0.85rem; color: var(--text-body); text-decoration: none; transition: color 0.2s; }
.tpl-nav-links a:hover { color: var(--accent); }
.tpl-nav-cta { background: var(--btn-bg); color: var(--btn-text); border: none; padding: 9px 22px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.tpl-nav-cta:hover { background: var(--btn-hover); }

.tpl-hero { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 32px; background: var(--bg-primary); }
.tpl-hero-badge { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 600; border: 1px solid var(--border); border-radius: 50px; padding: 5px 18px; margin-bottom: 20px; }
.tpl-hero-title { font-family: var(--font-heading); color: var(--text-heading); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
.tpl-hero-text { max-width: 560px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 28px; }
.tpl-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tpl-hero-actions button, .tpl-hero-actions .tpl-btn { background: var(--btn-bg); color: var(--btn-text); border: none; padding: 14px 36px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.tpl-hero-actions button:hover, .tpl-hero-actions .tpl-btn:hover { background: var(--btn-hover); transform: translateY(-1px); }
.tpl-hero-actions .tpl-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-body); }
.tpl-hero-actions .tpl-btn-ghost:hover { background: var(--bg-card); border-color: var(--border-emphasis); }

.tpl-section-title { font-family: var(--font-heading); color: var(--text-heading); font-size: 1.6rem; font-weight: 700; text-align: center; margin: 0 0 40px; }

.tpl-features { padding: 80px 32px; background: var(--section-alt); }
.tpl-features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }

.tpl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: all 0.3s ease; }
.tpl-card:hover { background: var(--bg-card-hover); border-color: var(--border-emphasis); transform: translateY(-2px); }
.tpl-card-icon { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 1.3rem; color: var(--accent); }
.tpl-card h3 { font-family: var(--font-heading); color: var(--text-heading); font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.tpl-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

.tpl-about { padding: 80px 32px; background: var(--bg-primary); }
.tpl-about > div { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1100px; margin: 0 auto; align-items: center; }
.tpl-about-content h2 { font-family: var(--font-heading); color: var(--text-heading); font-size: 1.5rem; font-weight: 700; margin: 0 0 16px; }
.tpl-about-content p { color: var(--text-body); line-height: 1.7; margin: 0 0 12px; }
.tpl-about-visual { background: var(--section-alt); border-radius: var(--radius); min-height: 280px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; }

.tpl-stats { padding: 60px 32px; background: var(--section-alt); }
.tpl-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; max-width: 1000px; margin: 0 auto; text-align: center; }
.tpl-stat-number { display: block; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 6px; }
.tpl-stat span:last-child { font-size: 0.8rem; color: var(--text-muted); }

.tpl-testimonials { padding: 80px 32px; background: var(--bg-primary); }
.tpl-testimonials-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.tpl-card--testimonial { text-align: left; }
.tpl-quote { font-style: italic; font-size: 0.95rem; color: var(--text-body); line-height: 1.7; margin: 0 0 16px; }
.tpl-quote::before { content: "\201C"; font-size: 2rem; color: var(--accent); line-height: 0; vertical-align: -0.4em; margin-right: 4px; }
.tpl-author { font-size: 0.8rem; font-weight: 600; color: var(--text-heading); }

.tpl-cta { padding: 60px 32px; background: var(--section-alt); text-align: center; }
.tpl-cta h2 { font-family: var(--font-heading); color: var(--text-heading); font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.tpl-cta p { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 24px; }
.tpl-cta button { background: var(--btn-bg); color: var(--btn-text); border: none; padding: 14px 36px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; font-size: 0.9rem; transition: background 0.2s; }
.tpl-cta button:hover { background: var(--btn-hover); }

.tpl-footer { background: var(--footer-bg); padding: 40px 32px; color: var(--text-muted); font-size: 0.78rem; text-align: center; }
.tpl-footer a { color: var(--accent); text-decoration: none; }

/* ── Responsive base ── */
@media (max-width: 768px) {
  .tpl-nav { padding: 0 16px; height: 60px; }
  .tpl-nav-links { display: none; }
  .tpl-hero { min-height: 70vh; padding: 48px 20px; }
  .tpl-hero-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .tpl-features { padding: 48px 16px; }
  .tpl-features-grid { grid-template-columns: 1fr; }
  .tpl-about > div { grid-template-columns: 1fr; gap: 24px; }
  .tpl-about { padding: 48px 16px; }
  .tpl-stats { padding: 40px 16px; }
  .tpl-stats-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .tpl-testimonials { padding: 48px 16px; }
  .tpl-testimonials-grid { grid-template-columns: 1fr; }
  .tpl-cta { padding: 48px 16px; }
  .tpl-footer { padding: 32px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   1. CLASSIC SECTIONS — default, no overrides needed (base styles above)
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   2. BENTO DASHBOARD — All content becomes grid tiles
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="bento-dashboard"] .tpl-nav { height: 56px; }
[data-template="bento-dashboard"] .tpl-hero { min-height: auto; padding: 0; text-align: left; align-items: flex-start; justify-content: center; }
[data-template="bento-dashboard"] .tpl-hero-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
[data-template="bento-dashboard"] .tpl-hero-actions { justify-content: flex-start; }
[data-template="bento-dashboard"] .tpl-hero-text { margin: 0 0 20px; }

[data-template="bento-dashboard"] .tpl-content-wrapper {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  max-width: 1200px; margin: 0 auto; padding: 16px;
}
[data-template="bento-dashboard"] .tpl-hero { grid-column: span 2; grid-row: span 2; }
[data-template="bento-dashboard"] .tpl-features { grid-column: span 2; padding: 0; background: transparent; }
[data-template="bento-dashboard"] .tpl-features .tpl-section-title { display: none; }
[data-template="bento-dashboard"] .tpl-features-grid { display: contents; }
[data-template="bento-dashboard"] .tpl-card--feature { grid-column: span 1; }

[data-template="bento-dashboard"] .tpl-about { grid-column: span 2; padding: 0; background: transparent; }
[data-template="bento-dashboard"] .tpl-about > div { grid-template-columns: 1fr; gap: 16px; }
[data-template="bento-dashboard"] .tpl-about-visual { min-height: 120px; }

[data-template="bento-dashboard"] .tpl-stats { grid-column: span 4; padding: 0; background: transparent; }
[data-template="bento-dashboard"] .tpl-stats-grid { grid-template-columns: repeat(4,1fr); gap: 14px; max-width: none; }
[data-template="bento-dashboard"] .tpl-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }

[data-template="bento-dashboard"] .tpl-testimonials { grid-column: span 2; grid-row: span 2; padding: 0; background: transparent; }
[data-template="bento-dashboard"] .tpl-testimonials-grid { grid-template-columns: 1fr; }

[data-template="bento-dashboard"] .tpl-cta { grid-column: span 3; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); border: 1px solid var(--border); }

[data-template="bento-dashboard"] .tpl-content-wrapper > * {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px;
  transition: all 0.3s ease;
}
[data-template="bento-dashboard"] .tpl-content-wrapper > *:hover {
  background: var(--bg-card-hover); border-color: var(--border-emphasis); transform: translateY(-2px);
}

[data-template="bento-dashboard"] .tpl-footer { margin-top: 16px; }

@media (max-width: 1023px) {
  [data-template="bento-dashboard"] .tpl-content-wrapper { grid-template-columns: repeat(2, 1fr); }
  [data-template="bento-dashboard"] .tpl-hero { grid-column: span 2; }
  [data-template="bento-dashboard"] .tpl-stats { grid-column: span 2; }
  [data-template="bento-dashboard"] .tpl-stats-grid { grid-template-columns: repeat(2,1fr); }
  [data-template="bento-dashboard"] .tpl-cta { grid-column: span 2; }
}
@media (max-width: 768px) {
  [data-template="bento-dashboard"] .tpl-content-wrapper { grid-template-columns: 1fr; }
  [data-template="bento-dashboard"] .tpl-hero,
  [data-template="bento-dashboard"] .tpl-features,
  [data-template="bento-dashboard"] .tpl-about,
  [data-template="bento-dashboard"] .tpl-stats,
  [data-template="bento-dashboard"] .tpl-testimonials,
  [data-template="bento-dashboard"] .tpl-cta { grid-column: span 1; grid-row: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. SPLIT SCREEN — 50/50 vertical splits
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="split-screen"] .tpl-hero {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 90vh; padding: 0; text-align: left; gap: 0;
}
[data-template="split-screen"] .tpl-hero > *:first-child {
  display: flex; flex-direction: column; justify-content: center; padding: 60px 48px;
}
[data-template="split-screen"] .tpl-hero > *:first-child .tpl-hero-actions { justify-content: flex-start; }
[data-template="split-screen"] .tpl-hero-visual,
[data-template="split-screen"] .tpl-hero > *:last-child:not(:first-child) {
  background: var(--section-alt); display: flex; align-items: center; justify-content: center; min-height: 100%;
}

[data-template="split-screen"] .tpl-about > div {
  grid-template-columns: 1fr 1fr; gap: 0; max-width: none; align-items: stretch;
}
[data-template="split-screen"] .tpl-about { padding: 0; min-height: 80vh; }
[data-template="split-screen"] .tpl-about-content { padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
[data-template="split-screen"] .tpl-about-visual { min-height: 80vh; border-radius: 0; }
[data-template="split-screen"] .tpl-about > div { direction: rtl; }
[data-template="split-screen"] .tpl-about > div > * { direction: ltr; }

[data-template="split-screen"] .tpl-features { padding: 0; min-height: 80vh; display: grid; grid-template-columns: 1fr 1fr; }
[data-template="split-screen"] .tpl-features > *:first-child { padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
[data-template="split-screen"] .tpl-features-grid { display: flex; flex-direction: column; gap: 16px; }
[data-template="split-screen"] .tpl-features .tpl-section-title { text-align: left; margin-bottom: 24px; }

[data-template="split-screen"] .tpl-testimonials { padding: 0; min-height: 60vh; display: grid; grid-template-columns: 1fr 1fr; }
[data-template="split-screen"] .tpl-testimonials > *:first-child { background: var(--section-alt); display: flex; align-items: center; justify-content: center; }
[data-template="split-screen"] .tpl-testimonials-grid { display: flex; flex-direction: column; gap: 20px; padding: 48px; justify-content: center; }

@media (max-width: 768px) {
  [data-template="split-screen"] .tpl-hero,
  [data-template="split-screen"] .tpl-about > div,
  [data-template="split-screen"] .tpl-features,
  [data-template="split-screen"] .tpl-testimonials { grid-template-columns: 1fr; min-height: auto; }
  [data-template="split-screen"] .tpl-about > div { direction: ltr; }
  [data-template="split-screen"] .tpl-hero-visual,
  [data-template="split-screen"] .tpl-about-visual { min-height: 40vh; }
  [data-template="split-screen"] .tpl-hero > *:first-child,
  [data-template="split-screen"] .tpl-about-content,
  [data-template="split-screen"] .tpl-features > *:first-child { padding: 40px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. EDITORIAL MAGAZINE — Typography-focused layout
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="editorial-magazine"] .tpl-nav {
  flex-direction: column; height: auto; padding: 20px 32px 16px; gap: 12px; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
}
[data-template="editorial-magazine"] .tpl-nav-brand { font-size: 1.4rem; text-align: center; }
[data-template="editorial-magazine"] .tpl-nav-links { gap: 32px; }
[data-template="editorial-magazine"] .tpl-nav-links a { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.15em; font-weight: 500; }
[data-template="editorial-magazine"] .tpl-nav-cta { display: none; }

[data-template="editorial-magazine"] .tpl-hero {
  min-height: 65vh; padding: 100px 32px 80px;
}
[data-template="editorial-magazine"] .tpl-hero-badge { display: none; }
[data-template="editorial-magazine"] .tpl-hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05;
}
[data-template="editorial-magazine"] .tpl-hero-text { font-style: italic; font-size: 1.1rem; }
[data-template="editorial-magazine"] .tpl-hero-actions { display: none; }

[data-template="editorial-magazine"] .tpl-features { padding: 80px 32px; max-width: 1100px; margin: 0 auto; background: var(--bg-primary); }
[data-template="editorial-magazine"] .tpl-section-title { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 600; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 6px; margin-bottom: 32px; }
[data-template="editorial-magazine"] .tpl-features-grid { display: block; column-count: 2; column-gap: 32px; max-width: none; }
[data-template="editorial-magazine"] .tpl-card--feature { break-inside: avoid; margin-bottom: 24px; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 0 20px; background: transparent; }
[data-template="editorial-magazine"] .tpl-card--feature:hover { background: transparent; transform: none; }
[data-template="editorial-magazine"] .tpl-card-icon { display: none; }

[data-template="editorial-magazine"] .tpl-about { padding: 80px 32px; max-width: 900px; margin: 0 auto; }
[data-template="editorial-magazine"] .tpl-about > div { display: block; column-count: 2; column-gap: 40px; }
[data-template="editorial-magazine"] .tpl-about-content { break-inside: avoid; }
[data-template="editorial-magazine"] .tpl-about-content h2 { column-span: all; margin-bottom: 24px; }
[data-template="editorial-magazine"] .tpl-about-visual { display: none; }

[data-template="editorial-magazine"] .tpl-stats { background: transparent; padding: 48px 32px; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
[data-template="editorial-magazine"] .tpl-stats-grid { display: flex; justify-content: space-between; }
[data-template="editorial-magazine"] .tpl-stat-number { font-size: 3rem; font-weight: 200; }

[data-template="editorial-magazine"] .tpl-testimonials { max-width: 700px; margin: 0 auto; padding: 80px 32px; text-align: center; }
[data-template="editorial-magazine"] .tpl-testimonials-grid { display: block; }
[data-template="editorial-magazine"] .tpl-card--testimonial { border: none; background: transparent; padding: 0; text-align: center; }
[data-template="editorial-magazine"] .tpl-card--testimonial:hover { background: transparent; transform: none; }
[data-template="editorial-magazine"] .tpl-quote { font-size: 1.4rem; line-height: 1.6; }
[data-template="editorial-magazine"] .tpl-author { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }

[data-template="editorial-magazine"] .tpl-cta { background: transparent; }
[data-template="editorial-magazine"] .tpl-cta button { background: transparent; border: none; color: var(--accent); text-decoration: underline; font-weight: 500; padding: 0; }
[data-template="editorial-magazine"] .tpl-cta button::after { content: " \2192"; }

[data-template="editorial-magazine"] .tpl-footer { border-top: 1px solid var(--border); background: transparent; color: var(--text-muted); }

@media (max-width: 768px) {
  [data-template="editorial-magazine"] .tpl-features-grid { column-count: 1; }
  [data-template="editorial-magazine"] .tpl-about > div { column-count: 1; }
  [data-template="editorial-magazine"] .tpl-stats-grid { flex-direction: column; gap: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. DIAGONAL DYNAMIC — clip-path diagonal sections
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="diagonal-dynamic"] .tpl-hero {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding-bottom: 100px; min-height: 92vh;
}
[data-template="diagonal-dynamic"] .tpl-hero-title { transform: rotate(-1deg); font-weight: 900; }

[data-template="diagonal-dynamic"] .tpl-features {
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); margin-top: -5vh; padding: 100px 32px 100px; position: relative; z-index: 1;
}
[data-template="diagonal-dynamic"] .tpl-card--feature { transform: rotate(-0.5deg); }
[data-template="diagonal-dynamic"] .tpl-card--feature:hover { transform: rotate(0) translateY(-4px); }

[data-template="diagonal-dynamic"] .tpl-about {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); margin-top: -5vh; padding: 100px 32px; position: relative; z-index: 2;
}

[data-template="diagonal-dynamic"] .tpl-stats {
  clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); margin-top: -5vh; padding: 80px 32px; position: relative; z-index: 3;
  background: color-mix(in srgb, var(--accent) 10%, var(--section-alt));
}

[data-template="diagonal-dynamic"] .tpl-testimonials {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); margin-top: -5vh; padding: 100px 32px; position: relative; z-index: 4;
}

[data-template="diagonal-dynamic"] .tpl-cta {
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); margin-top: -5vh; padding: 80px 32px 60px; position: relative; z-index: 5;
}

[data-template="diagonal-dynamic"] .tpl-nav-cta { transform: skewX(-3deg); }
[data-template="diagonal-dynamic"] .tpl-nav-cta:hover { transform: skewX(0); }
[data-template="diagonal-dynamic"] .tpl-hero-actions button { transform: skewX(-3deg); }
[data-template="diagonal-dynamic"] .tpl-hero-actions button:hover { transform: skewX(0) translateY(-2px); }

@media (max-width: 768px) {
  [data-template="diagonal-dynamic"] .tpl-hero { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }
  [data-template="diagonal-dynamic"] .tpl-features,
  [data-template="diagonal-dynamic"] .tpl-about,
  [data-template="diagonal-dynamic"] .tpl-stats,
  [data-template="diagonal-dynamic"] .tpl-testimonials { clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%); margin-top: -2vh; }
  [data-template="diagonal-dynamic"] .tpl-card--feature { transform: none; }
  [data-template="diagonal-dynamic"] .tpl-hero-actions button,
  [data-template="diagonal-dynamic"] .tpl-nav-cta { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. HORIZONTAL SHOWCASE — scroll-snap horizontal hero + portfolio
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="horizontal-showcase"] .tpl-nav {
  position: fixed; top: 0; width: 100%; z-index: 100; background: rgba(0,0,0,0.3); backdrop-filter: blur(12px); border-bottom: none;
}
[data-template="horizontal-showcase"] .tpl-nav-brand,
[data-template="horizontal-showcase"] .tpl-nav-links a { color: #fff; }

[data-template="horizontal-showcase"] .tpl-hero {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; min-height: 100vh; padding: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
[data-template="horizontal-showcase"] .tpl-hero::-webkit-scrollbar { display: none; }
[data-template="horizontal-showcase"] .tpl-hero > * {
  min-width: 100vw; scroll-snap-align: start; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 48px; text-align: center;
}
[data-template="horizontal-showcase"] .tpl-hero > *:nth-child(1) { background: var(--bg-primary); }
[data-template="horizontal-showcase"] .tpl-hero > *:nth-child(2) { background: var(--section-alt); }
[data-template="horizontal-showcase"] .tpl-hero > *:nth-child(3) { background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary)); }

[data-template="horizontal-showcase"] .tpl-features { background: var(--bg-primary); }
[data-template="horizontal-showcase"] .tpl-features-grid { grid-template-columns: repeat(4,1fr); }

[data-template="horizontal-showcase"] .tpl-testimonials { background: var(--section-alt); }
[data-template="horizontal-showcase"] .tpl-testimonials-grid {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 0 32px 16px;
  scrollbar-width: none; max-width: none;
}
[data-template="horizontal-showcase"] .tpl-testimonials-grid::-webkit-scrollbar { display: none; }
[data-template="horizontal-showcase"] .tpl-card--testimonial {
  min-width: 320px; flex-shrink: 0; scroll-snap-align: start;
}

@media (max-width: 768px) {
  [data-template="horizontal-showcase"] .tpl-features-grid { grid-template-columns: repeat(2,1fr); }
  [data-template="horizontal-showcase"] .tpl-card--testimonial { min-width: 280px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. TIMELINE STORY — Central vertical timeline
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="timeline-story"] .tpl-hero { min-height: 55vh; }

[data-template="timeline-story"] .tpl-content-wrapper {
  position: relative; max-width: 900px; margin: 0 auto; padding: 40px 16px 60px;
}
[data-template="timeline-story"] .tpl-content-wrapper::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--border); transform: translateX(-50%);
}

[data-template="timeline-story"] .tpl-features { background: transparent; padding: 20px 0; }
[data-template="timeline-story"] .tpl-features .tpl-section-title { position: relative; z-index: 2; background: var(--bg-primary); display: inline-block; padding: 0 20px; }
[data-template="timeline-story"] .tpl-features-grid { display: flex; flex-direction: column; gap: 0; max-width: none; }
[data-template="timeline-story"] .tpl-card--feature {
  position: relative; width: 42%; margin-bottom: 40px; z-index: 1;
}
[data-template="timeline-story"] .tpl-card--feature::before {
  content: ""; position: absolute; top: 24px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-primary); z-index: 2;
}
[data-template="timeline-story"] .tpl-card--feature:nth-child(odd) { margin-right: auto; margin-left: 4%; text-align: right; padding-right: 32px; }
[data-template="timeline-story"] .tpl-card--feature:nth-child(odd)::before { right: -23px; }
[data-template="timeline-story"] .tpl-card--feature:nth-child(even) { margin-left: auto; margin-right: 4%; padding-left: 32px; }
[data-template="timeline-story"] .tpl-card--feature:nth-child(even)::before { left: -23px; }
[data-template="timeline-story"] .tpl-card-icon { display: none; }

[data-template="timeline-story"] .tpl-about { max-width: 600px; margin: 20px auto 20px; position: relative; z-index: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
[data-template="timeline-story"] .tpl-about > div { display: block; }
[data-template="timeline-story"] .tpl-about-visual { display: none; }

[data-template="timeline-story"] .tpl-stats { position: relative; z-index: 1; }

[data-template="timeline-story"] .tpl-testimonials { background: transparent; padding: 20px 0; }
[data-template="timeline-story"] .tpl-testimonials-grid { display: flex; flex-direction: column; gap: 40px; max-width: none; }
[data-template="timeline-story"] .tpl-card--testimonial {
  position: relative; width: 42%; z-index: 1;
}
[data-template="timeline-story"] .tpl-card--testimonial::before {
  content: ""; position: absolute; top: 24px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-primary); z-index: 2;
}
[data-template="timeline-story"] .tpl-card--testimonial:nth-child(odd) { margin-right: auto; margin-left: 4%; text-align: right; padding-right: 32px; }
[data-template="timeline-story"] .tpl-card--testimonial:nth-child(odd)::before { right: -23px; }
[data-template="timeline-story"] .tpl-card--testimonial:nth-child(even) { margin-left: auto; margin-right: 4%; padding-left: 32px; }
[data-template="timeline-story"] .tpl-card--testimonial:nth-child(even)::before { left: -23px; }

[data-template="timeline-story"] .tpl-cta {
  position: relative; z-index: 1; max-width: 500px; margin: 0 auto;
  border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border);
}

@media (max-width: 768px) {
  [data-template="timeline-story"] .tpl-content-wrapper::before { left: 20px; }
  [data-template="timeline-story"] .tpl-card--feature,
  [data-template="timeline-story"] .tpl-card--testimonial { width: auto; margin-left: 48px !important; margin-right: 0 !important; text-align: left !important; padding-left: 0 !important; padding-right: 0 !important; }
  [data-template="timeline-story"] .tpl-card--feature::before,
  [data-template="timeline-story"] .tpl-card--testimonial::before { left: -35px !important; right: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. CARD MASONRY — CSS columns masonry layout
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="card-masonry"] .tpl-hero { min-height: 40vh; padding: 80px 32px 48px; }
[data-template="card-masonry"] .tpl-hero-title { font-size: clamp(1.6rem, 4vw, 2.8rem); }
[data-template="card-masonry"] .tpl-hero-badge { display: none; }

[data-template="card-masonry"] .tpl-content-wrapper {
  columns: 3; column-gap: 16px; max-width: 1200px; margin: 0 auto; padding: 0 16px 16px;
}
[data-template="card-masonry"] .tpl-content-wrapper > * {
  break-inside: avoid; margin-bottom: 16px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; transition: all 0.3s ease;
}
[data-template="card-masonry"] .tpl-content-wrapper > *:hover {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-emphasis);
}

[data-template="card-masonry"] .tpl-features,
[data-template="card-masonry"] .tpl-about,
[data-template="card-masonry"] .tpl-stats,
[data-template="card-masonry"] .tpl-testimonials,
[data-template="card-masonry"] .tpl-cta { padding: 0; background: transparent; }

[data-template="card-masonry"] .tpl-features .tpl-section-title { display: none; }
[data-template="card-masonry"] .tpl-features-grid { display: contents; }
[data-template="card-masonry"] .tpl-card--feature { break-inside: avoid; margin-bottom: 16px; }

[data-template="card-masonry"] .tpl-about > div { display: block; }
[data-template="card-masonry"] .tpl-about-visual { min-height: 160px; margin-top: 16px; border-radius: var(--radius-sm); }

[data-template="card-masonry"] .tpl-stats-grid { display: flex; flex-direction: column; gap: 0; }
[data-template="card-masonry"] .tpl-stat { padding: 12px 0; border-bottom: 1px solid var(--border); }
[data-template="card-masonry"] .tpl-stat:last-child { border-bottom: none; }
[data-template="card-masonry"] .tpl-stat-number { font-size: 1.8rem; }

[data-template="card-masonry"] .tpl-testimonials-grid { display: contents; }
[data-template="card-masonry"] .tpl-card--testimonial { break-inside: avoid; margin-bottom: 16px; border-left: 3px solid var(--accent); }

[data-template="card-masonry"] .tpl-cta {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)) !important;
}

@media (max-width: 1023px) {
  [data-template="card-masonry"] .tpl-content-wrapper { columns: 2; }
}
@media (max-width: 768px) {
  [data-template="card-masonry"] .tpl-content-wrapper { columns: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. FULLBLEED IMMERSIVE — 100vh cinematic sections
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="fullbleed-immersive"] .tpl-nav {
  position: fixed; background: transparent; backdrop-filter: blur(12px); border-bottom: none;
}
[data-template="fullbleed-immersive"] .tpl-nav-brand,
[data-template="fullbleed-immersive"] .tpl-nav-links a { color: var(--text-heading); }

[data-template="fullbleed-immersive"] .tpl-hero {
  min-height: 100vh; background: linear-gradient(135deg, var(--bg-primary), var(--section-alt));
}
[data-template="fullbleed-immersive"] .tpl-hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }

[data-template="fullbleed-immersive"] .tpl-features {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--section-alt);
}
[data-template="fullbleed-immersive"] .tpl-card--feature {
  background: color-mix(in srgb, var(--bg-card) 60%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

[data-template="fullbleed-immersive"] .tpl-about {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--bg-primary), var(--section-alt));
}
[data-template="fullbleed-immersive"] .tpl-about-content {
  background: color-mix(in srgb, var(--bg-card) 60%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius: var(--radius); padding: 40px;
}
[data-template="fullbleed-immersive"] .tpl-about-visual { display: none; }
[data-template="fullbleed-immersive"] .tpl-about > div { grid-template-columns: 1fr; max-width: 700px; }

[data-template="fullbleed-immersive"] .tpl-stats {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary));
}
[data-template="fullbleed-immersive"] .tpl-stat-number { font-size: 3.5rem; }

[data-template="fullbleed-immersive"] .tpl-testimonials {
  min-height: 80vh; display: flex; align-items: center; justify-content: center;
}
[data-template="fullbleed-immersive"] .tpl-testimonials-grid { max-width: 700px; grid-template-columns: 1fr; }
[data-template="fullbleed-immersive"] .tpl-card--testimonial {
  background: color-mix(in srgb, var(--bg-card) 60%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent); text-align: center;
}
[data-template="fullbleed-immersive"] .tpl-quote { font-size: 1.3rem; }

[data-template="fullbleed-immersive"] .tpl-cta {
  min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--section-alt), var(--bg-primary));
}
[data-template="fullbleed-immersive"] .tpl-cta h2 { font-size: 2rem; }
[data-template="fullbleed-immersive"] .tpl-cta button { padding: 16px 48px; font-size: 1rem; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); }

[data-template="fullbleed-immersive"] .tpl-footer { padding: 60px 32px; background: linear-gradient(180deg, var(--footer-bg), #000); }

@media (max-width: 768px) {
  [data-template="fullbleed-immersive"] .tpl-hero,
  [data-template="fullbleed-immersive"] .tpl-features,
  [data-template="fullbleed-immersive"] .tpl-about,
  [data-template="fullbleed-immersive"] .tpl-testimonials,
  [data-template="fullbleed-immersive"] .tpl-cta { min-height: auto; padding: 80px 20px; }
  [data-template="fullbleed-immersive"] .tpl-stat-number { font-size: 2.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. ASYMMETRIC CREATIVE — Offsets, overlaps, oversized type
   ══════════════════════════════════════════════════════════════════════════ */
[data-template="asymmetric-creative"] .tpl-nav { justify-content: flex-end; gap: 32px; }
[data-template="asymmetric-creative"] .tpl-nav-brand { margin-right: auto; padding-left: 3%; }

[data-template="asymmetric-creative"] .tpl-hero {
  min-height: 85vh; align-items: flex-start; text-align: left; padding: 100px 32px 80px;
  position: relative; overflow: visible;
}
[data-template="asymmetric-creative"] .tpl-hero-badge { margin: 0 0 16px; }
[data-template="asymmetric-creative"] .tpl-hero-title {
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em;
  margin-left: 5%; margin-right: 25%; margin-bottom: 20px;
}
[data-template="asymmetric-creative"] .tpl-hero-text { margin-left: 5%; max-width: 400px; text-align: left; }
[data-template="asymmetric-creative"] .tpl-hero-actions { justify-content: flex-start; margin-left: 5%; }

[data-template="asymmetric-creative"] .tpl-features { padding: 60px 32px; }
[data-template="asymmetric-creative"] .tpl-section-title { text-align: left; margin-left: 10%; font-size: 2rem; }
[data-template="asymmetric-creative"] .tpl-features-grid {
  grid-template-columns: 1.3fr 0.7fr; max-width: 1000px; margin-left: 8%;
}

[data-template="asymmetric-creative"] .tpl-about {
  position: relative; padding: 40px 32px 80px;
}
[data-template="asymmetric-creative"] .tpl-about > div { position: relative; max-width: none; }
[data-template="asymmetric-creative"] .tpl-about-content {
  margin-left: 15%; width: 50%; position: relative; z-index: 2;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px;
}
[data-template="asymmetric-creative"] .tpl-about-visual {
  position: absolute; right: 5%; top: -40px; width: 40%; height: calc(100% + 80px);
  z-index: 1; border-radius: var(--radius);
}

[data-template="asymmetric-creative"] .tpl-stats-grid { text-align: left; }
[data-template="asymmetric-creative"] .tpl-stat { padding-top: var(--stat-offset, 0px); }
[data-template="asymmetric-creative"] .tpl-stat:nth-child(1) { --stat-offset: 0px; }
[data-template="asymmetric-creative"] .tpl-stat:nth-child(2) { --stat-offset: 24px; }
[data-template="asymmetric-creative"] .tpl-stat:nth-child(3) { --stat-offset: 48px; }
[data-template="asymmetric-creative"] .tpl-stat:nth-child(4) { --stat-offset: 12px; }
[data-template="asymmetric-creative"] .tpl-stat-number { font-size: 3rem; }

[data-template="asymmetric-creative"] .tpl-testimonials { padding: 80px 32px; }
[data-template="asymmetric-creative"] .tpl-testimonials-grid { max-width: 500px; margin-left: 35%; grid-template-columns: 1fr; }
[data-template="asymmetric-creative"] .tpl-card--testimonial { border-left: 4px solid var(--accent); }
[data-template="asymmetric-creative"] .tpl-author { margin-left: 10%; }

[data-template="asymmetric-creative"] .tpl-cta { text-align: left; padding: 60px 32px; }
[data-template="asymmetric-creative"] .tpl-cta > * { margin-left: 5%; }
[data-template="asymmetric-creative"] .tpl-cta h2 { font-size: 2rem; margin-right: 30%; }

[data-template="asymmetric-creative"] .tpl-footer { text-align: left; padding-left: 5%; }

@media (max-width: 768px) {
  [data-template="asymmetric-creative"] .tpl-hero-title { margin-left: 0; margin-right: 0; font-size: clamp(2rem, 10vw, 3.5rem); }
  [data-template="asymmetric-creative"] .tpl-hero-text,
  [data-template="asymmetric-creative"] .tpl-hero-actions { margin-left: 0; }
  [data-template="asymmetric-creative"] .tpl-features-grid { grid-template-columns: 1fr; margin-left: 0; }
  [data-template="asymmetric-creative"] .tpl-section-title { margin-left: 0; }
  [data-template="asymmetric-creative"] .tpl-about-content { margin-left: 0; width: auto; }
  [data-template="asymmetric-creative"] .tpl-about-visual { display: none; }
  [data-template="asymmetric-creative"] .tpl-stat { padding-top: 0 !important; }
  [data-template="asymmetric-creative"] .tpl-testimonials-grid { margin-left: 0; max-width: none; }
  [data-template="asymmetric-creative"] .tpl-cta > * { margin-left: 0; }
  [data-template="asymmetric-creative"] .tpl-cta h2 { margin-right: 0; }
}

/* Skip to content accessibility link */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 4px;
}
.skip-to-content:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
}

/* FAQ Section */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-item:hover {
  border-color: var(--accent);
}
.faq-item summary {
  padding: 20px 24px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-heading);
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  padding: 0 24px 20px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}

/* dh-icon-collection-system */
.dh-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0;width:1em;height:1em}
.dh-icon svg{stroke-linecap:round;stroke-linejoin:round;overflow:visible;width:100%;height:100%}
.dh-icon--minimal svg{stroke:#94a3b8;stroke-width:1;fill:none}
.dh-icon-styled{transition:all 0.3s ease}