/**
 * Deluxe Theme - Design Tokens
 * ============================
 * A comprehensive design system for premium marketing websites.
 * All values are customizable via HubSpot theme settings.
 */

:root {
  /* ==========================================
     COLOR SYSTEM
     ========================================== */
  
  /* Neutral Scale - The foundation */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-400: #a1a1aa;
  --color-neutral-500: #71717a;
  --color-neutral-600: #52525b;
  --color-neutral-700: #3f3f46;
  --color-neutral-800: #27272a;
  --color-neutral-900: #18181b;
  --color-neutral-950: #09090b;

  /* Primary Brand Color - User configurable */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* Semantic Colors */
  --color-success-50: #f0fdf4;
  --color-success-500: #22c55e;
  --color-success-700: #15803d;
  
  --color-warning-50: #fffbeb;
  --color-warning-500: #f59e0b;
  --color-warning-700: #b45309;
  
  --color-error-50: #fef2f2;
  --color-error-500: #ef4444;
  --color-error-700: #b91c1c;
  
  --color-info-50: #eff6ff;
  --color-info-500: #3b82f6;
  --color-info-700: #1d4ed8;

  /* Mapped Colors - Semantic usage */
  --color-background: var(--color-neutral-0);
  --color-background-subtle: var(--color-neutral-50);
  --color-background-muted: var(--color-neutral-100);
  --color-surface: var(--color-neutral-0);
  --color-surface-raised: var(--color-neutral-0);
  
  --color-text: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted: var(--color-neutral-500);
  --color-text-inverted: var(--color-neutral-0);
  
  --color-border: var(--color-neutral-200);
  --color-border-subtle: var(--color-neutral-100);
  --color-border-strong: var(--color-neutral-300);

  --color-accent: var(--color-primary-500);
  --color-accent-hover: var(--color-primary-600);
  --color-accent-subtle: var(--color-primary-50);

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Families */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Font Sizes - Fluid typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12-13px */
  --text-sm: clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem); /* 13-14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.1875vw, 1rem);     /* 15-16px */
  --text-lg: clamp(1.0625rem, 1rem + 0.3125vw, 1.125rem);     /* 17-18px */
  --text-xl: clamp(1.1875rem, 1.1rem + 0.4375vw, 1.25rem);    /* 19-20px */
  --text-2xl: clamp(1.375rem, 1.25rem + 0.625vw, 1.5rem);     /* 22-24px */
  --text-3xl: clamp(1.625rem, 1.45rem + 0.875vw, 1.875rem);   /* 26-30px */
  --text-4xl: clamp(2rem, 1.75rem + 1.25vw, 2.25rem);         /* 32-36px */
  --text-5xl: clamp(2.5rem, 2.1rem + 2vw, 3rem);              /* 40-48px */
  --text-6xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);           /* 48-60px */
  --text-7xl: clamp(3.5rem, 2.8rem + 3.5vw, 4.5rem);          /* 56-72px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.015em;
  --tracking-wider: 0.03em;
  --tracking-widest: 0.06em;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ==========================================
     SPACING SCALE
     ========================================== */
  
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */
  --space-36: 9rem;       /* 144px */
  --space-40: 10rem;      /* 160px */
  --space-44: 11rem;      /* 176px */
  --space-48: 12rem;      /* 192px */

  /* Section Spacing - Fluid */
  --section-py-sm: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --section-py-md: clamp(4rem, 3rem + 5vw, 6rem);
  --section-py-lg: clamp(5rem, 4rem + 5vw, 8rem);
  --section-py-xl: clamp(6rem, 5rem + 5vw, 10rem);

  /* ==========================================
     LAYOUT
     ========================================== */
  
  /* Container Widths */
  --container-xs: 20rem;    /* 320px */
  --container-sm: 24rem;    /* 384px */
  --container-md: 28rem;    /* 448px */
  --container-lg: 32rem;    /* 512px */
  --container-xl: 36rem;    /* 576px */
  --container-2xl: 42rem;   /* 672px */
  --container-3xl: 48rem;   /* 768px */
  --container-4xl: 56rem;   /* 896px */
  --container-5xl: 64rem;   /* 1024px */
  --container-6xl: 72rem;   /* 1152px */
  --container-7xl: 80rem;   /* 1280px */
  --container-full: 90rem;  /* 1440px */
  
  /* Container Padding */
  --container-px: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* Grid */
  --grid-columns: 12;
  --grid-gap: var(--space-6);
  --grid-gap-lg: var(--space-8);

  /* ==========================================
     BORDERS & RADIUS
     ========================================== */
  
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.25rem;    /* 20px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;

  /* ==========================================
     SHADOWS
     ========================================== */
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Colored shadows for buttons/cards */
  --shadow-primary: 0 4px 14px 0 rgb(59 130 246 / 0.25);
  --shadow-primary-lg: 0 10px 40px -10px rgb(59 130 246 / 0.35);

  /* ==========================================
     TRANSITIONS & ANIMATIONS
     ========================================== */
  
  /* Durations */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;
  --duration-slowest: 700ms;

  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.5, 1.5, 0.5, 1);

  /* Standard transitions */
  --transition-colors: color var(--duration-fast) var(--ease-in-out), 
                       background-color var(--duration-fast) var(--ease-in-out), 
                       border-color var(--duration-fast) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);

  /* ==========================================
     Z-INDEX SCALE
     ========================================== */
  
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-max: 9999;

  /* ==========================================
     COMPONENT-SPECIFIC TOKENS
     ========================================== */
  
  /* Buttons */
  --btn-height-sm: 2rem;
  --btn-height-md: 2.5rem;
  --btn-height-lg: 3rem;
  --btn-height-xl: 3.5rem;
  --btn-px-sm: var(--space-3);
  --btn-px-md: var(--space-4);
  --btn-px-lg: var(--space-6);
  --btn-px-xl: var(--space-8);
  --btn-radius: var(--radius-lg);
  --btn-font-weight: var(--font-semibold);

  /* Inputs */
  --input-height: 2.75rem;
  --input-px: var(--space-4);
  --input-radius: var(--radius-lg);
  --input-border-color: var(--color-border);
  --input-focus-ring: 0 0 0 3px var(--color-primary-100);

  /* Cards */
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-border: var(--border-width) solid var(--color-border-subtle);

  /* Header */
  --header-height: 4.5rem;
  --header-height-scrolled: 4rem;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 767px) {
  :root {
    --header-height: 4rem;
    --card-padding: var(--space-5);
  }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
  }
}

/**
 * Deluxe Theme - Base Styles
 * ==========================
 * Modern CSS reset and base typography
 */

/* Google Fonts loaded via <link> in base layout */
/* Tokens already included above */

/* ==========================================
   MODERN CSS RESET
   ========================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  tab-size: 4;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

p {
  margin-block: var(--space-4);
  text-wrap: pretty;
}

p:first-child {
  margin-block-start: 0;
}

p:last-child {
  margin-block-end: 0;
}

/* Lead paragraph */
.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Small text */
small,
.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

/* Muted text */
.text-muted {
  color: var(--color-text-muted);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* ==========================================
   LINKS
   ========================================== */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================
   LISTS
   ========================================== */

ul, ol {
  padding-inline-start: var(--space-6);
}

li {
  margin-block: var(--space-2);
}

li::marker {
  color: var(--color-text-muted);
}

/* Remove list styles when role="list" is present */
[role="list"] {
  list-style: none;
  padding-inline-start: 0;
}

[role="list"] li {
  margin-block: 0;
}

/* ==========================================
   MEDIA
   ========================================== */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic; /* Alt text styling */
  vertical-align: middle;
}

/* Lazy loading placeholder */
img[loading="lazy"] {
  background-color: var(--color-background-muted);
}

/* ==========================================
   FORMS
   ========================================== */

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

input, select, textarea {
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
}

/* Placeholder styling */
::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Disabled state */
:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ==========================================
   TABLES
   ========================================== */

table {
  width: 100%;
  border-collapse: collapse;
  text-indent: 0;
}

/* ==========================================
   HR
   ========================================== */

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-8);
}

/* ==========================================
   CODE
   ========================================== */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-background-muted);
  border-radius: var(--radius-sm);
}

pre {
  padding: var(--space-4);
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
  font-size: var(--text-sm);
}

/* ==========================================
   BLOCKQUOTE
   ========================================== */

blockquote {
  padding-inline-start: var(--space-6);
  border-inline-start: 4px solid var(--color-accent);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ==========================================
   SELECTION
   ========================================== */

::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* ==========================================
   FOCUS STYLES
   ========================================== */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-max);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================
   SCREEN READER ONLY
   ========================================== */

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

/* Make visible on focus for keyboard users */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ==========================================
   BREADCRUMBS
   ========================================== */

.deluxe-breadcrumbs {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.deluxe-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deluxe-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.deluxe-breadcrumbs__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deluxe-breadcrumbs__link:hover {
  color: var(--color-text);
  text-decoration: none;
}

.deluxe-breadcrumbs__separator {
  display: flex;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.deluxe-breadcrumbs__current {
  color: var(--color-text-secondary);
  font-weight: var(--font-medium);
}

/**
 * Deluxe Theme - Component Styles
 * ================================
 * Reusable component patterns
 */

/* Tokens already included above */

/* ==========================================
   CONTAINER
   ========================================== */

.container {
  width: 100%;
  max-width: var(--container-full);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--narrow {
  max-width: var(--container-4xl);
}

.container--medium {
  max-width: var(--container-6xl);
}

.container--wide {
  max-width: var(--container-7xl);
}

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

.section {
  padding-block: var(--section-py-md);
}

.section--sm {
  padding-block: var(--section-py-sm);
}

.section--lg {
  padding-block: var(--section-py-lg);
}

.section--xl {
  padding-block: var(--section-py-xl);
}

/* Section backgrounds */
.section--muted {
  background-color: var(--color-background-subtle);
}

.section--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
}

.section--dark .text-secondary,
.section--dark .text-muted {
  color: var(--color-neutral-400);
}

.section--accent {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
}

/* ==========================================
   BUTTONS
   ========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding-inline: var(--btn-px-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--btn-radius);
  transition: var(--transition-all);
  cursor: pointer;
  border: var(--border-width-2) solid transparent;
}

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

/* Primary button */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-text-inverted);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

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

/* Secondary button */
.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  background-color: var(--color-background-subtle);
  border-color: var(--color-neutral-400);
  color: var(--color-text);
}

/* Ghost button */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: var(--color-background-muted);
  color: var(--color-text);
}

/* Link button */
.btn--link {
  background-color: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding-inline: 0;
  height: auto;
}

.btn--link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Outline button */
.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  border-color: var(--color-accent);
}

/* White button (for dark backgrounds) */
.btn--white {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-0);
}

.btn--white:hover {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-100);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Outline white button */
.btn--outline-white {
  background-color: transparent;
  color: var(--color-neutral-0);
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-0);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Dark button */
.btn--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-0);
  border-color: var(--color-neutral-900);
}

.btn--dark:hover {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-0);
  border-color: var(--color-neutral-800);
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Button sizes */
.btn--sm {
  height: var(--btn-height-sm);
  padding-inline: var(--btn-px-sm);
  font-size: var(--text-xs);
}

.btn--lg {
  height: var(--btn-height-lg);
  padding-inline: var(--btn-px-lg);
  font-size: var(--text-base);
}

.btn--xl {
  height: var(--btn-height-xl);
  padding-inline: var(--btn-px-xl);
  font-size: var(--text-lg);
}

/* Full width button */
.btn--full {
  width: 100%;
}

/* Button with icon */
.btn__icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.btn--icon-only {
  width: var(--btn-height-md);
  padding-inline: 0;
}

.btn--icon-only.btn--sm {
  width: var(--btn-height-sm);
}

.btn--icon-only.btn--lg {
  width: var(--btn-height-lg);
}

/* ==========================================
   CARDS
   ========================================== */

.card {
  background-color: var(--color-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: var(--transition-all);
}

.card--hoverable:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.card--clickable {
  cursor: pointer;
}

.card--flat {
  box-shadow: none;
  border: var(--card-border);
}

.card--elevated {
  border: none;
  box-shadow: var(--shadow-md);
}

.card__header {
  margin-block-end: var(--space-4);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0;
}

.card__description {
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
}

.card__content {
  /* Default content area */
}

.card__footer {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.card__image {
  margin: calc(var(--card-padding) * -1);
  margin-block-end: var(--card-padding);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================
   BADGES
   ========================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.4;
  border-radius: var(--radius-full);
  background-color: var(--color-background-muted);
  color: var(--color-text-secondary);
}

.badge--primary {
  background-color: var(--color-accent-subtle);
  color: var(--color-primary-700);
}

.badge--success {
  background-color: var(--color-success-50);
  color: var(--color-success-700);
}

.badge--warning {
  background-color: var(--color-warning-50);
  color: var(--color-warning-700);
}

.badge--error {
  background-color: var(--color-error-50);
  color: var(--color-error-700);
}

/* ==========================================
   INPUTS
   ========================================== */

.input {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding-inline: var(--input-px);
  font-size: var(--text-base);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  transition: var(--transition-all);
}

.input:hover {
  border-color: var(--color-border-strong);
}

.input:focus {
  border-color: var(--color-accent);
  box-shadow: var(--input-focus-ring);
}

.input--error {
  border-color: var(--color-error-500);
}

.input--error:focus {
  box-shadow: 0 0 0 3px var(--color-error-50);
}

/* Textarea */
.textarea {
  min-height: 8rem;
  padding-block: var(--space-3);
  resize: vertical;
}

/* Select */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-10);
}

/* Label */
.label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.label--required::after {
  content: " *";
  color: var(--color-error-500);
}

/* Help text */
.help-text {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.help-text--error {
  color: var(--color-error-500);
}

/* Form group */
.form-group {
  margin-block-end: var(--space-5);
}

/* ==========================================
   AVATAR
   ========================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-background-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--text-xs);
}

.avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--text-lg);
}

.avatar--xl {
  width: 5rem;
  height: 5rem;
  font-size: var(--text-2xl);
}

/* Avatar group */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  border: 2px solid var(--color-surface);
  margin-inline-start: -0.5rem;
}

.avatar-group .avatar:first-child {
  margin-inline-start: 0;
}

/* ==========================================
   DIVIDER
   ========================================== */

.divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-6);
}

.divider--thick {
  border-top-width: 2px;
}

.divider--dashed {
  border-style: dashed;
}

/* Divider with text */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* ==========================================
   PROSE (Rich text content)
   ========================================== */

.prose {
  max-width: 65ch;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-4);
}

.prose h1:first-child,
.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child {
  margin-block-start: 0;
}

.prose p {
  margin-block: var(--space-5);
}

.prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--color-accent-hover);
}

.prose ul,
.prose ol {
  margin-block: var(--space-5);
  padding-inline-start: var(--space-6);
}

.prose li {
  margin-block: var(--space-2);
}

.prose img {
  margin-block: var(--space-8);
  border-radius: var(--radius-lg);
}

.prose blockquote {
  margin-block: var(--space-6);
}

.prose pre {
  margin-block: var(--space-6);
}

.prose hr {
  margin-block: var(--space-10);
}

/* ==========================================
   GRID UTILITIES
   ========================================== */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

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

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

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

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

/* ==========================================
   FLEX UTILITIES
   ========================================== */

.flex {
  display: flex;
}

.flex--center {
  align-items: center;
  justify-content: center;
}

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

.flex--col {
  flex-direction: column;
}

.flex--wrap {
  flex-wrap: wrap;
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ==========================================
   TEXT ALIGNMENT
   ========================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ==========================================
   VISIBILITY
   ========================================== */

.hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

/* ==========================================
   ANIMATION UTILITIES
   ========================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-normal) var(--ease-out);
}

.animate-fade-in-down {
  animation: fadeInDown var(--duration-normal) var(--ease-out);
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-out);
}

/* Staggered animation delays */
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }

/* ==========================================
   SECTION HEADER (reusable badge + heading + subheading)
   ========================================== */

.deluxe-section-header {
  margin-block-end: var(--space-12);
}

.deluxe-section-header--center {
  text-align: center;
}

.deluxe-section-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-primary-700);
  background-color: var(--color-accent-subtle);
  border-radius: var(--radius-full);
}

.deluxe-section-header__headline {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.deluxe-section-header__subheadline {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 40rem;
}

.deluxe-section-header--center .deluxe-section-header__subheadline {
  margin-inline: auto;
}

/* Dark section overrides */
.section--dark .deluxe-section-header__badge {
  background-color: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-300);
}

.section--dark .deluxe-section-header__headline {
  color: var(--color-neutral-0);
}

.section--dark .deluxe-section-header__subheadline {
  color: var(--color-neutral-400);
}

/* ==========================================
   SCROLL REVEAL (IntersectionObserver powered)
   ========================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.reveal [style*="--item-index"] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--item-index, 0) * 80ms);
}

.reveal--visible [style*="--item-index"] {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback: if observer hasn't fired after 1.5s, make content visible */
@keyframes revealFallback {
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal:not(.reveal--visible) {
  animation: revealFallback 0.4s 1.5s var(--ease-out) forwards;
}

.reveal:not(.reveal--visible) [style*="--item-index"] {
  animation: revealFallback 0.4s 1.5s var(--ease-out) forwards;
}

/* ==========================================
   ACCESSIBILITY: FORCED COLORS (Windows High Contrast)
   ========================================== */

@media (forced-colors: active) {
  .btn,
  .badge,
  .input,
  .textarea,
  .select {
    border: 1px solid ButtonText;
  }

  .btn--primary,
  .btn--secondary,
  .btn--accent {
    background-color: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }

  .btn--primary:hover,
  .btn--secondary:hover {
    background-color: Highlight;
    color: HighlightText;
  }

  .deluxe-header__dropdown-content,
  .card {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .deluxe-footer__social-link {
    border: 1px solid ButtonText;
  }
}

/* ==========================================
   ACCESSIBILITY: HIGH CONTRAST PREFERENCE
   ========================================== */

@media (prefers-contrast: more) {
  :root {
    --color-text-secondary: #3f3f46;
    --color-text-muted: #52525b;
    --color-border-subtle: #a1a1aa;
    --color-border: #71717a;
  }

  .btn--outline,
  .btn--ghost {
    border-width: 2px;
  }

  .deluxe-footer__link,
  .deluxe-header__nav-link {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * Deluxe Theme - Hero Module Styles
 * ==================================
 * Premium hero section styles for the HeroCentered module
 */

/* ==========================================
   BASE HERO STYLES
   ========================================== */

.deluxe-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 70vh;
}

.deluxe-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: var(--section-py-lg) var(--container-px);
}

/* ==========================================
   SIZE VARIANTS
   ========================================== */

.deluxe-hero--md {
  min-height: 60vh;
  padding: var(--section-py-md) 0;
}

.deluxe-hero--lg {
  min-height: 75vh;
  padding: var(--section-py-lg) 0;
}

.deluxe-hero--xl {
  min-height: 100vh;
  padding: var(--section-py-xl) 0;
}

/* ==========================================
   BACKGROUND STYLES
   ========================================== */

/* Light Background */
.deluxe-hero--light {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Muted Background */
.deluxe-hero--muted {
  background-color: var(--color-background-subtle);
  color: var(--color-text);
}

/* Dark Background */
.deluxe-hero--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-text-inverted);
}

.deluxe-hero--dark .deluxe-hero__subheadline {
  color: var(--color-neutral-300);
}

.deluxe-hero--dark .badge--primary {
  background: rgba(59, 130, 246, 0.2);
  color: var(--color-primary-300);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Gradient Background */
.deluxe-hero--gradient {
  background: linear-gradient(135deg, 
    var(--color-neutral-900) 0%, 
    var(--color-neutral-800) 50%,
    var(--color-primary-950) 100%
  );
  color: var(--color-text-inverted);
}

.deluxe-hero--gradient .deluxe-hero__subheadline {
  color: var(--color-neutral-300);
}

.deluxe-hero--gradient .badge--primary {
  background: rgba(59, 130, 246, 0.2);
  color: var(--color-primary-300);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Dark/Gradient button overrides */
.deluxe-hero--dark .btn--outline,
.deluxe-hero--gradient .btn--outline {
  color: var(--color-neutral-0);
  border-color: rgba(255, 255, 255, 0.4);
}

.deluxe-hero--dark .btn--outline:hover,
.deluxe-hero--gradient .btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-0);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Gradient Background Decorations */
.deluxe-hero__bg-decoration {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.deluxe-hero__bg-gradient {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 80%;
  height: 150%;
  background: radial-gradient(
    ellipse at center,
    rgba(59, 130, 246, 0.15) 0%,
    transparent 60%
  );
  filter: blur(60px);
  animation: pulse-slow 8s ease-in-out infinite alternate;
}

.deluxe-hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

@keyframes pulse-slow {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1) translateX(-5%);
    opacity: 0.8;
  }
}

/* ==========================================
   CONTENT STYLES
   ========================================== */

.deluxe-hero__content {
  max-width: 56rem;
  margin: 0 auto;
}

.deluxe-hero--align-center .deluxe-hero__content {
  text-align: center;
}

.deluxe-hero--align-left .deluxe-hero__content {
  text-align: left;
  margin: 0;
}

/* Badge */
.deluxe-hero__badge {
  margin-bottom: var(--space-6);
}

.deluxe-hero__badge .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
}

.deluxe-hero__badge .badge--primary {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border-color: var(--color-primary-100);
}

/* Headline */
.deluxe-hero__headline {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .deluxe-hero__headline {
    font-size: var(--text-6xl);
  }
}

@media (min-width: 1024px) {
  .deluxe-hero__headline {
    font-size: var(--text-7xl);
  }
}

/* Subheadline */
.deluxe-hero__subheadline {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 42rem;
  margin: 0 0 var(--space-8);
}

.deluxe-hero--align-center .deluxe-hero__subheadline {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .deluxe-hero__subheadline {
    font-size: var(--text-xl);
  }
}

.deluxe-hero__subheadline.lead {
  font-size: var(--text-xl);
}

@media (min-width: 768px) {
  .deluxe-hero__subheadline.lead {
    font-size: var(--text-2xl);
  }
}

/* CTA Buttons */
.deluxe-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.deluxe-hero--align-center .deluxe-hero__cta {
  justify-content: center;
}

/* ==========================================
   SPLIT LAYOUT (Two Columns)
   ========================================== */

.deluxe-hero--split .deluxe-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .deluxe-hero--split .deluxe-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .deluxe-hero--split .deluxe-hero__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-20);
  }
}

.deluxe-hero--split .deluxe-hero__content {
  text-align: left;
  margin: 0;
  max-width: none;
}

.deluxe-hero--split .deluxe-hero__subheadline {
  margin-left: 0;
  margin-right: 0;
}

.deluxe-hero--split .deluxe-hero__headline {
  font-size: var(--text-4xl);
}

@media (min-width: 768px) {
  .deluxe-hero--split .deluxe-hero__headline {
    font-size: var(--text-5xl);
  }
}

@media (min-width: 1024px) {
  .deluxe-hero--split .deluxe-hero__headline {
    font-size: var(--text-6xl);
  }
}

.deluxe-hero--split .deluxe-hero__media {
  margin-top: 0;
  max-width: none;
}

.deluxe-hero--split .deluxe-hero__cta {
  margin-bottom: 0;
}

.deluxe-hero--split .deluxe-hero__image {
  border-radius: var(--radius-2xl);
}

.deluxe-hero--split.deluxe-hero--gradient .deluxe-hero__media,
.deluxe-hero--split.deluxe-hero--dark .deluxe-hero__media {
  filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.15));
}

.deluxe-hero--split.deluxe-hero--gradient .deluxe-hero__image,
.deluxe-hero--split.deluxe-hero--dark .deluxe-hero__image {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.deluxe-hero--split .deluxe-hero__logos {
  margin-top: var(--space-12);
}

/* ==========================================
   MEDIA STYLES (Image/Video)
   ========================================== */

.deluxe-hero__media {
  margin-top: var(--space-12);
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.deluxe-hero__media.has-shadow {
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
}

.deluxe-hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.deluxe-hero__video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-neutral-900);
}

.deluxe-hero__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================
   LOGOS BAR
   ========================================== */

.deluxe-hero__logos {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-subtle);
}

.deluxe-hero--dark .deluxe-hero__logos,
.deluxe-hero--gradient .deluxe-hero__logos {
  border-color: rgba(255, 255, 255, 0.1);
}

.deluxe-hero__logos-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-6);
}

.deluxe-hero--align-center .deluxe-hero__logos-text {
  text-align: center;
}

.deluxe-hero--dark .deluxe-hero__logos-text,
.deluxe-hero--gradient .deluxe-hero__logos-text {
  color: var(--color-neutral-400);
}

.deluxe-hero__logos-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-10);
}

.deluxe-hero--align-center .deluxe-hero__logos-grid {
  justify-content: center;
}

.deluxe-hero__logo-item {
  flex-shrink: 0;
}

.deluxe-hero__logo-item img {
  height: 2rem;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: var(--transition-all);
}

.deluxe-hero__logo-item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

.deluxe-hero--dark .deluxe-hero__logo-item img,
.deluxe-hero--gradient .deluxe-hero__logo-item img {
  filter: grayscale(100%) brightness(2);
  opacity: 0.5;
}

.deluxe-hero--dark .deluxe-hero__logo-item:hover img,
.deluxe-hero--gradient .deluxe-hero__logo-item:hover img {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

.animate-fade-in-down {
  animation: fadeInDown var(--duration-slow) var(--ease-out) forwards;
  opacity: 0;
}

.animate-fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
  opacity: 0;
}

.delay-1 {
  animation-delay: 100ms;
}

.delay-2 {
  animation-delay: 200ms;
}

.delay-3 {
  animation-delay: 300ms;
}

.delay-4 {
  animation-delay: 400ms;
}

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-down,
  .animate-fade-in-up {
    animation: none;
    opacity: 1;
  }
  
  .deluxe-hero__bg-gradient {
    animation: none;
  }
}

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

@media (max-width: 767px) {
  .deluxe-hero {
    min-height: auto;
    padding: var(--space-16) 0;
  }
  
  .deluxe-hero--xl {
    min-height: auto;
    padding: var(--space-20) 0;
  }
  
  .deluxe-hero__cta {
    flex-direction: column;
    width: 100%;
  }
  
  .deluxe-hero--align-center .deluxe-hero__cta {
    align-items: center;
  }
  
  .deluxe-hero__cta .btn {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }
  
  .deluxe-hero__logos-grid {
    gap: var(--space-6);
  }
  
  .deluxe-hero__logo-item img {
    height: 1.5rem;
  }
}

/**
 * Deluxe Theme - Header Module Styles
 * ====================================
 */

/* ==========================================
   BASE HEADER
   ========================================== */

.deluxe-header {
  position: relative;
  z-index: var(--z-sticky);
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: var(--transition-all);
}

.deluxe-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ==========================================
   STICKY HEADER
   ========================================== */

.deluxe-header--sticky {
  position: sticky;
  top: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   TRANSPARENT HEADER
   ========================================== */

.deluxe-header--transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: transparent;
}

.deluxe-header--transparent.deluxe-header--light {
  color: var(--color-text);
}

/* ==========================================
   BACKGROUND VARIANTS
   ========================================== */

.deluxe-header--light {
  background-color: var(--color-background);
  color: var(--color-text);
}

.deluxe-header--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-text-inverted);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.deluxe-header--dark.deluxe-header--sticky {
  background-color: rgba(24, 24, 27, 0.95);
}

/* ==========================================
   LOGO
   ========================================== */

.deluxe-header__logo {
  flex-shrink: 0;
}

.deluxe-header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.deluxe-header__logo-img {
  height: 2rem;
  width: auto;
  object-fit: contain;
}

.deluxe-header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: currentColor;
  letter-spacing: var(--tracking-tight);
}

/* ==========================================
   NAVIGATION
   ========================================== */

.deluxe-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .deluxe-header__nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    margin: 0 var(--space-8);
  }
}

.deluxe-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deluxe-header__nav-item {
  position: relative;
}

.deluxe-header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

.deluxe-header__nav-link:hover {
  color: var(--color-text);
  background-color: var(--color-background-subtle);
}

.deluxe-header--dark .deluxe-header__nav-link {
  color: var(--color-neutral-400);
}

.deluxe-header--dark .deluxe-header__nav-link:hover {
  color: var(--color-neutral-0);
  background-color: rgba(255, 255, 255, 0.1);
}

.deluxe-header__dropdown-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: transform var(--duration-fast) var(--ease-out);
}

.deluxe-header__nav-item:hover .deluxe-header__dropdown-icon,
.deluxe-header__dropdown-icon.is-rotated {
  transform: rotate(180deg);
}

/* Button trigger reset */
.deluxe-header__nav-link--btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* ==========================================
   DROPDOWN MENU
   ========================================== */

.deluxe-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding-top: var(--space-2);
  transition: all var(--duration-fast) var(--ease-out);
}

.deluxe-header__nav-item:hover .deluxe-header__dropdown,
.deluxe-header__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.deluxe-header__dropdown-content {
  min-width: 14rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  overflow: hidden;
}

.deluxe-header--dark .deluxe-header__dropdown-content {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.deluxe-header__dropdown-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition-colors);
}

.deluxe-header__dropdown-item:hover {
  background-color: var(--color-background-subtle);
}

.deluxe-header--dark .deluxe-header__dropdown-item {
  color: var(--color-neutral-100);
}

.deluxe-header--dark .deluxe-header__dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.deluxe-header__dropdown-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.deluxe-header__dropdown-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.deluxe-header--dark .deluxe-header__dropdown-desc {
  color: var(--color-neutral-400);
}

/* ==========================================
   ACTIONS (CTA Button)
   ========================================== */

.deluxe-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ==========================================
   MOBILE TOGGLE
   ========================================== */

.deluxe-header__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-colors);
}

.deluxe-header__mobile-toggle:hover {
  background-color: var(--color-background-subtle);
}

.deluxe-header--dark .deluxe-header__mobile-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 1024px) {
  .deluxe-header__mobile-toggle {
    display: none;
  }
}

.deluxe-header__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 1.25rem;
}

.deluxe-header__hamburger span {
  display: block;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: var(--transition-all);
}

.deluxe-header__hamburger span:nth-child(2) {
  width: 75%;
}

/* Hamburger -> X animation */
.deluxe-header__mobile-toggle[aria-expanded="true"] .deluxe-header__hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.deluxe-header__mobile-toggle[aria-expanded="true"] .deluxe-header__hamburger span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.deluxe-header__mobile-toggle[aria-expanded="true"] .deluxe-header__hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================
   MOBILE MENU (JS-controlled)
   ========================================== */

.deluxe-header__mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-height);
  background-color: var(--color-background);
  padding: var(--space-6) var(--container-px);
  overflow-y: auto;
  z-index: var(--z-modal);
}

.deluxe-header__mobile-menu.is-open {
  display: block;
  animation: slideDownFade var(--duration-normal) var(--ease-out);
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deluxe-header--dark .deluxe-header__mobile-menu {
  background-color: var(--color-neutral-900);
}

.deluxe-header__mobile-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deluxe-header__mobile-nav-link {
  display: block;
  padding: var(--space-4) 0;
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: var(--transition-colors);
}

.deluxe-header__mobile-nav-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.deluxe-header__mobile-nav-link--sub {
  padding-left: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.deluxe-header__mobile-cta {
  padding: var(--space-6) 0;
}

.deluxe-header--dark .deluxe-header__mobile-nav-link {
  color: var(--color-neutral-100);
  border-color: var(--color-neutral-800);
}

.deluxe-header--dark .deluxe-header__mobile-nav-link--sub {
  color: var(--color-neutral-400);
}

@media (min-width: 1024px) {
  .deluxe-header__mobile-menu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deluxe-header__mobile-menu.is-open {
    animation: none;
  }
}

/**
 * Deluxe Theme - Footer Module Styles
 * ====================================
 */

/* ==========================================
   BASE FOOTER
   ========================================== */

.deluxe-footer {
  padding: var(--section-py-lg) 0 var(--space-8);
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
}

.deluxe-footer__container {
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ==========================================
   BACKGROUND VARIANTS
   ========================================== */

.deluxe-footer--light {
  background-color: var(--color-background-subtle);
  color: var(--color-text);
}

.deluxe-footer--light .deluxe-footer__tagline,
.deluxe-footer--light .deluxe-footer__column-title,
.deluxe-footer--light .deluxe-footer__link,
.deluxe-footer--light .deluxe-footer__newsletter-desc,
.deluxe-footer--light .deluxe-footer__copyright {
  color: var(--color-text-secondary);
}

.deluxe-footer--light .deluxe-footer__link:hover {
  color: var(--color-text);
}

.deluxe-footer--dark {
  background-color: var(--color-neutral-900);
}

.deluxe-footer--brand {
  background-color: var(--color-primary-900);
}

/* ==========================================
   MAIN CONTENT AREA
   ========================================== */

.deluxe-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .deluxe-footer__main {
    grid-template-columns: 1.5fr 2fr;
  }
}

@media (min-width: 1024px) {
  .deluxe-footer__main {
    grid-template-columns: 1.5fr 2fr 1fr;
  }
}

.deluxe-footer--light .deluxe-footer__main {
  border-bottom-color: var(--color-border);
}

/* ==========================================
   BRAND SECTION
   ========================================== */

.deluxe-footer__brand {
  max-width: 20rem;
}

.deluxe-footer__logo {
  height: 2rem;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-4);
}

.deluxe-footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-0);
}

.deluxe-footer--light .deluxe-footer__logo-text {
  color: var(--color-text);
}

.deluxe-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

/* ==========================================
   SOCIAL LINKS
   ========================================== */

.deluxe-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.deluxe-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-300);
  transition: var(--transition-all);
}

.deluxe-footer__social-link:hover {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
  transform: translateY(-2px);
}

.deluxe-footer--light .deluxe-footer__social-link {
  background-color: var(--color-background-muted);
  color: var(--color-text-secondary);
}

.deluxe-footer--light .deluxe-footer__social-link:hover {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.deluxe-footer__social-link svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ==========================================
   LINK COLUMNS
   ========================================== */

.deluxe-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

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

.deluxe-footer__column-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-neutral-100);
  margin-bottom: var(--space-4);
}

.deluxe-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.deluxe-footer__link {
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deluxe-footer__link:hover {
  color: var(--color-neutral-0);
}

/* ==========================================
   NEWSLETTER
   ========================================== */

.deluxe-footer__newsletter {
  max-width: 18rem;
}

.deluxe-footer__newsletter-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-neutral-100);
  margin-bottom: var(--space-3);
}

.deluxe-footer__newsletter-desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-400);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.deluxe-footer__newsletter-form {
  display: flex;
  gap: var(--space-2);
}

.deluxe-footer__newsletter-input {
  flex: 1;
  height: 2.5rem;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-neutral-0);
  transition: var(--transition-all);
}

.deluxe-footer__newsletter-input::placeholder {
  color: var(--color-neutral-500);
}

.deluxe-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  background-color: rgba(255, 255, 255, 0.15);
}

.deluxe-footer--light .deluxe-footer__newsletter-input {
  background-color: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Newsletter Form States */
.deluxe-footer__newsletter-form {
  flex-wrap: wrap;
}

.deluxe-footer__newsletter-input--error {
  border-color: var(--color-error, #ef4444);
}

.deluxe-footer__newsletter-error {
  width: 100%;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-error, #ef4444);
}

.deluxe-footer__newsletter-success {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-success, #22c55e);
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
}

.deluxe-footer--light .deluxe-footer__newsletter-success {
  background-color: rgba(34, 197, 94, 0.08);
}

.deluxe-footer__newsletter-form button:disabled,
.deluxe-footer__newsletter-form input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================
   BOTTOM BAR
   ========================================== */

.deluxe-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  text-align: center;
}

@media (min-width: 768px) {
  .deluxe-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.deluxe-footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
}

.deluxe-footer__legal {
  display: flex;
  gap: var(--space-6);
}

.deluxe-footer__legal a {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deluxe-footer__legal a:hover {
  color: var(--color-neutral-300);
}

.deluxe-footer--light .deluxe-footer__legal a:hover {
  color: var(--color-text);
}

/* ==========================================
   LAYOUT VARIANTS
   ========================================== */

/* Centered Layout */
.deluxe-footer--centered .deluxe-footer__main {
  text-align: center;
  justify-items: center;
}

.deluxe-footer--centered .deluxe-footer__brand {
  max-width: none;
}

.deluxe-footer--centered .deluxe-footer__social {
  justify-content: center;
}

.deluxe-footer--centered .deluxe-footer__columns {
  justify-content: center;
}

/* Minimal Layout */
.deluxe-footer--minimal .deluxe-footer__main {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.deluxe-footer--minimal .deluxe-footer__columns {
  display: none;
}

.deluxe-footer--minimal .deluxe-footer__newsletter {
  display: none;
}

/**
 * Deluxe Theme - Feature Grid Module Styles
 * ==========================================
 */

/* ==========================================
   BASE SECTION
   ========================================== */

.deluxe-features {
  padding: var(--section-py-lg) 0;
  background-color: var(--color-background);
}

.deluxe-features__container {
  max-width: var(--container-7xl);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ==========================================
   BACKGROUND VARIANTS
   ========================================== */

.deluxe-features--light {
  background-color: var(--color-background);
}

.deluxe-features--muted {
  background-color: var(--color-background-subtle);
}

.deluxe-features--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
}

.deluxe-features--dark .deluxe-features__subheadline {
  color: var(--color-neutral-400);
}

/* ==========================================
   HEADER
   ========================================== */

.deluxe-features__header {
  max-width: 48rem;
  margin: 0 auto var(--space-16);
}

.deluxe-features--align-center .deluxe-features__header {
  text-align: center;
}

.deluxe-features--align-left .deluxe-features__header {
  margin-left: 0;
  text-align: left;
}

.deluxe-features__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.025em;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-50);
  color: var(--color-primary-600);
  border: 1px solid var(--color-primary-100);
}

.deluxe-features--dark .deluxe-features__badge {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--color-primary-300);
  border-color: rgba(59, 130, 246, 0.3);
}

.deluxe-features__headline {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-4) 0;
}

@media (min-width: 768px) {
  .deluxe-features__headline {
    font-size: var(--text-5xl);
  }
}

.deluxe-features__subheadline {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 36rem;
  margin: 0;
}

.deluxe-features--align-center .deluxe-features__subheadline {
  margin: 0 auto;
}

/* ==========================================
   FEATURES GRID
   ========================================== */

.deluxe-features__grid {
  display: grid;
  gap: var(--space-8);
}

.deluxe-features--cols-2 .deluxe-features__grid {
  grid-template-columns: repeat(2, 1fr);
}

.deluxe-features--cols-3 .deluxe-features__grid {
  grid-template-columns: repeat(3, 1fr);
}

.deluxe-features--cols-4 .deluxe-features__grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
  .deluxe-features--cols-4 .deluxe-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .deluxe-features--cols-2 .deluxe-features__grid,
  .deluxe-features--cols-3 .deluxe-features__grid,
  .deluxe-features--cols-4 .deluxe-features__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   FEATURE CARD
   ========================================== */

.deluxe-feature {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  transition: var(--transition-all);
}

.deluxe-features--align-center .deluxe-feature {
  text-align: center;
}

/* Card Style: Flat */
.deluxe-feature--flat {
  background: transparent;
}

/* Card Style: Elevated */
.deluxe-feature--elevated {
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.deluxe-feature--elevated:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.deluxe-features--dark .deluxe-feature--elevated {
  background: var(--color-neutral-800);
}

/* Card Style: Bordered */
.deluxe-feature--bordered {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.deluxe-feature--bordered:hover {
  border-color: var(--color-primary-300);
  background: var(--color-background-subtle);
}

.deluxe-features--dark .deluxe-feature--bordered {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

.deluxe-features--dark .deluxe-feature--bordered:hover {
  border-color: var(--color-primary-500);
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================
   FEATURE ICON
   ========================================== */

.deluxe-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  color: var(--color-primary-600);
}

.deluxe-features--align-center .deluxe-feature__icon {
  margin-left: auto;
  margin-right: auto;
}

.deluxe-feature__icon svg {
  width: 100%;
  height: 100%;
}

/* Icon Style: Circle */
.deluxe-feature__icon--circle {
  background: var(--color-primary-50);
  border-radius: var(--radius-full);
  padding: var(--space-3);
}

.deluxe-features--dark .deluxe-feature__icon--circle {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-400);
}

/* Icon Style: Square */
.deluxe-feature__icon--square {
  background: var(--color-primary-50);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.deluxe-features--dark .deluxe-feature__icon--square {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-400);
}

/* ==========================================
   FEATURE CONTENT
   ========================================== */

.deluxe-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.deluxe-features--dark .deluxe-feature__title {
  color: var(--color-neutral-100);
}

.deluxe-feature__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.deluxe-features--dark .deluxe-feature__description {
  color: var(--color-neutral-400);
}

/* ==========================================
   FEATURE LINK
   ========================================== */

.deluxe-feature__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-primary-600);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deluxe-feature__link:hover {
  color: var(--color-primary-700);
}

.deluxe-features--dark .deluxe-feature__link {
  color: var(--color-primary-400);
}

.deluxe-features--dark .deluxe-feature__link:hover {
  color: var(--color-primary-300);
}

.deluxe-feature__link-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.deluxe-feature__link:hover .deluxe-feature__link-icon {
  transform: translateX(4px);
}

/**
 * Deluxe Theme - CTA Banner Module Styles
 * ========================================
 */

/* ==========================================
   BASE CTA
   ========================================== */

.deluxe-cta {
  position: relative;
  padding: var(--section-py-lg) 0;
  overflow: hidden;
}

.deluxe-cta__container {
  position: relative;
  z-index: 2;
  max-width: var(--container-6xl);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

/* ==========================================
   BACKGROUND VARIANTS
   ========================================== */

/* Primary Color */
.deluxe-cta--primary {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  color: var(--color-neutral-0);
}

/* Dark */
.deluxe-cta--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-0);
}

/* Gradient */
.deluxe-cta--gradient {
  background: linear-gradient(135deg, 
    var(--color-neutral-900) 0%, 
    var(--color-neutral-800) 50%,
    var(--color-primary-950) 100%
  );
  color: var(--color-neutral-0);
}

/* Light */
.deluxe-cta--light {
  background-color: var(--color-background-subtle);
  color: var(--color-text);
}

.deluxe-cta--light .deluxe-cta__description {
  color: var(--color-text-secondary);
}

/* Image Background */
.deluxe-cta--image {
  color: var(--color-neutral-0);
}

/* ==========================================
   OVERLAYS & DECORATIONS
   ========================================== */

.deluxe-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(24, 24, 27, 0.85) 0%, rgba(24, 24, 27, 0.75) 100%);
  z-index: 1;
}

.deluxe-cta__gradient-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.deluxe-cta__gradient-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}

.deluxe-cta__gradient-circle--1 {
  width: 60%;
  height: 120%;
  top: -50%;
  left: -10%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
}

.deluxe-cta__gradient-circle--2 {
  width: 50%;
  height: 100%;
  bottom: -30%;
  right: -10%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
}

/* ==========================================
   LAYOUT VARIANTS
   ========================================== */

/* Standard (Stacked) */
.deluxe-cta--standard .deluxe-cta__container {
  text-align: center;
}

.deluxe-cta--standard .deluxe-cta__content {
  max-width: 48rem;
  margin: 0 auto var(--space-8);
}

.deluxe-cta--standard .deluxe-cta__actions {
  justify-content: center;
}

/* Compact (Side by Side) */
.deluxe-cta--compact .deluxe-cta__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.deluxe-cta--compact .deluxe-cta__content {
  flex: 1;
  min-width: 280px;
}

.deluxe-cta--compact .deluxe-cta__headline {
  font-size: var(--text-3xl);
}

/* Split (Two Columns) */
.deluxe-cta--split .deluxe-cta__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .deluxe-cta--split .deluxe-cta__container {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* ==========================================
   ALIGNMENT
   ========================================== */

.deluxe-cta--align-center .deluxe-cta__container {
  text-align: center;
}

.deluxe-cta--align-center .deluxe-cta__content {
  margin-left: auto;
  margin-right: auto;
}

.deluxe-cta--align-center .deluxe-cta__actions {
  justify-content: center;
}

.deluxe-cta--align-left .deluxe-cta__container {
  text-align: left;
}

/* ==========================================
   ROUNDED VARIANT
   ========================================== */

.deluxe-cta--rounded {
  margin: var(--space-8) var(--container-px);
  border-radius: var(--radius-2xl);
}

@media (min-width: 768px) {
  .deluxe-cta--rounded {
    margin: var(--space-16) auto;
    max-width: calc(var(--container-7xl) - var(--space-8));
    border-radius: var(--radius-3xl);
  }
}

/* ==========================================
   CONTENT
   ========================================== */

.deluxe-cta__headline {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

@media (min-width: 768px) {
  .deluxe-cta__headline {
    font-size: var(--text-4xl);
  }
}

@media (min-width: 1024px) {
  .deluxe-cta__headline {
    font-size: var(--text-5xl);
  }
}

.deluxe-cta__description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  opacity: 0.9;
  margin: 0;
}

.deluxe-cta--primary .deluxe-cta__description,
.deluxe-cta--dark .deluxe-cta__description,
.deluxe-cta--gradient .deluxe-cta__description,
.deluxe-cta--image .deluxe-cta__description {
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   ACTIONS
   ========================================== */

.deluxe-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .deluxe-cta__actions {
    flex-direction: column;
  }
  
  .deluxe-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Button overrides for CTA */
.deluxe-cta--primary .btn--white,
.deluxe-cta--dark .btn--white,
.deluxe-cta--gradient .btn--white,
.deluxe-cta--image .btn--white {
  background-color: var(--color-neutral-0);
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-0);
}

.deluxe-cta--primary .btn--white:hover,
.deluxe-cta--dark .btn--white:hover,
.deluxe-cta--gradient .btn--white:hover,
.deluxe-cta--image .btn--white:hover {
  background-color: var(--color-neutral-100);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.deluxe-cta--light .btn--primary {
  background-color: var(--color-primary-600);
  color: var(--color-neutral-0);
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@media (prefers-reduced-motion: no-preference) {
  .deluxe-cta__gradient-circle--1 {
    animation: float 12s ease-in-out infinite;
  }
  
  .deluxe-cta__gradient-circle--2 {
    animation: float 15s ease-in-out infinite reverse;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

/**
 * Pricing Module Styles
 * =====================
 * Advanced animations and glassmorphism card effects
 */

/* Keyframe Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3), 0 0 40px rgba(236, 72, 153, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.5), 0 0 60px rgba(236, 72, 153, 0.3);
  }
}

@keyframes borderGlow {
  0%, 100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(30deg);
  }
}

@keyframes sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
}

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

@keyframes shine {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* Section Styles */
.pricing-section {
  position: relative;
  overflow: hidden;
}

.pricing-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
  pointer-events: none;
  animation: pulse 8s ease-in-out infinite;
}

/* Animated Grid Background */
.pricing-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* Floating Orbs */
.pricing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: float 6s ease-in-out infinite;
}

.pricing-orb-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: -5%;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  animation-delay: 0s;
}

.pricing-orb-2 {
  width: 250px;
  height: 250px;
  bottom: 10%;
  right: -5%;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  animation-delay: 2s;
}

.pricing-orb-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  animation-delay: 4s;
  opacity: 0.2;
}

/* Header Animations */
.pricing-header {
  animation: fadeInUp 0.8s ease-out forwards;
}

.pricing-headline-accent {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 4s ease infinite;
}

/* Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  perspective: 1000px;
  min-height: 600px;
}

@media (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
  }
}

/* Card Styles */
.pricing-card {
  position: relative;
  opacity: 1 !important;
  visibility: visible !important;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.4s ease;
}

.pricing-card:hover {
  transform: perspective(800px) rotateX(-8deg) rotateY(8deg) translateY(-15px) scale(1.02) !important;
  box-shadow:
    -20px 20px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(249, 115, 22, 0.2);
}

.pricing-card:hover .pricing-card-inner {
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(249, 115, 22, 0.15);
}

/* Card hover shine effect */
.pricing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  -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;
}

.pricing-card:hover::before {
  opacity: 1;
  animation: shine 0.6s ease-out;
}

.pricing-card:nth-child(1) { --card-index: 1; }
.pricing-card:nth-child(2) { --card-index: 2; }
.pricing-card:nth-child(3) { --card-index: 3; }
.pricing-card:nth-child(4) { --card-index: 4; }
.pricing-card:nth-child(5) { --card-index: 5; }

.pricing-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Popular Card */
.pricing-card-popular {
  z-index: 10;
  transform: perspective(800px) scale(1.02) translateY(-5px);
}

.pricing-card-popular:hover {
  transform: perspective(800px) rotateX(-10deg) rotateY(10deg) translateY(-20px) scale(1.05) !important;
  box-shadow:
    -25px 25px 50px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(249, 115, 22, 0.3);
}

.pricing-card-popular:hover .pricing-card-inner {
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(249, 115, 22, 0.25);
}

.pricing-card-popular::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1.35rem;
  background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
  background-size: 300% 300%;
  animation: gradientFlow 3s ease infinite, borderGlow 4s ease infinite;
  z-index: -1;
}

.pricing-card-popular .pricing-card-inner {
  background: linear-gradient(135deg, rgba(100, 50, 50, 0.95) 0%, rgba(70, 45, 60, 0.95) 100%) !important;
}

.pricing-card-popular:hover .pricing-card-inner {
  background: linear-gradient(135deg, rgba(120, 60, 60, 0.98) 0%, rgba(90, 55, 70, 0.98) 100%) !important;
  box-shadow: 0 0 80px rgba(249, 115, 22, 0.4);
}

/* Popular Badge */
.pricing-badge {
  animation: fadeInScale 0.5s ease-out both;
  animation-delay: 0.8s;
}

.pricing-badge-inner {
  position: relative;
  overflow: hidden;
}

.pricing-badge-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

.pricing-badge-sparkle {
  animation: sparkle 2s ease-in-out infinite;
}

/* Price Animation */
.pricing-price {
  display: inline-flex;
  align-items: baseline;
  position: relative;
}

.pricing-price-value {
  animation: countUp 0.8s ease-out both;
  animation-delay: calc(0.3s + var(--card-index, 0) * 0.15s);
}

.pricing-price::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.3), transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-card:hover .pricing-price::after {
  opacity: 1;
}

/* Features List */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  animation: fadeInUp 0.4s ease-out both;
  animation-delay: calc(0.5s + var(--feature-index, 0) * 0.05s);
  transition: transform 0.2s ease, background 0.2s ease;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  margin-left: -0.5rem;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
}

.pricing-feature:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.pricing-check {
  transition: transform 0.3s ease, color 0.3s ease;
}

.pricing-feature:hover .pricing-check {
  transform: scale(1.2);
}

.pricing-card-popular .pricing-check {
  color: #f97316;
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
}

/* CTA Button */
.pricing-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pricing-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.pricing-btn:hover::before {
  left: 100%;
}

.pricing-btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
  background-size: 200% 200%;
  animation: gradientFlow 4s ease infinite;
}

.pricing-btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 15px 35px rgba(249, 115, 22, 0.4),
    0 5px 15px rgba(236, 72, 153, 0.3);
}

.pricing-btn-outline {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.pricing-btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pricing-btn-outline:hover {
  border-color: rgba(249, 115, 22, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.pricing-btn-outline:hover::after {
  opacity: 1;
}

/* Glassmorphism Card Background */
.pricing-glass {
  background: rgba(39, 39, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-glass-light {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing-header,
  .pricing-badge,
  .pricing-feature,
  .pricing-price-value,
  .pricing-orb {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pricing-headline-accent,
  .pricing-btn-primary,
  .pricing-card-popular::after {
    animation: none !important;
  }
}
/**
 * Deluxe Theme - Testimonials Module
 * ===================================
 */

/* Grid layout */
.deluxe-testimonials__grid {
  display: grid;
  gap: var(--space-6);
}

.deluxe-testimonials__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.deluxe-testimonials__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

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

/* Featured variant: first item spans full width */
.deluxe-testimonials--featured .deluxe-testimonials__grid {
  grid-template-columns: repeat(2, 1fr);
}

.deluxe-testimonials--featured .deluxe-testimonials__card:first-child {
  grid-column: 1 / -1;
  padding: var(--space-10);
}

.deluxe-testimonials--featured .deluxe-testimonials__card:first-child .deluxe-testimonials__quote {
  font-size: var(--text-2xl);
}

@media (max-width: 767px) {
  .deluxe-testimonials--featured .deluxe-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.deluxe-testimonials__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  transition: var(--transition-all);
  margin: 0;
}

.deluxe-testimonials__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Dark background card */
.section--dark .deluxe-testimonials__card {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

/* Star rating */
.deluxe-testimonials__stars {
  display: flex;
  gap: var(--space-0-5);
  color: #f59e0b;
}

.deluxe-testimonials__star {
  flex-shrink: 0;
}

.deluxe-testimonials__star--filled {
  color: #f59e0b;
}

/* Quote */
.deluxe-testimonials__quote {
  flex: 1;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0;
  font-style: normal;
}

.section--dark .deluxe-testimonials__quote {
  color: var(--color-neutral-200);
}

/* Author */
.deluxe-testimonials__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.deluxe-testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.deluxe-testimonials__author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.deluxe-testimonials__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  font-style: normal;
}

.section--dark .deluxe-testimonials__name {
  color: var(--color-neutral-0);
}

.deluxe-testimonials__role {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.section--dark .deluxe-testimonials__role {
  color: var(--color-neutral-400);
}

/* ==========================================
   CAROUSEL
   ========================================== */

.deluxe-testimonials__carousel {
  max-width: var(--container-4xl);
  margin-inline: auto;
}

.deluxe-testimonials__track {
  position: relative;
  overflow: hidden;
  min-height: 12rem;
}

.deluxe-testimonials__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
  pointer-events: none;
}

.deluxe-testimonials__slide--active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Controls */
.deluxe-testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
}

.deluxe-testimonials__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-all);
}

.deluxe-testimonials__arrow:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.deluxe-testimonials__arrow:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.section--dark .deluxe-testimonials__arrow {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
  color: var(--color-neutral-200);
}

/* Dots */
.deluxe-testimonials__dots {
  display: flex;
  gap: var(--space-2);
}

.deluxe-testimonials__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  border: none;
  background-color: var(--color-border-strong);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-all);
}

.deluxe-testimonials__dot--active {
  width: 1.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.deluxe-testimonials__dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.section--dark .deluxe-testimonials__dot {
  background-color: var(--color-neutral-600);
}

.section--dark .deluxe-testimonials__dot--active {
  background-color: var(--color-accent);
}
/**
 * Deluxe Theme - FAQ Accordion Module
 * ====================================
 */

/* List variants */
.deluxe-faq__list {
  max-width: var(--container-4xl);
  margin-inline: auto;
}

/* Standard: dividers between items */
.deluxe-faq__list--standard .deluxe-faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.deluxe-faq__list--standard .deluxe-faq__item:first-child {
  border-top: var(--border-width) solid var(--color-border);
}

/* Separated: cards with gap */
.deluxe-faq__list--separated {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.deluxe-faq__list--separated .deluxe-faq__item {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.deluxe-faq__list--separated .deluxe-faq__item--open {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

/* Bordered: full border on each item */
.deluxe-faq__list--bordered .deluxe-faq__item {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-block-end: -1px;
}

.deluxe-faq__list--bordered .deluxe-faq__item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.deluxe-faq__list--bordered .deluxe-faq__item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  margin-block-end: 0;
}

/* Dark overrides */
.section--dark .deluxe-faq__list--separated .deluxe-faq__item {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.section--dark .deluxe-faq__list--standard .deluxe-faq__item,
.section--dark .deluxe-faq__list--bordered .deluxe-faq__item {
  border-color: var(--color-neutral-700);
}

/* Heading */
.deluxe-faq__heading {
  margin: 0;
  font-size: inherit;
}

/* Trigger button */
.deluxe-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  transition: var(--transition-colors);
}

.deluxe-faq__trigger:hover {
  color: var(--color-accent);
}

.deluxe-faq__trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.section--dark .deluxe-faq__trigger {
  color: var(--color-neutral-0);
}

.section--dark .deluxe-faq__trigger:hover {
  color: var(--color-primary-300);
}

/* Question text */
.deluxe-faq__question {
  flex: 1;
}

/* Icon */
.deluxe-faq__icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal) var(--ease-out);
}

.deluxe-faq__icon--open {
  transform: rotate(180deg);
}

.section--dark .deluxe-faq__icon {
  color: var(--color-neutral-400);
}

/* Panel (animated height) */
.deluxe-faq__panel {
  overflow: hidden;
  transition: height var(--duration-normal) var(--ease-out);
}

/* Answer */
.deluxe-faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.deluxe-faq__answer p {
  margin: 0;
}

.section--dark .deluxe-faq__answer {
  color: var(--color-neutral-400);
}

.deluxe-faq__answer code {
  font-size: 0.875em;
  padding: 0.125em 0.375em;
  background-color: var(--color-background-muted);
  border-radius: var(--radius-sm);
}

.section--dark .deluxe-faq__answer code {
  background-color: var(--color-neutral-700);
}

/* Standard variant: slightly indented answer */
.deluxe-faq__list--standard .deluxe-faq__answer {
  padding-left: var(--space-6);
  padding-right: var(--space-12);
}

@media (max-width: 767px) {
  .deluxe-faq__trigger {
    padding: var(--space-4);
    font-size: var(--text-sm);
  }

  .deluxe-faq__answer {
    padding: 0 var(--space-4) var(--space-4);
  }
}
/**
 * Deluxe Theme - Stats Counter Module
 * ====================================
 */

/* Grid layout */
.deluxe-stats__grid {
  display: grid;
  gap: var(--space-8);
}

.deluxe-stats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.deluxe-stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.deluxe-stats__grid--4 { grid-template-columns: repeat(4, 1fr); }

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

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

/* Inline variant */
.deluxe-stats--inline .deluxe-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}

.deluxe-stats--inline .deluxe-stats__item {
  flex: 0 0 auto;
}

/* Cards variant */
.deluxe-stats--cards .deluxe-stats__item {
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  transition: var(--transition-all);
}

.deluxe-stats--cards .deluxe-stats__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.section--dark .deluxe-stats--cards .deluxe-stats__item,
.section--accent .deluxe-stats--cards .deluxe-stats__item {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Alignment */
.deluxe-stats--align-center {
  text-align: center;
}

.deluxe-stats--align-left {
  text-align: left;
}

/* Stat item */
.deluxe-stats__item {
  position: relative;
}

/* Dividers for grid variant (not cards) */
.deluxe-stats--grid .deluxe-stats__item + .deluxe-stats__item {
  position: relative;
}

.deluxe-stats--grid .deluxe-stats__item + .deluxe-stats__item::before {
  content: '';
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-border);
}

.section--dark .deluxe-stats--grid .deluxe-stats__item + .deluxe-stats__item::before {
  background-color: var(--color-neutral-700);
}

@media (max-width: 639px) {
  .deluxe-stats--grid .deluxe-stats__item + .deluxe-stats__item::before {
    display: none;
  }
}

/* Value */
.deluxe-stats__value {
  display: flex;
  align-items: baseline;
  gap: var(--space-0-5);
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.deluxe-stats--align-center .deluxe-stats__value {
  justify-content: center;
}

.section--dark .deluxe-stats__value,
.section--accent .deluxe-stats__value {
  color: var(--color-neutral-0);
}

.deluxe-stats__prefix,
.deluxe-stats__suffix {
  font-size: 0.6em;
  font-weight: var(--font-semibold);
  color: var(--color-accent);
}

.section--accent .deluxe-stats__prefix,
.section--accent .deluxe-stats__suffix {
  color: rgba(255, 255, 255, 0.7);
}

/* Label */
.deluxe-stats__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
}

.section--dark .deluxe-stats__label,
.section--accent .deluxe-stats__label {
  color: var(--color-neutral-400);
}

.section--accent .deluxe-stats__label {
  color: rgba(255, 255, 255, 0.7);
}

/* Description */
.deluxe-stats__description {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.section--dark .deluxe-stats__description {
  color: var(--color-neutral-500);
}

@media (max-width: 767px) {
  .deluxe-stats__value {
    font-size: var(--text-4xl);
  }
}
/**
 * Deluxe Theme - Logo Cloud Module
 * =================================
 */

/* Grid */
.deluxe-logos__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  justify-items: center;
}

.deluxe-logos__grid--3 { grid-template-columns: repeat(3, 1fr); }
.deluxe-logos__grid--4 { grid-template-columns: repeat(4, 1fr); }
.deluxe-logos__grid--5 { grid-template-columns: repeat(5, 1fr); }
.deluxe-logos__grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1023px) {
  .deluxe-logos__grid--5,
  .deluxe-logos__grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 639px) {
  .deluxe-logos__grid--3,
  .deluxe-logos__grid--4,
  .deluxe-logos__grid--5,
  .deluxe-logos__grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Logo item */
.deluxe-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.deluxe-logos__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: var(--transition-all);
}

.deluxe-logos__link:hover {
  transform: scale(1.05);
}

/* Image */
.deluxe-logos__image {
  max-width: 10rem;
  max-height: 3rem;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: var(--transition-all);
}

.deluxe-logos__image--grayscale {
  filter: grayscale(100%);
  opacity: 0.5;
}

.deluxe-logos__link:hover .deluxe-logos__image--grayscale {
  filter: grayscale(0%);
  opacity: 1;
}

.section--dark .deluxe-logos__image--grayscale {
  filter: grayscale(100%) brightness(2);
  opacity: 0.4;
}

.section--dark .deluxe-logos__link:hover .deluxe-logos__image--grayscale {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* ==========================================
   MARQUEE
   ========================================== */

.deluxe-logos__marquee-wrapper {
  max-width: 100%;
  overflow: hidden;
}

.deluxe-logos__marquee-wrapper .deluxe-section-header {
  padding-inline: var(--container-px);
  max-width: var(--container-full);
  margin-inline: auto;
}

.deluxe-logos__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.deluxe-logos__marquee-track {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  animation: marquee-scroll var(--marquee-speed, 30s) linear infinite;
}

.deluxe-logos__marquee--right .deluxe-logos__marquee-track {
  animation-direction: reverse;
}

.deluxe-logos__marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.deluxe-logos__marquee:hover .deluxe-logos__marquee-track {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .deluxe-logos__marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }

  .deluxe-logos__marquee {
    -webkit-mask-image: none;
    mask-image: none;
    max-width: var(--container-full);
    margin-inline: auto;
    padding-inline: var(--container-px);
  }
}

/* Placeholder for missing logo images */
.deluxe-logos__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary, #52525b);
  background: var(--color-surface, #fff);
  border: var(--border-width, 1px) solid var(--color-border-subtle, #e4e4e7);
  border-radius: var(--radius-lg, 0.75rem);
  white-space: nowrap;
}

.section--muted .deluxe-logos__placeholder {
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm);
}
/**
 * Deluxe Theme - Team Grid Module
 * ================================
 */

/* Grid */
.deluxe-team__grid {
  display: grid;
  gap: var(--space-8);
}

.deluxe-team__grid--2 { grid-template-columns: repeat(2, 1fr); }
.deluxe-team__grid--3 { grid-template-columns: repeat(3, 1fr); }
.deluxe-team__grid--4 { grid-template-columns: repeat(4, 1fr); }

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

@media (max-width: 639px) {
  .deluxe-team__grid--2,
  .deluxe-team__grid--3,
  .deluxe-team__grid--4 {
    grid-template-columns: 1fr;
    max-width: 24rem;
    margin-inline: auto;
  }
}

/* ==========================================
   CARD VARIANT
   ========================================== */

.deluxe-team__card--cards {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--transition-all);
  text-align: center;
}

.deluxe-team__card--cards:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.section--dark .deluxe-team__card--cards {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.deluxe-team__card--cards .deluxe-team__photo-wrapper {
  overflow: hidden;
}

.deluxe-team__card--cards .deluxe-team__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-team__card--cards:hover .deluxe-team__photo {
  transform: scale(1.05);
}

.deluxe-team__card--cards .deluxe-team__info {
  padding: var(--space-6);
}

/* ==========================================
   MINIMAL VARIANT
   ========================================== */

.deluxe-team__card--minimal {
  text-align: center;
}

.deluxe-team__card--minimal .deluxe-team__photo-wrapper {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-4);
}

.deluxe-team__card--minimal .deluxe-team__photo {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
}

/* ==========================================
   OVERLAY VARIANT
   ========================================== */

.deluxe-team__card--overlay {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
}

.deluxe-team__card--overlay .deluxe-team__photo-wrapper {
  position: relative;
  overflow: hidden;
}

.deluxe-team__card--overlay .deluxe-team__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-team__card--overlay:hover .deluxe-team__photo,
.deluxe-team__card--overlay:focus-within .deluxe-team__photo {
  transform: scale(1.05);
}

.deluxe-team__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.deluxe-team__card--overlay:hover .deluxe-team__overlay,
.deluxe-team__card--overlay:focus-within .deluxe-team__overlay {
  opacity: 1;
}

.deluxe-team__overlay .deluxe-team__bio {
  color: var(--color-neutral-200);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.deluxe-team__overlay .deluxe-team__socials {
  justify-content: flex-start;
}

.deluxe-team__overlay .deluxe-team__social-link {
  color: var(--color-neutral-0);
  background-color: rgba(255, 255, 255, 0.15);
}

.deluxe-team__overlay .deluxe-team__social-link:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.deluxe-team__card--overlay .deluxe-team__info {
  padding: var(--space-4) var(--space-1);
}

/* ==========================================
   PHOTO SHAPES
   ========================================== */

.deluxe-team__photo--circle {
  border-radius: var(--radius-full);
}

.deluxe-team__photo--rounded {
  border-radius: var(--radius-xl);
}

.deluxe-team__photo--square {
  border-radius: 0;
}

/* Card variant overrides shape for top photo */
.deluxe-team__card--cards .deluxe-team__photo--circle,
.deluxe-team__card--cards .deluxe-team__photo--rounded,
.deluxe-team__card--cards .deluxe-team__photo--square {
  border-radius: 0;
}

/* ==========================================
   SHARED INFO STYLES
   ========================================== */

.deluxe-team__name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.section--dark .deluxe-team__name {
  color: var(--color-neutral-0);
}

.deluxe-team__role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
  font-weight: var(--font-medium);
}

.deluxe-team__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.section--dark .deluxe-team__bio {
  color: var(--color-neutral-400);
}

/* Social links */
.deluxe-team__socials {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.deluxe-team__card--minimal .deluxe-team__socials,
.deluxe-team__card--cards .deluxe-team__socials {
  justify-content: center;
}

.deluxe-team__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background-color: var(--color-background-muted);
  transition: var(--transition-all);
  text-decoration: none;
}

.deluxe-team__social-link:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.deluxe-team__social-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.section--dark .deluxe-team__social-link {
  color: var(--color-neutral-400);
  background-color: var(--color-neutral-700);
}

.section--dark .deluxe-team__social-link:hover {
  color: var(--color-neutral-0);
  background-color: var(--color-neutral-600);
}

/* Placeholder when no photo */
.deluxe-team__card .deluxe-team__photo-wrapper:empty {
  display: none;
}
/**
 * Deluxe Theme - Contact Form Module
 * ====================================
 */

/* Standard: centered form */
.deluxe-contact--standard .deluxe-contact__layout {
  max-width: var(--container-3xl);
  margin-inline: auto;
}

/* Split: two columns */
.deluxe-contact--split_image .deluxe-contact__layout,
.deluxe-contact--split_info .deluxe-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 767px) {
  .deluxe-contact--split_image .deluxe-contact__layout,
  .deluxe-contact--split_info .deluxe-contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Sidebar */
.deluxe-contact__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

.deluxe-contact__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Info sidebar */
.deluxe-contact__info {
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
  border-radius: var(--radius-2xl);
  color: var(--color-neutral-0);
}

.deluxe-contact__info-heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-3);
}

.deluxe-contact__info-desc {
  font-size: var(--text-base);
  color: var(--color-primary-200);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-8);
}

/* Contact details list */
.deluxe-contact__details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.deluxe-contact__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.deluxe-contact__detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-primary-200);
  flex-shrink: 0;
}

.deluxe-contact__detail-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-primary-300);
  margin-block-end: var(--space-0-5);
}

.deluxe-contact__detail-value {
  display: block;
  font-size: var(--text-base);
  color: var(--color-neutral-0);
}

/* Form wrapper */
.deluxe-contact__form-wrapper {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
}

.section--dark .deluxe-contact__form-wrapper {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.deluxe-contact__heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.section--dark .deluxe-contact__heading {
  color: var(--color-neutral-0);
}

.deluxe-contact__description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-8);
  line-height: var(--leading-relaxed);
}

.section--dark .deluxe-contact__description {
  color: var(--color-neutral-400);
}

/* Placeholder */
.deluxe-contact__placeholder {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-background-muted);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

/* HubSpot form overrides */
.deluxe-contact__form .hs-form-field {
  margin-block-end: var(--space-5);
}

.deluxe-contact__form .hs-form-field label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.deluxe-contact__form .hs-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  transition: var(--transition-all);
}

.deluxe-contact__form .hs-input:focus {
  border-color: var(--color-accent);
  box-shadow: var(--input-focus-ring);
  outline: none;
}

.deluxe-contact__form .hs-submit .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  border: none;
  border-radius: var(--btn-radius);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: var(--transition-all);
}

.deluxe-contact__form .hs-submit .hs-button:hover {
  background-color: var(--color-accent-hover);
}

@media (max-width: 767px) {
  .deluxe-contact__form-wrapper {
    padding: var(--space-6);
  }
}
/**
 * Deluxe Theme - Image Gallery Module
 * ====================================
 */

/* Grid */
.deluxe-gallery__grid--grid {
  display: grid;
  gap: var(--space-4);
}

.deluxe-gallery__grid--grid.deluxe-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
.deluxe-gallery__grid--grid.deluxe-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.deluxe-gallery__grid--grid.deluxe-gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Masonry */
.deluxe-gallery__grid--masonry {
  columns: 3;
  column-gap: var(--space-4);
}

.deluxe-gallery__grid--masonry.deluxe-gallery__grid--2 { columns: 2; }
.deluxe-gallery__grid--masonry.deluxe-gallery__grid--4 { columns: 4; }

.deluxe-gallery__grid--masonry .deluxe-gallery__item {
  break-inside: avoid;
  margin-block-end: var(--space-4);
}

/* Carousel */
.deluxe-gallery__grid--carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--space-4);
}

.deluxe-gallery__grid--carousel::-webkit-scrollbar {
  display: none;
}

.deluxe-gallery__grid--carousel .deluxe-gallery__item {
  flex: 0 0 calc(33.333% - var(--space-3));
  scroll-snap-align: start;
}

.deluxe-gallery__grid--carousel.deluxe-gallery__grid--2 .deluxe-gallery__item {
  flex: 0 0 calc(50% - var(--space-2));
}

.deluxe-gallery__grid--carousel.deluxe-gallery__grid--4 .deluxe-gallery__item {
  flex: 0 0 calc(25% - var(--space-3));
}

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

  .deluxe-gallery__grid--masonry.deluxe-gallery__grid--3,
  .deluxe-gallery__grid--masonry.deluxe-gallery__grid--4 {
    columns: 2;
  }

  .deluxe-gallery__grid--carousel .deluxe-gallery__item {
    flex: 0 0 calc(50% - var(--space-2));
  }
}

@media (max-width: 639px) {
  .deluxe-gallery__grid--grid {
    grid-template-columns: 1fr;
  }

  .deluxe-gallery__grid--masonry {
    columns: 1;
  }

  .deluxe-gallery__grid--carousel .deluxe-gallery__item {
    flex: 0 0 85%;
  }
}

/* Gallery item */
.deluxe-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.deluxe-gallery__item--clickable {
  cursor: pointer;
}

.deluxe-gallery__item--clickable:hover .deluxe-gallery__image {
  transform: scale(1.05);
}

.deluxe-gallery__item--clickable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Image */
.deluxe-gallery__image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-gallery__grid--grid .deluxe-gallery__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Caption */
.deluxe-gallery__caption {
  padding: var(--space-3) var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.section--dark .deluxe-gallery__caption {
  color: var(--color-neutral-400);
}

/* ==========================================
   LIGHTBOX
   ========================================== */

.deluxe-gallery__lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

.deluxe-gallery__lightbox-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.deluxe-gallery__lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deluxe-gallery__lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.deluxe-gallery__lightbox-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-neutral-0);
  cursor: pointer;
  transition: var(--transition-all);
}

.deluxe-gallery__lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.deluxe-gallery__lightbox-close:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 2px;
}

.deluxe-gallery__lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-neutral-0);
  cursor: pointer;
  transition: var(--transition-all);
}

.deluxe-gallery__lightbox-arrow:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.deluxe-gallery__lightbox-arrow:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 2px;
}

.deluxe-gallery__lightbox-arrow--prev { left: var(--space-4); }
.deluxe-gallery__lightbox-arrow--next { right: var(--space-4); }

.deluxe-gallery__lightbox-caption {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-neutral-300);
  text-align: center;
}

.deluxe-gallery__lightbox-counter {
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-neutral-500);
}

/* Placeholder for missing gallery images */
.deluxe-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--color-surface, #f4f4f5);
  border-radius: inherit;
  color: var(--color-text-muted, #a1a1aa);
}
/**
 * Deluxe Theme - Video Embed Module
 * ==================================
 */

/* Header */
.deluxe-video__header {
  text-align: center;
  margin-block-end: var(--space-8);
}

.deluxe-video__headline {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.section--dark .deluxe-video__headline {
  color: var(--color-neutral-0);
}

.deluxe-video__description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 40rem;
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

.section--dark .deluxe-video__description {
  color: var(--color-neutral-400);
}

/* Frame (aspect ratio container) */
.deluxe-video__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: var(--color-neutral-900);
  box-shadow: var(--shadow-2xl);
}

.deluxe-video__frame--16-9 { aspect-ratio: 16 / 9; }
.deluxe-video__frame--4-3 { aspect-ratio: 4 / 3; }
.deluxe-video__frame--1-1 { aspect-ratio: 1; }
.deluxe-video__frame--9-16 {
  aspect-ratio: 9 / 16;
  max-width: 24rem;
  margin-inline: auto;
}

/* Poster button */
.deluxe-video__poster-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deluxe-video__poster-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.deluxe-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-video__poster-btn:hover .deluxe-video__poster {
  transform: scale(1.03);
}

/* Play button overlay */
.deluxe-video__play {
  position: relative;
  z-index: 1;
  transition: transform var(--duration-normal) var(--ease-out);
}

.deluxe-video__poster-btn:hover .deluxe-video__play {
  transform: scale(1.1);
}

/* iframe */
.deluxe-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Placeholder */
.deluxe-video__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 100%;
  min-height: 16rem;
  color: var(--color-neutral-500);
  font-size: var(--text-sm);
}

/* ==========================================
   MODAL
   ========================================== */

.deluxe-video__modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  animation: fadeIn var(--duration-fast) var(--ease-out);
}

.deluxe-video__modal-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.deluxe-video__modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 64rem;
}

.deluxe-video__modal-close {
  position: absolute;
  top: calc(-1 * var(--space-10));
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-neutral-0);
  cursor: pointer;
  transition: var(--transition-all);
}

.deluxe-video__modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.deluxe-video__modal-close:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 2px;
}

.deluxe-video__modal .deluxe-video__frame {
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  .deluxe-video__modal {
    padding: var(--space-4);
  }

  .deluxe-video__modal-close {
    top: calc(-1 * var(--space-12));
  }
}
/**
 * Deluxe Theme - Tabs Module
 * ==========================
 */

/* Header */
.deluxe-tabs__header {
  margin-block-end: var(--space-10);
}

.deluxe-tabs__header--center {
  text-align: center;
}

.deluxe-tabs__header--center .deluxe-section-header__subheadline {
  margin-inline: auto;
}

/* Container: vertical = sidebar */
.deluxe-tabs--vertical .deluxe-tabs__container {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 767px) {
  .deluxe-tabs--vertical .deluxe-tabs__container {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ==========================================
   TAB LIST
   ========================================== */

/* Horizontal */
.deluxe-tabs--horizontal .deluxe-tabs__tablist,
.deluxe-tabs--pills .deluxe-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-end: var(--space-8);
}

.deluxe-tabs__tablist--center {
  justify-content: center;
}

/* Horizontal: underline style */
.deluxe-tabs--horizontal .deluxe-tabs__tablist {
  border-bottom: var(--border-width) solid var(--color-border);
  gap: 0;
}

.deluxe-tabs--horizontal .deluxe-tabs__tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--transition-colors);
  white-space: nowrap;
}

.deluxe-tabs--horizontal .deluxe-tabs__tab:hover {
  color: var(--color-text);
}

.deluxe-tabs--horizontal .deluxe-tabs__tab--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.section--dark .deluxe-tabs--horizontal .deluxe-tabs__tab {
  color: var(--color-neutral-400);
}

.section--dark .deluxe-tabs--horizontal .deluxe-tabs__tab--active {
  color: var(--color-primary-300);
  border-bottom-color: var(--color-primary-400);
}

/* Pills */
.deluxe-tabs--pills .deluxe-tabs__tablist {
  background-color: var(--color-background-muted);
  padding: var(--space-1);
  border-radius: var(--radius-xl);
  gap: var(--space-1);
}

.section--dark .deluxe-tabs--pills .deluxe-tabs__tablist {
  background-color: var(--color-neutral-800);
}

.deluxe-tabs--pills .deluxe-tabs__tab {
  padding: var(--space-2-5) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-all);
  white-space: nowrap;
}

.deluxe-tabs--pills .deluxe-tabs__tab:hover {
  color: var(--color-text);
}

.deluxe-tabs--pills .deluxe-tabs__tab--active {
  color: var(--color-text);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.section--dark .deluxe-tabs--pills .deluxe-tabs__tab {
  color: var(--color-neutral-400);
}

.section--dark .deluxe-tabs--pills .deluxe-tabs__tab--active {
  color: var(--color-neutral-0);
  background-color: var(--color-neutral-700);
}

/* Vertical */
.deluxe-tabs--vertical .deluxe-tabs__tablist {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-left: var(--border-width) solid var(--color-border);
}

.deluxe-tabs--vertical .deluxe-tabs__tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  cursor: pointer;
  transition: var(--transition-colors);
  text-align: left;
}

.deluxe-tabs--vertical .deluxe-tabs__tab:hover {
  color: var(--color-text);
}

.deluxe-tabs--vertical .deluxe-tabs__tab--active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.section--dark .deluxe-tabs--vertical .deluxe-tabs__tablist {
  border-left-color: var(--color-neutral-700);
}

.section--dark .deluxe-tabs--vertical .deluxe-tabs__tab {
  color: var(--color-neutral-400);
}

.section--dark .deluxe-tabs--vertical .deluxe-tabs__tab--active {
  color: var(--color-primary-300);
  border-left-color: var(--color-primary-400);
  background-color: rgba(59, 130, 246, 0.1);
}

@media (max-width: 767px) {
  .deluxe-tabs--vertical .deluxe-tabs__tablist {
    flex-direction: row;
    overflow-x: auto;
    border-left: none;
    border-bottom: var(--border-width) solid var(--color-border);
    gap: 0;
  }

  .deluxe-tabs--vertical .deluxe-tabs__tab {
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-left: 0;
    margin-bottom: -1px;
    white-space: nowrap;
  }

  .deluxe-tabs--vertical .deluxe-tabs__tab--active {
    border-left: none;
    border-bottom-color: var(--color-accent);
    background-color: transparent;
  }
}

/* Focus for all tabs */
.deluxe-tabs__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ==========================================
   TAB PANEL
   ========================================== */

.deluxe-tabs__panel {
  min-height: 12rem;
}

.deluxe-tabs__panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.deluxe-tabs__panel-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  animation: tabPanelIn var(--duration-normal) var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
  .deluxe-tabs__panel-content {
    animation: none;
  }
}

/* If image + text, side by side */
.deluxe-tabs__panel-content:has(.deluxe-tabs__panel-image):has(.deluxe-tabs__panel-text) {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 767px) {
  .deluxe-tabs__panel-content:has(.deluxe-tabs__panel-image):has(.deluxe-tabs__panel-text) {
    grid-template-columns: 1fr;
  }
}

.deluxe-tabs__panel-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.deluxe-tabs__panel-text {
  max-width: none;
}

.section--dark .deluxe-tabs__panel-text {
  color: var(--color-neutral-200);
}
/**
 * Deluxe Theme - Timeline Module
 * ===============================
 */

/* ==========================================
   VERTICAL (left-aligned)
   ========================================== */

.deluxe-timeline__list--vertical {
  position: relative;
  padding-left: var(--space-10);
}

/* Connector line */
.deluxe-timeline__list--vertical::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.deluxe-timeline__list--line::before {
  border-style: none;
}

.deluxe-timeline__list--dashed::before {
  background: none;
  border-left: 2px dashed var(--color-border);
}

.deluxe-timeline__list--dotted::before {
  background: none;
  border-left: 2px dotted var(--color-border);
}

.section--dark .deluxe-timeline__list::before {
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-700);
}

/* Item */
.deluxe-timeline__list--vertical .deluxe-timeline__item {
  position: relative;
  padding-bottom: var(--space-8);
}

.deluxe-timeline__list--vertical .deluxe-timeline__item:last-child {
  padding-bottom: 0;
}

/* Marker */
.deluxe-timeline__list--vertical .deluxe-timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-10));
  top: 0;
}

.deluxe-timeline__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  z-index: 1;
  position: relative;
  box-shadow: 0 0 0 4px var(--color-background, #fff);
}

.section--muted .deluxe-timeline__dot {
  box-shadow: 0 0 0 4px var(--color-background-subtle);
}

.section--dark .deluxe-timeline__dot {
  box-shadow: 0 0 0 4px var(--color-neutral-900);
}

/* ==========================================
   ALTERNATING
   ========================================== */

.deluxe-timeline__list--alternating {
  position: relative;
  max-width: var(--container-4xl);
  margin-inline: auto;
}

.deluxe-timeline__list--alternating::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.deluxe-timeline__list--alternating.deluxe-timeline__list--dashed::before {
  background: none;
  border-left: 2px dashed var(--color-border);
}

.deluxe-timeline__list--alternating.deluxe-timeline__list--dotted::before {
  background: none;
  border-left: 2px dotted var(--color-border);
}

.deluxe-timeline__list--alternating .deluxe-timeline__item {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  align-items: start;
}

.deluxe-timeline__list--alternating .deluxe-timeline__item:last-child {
  padding-bottom: 0;
}

.deluxe-timeline__list--alternating .deluxe-timeline__marker {
  grid-column: 2;
  display: flex;
  justify-content: center;
}

/* Even items: content on right */
.deluxe-timeline__list--alternating .deluxe-timeline__item:nth-child(odd) .deluxe-timeline__content {
  grid-column: 3;
  grid-row: 1;
}

/* Odd items: content on left */
.deluxe-timeline__list--alternating .deluxe-timeline__item:nth-child(even) .deluxe-timeline__content {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

@media (max-width: 767px) {
  .deluxe-timeline__list--alternating {
    padding-left: var(--space-10);
  }

  .deluxe-timeline__list--alternating::before {
    left: 1rem;
    transform: none;
  }

  .deluxe-timeline__list--alternating .deluxe-timeline__item {
    display: block;
    position: relative;
  }

  .deluxe-timeline__list--alternating .deluxe-timeline__marker {
    position: absolute;
    left: calc(-1 * var(--space-10));
    top: 0;
  }

  .deluxe-timeline__list--alternating .deluxe-timeline__item:nth-child(even) .deluxe-timeline__content {
    text-align: left;
  }
}

/* ==========================================
   COMPACT
   ========================================== */

.deluxe-timeline__list--compact {
  position: relative;
  padding-left: var(--space-8);
}

.deluxe-timeline__list--compact::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.deluxe-timeline__list--compact .deluxe-timeline__item {
  position: relative;
  padding-bottom: var(--space-5);
}

.deluxe-timeline__list--compact .deluxe-timeline__marker {
  position: absolute;
  left: calc(-1 * var(--space-8));
  top: var(--space-0-5);
}

.deluxe-timeline__list--compact .deluxe-timeline__dot {
  width: 1rem;
  height: 1rem;
  font-size: 0;
}

.deluxe-timeline__list--compact .deluxe-timeline__card {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* ==========================================
   CARD
   ========================================== */

.deluxe-timeline__card {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  transition: var(--transition-all);
}

.deluxe-timeline__card:hover {
  box-shadow: var(--shadow-md);
}

.section--dark .deluxe-timeline__card {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

.deluxe-timeline__date {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  margin-block-end: var(--space-2);
}

.deluxe-timeline__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.section--dark .deluxe-timeline__title {
  color: var(--color-neutral-0);
}

.deluxe-timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.deluxe-timeline__text p {
  margin: 0;
}

.section--dark .deluxe-timeline__text {
  color: var(--color-neutral-400);
}

.deluxe-timeline__image {
  margin-block-start: var(--space-4);
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
}
/**
 * Deluxe Theme - Comparison Table Module
 * =======================================
 */

.deluxe-comparison__wrapper {
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.deluxe-comparison__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.deluxe-comparison__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: var(--text-sm);
}

/* Sticky header */
.deluxe-comparison__thead--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Header cells */
.deluxe-comparison__feature-header,
.deluxe-comparison__plan-header {
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-semibold);
  background-color: var(--color-background-muted);
  border-bottom: var(--border-width) solid var(--color-border);
}

.deluxe-comparison__feature-header {
  text-align: left;
  min-width: 12rem;
}

.deluxe-comparison__plan-header {
  min-width: 8rem;
  font-size: var(--text-base);
}

.deluxe-comparison__plan-header--highlighted {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
}

.section--dark .deluxe-comparison__feature-header,
.section--dark .deluxe-comparison__plan-header {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
  color: var(--color-neutral-0);
}

/* Body rows */
.deluxe-comparison__row {
  border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.deluxe-comparison__row:last-child {
  border-bottom: none;
}

.deluxe-comparison__row:hover {
  background-color: var(--color-background-subtle);
}

.section--dark .deluxe-comparison__row {
  border-color: var(--color-neutral-800);
}

.section--dark .deluxe-comparison__row:hover {
  background-color: var(--color-neutral-800);
}

/* Feature name */
.deluxe-comparison__feature-name {
  text-align: left;
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.section--dark .deluxe-comparison__feature-name {
  color: var(--color-neutral-200);
}

/* Value cells */
.deluxe-comparison__cell {
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-secondary);
}

.deluxe-comparison__cell--highlighted {
  background-color: var(--color-accent-subtle);
}

.section--dark .deluxe-comparison__cell {
  color: var(--color-neutral-400);
}

.section--dark .deluxe-comparison__cell--highlighted {
  background-color: rgba(59, 130, 246, 0.08);
}

/* Check / Cross icons */
.deluxe-comparison__check {
  display: inline-flex;
  color: var(--color-success-500);
}

.deluxe-comparison__cross {
  display: inline-flex;
  color: var(--color-neutral-300);
}

.section--dark .deluxe-comparison__cross {
  color: var(--color-neutral-600);
}

/* Mobile: card stack */
@media (max-width: 767px) {
  .deluxe-comparison__table {
    font-size: var(--text-xs);
  }

  .deluxe-comparison__feature-header,
  .deluxe-comparison__plan-header,
  .deluxe-comparison__feature-name,
  .deluxe-comparison__cell {
    padding: var(--space-3) var(--space-3);
  }

  .deluxe-comparison__feature-header {
    min-width: 8rem;
  }

  .deluxe-comparison__plan-header {
    min-width: 5rem;
  }
}
/**
 * Deluxe Theme - Marquee Module
 * ==============================
 */

.deluxe-marquee {
  overflow: hidden;
  padding-block: var(--space-4);
  white-space: nowrap;
}

/* Backgrounds */
.deluxe-marquee--light {
  background-color: var(--color-background-subtle);
  color: var(--color-text);
}

.deluxe-marquee--dark {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-0);
}

.deluxe-marquee--accent {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
}

/* Font sizes */
.deluxe-marquee--sm { font-size: var(--text-sm); }
.deluxe-marquee--md { font-size: var(--text-lg); }
.deluxe-marquee--lg { font-size: var(--text-2xl); }
.deluxe-marquee--xl { font-size: var(--text-4xl); }

/* Track */
.deluxe-marquee__track {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  animation: marquee-scroll var(--marquee-speed, 25s) linear infinite;
}

.deluxe-marquee__track--right {
  animation-direction: reverse;
}

/* Pause on hover */
.deluxe-marquee--pause:hover .deluxe-marquee__track {
  animation-play-state: paused;
}

/* Item */
.deluxe-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}

.deluxe-marquee__text {
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
}

.deluxe-marquee__separator {
  opacity: 0.3;
  font-weight: var(--font-normal);
}

.deluxe-marquee__image {
  height: 2em;
  width: auto;
  object-fit: contain;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .deluxe-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    white-space: normal;
    gap: var(--space-4);
    padding-inline: var(--container-px);
  }
}
/**
 * Deluxe Theme - Content Cards Module
 * ====================================
 */

.deluxe-cards__grid {
  display: grid;
  gap: var(--space-6);
}

.deluxe-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.deluxe-cards__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Featured first: span full width */
.deluxe-cards__grid--featured .deluxe-cards__card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.deluxe-cards__grid--featured .deluxe-cards__card--featured .deluxe-cards__image-wrapper {
  border-radius: var(--card-radius) 0 0 var(--card-radius);
}

.deluxe-cards__grid--featured .deluxe-cards__card--featured .deluxe-cards__image {
  height: 100%;
}

.deluxe-cards__grid--featured .deluxe-cards__card--featured .deluxe-cards__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10);
}

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

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

  .deluxe-cards__grid--featured .deluxe-cards__card--featured {
    grid-template-columns: 1fr;
  }

  .deluxe-cards__grid--featured .deluxe-cards__card--featured .deluxe-cards__image-wrapper {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
  }
}

/* Card */
.deluxe-cards__card {
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--transition-all);
}

.deluxe-cards__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.section--dark .deluxe-cards__card {
  background-color: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}

/* Image */
.deluxe-cards__image-wrapper {
  overflow: hidden;
}

.deluxe-cards__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-cards__card:hover .deluxe-cards__image {
  transform: scale(1.05);
}

/* Body */
.deluxe-cards__body {
  padding: var(--space-6);
}

/* Meta */
.deluxe-cards__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.deluxe-cards__tag {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
}

.deluxe-cards__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Title */
.deluxe-cards__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.section--dark .deluxe-cards__title {
  color: var(--color-neutral-0);
}

.deluxe-cards__title-link {
  color: inherit;
  text-decoration: none;
}

.deluxe-cards__title-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.deluxe-cards__card--featured .deluxe-cards__title {
  font-size: var(--text-2xl);
}

/* Description */
.deluxe-cards__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
}

.section--dark .deluxe-cards__description {
  color: var(--color-neutral-400);
}

/* Link */
.deluxe-cards__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: var(--transition-colors);
}

.deluxe-cards__link:hover {
  text-decoration: none;
}

.deluxe-cards__link svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.deluxe-cards__link:hover svg {
  transform: translateX(3px);
}
/**
 * Deluxe Theme - Divider Module
 * ==============================
 */

.deluxe-divider {
  width: 100%;
}

/* Spacing */
.deluxe-divider--spacing-sm { padding-block: var(--space-4); }
.deluxe-divider--spacing-md { padding-block: var(--space-8); }
.deluxe-divider--spacing-lg { padding-block: var(--space-16); }

/* Width */
.deluxe-divider__inner {
  margin-inline: auto;
}

.deluxe-divider--width-full .deluxe-divider__inner {
  max-width: 100%;
  padding-inline: var(--container-px);
}

.deluxe-divider--width-medium .deluxe-divider__inner {
  max-width: 48rem;
  padding-inline: var(--container-px);
}

.deluxe-divider--width-narrow .deluxe-divider__inner {
  max-width: 30rem;
  padding-inline: var(--container-px);
}

/* Colors */
.deluxe-divider--color-default {
  color: var(--color-border);
}

.deluxe-divider--color-accent {
  color: var(--color-accent);
}

.deluxe-divider--color-subtle {
  color: var(--color-border-subtle);
}

/* Line variant */
.deluxe-divider__line {
  border: none;
  border-top: 1px solid currentColor;
  margin: 0;
}

/* Gradient variant */
.deluxe-divider__gradient {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    currentColor 20%,
    currentColor 80%,
    transparent
  );
}

/* SVG shapes */
.deluxe-divider__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.deluxe-divider__svg--dots {
  height: 8px;
}

/* Section-dark overrides */
.section--dark .deluxe-divider--color-default {
  color: var(--color-neutral-700);
}

.section--dark .deluxe-divider--color-subtle {
  color: var(--color-neutral-800);
}
/**
 * Deluxe Theme - Rich Text Enhanced Module
 * =========================================
 */

/* Container widths */
.deluxe-richtext__container--narrow { max-width: 40rem; margin-inline: auto; }
.deluxe-richtext__container--default { max-width: 48rem; margin-inline: auto; }
.deluxe-richtext__container--wide { max-width: 64rem; margin-inline: auto; }

/* Sidebar layout */
.deluxe-richtext__container--sidebar {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-12);
  max-width: 72rem;
  align-items: start;
}

@media (max-width: 1023px) {
  .deluxe-richtext__container--sidebar {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ==========================================
   SIDEBAR
   ========================================== */

.deluxe-richtext__sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

@media (max-width: 1023px) {
  .deluxe-richtext__sidebar {
    position: static;
    order: -1;
  }
}

/* Table of Contents */
.deluxe-richtext__toc {
  padding: var(--space-5);
  background-color: var(--color-background-subtle);
  border-radius: var(--radius-xl);
}

.section--dark .deluxe-richtext__toc {
  background-color: var(--color-neutral-800);
}

.deluxe-richtext__toc-title {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.deluxe-richtext__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.deluxe-richtext__toc-item {
  margin-block-end: var(--space-1);
}

.deluxe-richtext__toc-item--nested {
  padding-left: var(--space-4);
}

.deluxe-richtext__toc-link {
  display: block;
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
  border-left: 2px solid transparent;
}

.deluxe-richtext__toc-link:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  text-decoration: none;
}

.section--dark .deluxe-richtext__toc-link {
  color: var(--color-neutral-400);
}

.section--dark .deluxe-richtext__toc-link:hover {
  color: var(--color-primary-300);
  background-color: rgba(59, 130, 246, 0.1);
}

.deluxe-richtext__toc-link.is-active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  font-weight: var(--font-medium);
}

.section--dark .deluxe-richtext__toc-link.is-active {
  color: var(--color-primary-300);
  border-left-color: var(--color-primary-400);
}

.deluxe-richtext__sidebar-content {
  margin-block-start: var(--space-6);
}

/* ==========================================
   MAIN CONTENT
   ========================================== */

.deluxe-richtext__body {
  max-width: none;
}

.section--dark .deluxe-richtext__body {
  color: var(--color-neutral-200);
}

.section--dark .deluxe-richtext__body a {
  color: var(--color-primary-300);
}

/* ==========================================
   CALLOUTS
   ========================================== */

.deluxe-richtext__callouts {
  margin-block-start: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.deluxe-richtext__callout {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border-left: 4px solid;
}

.deluxe-richtext__callout--info {
  background-color: var(--color-info-50);
  border-left-color: var(--color-info-500);
  color: var(--color-info-700);
}

.deluxe-richtext__callout--warning {
  background-color: var(--color-warning-50);
  border-left-color: var(--color-warning-500);
  color: var(--color-warning-700);
}

.deluxe-richtext__callout--tip {
  background-color: var(--color-success-50);
  border-left-color: var(--color-success-500);
  color: var(--color-success-700);
}

.deluxe-richtext__callout--note {
  background-color: var(--color-background-muted);
  border-left-color: var(--color-border-strong);
  color: var(--color-text);
}

/* Dark overrides */
.section--dark .deluxe-richtext__callout--info {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--color-primary-200);
}

.section--dark .deluxe-richtext__callout--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.section--dark .deluxe-richtext__callout--tip {
  background-color: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}

.section--dark .deluxe-richtext__callout--note {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

.deluxe-richtext__callout-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.deluxe-richtext__callout-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.deluxe-richtext__callout-body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  opacity: 0.85;
}

.deluxe-richtext__callout-body p {
  margin: 0;
}
/**
 * Deluxe Theme - Blog Styles
 * ===========================
 * Styles for blog listing and post templates
 */

/* ==========================================
   BLOG LISTING
   ========================================== */

.deluxe-blog__header {
  padding: var(--section-py-lg) var(--container-px);
  text-align: center;
  background-color: var(--color-background-subtle);
}

.deluxe-blog__header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.deluxe-blog__content {
  padding: var(--section-py-lg) var(--container-px);
}

.deluxe-blog__header-content {
  max-width: 42rem;
  margin-inline: auto;
}

.deluxe-blog__description {
  color: var(--color-text-secondary);
}

/* Blog Grid */
.deluxe-blog__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .deluxe-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Blog Card */
.deluxe-blog__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  transition: var(--transition-all);
}

.deluxe-blog__card:hover {
  box-shadow: var(--shadow-lg);
}

.deluxe-blog__card-image {
  aspect-ratio: 16/10;
  width: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-blog__card:hover .deluxe-blog__card-image {
  transform: scale(1.05);
}

.deluxe-blog__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.deluxe-blog__card-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.deluxe-blog__card .card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
}

.deluxe-blog__card .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.deluxe-blog__card:hover .card__image img {
  transform: scale(1.05);
}

.deluxe-blog__card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.deluxe-blog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.deluxe-blog__card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-snug);
}

.deluxe-blog__card-title a {
  color: inherit;
  text-decoration: none;
}

.deluxe-blog__card-title a:hover {
  color: var(--color-accent);
}

.deluxe-blog__card-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
  flex: 1;
}

.deluxe-blog__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border-subtle);
  margin-top: auto;
}

.deluxe-blog__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Pagination */
.deluxe-blog__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.deluxe-blog__pagination-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Empty State */
.deluxe-blog__empty {
  padding: var(--space-16);
  color: var(--color-text-muted);
}

/* ==========================================
   BLOG POST
   ========================================== */

.deluxe-post__header {
  padding-block: var(--section-py-lg) var(--space-8);
  text-align: center;
}

.deluxe-post__header-inner {
  max-width: 50rem;
  margin: 0 auto;
}

.deluxe-post__body {
  max-width: 50rem;
  margin: 0 auto;
  padding: var(--space-10) var(--container-px);
}

.deluxe-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.deluxe-post__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin: 0;
}

@media (min-width: 768px) {
  .deluxe-post__title {
    font-size: var(--text-5xl);
  }
}

.deluxe-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-subtle);
}

.deluxe-post__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.deluxe-post__author-info {
  display: flex;
  flex-direction: column;
}

.deluxe-post__author-name {
  font-weight: var(--font-medium);
}

.deluxe-post__author-role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.deluxe-post__details {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.deluxe-post__reading-time::before {
  content: "•";
  margin-right: var(--space-4);
}

/* Featured Image */
.deluxe-post__featured-image {
  margin-bottom: var(--space-8);
}

.deluxe-post__featured-image img {
  width: 100%;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Post Content */
.deluxe-post__content {
  padding-block: var(--space-8);
}

/* Author Bio Card */
.deluxe-post__author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .deluxe-post__author-card {
    flex-direction: row;
    text-align: left;
  }
}

.deluxe-post__author-details h3 {
  margin: 0 0 var(--space-2);
}

.deluxe-post__author-bio-text {
  color: var(--color-text-secondary);
  margin: 0;
}

/* Related Posts */
.deluxe-post__related-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
}

/* ==========================================
   ERROR PAGE
   ========================================== */

.deluxe-error__content {
  max-width: 32rem;
  margin-inline: auto;
}

.deluxe-error__code {
  display: block;
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: var(--font-extrabold);
  line-height: 1;
  color: var(--color-border);
  letter-spacing: var(--tracking-tighter);
}

.deluxe-error__title {
  font-size: var(--text-3xl);
  margin-block: var(--space-4);
}

.deluxe-error__description {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.deluxe-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}