/* =========================================
  SlimKozijn – MAIN WEBSITE STYLES
   Design System matching Configurator
   2026 Mobile-First Optimized
   ========================================= */

@import url("./cross-browser-safety.css");
@import url("./theme.css");
@import url("./account.css");

/* =========================================
   CSS RESET & BASE (2026 Standards)
   ========================================= */

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

/* View Transitions API Support (Chrome/Edge 111+) */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.25s;
  }
}

/* Smooth scroll with reduced-motion respect */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Safe area support for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }
}

:root {
  /* =========================================
    THEME SYSTEM
    Semantic theme tokens live in ./theme.css
    Edit only theme.css to change the site palette.
    ========================================= */

  /* Map legacy design tokens to semantic theme roles */
  --color-tertiary: var(--bg);
  --color-tertiary-light: var(--card);
  --color-tertiary-dark: var(--soft);

  --color-secondary: var(--cta);
  --color-secondary-light: var(--cta-hover);
  --color-secondary-dark: var(--cta-hover);

  --color-primary: var(--heading);
  --color-primary-light: var(--text-muted);
  --color-primary-dark: var(--heading);

  /* Mapped to legacy variables for compatibility */
  --dark: var(--heading);
  --dark2: var(--heading);
  --green: var(--cta);
  --accent: var(--link);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-muted);

  /* Borders (existing code uses --stroke) */
  --stroke: var(--border);
  --stroke-strong: var(--border);

  /* Strokes & Radius */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --radius-xl: 20px;
  
  /* Shadows - derived from theme heading color */
  --shadow-soft: 0 1px 3px color-mix(in oklab, var(--heading) 8%, transparent), 0 4px 12px color-mix(in oklab, var(--heading) 10%, transparent);
  --shadow-card: 0 2px 8px color-mix(in oklab, var(--heading) 10%, transparent), 0 8px 24px color-mix(in oklab, var(--heading) 14%, transparent);
  --shadow-float: 0 4px 16px color-mix(in oklab, var(--heading) 14%, transparent), 0 12px 32px color-mix(in oklab, var(--heading) 18%, transparent);
  --shadow-hero: 0 25px 60px color-mix(in oklab, var(--heading) 22%, transparent);
  
  /* Motion – 2026 adaptive timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-med: 180ms;
  --t-slow: 300ms;
  
  /* Spacing – fluid responsive */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 100px;
  
  /* Container – wider for modern displays (Coolblue / bol.com style) */
  --container-max: 1440px;
  --container-narrow: 900px;
  --container-padding: clamp(24px, 3vw, 60px);

  /* Mobile fixed UI offsets (set dynamically in main.js) */
  --mobile-bottom-nav-height: 0px;
  
    /* Header heights - 2026 Professional E-Commerce Layout
      - `--header-topbar-height` = USPs bar (desktop only)
      - `--header-main-height` = logo + search + actions
      - `--header-nav-height` = navigation bar (desktop only)
      - `--header-height` = total fixed header height used for layout offsets
    */
    --header-topbar-height: 32px;
    --header-main-height: 72px;
    --header-nav-height: 48px;
    --header-height: calc(var(--header-topbar-height) + var(--header-main-height) + var(--header-nav-height));
  
  /* 2026 Touch targets – WCAG 2.2 minimum 24px, recommended 48px */
  --touch-target-min: 48px;
  --touch-target-comfortable: 56px;
  
  /* Safe areas (fallback, actual values set via @supports) */
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
  
  /* =========================================
     UNIFIED TYPOGRAPHY SCALE - 6 Sizes Only
     ========================================= */
  --font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Deprecated: legacy alias (do not use for new code) */
    --font-main: var(--font-family);
  
  /* 6 Font Sizes - Mobile-first, aesthetic scale */
  --text-xs: 0.75rem;      /* 12px - Labels, badges, captions */
  --text-sm: 0.875rem;     /* 14px - Small text, metadata, buttons */
  --text-base: 1rem;       /* 16px - Body text, default */
  --text-lg: 1.125rem;     /* 18px - Lead text, emphasis */
  --text-xl: 1.25rem;      /* 20px - Section titles, card titles */
  --text-2xl: 1.5rem;      /* 24px - Large headings */

  /* Line-height tokens */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-relaxed: 1.5;
  --lh-body: 1.6;
  --lh-prose: 1.75;

  /* Letter-spacing tokens */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-meta: 0.05em;
  
  /* Dynamic viewport units fallback */
  --vh: 1vh;
  --dvh: 1dvh;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Modern text rendering */
  text-rendering: optimizeLegibility;
  /* Prevent text size adjust in all browsers */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Dynamic viewport height for mobile browsers */
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  /* Prevent horizontal overflow on mobile */
  overflow-x: hidden;
  /* Enable smooth scrolling momentum on iOS */
  -webkit-overflow-scrolling: touch;
  /* Ensure proper width - Firefox/Edge fix
     NOTE: Do NOT use 100vw — on Windows, vw includes scrollbar width
     causing ~17px horizontal overflow. Use 100% instead. */
  width: 100%;
  max-width: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg);
  /* Full height with dynamic viewport - use flex for proper footer positioning */
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  /* Safe area padding for notched devices */
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  /* Prevent pull-to-refresh on overscroll - only on main content */
  overscroll-behavior-y: auto;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  /* Ensure proper stacking context */
  position: relative;
  /* Ensure smooth scroll on touch devices */
  -webkit-overflow-scrolling: touch;
  /* Firefox/Edge fix - ensure proper width
     NOTE: Do NOT use 100vw — on Windows, vw includes scrollbar width. */
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* Main content should grow to push footer down */
main {
  flex: 1 0 auto;
}

/* Footer should stick to bottom when content is short */
.footer {
  flex-shrink: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}

/* Content links (within paragraphs/prose) */
p a, .prose a, article a:not(.btn):not(.product-card__link) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent);
  text-underline-offset: 2px;
}

p a:hover, .prose a:hover, article a:not(.btn):not(.product-card__link):hover {
  color: var(--cta);
  text-decoration-color: var(--cta);
}

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

ul, ol {
  list-style: none;
}

/* Selection */
::selection {
  background: var(--focus);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus);
}

/* =========================================
   TYPOGRAPHY - Professional Clean System
   ========================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--heading);
  margin: 0;
}

/* Fluid headings with clamp - using scale anchors */
h1 { 
  font-size: clamp(var(--text-2xl), 5vw, 3rem); 
  font-weight: 800;
}
h2 { 
  font-size: clamp(var(--text-lg), 3.5vw, var(--text-xl)); 
  font-weight: 600;
}
h3 { 
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl)); 
  font-weight: 700;
}
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
  color: var(--text);
  max-width: 65ch;
  margin: 0;
  line-height: 1.7;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-muted);
}

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

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

.micro {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  font-weight: 700;
}

/* =========================================
   TYPOGRAPHY UTILITIES (minimal, token-only)
   ========================================= */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

.lh-tight { line-height: var(--lh-tight); }
.lh-body { line-height: var(--lh-body); }
.lh-prose { line-height: var(--lh-prose); }

.tracking-tight { letter-spacing: var(--ls-tight); }
.tracking-meta { letter-spacing: var(--ls-meta); }

/* =========================================
   TEXT CONTRAST - Automatic Light/Dark
   Ensures readability on all backgrounds
   ========================================= */

/* Dark backgrounds get light text
   NOTE: this site is light-only (no dark sections). Keep this for
   accent-only components that intentionally use strong brand fills. */
.project-showcase-card--cta,
.bento-card--accent {
  color: var(--cta-text);
}

/* Light backgrounds get dark text (default) */
.section--soft,
.section--light,
[style*="background: var(--soft)"],
[style*="background: var(--card)"],
[style*="background: var(--bg)"] {
  color: var(--text-primary);
}

/* Site is light-only: keep section variants light */

/* =========================================
   LAYOUT UTILITIES
   ========================================= */

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

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

.section {
  padding: clamp(40px, 5vw, 64px) 0;
  position: relative;
}

/* Section divider (full-width, aligned to container padding) */
.section-divider {
  display: block;
  height: 1px;
  border: 0;
  background: var(--stroke);
  width: calc(100% - (var(--container-padding) * 2));
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Smooth section transitions with wave separators */
.section--wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg);
  clip-path: ellipse(70% 100% at 50% 0%);
  pointer-events: none;
}

/* Homepage-only section depth (subtle, token-based) */
.page-home .section {
  position: relative;
  overflow: hidden;
}

/* Clean professional section backgrounds */
.page-home .section::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.page-home .section > .container {
  position: relative;
  z-index: var(--z-base);
}

/* Clean section background */
.section--gradient-flow {
  background: var(--bg);
}

.section--sm {
  padding: clamp(32px, 4vw, 48px) 0;
}

.section--dark {
  background: var(--bg-soft);
  color: var(--text);
}

.section--soft {
  background: var(--bg-soft);
}

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

.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: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Compact news on mobile: remove spacing between articles */
  .section[aria-labelledby="news-title"] .grid {
    gap: 0;
  }
}
  /* Make each news card more compact on mobile */
  .section[aria-labelledby="news-title"] .grid .news-card {
    padding: var(--space-sm);
    margin: 0;
  }

  .section[aria-labelledby="news-title"] .grid .news-card__meta {
    margin-bottom: var(--space-xs);
  }

  .section[aria-labelledby="news-title"] .grid .news-card__excerpt {
    margin-bottom: var(--space-xs);
  }

  /* Ensure hero spacing changes apply on mobile even if JS sets inline styles */
  .hero--ultra .hero__badge {
    transform: translateY(calc(var(--space-sm) * -1)) !important;
    transition: none !important;
  }

  .hero--ultra .hero__text,
  .hero--ultra .hero__buttons {
    transform: translateY(var(--space-sm)) !important;
    transition: none !important;
  }

  /* Disable animations and transitions for news cards on mobile for smoother load */
  .section[aria-labelledby="news-title"] .news-card,
  .section[aria-labelledby="news-title"] .news-card *,
  .section[aria-labelledby="news-title"] [data-scroll-reveal] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }

.flex {
  display: flex;
  gap: var(--space-md);
}

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

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

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

/* Ensure centered text blocks actually center visually */
.text-center p,
.text-center .lead,
.text-center .section__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile-only helper */
@media (max-width: 768px) {
  :root {
    --mobile-searchbar-height: 48px;
  }

  .mobile-text-center { text-align: center; }
  .mobile-text-center p,
  .mobile-text-center .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

/* Opt-in layout offset for pages that don't use `.hero` or `.page-header`
  but still have the fixed header at the top (e.g. Nieuws). */
.page-offset-header main {
  padding-top: var(--header-height);
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-med);
}

.header.is-scrolled {
  box-shadow: var(--shadow-soft);
}

/* =========================================
   2026 Professional E-Commerce Header
   Inspired by Coolblue, bol.com, Amazon
   ========================================= */

/* =========================================
   Top Bar - Static USPs Banner (2026)
   ========================================= */
.header__topbar {
  background: var(--heading);
  color: #ffffff;
  font-size: 12px;
  display: none;
}

@media (min-width: 768px) {
  .header__topbar {
    display: block;
  }
}

.header__topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 6px var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__usps {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header__usp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  opacity: 0.9;
}

.header__usp svg {
  opacity: 0.8;
}

.header__topbar-contact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header__topbar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  opacity: 0.9;
  transition: opacity var(--t-fast);
}

.header__topbar-link:hover {
  opacity: 1;
}

/* Main Header Row */
.header__main {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.header__main-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  height: 52px;
  overflow: hidden;
}

.header__logo-img {
  height: 52px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 768px) {
  .header__logo {
    height: 40px;
  }
  
  .header__logo-img {
    height: 40px;
    max-width: 140px;
  }
}

/* Legacy text logo (hidden) */
.header__logo .logo__word {
  display: none;
}

.header__logo::before {
  display: none;
}

/* Search Bar */
.header__search {
  flex: 1;
  max-width: 560px;
  display: none;
}

@media (min-width: 768px) {
  .header__search {
    display: block;
  }
}

.search-form {
  display: flex;
  align-items: center;
  background: var(--soft);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.search-form:focus-within {
  border-color: var(--cta);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta) 15%, transparent);
}

.search-form__input {
  flex: 1;
  padding: 12px 16px;
  font-size: var(--text-sm);
  border: none;
  background: transparent;
  color: var(--text);
  outline: none;
}

.search-form__input::placeholder {
  color: var(--text-muted);
}

.search-form__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  background: var(--cta);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}

.search-form__btn:hover {
  background: var(--cta-hover);
}

/* Desktop Search Suggestions Dropdown */
.header__search {
  position: relative;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.15);
  z-index: var(--z-header-above);
  max-height: 400px;
  overflow-y: auto;
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestions__section {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
}

.search-suggestions__section:last-child {
  border-bottom: none;
}

.search-suggestions__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) var(--space-md);
}

.search-suggestions__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text);
  transition: background var(--t-fast);
  cursor: pointer;
  flex-wrap: nowrap;
  min-width: 0;
}

.search-suggestions__item:hover,
.search-suggestions__item:focus {
  background: var(--soft);
  outline: none;
}

.search-suggestions__item--product {
  padding: var(--space-sm) var(--space-md);
}

.search-suggestions__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--soft);
  flex-shrink: 0;
}

.search-suggestions__text {
  flex: 1;
  min-width: 0;
}

.search-suggestions__name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--heading);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.search-suggestions__price {
  font-size: var(--text-xs);
  color: var(--cta);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

.search-suggestions__footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  text-align: center;
}

.search-suggestions__all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cta);
  text-decoration: none;
}

.search-suggestions__all:hover {
  text-decoration: underline;
}

.search-suggestions__empty {
  padding: var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Header Actions - HIDDEN (moved to nav bar) */
.header__actions {
  display: none;
}

.header__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  min-width: 64px;
}

.header__action:hover {
  background: var(--soft);
  color: var(--heading);
}

.header__action svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  transition: color var(--t-fast);
}

.header__action:hover svg {
  color: var(--heading);
}

.header__action-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Hide labels on mobile */
@media (max-width: 768px) {
  .header__action-label {
    display: none;
  }
  
  .header__action {
    min-width: 44px;
    padding: var(--space-xs);
  }
  
  .header__action--help {
    display: none;
  }
}

/* Cart Badge */
.header__cart-badge {
  position: absolute;
  top: 2px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cta);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

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

@media (max-width: 768px) {
  .header__cart-badge {
    right: 2px;
  }
}

/* Mobile Header Actions (Account + Cart icons) */
.header__mobile-actions {
  display: none;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

@media (max-width: 768px) {
  .header__mobile-actions {
    display: flex;
  }
  
  .header__main-inner {
    gap: var(--space-sm);
  }
}

.header__mobile-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--heading);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

.header__mobile-action:hover {
  background: var(--soft);
}

.header__mobile-action svg {
  width: 22px;
  height: 22px;
}

.header__mobile-action--cart .header__cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--cta);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__mobile-action--cart .header__cart-badge[hidden] {
  display: none;
}

/* Mobile Toggle Button */
.header__mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.header__mobile-toggle:hover {
  background: var(--soft);
}

.header__mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--heading);
  border-radius: 1px;
  transition: transform var(--t-med), opacity var(--t-med);
}

@media (max-width: 768px) {
  .header__mobile-toggle {
    display: flex;
  }
}

/* Navigation Bar */
.header__nav {
  background: var(--soft);
  display: none;
}

@media (min-width: 768px) {
  .header__nav {
    display: block;
  }
}

.header__nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 48px;
}

/* Categories Button */
.nav__item--categories {
  position: relative;
}

.nav__categories-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cta);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__categories-btn:hover {
  background: var(--cta-hover);
}

.nav__categories-btn .nav__chevron {
  transition: transform var(--t-fast);
}

.nav__item--categories:hover .nav__categories-btn .nav__chevron,
.nav__categories-btn[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* Categories Dropdown Menu */
.nav__categories-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  z-index: var(--z-sticky);
}

/* Bridge the gap between button and dropdown for hover */
.nav__categories-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
  background: transparent;
}

.nav__item--categories:hover .nav__categories-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__category {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  transition: background var(--t-fast);
}

.nav__category:hover {
  background: var(--soft);
}

.nav__category-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border-radius: var(--radius-sm);
  color: var(--cta);
  flex-shrink: 0;
}

.nav__category:hover .nav__category-icon {
  background: color-mix(in oklab, var(--cta) 15%, transparent);
}

.nav__category-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__category-text strong {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--heading);
}

.nav__category-text small {
  font-size: 11px;
  color: var(--text-muted);
}

.nav__category-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-xs) var(--space-md);
}

.nav__category--all {
  background: var(--soft);
}

.nav__category--all .nav__category-icon {
  background: var(--cta);
  color: #ffffff;
}

/* Nav Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}

/* Shop Dropdown */
.nav__item--shop {
  position: relative;
}

.nav__shop-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cta);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  white-space: nowrap;
}

.nav__shop-btn:hover {
  background: rgba(15, 23, 42, 0.07);
}

.nav__shop-btn svg:first-child {
  width: 16px;
  height: 16px;
}

.nav__shop-btn .nav__chevron {
  transition: transform var(--t-fast);
}

.nav__item--shop:hover .nav__shop-btn .nav__chevron {
  transform: rotate(180deg);
}

.nav__mega-menu--shop {
  min-width: min(700px, calc(100vw - 48px));
}

.nav__mega-inner--shop {
  display: flex;
  flex-wrap: nowrap;
  padding: var(--space-md);
}

.nav__mega-menu--shop .nav__mega-column {
  flex: 1 1 0;
  min-width: 120px;
  padding: 0 var(--space-md);
  border-right: 1px solid var(--border);
  text-align: center;
}

.nav__mega-menu--shop .nav__mega-column:first-child {
  padding-left: 0;
}

.nav__mega-menu--shop .nav__mega-column:last-child {
  padding-right: 0;
  border-right: none;
}

.nav__mega-menu--shop .nav__mega-header {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
}

.nav__mega-viewall {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cta);
  text-decoration: none;
  border-top: 1px solid var(--border);
  transition: background var(--t-fast);
}

.nav__mega-viewall:hover {
  background: var(--soft);
}

/* Productinfo Dropdown */
.nav__item--productinfo {
  position: relative;
}

.nav__productinfo-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cta);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.nav__productinfo-btn:hover {
  background: rgba(15, 23, 42, 0.07);
}

.nav__productinfo-btn .nav__chevron {
  transition: transform var(--t-fast);
}

.nav__item--productinfo:hover .nav__productinfo-btn .nav__chevron {
  transform: rotate(180deg);
}

/* Professional Mega Menu */
.nav__mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  z-index: var(--z-header);
  /* Prevent overflow outside viewport */
  max-width: calc(100vw - 48px);
}

/* Bridge gap for hover */
.nav__mega-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 12px;
}

.nav__item--shop:hover .nav__mega-menu,
.nav__item--productinfo:hover .nav__mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__mega-inner {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  gap: 0;
  padding: var(--space-md);
}

.nav__mega-column {
  padding: 0 var(--space-md);
  border-right: 1px solid var(--border);
}

.nav__mega-column:first-child {
  padding-left: 0;
}

.nav__mega-column:last-child {
  padding-right: 0;
  border-right: none;
}

.nav__mega-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--t-fast);
}

.nav__mega-header:hover {
  background: rgba(15, 23, 42, 0.07);
}

.nav__mega-header--spaced {
  margin-top: var(--space-lg);
}

.nav__mega-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border-radius: var(--radius-sm);
  color: var(--cta);
  flex-shrink: 0;
}

.nav__mega-header:hover .nav__mega-icon {
  background: color-mix(in oklab, var(--cta) 15%, transparent);
}

.nav__mega-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--heading);
}

.nav__mega-links {
  display: flex;
  flex-direction: column;
}

.nav__mega-links a {
  padding: 8px var(--space-sm) 8px calc(40px + var(--space-sm) + var(--space-sm));
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.nav__mega-links a:hover {
  background: rgba(15, 23, 42, 0.07);
  color: var(--heading);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.nav__link:hover {
  background: rgba(15, 23, 42, 0.07);
  color: var(--heading);
}

.nav__link--highlight {
  color: var(--cta);
  font-weight: 600;
}

.nav__link--highlight:hover {
  background: rgba(15, 23, 42, 0.07);
  color: var(--cta);
}

.nav__link--highlight svg {
  width: 16px;
  height: 16px;
}

/* Cart link with badge */
.nav__link--cart {
  position: relative;
}

.nav__link--cart .header__cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--cta);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__link--cart .header__cart-badge:empty {
  display: none;
}

/* Nav CTA Button */
.nav__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cta);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav__cta:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
}

.nav__cta svg {
  width: 18px;
  height: 18px;
}

/* Nav Actions (right side - Account, Cart) */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}

.nav__action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius);
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}

.nav__action:hover {
  background: var(--border);
  color: var(--heading);
}

.nav__action svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav__action--cart {
  position: relative;
}

.nav__action--cart .header__cart-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--cta);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__action--cart .header__cart-badge:empty {
  display: none;
}

/* Responsive: hide action text on smaller screens */
@media (max-width: 1200px) {
  .nav__action span {
    display: none;
  }
  
  .nav__action {
    padding: 10px;
  }
  
  .nav__action--cart .header__cart-badge {
    top: 2px;
    right: 2px;
  }
}

/* Responsive: compact nav at medium desktop widths */
@media (min-width: 769px) and (max-width: 1200px) {
  .header__nav-inner {
    gap: var(--space-xs);
  }

  .nav__categories-btn {
    padding: 8px 12px;
    font-size: 0.8125rem;
    gap: 4px;
  }

  .nav__link {
    padding: 8px 10px;
    font-size: 0.8125rem;
    gap: 4px;
  }

  .nav__shop-btn,
  .nav__productinfo-btn {
    padding: 8px 10px;
    font-size: 0.8125rem;
    gap: 4px;
  }

  .nav__cta {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }

  .nav__actions {
    gap: var(--space-xs);
  }
}

/* Responsive: further compact at small desktop widths */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav__categories-btn {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .nav__categories-btn svg:first-child {
    width: 16px;
    height: 16px;
  }

  .nav__link {
    padding: 7px 8px;
    font-size: 0.75rem;
  }

  .nav__link svg {
    display: none;
  }

  .nav__shop-btn,
  .nav__productinfo-btn {
    padding: 7px 8px;
    font-size: 0.75rem;
    gap: 3px;
  }

  .nav__cta {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .nav__cta svg {
    display: none;
  }

  .nav__links {
    gap: 2px;
  }
}

/* Hide old header elements */
.header__inner,
.header__nav-row {
  display: none !important;
}

/* Legacy support - hide old elements */
.mobile-toggle,
.cart-icon,
.account-icon {
  display: none !important;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dark);
  flex-wrap: nowrap;
  white-space: nowrap;
  text-decoration: none;
}

/* Use the uploaded logo image everywhere the `.logo` link appears */
.logo::before {
  content: "";
  width: var(--logo-size-desktop, 68px);
  height: var(--logo-size-desktop, 68px);
  flex: 0 0 auto;
  background-image: var(--logo-image, url("/assets/images/logo.png"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: var(--radius-sm);
}

.logo__word {
  display: inline-flex;
  gap: 0;
  white-space: nowrap;
}

.logo__slim,
.logo__kozijn {
  display: inline-block;
}

/* Fallback color if text-clip isn't supported */
.logo__kozijn {
  /* Use solid black for the text logo instead of gradient */
  color: #000000;
}

@supports (-webkit-background-clip: text) {
  .logo__kozijn {
    /* Ensure solid black even when text-clip is supported */
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #000000;
    -webkit-text-fill-color: #000000;
  }
}

.logo__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 768px) {
  .logo {
    font-size: var(--text-lg);
  }

  .logo::before {
    width: var(--logo-size-mobile, 56px);
    height: var(--logo-size-mobile, 56px);
  }
}

.logo__icon img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
}

.logo__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--green);
}

/* Main Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.nav__link:hover {
  background: rgba(15, 23, 42, 0.07);
  color: var(--heading);
}

/* Dropdown arrow for items with submenus */
.nav__link svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: transform var(--t-fast), opacity var(--t-fast);
  flex-shrink: 0;
}

.nav__item:hover .nav__link svg {
  transform: rotate(180deg);
  opacity: 1;
}

/* Mega Menu Dropdown */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 280px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}

.nav__item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-menu__section {
  margin-bottom: var(--space-md);
}

.mega-menu__section:last-child {
  margin-bottom: 0;
}

.mega-menu__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-sm);
}

.mega-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}

.mega-menu__link:hover {
  background: rgba(15, 23, 42, 0.07);
  color: var(--accent);
}

.mega-menu__link svg {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* Wide mega menu for products */
.mega-menu--wide {
  min-width: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

/* Header Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Header action icons (search/cart) – baseline styles (enhanced by features.js/cart.js when present) */
.search-toggle,
.cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius);
  color: var(--text-muted, #475569);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.search-toggle:active,
.cart-icon:active {
  color: var(--link);
}

@media (max-width: 768px) {
  /* Match search-toggle to the mobile-action icon style (account/cart) */
  .search-toggle {
    color: var(--heading);
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-sm);
  }

  .search-toggle svg {
    width: 22px;
    height: 22px;
  }

  /* Homepage: hide search toggle (sticky bar handles search) */
  body.page-home .search-toggle {
    display: none !important;
  }

  /* Homepage only: hide cart icon in mobile header */
  body.page-home .header__actions .cart-icon {
    display: none !important;
  }
}

.search-toggle:hover,
.search-toggle:active,
.cart-icon:hover,
.cart-icon:active {
  background: var(--soft);
}

.cart-icon__count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--cta-bg);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-spring);
  pointer-events: none;
}

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

/* Ensure price numbers using inline styles (text-2xl / text-xl bold) show as main text color, not accent blue */
span[style*="font-size: var(--text-2xl)"][style*="font-weight: 700"],
span[style*="font-size: var(--text-xl)"][style*="font-weight: 700"] {
  color: var(--text) !important;
}

/* Mobile Menu Toggle - 2026 Touch Optimized */
.mobile-toggle {
  display: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-toggle:hover {
  background: var(--soft);
}

.mobile-toggle:active {
  background: var(--stroke);
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text-primary);
  margin: 6px auto;
  border-radius: 3px;
  transition: transform var(--t-med) var(--ease-out, ease), opacity var(--t-med) var(--ease-out, ease);
}

.mobile-toggle.is-active span:nth-child(1),
.header__mobile-toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.mobile-toggle.is-active span:nth-child(2),
.header__mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.is-active span:nth-child(3),
.header__mobile-toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Desktop: show full navigation and hide hamburger */
@media (min-width: 769px) {
  .header__nav {
    display: block !important;
  }
  
  .header__topbar {
    display: block !important;
  }

  .header__mobile-toggle,
  .mobile-toggle {
    display: none !important;
  }
}
  
/* Desktop hero enhancements */
@media (min-width: 769px) {
  .hero--ultra {
    min-height: clamp(620px, 85vh, 900px);
  }
  
  .hero--ultra .hero__content {
    max-width: 680px;
  }
  
  .hero--ultra .hero__title {
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  }
  
  .hero--ultra .hero__stats {
    display: flex;
  }
  
  /* Show scroll indicator on desktop */
  .hero__scroll-indicator {
    display: flex;
  }
  
  /* Desktop category items with hover effects */
  .category-item__arrow {
    display: flex;
  }
  
  /* Desktop product card hover effects */
  .product-card:hover {
    transform: translateY(-10px) scale(1.01);
  }
  
  /* Hide mobile bottom nav on desktop */
  .mobile-bottom-nav {
    display: none !important;
  }
  
  /* Desktop footer spacing */
  .footer {
    padding-bottom: var(--space-lg);
  }
  
  /* Desktop main content */
  main {
    padding-bottom: 0;
  }
}

/* Tablet and mobile: hide nav, show hamburger */
@media (max-width: 768px) {
  :root {
    --header-topbar-height: 0px;
    --header-main-height: 60px;
    --header-nav-height: 0px;
    --header-height: calc(var(--header-topbar-height) + var(--header-main-height) + var(--header-nav-height));
  }

  .nav {
    display: none;
  }

  .header__nav-row,
  .header__topbar,
  .header__nav {
    display: none !important;
  }
  
  .mobile-toggle,
  .header__mobile-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius-md, var(--radius));
  transition:
    transform var(--dur-fast, var(--t-fast)) var(--ease-out),
    box-shadow var(--dur-fast, var(--t-fast)) var(--ease-out),
    background var(--dur-fast, var(--t-fast)) var(--ease-out),
    color var(--dur-fast, var(--t-fast)) var(--ease-out),
    border-color var(--dur-fast, var(--t-fast)) var(--ease-out);
}

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

.btn--primary {
  background: var(--cta-bg, var(--cta));
  color: var(--cta-text);
  border-radius: var(--radius-pill, 999px);
  box-shadow: 
    var(--shadow-2, var(--shadow-float)),
    0 0 20px color-mix(in srgb, var(--cta) 25%, transparent);
  position: relative;
  overflow: hidden;
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, white 15%, transparent) 0%,
    transparent 50%,
    color-mix(in srgb, black 5%, transparent) 100%
  );
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}

.btn--primary:hover {
  background: var(--cta-bg-hover, var(--cta-hover));
  transform: translateY(-2px);
  box-shadow: 
    var(--shadow-2, var(--shadow-float)),
    0 0 30px color-mix(in srgb, var(--cta) 35%, transparent),
    0 0 60px color-mix(in srgb, var(--cta) 15%, transparent);
}

.btn--primary:hover::before {
  opacity: 1;
}

.btn--primary:active {
  background: var(--cta-bg-active, var(--cta-hover));
  transform: translateY(0);
  box-shadow: var(--shadow-pressed, var(--shadow-soft));
}

.btn--secondary {
  background: var(--btn-secondary-bg, var(--card));
  border: 1px solid var(--btn-secondary-border, var(--stroke));
  color: var(--btn-secondary-text, var(--text-primary));
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-1, var(--shadow-card));
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--btn-secondary-bg, var(--card)) 92%, var(--bg-soft, var(--soft)));
  transform: translateY(-1px);
  box-shadow: var(--shadow-1, var(--shadow-card));
}

.btn--secondary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-pressed, var(--shadow-soft));
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--btn-secondary-border, var(--border));
  color: var(--btn-secondary-text, var(--heading));
  border-radius: var(--radius-pill, 999px);
  position: relative;
  overflow: hidden;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.btn--outline::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cta) 10%, transparent),
    color-mix(in srgb, var(--cta) 5%, transparent)
  );
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}

.btn--outline:hover {
  border-color: var(--cta-bg, var(--cta));
  background: color-mix(in srgb, var(--cta-bg, var(--cta)) 8%, transparent);
  color: var(--btn-secondary-text, var(--heading));
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--cta) 15%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--cta) 5%, transparent);
  transform: translateY(-2px);
}

.btn--outline:hover::before {
  opacity: 1;
}

/* Selection-page button style (solid rectangular) */
.btn--select {
  background: var(--color-primary, var(--heading));
  color: var(--cta-text, #fff);
  border: none;
  border-radius: var(--radius, 10px);
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

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

/* Homepage hero: make 'Direct bestellen' dark grey */
body.page-home .hero--ultra .hero__buttons .btn--select {
  background: var(--heading);
  color: var(--cta-text, #fff);
}

body.page-home .hero--ultra .hero__buttons .btn--select:hover {
  background: color-mix(in srgb, var(--heading) 88%, var(--bg));
}

/* ==========================================
   HERO CTA BUTTONS - Modern 2026 Design
   ========================================== */

/* Base hero button shared styles */
.btn--hero-shop,
.btn--hero-quote,
.btn--hero-config {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Direct bestellen - Sleek dark/glass style */
.btn--hero-shop {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn--hero-shop:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(51, 65, 85, 0.95) 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn--hero-shop:active {
  transform: translateY(-1px);
}

/* Offerte aanvragen - Brand blue gradient */
.btn--hero-quote {
  background: linear-gradient(135deg, #1e3a5f 0%, var(--cta-bg) 50%, #3d7ab8 100%);
  color: #fff;
  border: none;
  box-shadow: 
    0 4px 15px rgba(47, 95, 143, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn--hero-quote:hover {
  background: linear-gradient(135deg, var(--cta-bg) 0%, #3d7ab8 50%, #5a9ad4 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 8px 30px rgba(47, 95, 143, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--hero-quote:active {
  transform: translateY(-1px);
}

/* Start configurator - Vibrant teal/emerald gradient */
.btn--hero-config {
  background: linear-gradient(135deg, var(--success-emphasis) 0%, var(--success-dark) 50%, #047857 100%);
  color: #fff;
  border: none;
  box-shadow: 
    0 4px 15px rgba(16, 185, 129, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn--hero-config:hover {
  background: linear-gradient(135deg, #34d399 0%, var(--success-emphasis) 50%, var(--success-dark) 100%);
  transform: translateY(-3px);
  box-shadow: 
    0 8px 30px rgba(16, 185, 129, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--hero-config:active {
  transform: translateY(-1px);
}

/* SVG icon transitions */
.btn--hero-shop svg,
.btn--hero-quote svg,
.btn--hero-config svg {
  transition: transform 0.3s ease;
}

.btn--hero-shop:hover svg,
.btn--hero-quote:hover svg,
.btn--hero-config:hover svg {
  transform: scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .btn--hero-shop,
  .btn--hero-quote,
  .btn--hero-config {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    width: 100%;
    min-height: 56px;
    text-decoration: none;
    color: #ffffff !important;
  }
  
  .btn--hero-shop {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }
  
  .btn--hero-quote {
    background: linear-gradient(135deg, #1e3a5f 0%, var(--cta-bg) 50%, #3d7ab8 100%) !important;
    border: 2px solid rgba(47, 95, 143, 0.4) !important;
    box-shadow: 
      0 6px 20px rgba(47, 95, 143, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  
  .btn--hero-config {
    background: linear-gradient(135deg, var(--success-emphasis) 0%, var(--success-dark) 50%, #047857 100%) !important;
    border: 2px solid rgba(100, 255, 180, 0.4) !important;
    box-shadow: 
      0 6px 20px rgba(16, 185, 129, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  }
  
  /* Mobile hero layout: buttons after text, carousel last */
  .hero--ultra .hero__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero--ultra .hero__content {
    order: 1;
  }
  
  .hero--ultra .hero__buttons {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
  }
  
  .hero--ultra .hero-carousel {
    order: 3;
    margin-top: 0;
  }
}

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

.btn--select svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease-out);
}

.btn--select:hover svg {
  transform: translateX(3px);
}

.btn--glass {
  background: color-mix(in srgb, var(--card) 15%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--stroke) 30%, transparent);
  color: var(--heading);
  position: relative;
  overflow: hidden;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.btn--glass::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, white 8%, transparent) 0%,
    transparent 50%
  );
  opacity: 0.5;
}

.btn--glass:hover {
  background: color-mix(in srgb, var(--card) 25%, transparent);
  border-color: color-mix(in srgb, var(--cta) 30%, transparent);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 32px color-mix(in oklab, var(--heading) 15%, transparent),
    0 0 20px color-mix(in srgb, var(--cta) 10%, transparent);
}

.btn--glass svg {
  color: var(--accent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cta) 40%, transparent));
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn--ghost:hover {
  background: var(--soft);
}

.btn--sm {
  padding: 10px 18px;
  font-size: var(--text-sm);
}

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

.btn--full {
  width: 100%;
  justify-content: center;
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* =========================================
   HERO SECTION - Enhanced Visual Effects
   ========================================= */

/* Keyframe animations for hero effects */
@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-52%) translateX(-8px); }
}

@keyframes heroPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

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

@keyframes heroBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta) 40%, transparent); }
  50% { box-shadow: 0 0 20px 4px color-mix(in srgb, var(--cta) 25%, transparent); }
}

@keyframes heroOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(40px, -30px) scale(1.15); }
  50% { transform: translate(-30px, 25px) scale(0.9); }
  75% { transform: translate(25px, 15px) scale(1.1); }
}

@keyframes heroStatGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Homepage hero-overlay header — desktop: solid white, mobile: handled in mobile block below */
.header.header--hero-overlay {
  background: var(--card);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--stroke);
}

.header.header--hero-overlay.is-scrolled {
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

/* Legacy hero base – scoped to .hero--ultra so new carousel hero is unaffected */
.hero--ultra-legacy {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  background: var(--bg);
}

/* =========================================
   ULTRA ADVANCED HERO - 2026 Premium
   ========================================= */
.hero--ultra {
  background: var(--bg);
  background-image: 
    linear-gradient(
      135deg,
      rgba(245, 245, 245, 0.94) 0%,
      rgba(245, 245, 245, 0.82) 35%,
      rgba(245, 245, 245, 0.60) 60%,
      rgba(245, 245, 245, 0.25) 100%
    ),
    url("/assets/images/hero/83801F8D-2A4D-4CF5-87CE-CFF7E5E45F5C.png");
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat;
  min-height: clamp(600px, 85vh, 780px);
}

/* Ultra hero: content-only layout (image is the background) */
.hero--ultra .hero__container {
  grid-template-columns: 1fr;
  justify-items: start;
}

.hero--ultra .hero__visual-wrapper {
  display: none;
}

/* 2026 Hero-to-section separator – modern wave + gradient blend */
.hero__separator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--bg-soft) 92%, transparent)
  );
  clip-path: ellipse(75% 100% at 50% 100%);
  pointer-events: none;
  z-index: var(--z-base);
}

/* Background layers container */
.hero__bg-layers {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Animated gradient orbs - disabled for clean professional look */
.hero__gradient-orb {
  display: none;
}

.hero__gradient-orb--1,
.hero__gradient-orb--2,
.hero__gradient-orb--3 {
  display: none;
}

/* Mesh gradient overlay - clean professional style */
.hero__mesh {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: transparent;
  z-index: var(--z-base);
}

/* Particle effect - disabled for clean professional look */
.hero__particles {
  display: none;
}

/* Floating geometric shapes - disabled for clean professional look */
.hero__shapes {
  display: none;
}

.hero__shape {
  display: none;
}

.hero__shape--1 {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-lg);
  top: 15%;
  right: 15%;
  transform: rotate(15deg);
  animation: floatShape1 12s ease-in-out infinite;
}

.hero__shape--2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  bottom: 25%;
  left: 8%;
  animation: floatShape2 10s ease-in-out infinite;
}

.hero__shape--3 {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  top: 60%;
  right: 25%;
  transform: rotate(-20deg);
  animation: floatShape3 14s ease-in-out infinite;
}

.hero__shape--4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 30%;
  left: 30%;
  animation: floatShape4 8s ease-in-out infinite;
}

/* Hero container with grid layout */
.hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: var(--z-dropdown);
}

/* Hero content card - Clean elegant styling */
.hero--ultra .hero__content {
  max-width: 580px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-xl) 0;
  position: relative;
  overflow: visible;
}

.hero--ultra .hero__content::before {
  content: none;
}

/* Enhanced badge with pulse */
.hero--ultra .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(47, 95, 143, 0.15);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cta);
  margin-bottom: var(--space-xl);
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--success-emphasis);
  border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
}

.hero--ultra .hero__badge svg {
  width: 16px;
  height: 16px;
  fill: var(--success-emphasis);
}

/* Title with word reveal */
.hero--ultra .hero__title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.03em;
}

.hero__title-line {
  display: block;
}

.hero__title-word {
  display: inline-block;
  color: var(--heading);
}

.hero--ultra .hero__title-premium {
  color: var(--heading);
  font-weight: 700;
}

.hero--ultra .hero__title-highlight {
  background: linear-gradient(135deg, var(--cta) 0%, #1e3a5f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* Word slide up animation */
[data-scroll-reveal][data-anim="slide-up-word"] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

[data-scroll-reveal][data-anim="slide-up-word"].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced text */
.hero--ultra .hero__text {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.75;
  margin-bottom: var(--space-md);
  max-width: 480px;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero--ultra .hero__text {
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
  }
}

/* Enhanced buttons */
.hero--ultra .hero__buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Hero CTA buttons - clean single row on desktop */
.hero--ultra .hero__buttons > a {
  flex: 0 0 auto;
}

.btn--glow {
  position: relative;
  overflow: hidden;
}

.btn--glow::before {
  content: '';
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  inset: -2px;
  background: linear-gradient(135deg, var(--cta), var(--link), var(--cta));
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  animation: glowRotate 3s linear infinite;
  opacity: 0;
  transition: opacity var(--t-med);
}

.btn--glow:hover::before {
  opacity: 1;
}

.btn--glow .btn__bg {
  position: absolute;
  top: 2px; right: 2px; bottom: 2px; left: 2px;
  inset: 2px;
  background: var(--cta);
  border-radius: calc(var(--radius) - 2px);
  z-index: -1;
}

/* Visual spacing for hero - balanced natural flow */
.hero--ultra .hero__badge {
  transform: none;
}

.hero--ultra .hero__text,
.hero--ultra .hero__buttons {
  transform: none;
}

/* Make product page headers match homepage hero typography and spacing */
.page-header--product h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: var(--space-lg);
}

.page-header--product .lead {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-2xl);
}

.product-hero-copy h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-md);
  line-height: 1.2;
  font-weight: 700;
}

.product-hero-copy p {
  color: var(--text-muted);
  line-height: var(--lh-prose);
  margin-bottom: var(--space-lg);
}

/* Enhanced stats */
.hero--ultra .hero__stats {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  width: fit-content;
}

.hero--ultra .hero__stat {
  text-align: center;
  flex: 0 0 auto;
  padding: 0 var(--space-sm);
  position: relative;
}

.hero--ultra .hero__stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: rgba(0,0,0,0.1);
}

.hero--ultra .hero__stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--heading);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}

.hero__stat-plus,
.hero__stat-suffix {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cta);
}

.hero--ultra .hero__stat-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Visual wrapper with perspective */
.hero__visual-wrapper {
  position: relative;
  perspective: 1000px;
  transition: transform 0.6s var(--ease-out);
}

.hero--ultra .hero__visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transform: perspective(1000px) rotateX(0) rotateY(0);
  transition: transform 0.3s ease-out;
  box-shadow: 
    0 25px 50px -12px color-mix(in srgb, var(--heading) 25%, transparent),
    0 0 0 1px color-mix(in srgb, var(--stroke) 50%, transparent);
  will-change: transform;
}

.hero__visual-glow {
  position: absolute;
  top: -50%; right: -50%; bottom: -50%; left: -50%;
  inset: -50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--cta) 30%, transparent) 0%, transparent 50%);
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

.hero--ultra .hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  position: relative;
  z-index: var(--z-base);
}

.hero__visual-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--cta) 10%, transparent) 100%);
  z-index: var(--z-base);
  pointer-events: none;
}

/* Floating feature cards */
.hero__float-card {
  display: none;
}

.hero__float-card svg {
  width: 20px;
  height: 20px;
  fill: var(--cta);
}

.hero__float-card--1 {
  top: 10%;
  right: -20px;
  animation: floatCard1 6s ease-in-out infinite;
}

.hero__float-card--2 {
  bottom: 15%;
  left: -30px;
  animation: floatCard2 5s ease-in-out infinite 0.5s;
}

/* Simplified trust indicators - elegant inline */
.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  font-size: 13px;
  color: var(--text);
  flex-wrap: wrap;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.hero__trust-item svg {
  fill: var(--cta);
  flex-shrink: 0;
}

.hero__trust-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}

@media (max-width: 640px) {
  .hero__trust {
    font-size: 12px;
    gap: var(--space-xs);
  }
  
  .hero__trust-divider {
    display: none;
  }
  
  .hero__trust-item {
    flex: 0 0 100%;
    padding: 4px 0;
  }
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: fadeInUp 1s ease-out 2s both;
  z-index: var(--z-dropdown);
}

.hero__scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--stroke);
  border-radius: 12px;
  position: relative;
}

.hero__scroll-wheel {
  width: 4px;
  height: 8px;
  background: var(--cta);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s ease-in-out infinite;
}

/* Hero Keyframe Animations */
@keyframes floatOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 30px) scale(1.05); }
  66% { transform: translate(-30px, -20px) scale(0.95); }
}

@keyframes floatOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, -30px) scale(1.1); }
  66% { transform: translate(30px, 20px) scale(0.9); }
}

@keyframes floatOrb3 {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -40px) scale(1.1); }
}

@keyframes particleFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100px); }
}

@keyframes floatShape1 {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(20deg) translateY(-20px); }
}

@keyframes floatShape2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.1); }
}

@keyframes floatShape3 {
  0%, 100% { transform: rotate(-20deg) translateX(0); }
  50% { transform: rotate(-15deg) translateX(10px); }
}

@keyframes floatShape4 {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

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

@keyframes underlineReveal {
  to { transform: scaleX(1); }
}

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

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes floatCard1 {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes scrollWheel {
  0% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(12px); opacity: 0; }
  51% { transform: translateX(-50%) translateY(0); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

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

/* Responsive hero */
@media (max-width: 1024px) {
  .hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hero--ultra {
    min-height: auto;
    padding: var(--header-height) 0 var(--space-lg);
  }

  .hero--ultra .hero__content {
    max-width: 100%;
  }

  .hero--ultra .hero__content {
    padding: var(--space-lg);
  }

  .hero--ultra .hero__badge {
    margin-bottom: var(--space-md);
  }

  .hero--ultra .hero__title {
    margin-bottom: var(--space-md);
  }

  .hero--ultra .hero__text {
    margin-bottom: var(--space-lg);
  }

  .hero--ultra .hero__stats {
    margin-top: var(--space-md);
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .hero__visual-wrapper {
    order: -1;
  }

  .hero--ultra .hero__visual {
    transform: none;
  }

  .hero__float-card {
    display: none;
  }

  .hero__shapes {
    display: none;
  }

  .hero__scroll-indicator {
    display: none;
  }

  .hero__gradient-orb {
    filter: blur(60px);
  }

  .hero__gradient-orb--1 { width: 400px; height: 400px; }
  .hero__gradient-orb--2 { width: 300px; height: 300px; }
  .hero__gradient-orb--3 { width: 200px; height: 200px; }
}

/* =========================================
   MOBILE HERO GLIDING ANIMATIONS
   ========================================= */
@keyframes slideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  /* ── Compact mobile hero – 2026 UX ── */
  .hero--ultra {
    min-height: auto;
    /* Base `.hero` vertically centers content; on mobile we want it pinned to the top */
    align-items: flex-start;
    /* Do not add top padding here; mobile layout uses `.hero .container` padding to align */
    padding-top: 0;
    padding-bottom: 100px; /* room for separator */
  }

  .hero__separator {
    height: 88px;
    clip-path: ellipse(85% 100% at 50% 100%);
  }

  .hero__container {
    gap: var(--space-sm);
  }

  .hero--ultra .hero__content {
    /* Remove extra top padding so the badge sits on the same row as search */
    padding: 0 var(--space-md);
    border-radius: var(--radius-lg);
    max-width: 100%;
    width: 100%;
  }

  .hero--ultra .hero__badge {
    padding: 6px 12px;
    font-size: var(--text-xs);
    margin-bottom: var(--space-xs);
    /* Slide in from left */
    animation: slideInFromLeft 0.4s ease-out 0.1s both;
  }

  .hero--ultra .hero__title {
    font-size: clamp(1.65rem, 7vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: var(--space-xs);
    /* Slide in from left */
    animation: slideInFromLeft 0.4s ease-out 0.15s both;
  }

  .hero--ultra .hero__text {
    font-size: var(--text-sm);
    line-height: 1.55;
    margin-bottom: var(--space-sm);
    color: var(--heading);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--card);
    background: color-mix(in srgb, var(--card) 85%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    /* Slide in from right */
    animation: slideInFromRight 0.4s ease-out 0.2s both;
  }

  .hero--ultra .hero__buttons {
    gap: var(--space-xs);
    flex-direction: column;
    margin-top: var(--space-md);
    /* Slide in from right */
    animation: slideInFromRight 0.4s ease-out 0.25s both;
  }

  .hero--ultra .hero__buttons > a {
    flex: none;
    width: 100%;
  }

  .hero--ultra .btn.btn--lg {
    padding: 10px 14px;
    min-height: 42px;
    font-size: var(--text-sm);
  }

  .hero--ultra .hero__stats {
    display: none; /* hide stats on mobile for compact hero */
  }

}

@media (max-width: 640px) {
  .hero--ultra .hero__content {
    padding: var(--space-xs) var(--space-sm);
  }

  .hero--ultra .hero__title {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  }

  .hero--ultra .hero__buttons .btn {
    justify-content: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__gradient-orb,
  .hero__particles,
  .hero__shape,
  .hero__badge-dot,
  .hero__float-card,
  .hero__scroll-wheel,
  .hero--ultra .hero__title-premium,
  .btn--glow::before {
    animation: none;
  }

  .hero--ultra .hero__title-highlight::after {
    transform: scaleX(1);
    animation: none;
  }
}



/* =========================================
   PRODUCT CARDS - Premium Professional Style
   ========================================= */

.product-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.4s var(--ease-out), background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.page-home .home-products .product-card {
  cursor: pointer;
}

body.page-home .home-products .product-card:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

/* Glowing border effect on hover */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--cta), var(--link), var(--cta));
  -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;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.product-card:hover::before {
  opacity: 1;
}

/* Homepage CTA card (Configurator) - keep it light, premium, and brand-accented */
.product-card--cta {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--link) 10%, var(--card)) 0%,
    var(--card) 55%,
    color-mix(in srgb, var(--cta) 12%, var(--card)) 100%
  );
  border-color: color-mix(in srgb, var(--link) 18%, var(--border));
}

.product-card--cta:hover {
  border-color: color-mix(in srgb, var(--link) 28%, var(--border));
}

.product-card--cta .product-card__category {
  color: var(--link);
}

.product-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 
    0 25px 50px color-mix(in srgb, var(--heading) 12%, transparent),
    0 10px 20px color-mix(in srgb, var(--cta) 10%, transparent);
  border-color: transparent;
}

.product-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: white;
}

.product-card__image--video::after {
  display: none !important;
  content: none !important;
}

/* Hide native video controls and play button overlays */
.product-card__video::-webkit-media-controls {
  display: none !important;
}

.product-card__video::-webkit-media-controls-enclosure {
  display: none !important;
}

.product-card__video::-webkit-media-controls-panel {
  display: none !important;
}

.product-card__video::-webkit-media-controls-play-button {
  display: none !important;
}

.product-card__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  appearance: none;
}

.product-card__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cta-text);
  background: var(--cta-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cta) 30%, transparent);
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: white;
  transition: transform 0.5s var(--ease-out);
}

/* Keep product imagery consistent everywhere (even on pages with local overrides).
   Exclude skeleton loaders so their shimmer backgrounds remain visible. */
.product-card:not(.product-card--skeleton) .product-card__image {
  background: white !important;
}

.product-card:not(.product-card--skeleton) .product-card__image img {
  object-fit: contain !important;
  background: white !important;
}

/* Fallback: any product image gets a white backing.
   (Does not force sizing; `object-fit` only matters when constrained.) */
img[src*="/assets/images/products/"],
img[src*="assets/images/products/"] {
  background: white;
  object-fit: contain;
}

.product-card:hover .product-card__image img {
  transform: scale(1.04);
}

/* Homepage: 'Onze producten' section images should fill the frame */
body.page-home .home-products .product-card__image img {
  object-fit: cover !important;
}

/* Homepage: 'Onze producten' image box should be 16:9 with no padding */
body.page-home .home-products .product-card__image {
  aspect-ratio: 16 / 9;
  padding: 0;
}

body.page-home .home-products .product-card__image img {
  padding: 0;
  display: block;
}

/* Video support inside product cards */
.product-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.product-card:hover .product-card__video {
  transform: scale(1.04);
}

.product-card__content {
  padding: var(--space-lg);
}

.product-card__category {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: var(--space-sm);
}

.product-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.product-card__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

/* Homepage product cards - make entire card clickable */
body.page-home .home-products .product-card {
  cursor: pointer;
}

.product-card__link:hover {
  color: var(--cta);
  text-decoration-color: var(--cta);
  gap: 10px;
}

.product-card__link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--t-fast);
}

.product-card__link:hover svg {
  transform: translateX(3px);
}

/* =========================================
   TOP 10 CATEGORIES SECTION
   ========================================= */

.section--categories {
  padding: clamp(32px, 4vw, 48px) 0;
  /* Fallback for browsers without `color-mix()` (notably some mobile Safari versions) */
  background: var(--highlight);
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--cta) 3%, var(--bg)) 20%,
    color-mix(in srgb, var(--link) 4%, var(--bg)) 50%,
    color-mix(in srgb, var(--cta) 3%, var(--bg)) 80%,
    var(--bg) 100%
  );
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Subtle animated background pattern */
.section--categories::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  /* Token-only gradients for maximum browser support */
  background:
    radial-gradient(circle at 15% 25%, var(--highlight) 0%, transparent 55%),
    radial-gradient(circle at 85% 75%, var(--highlight) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Floating decorative elements */
.section--categories::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cta) 6%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(40px);
  animation: floatGlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatGlow {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50% { transform: translate(-30px, 20px) scale(1.1); opacity: 0.8; }
}

.section--categories .container {
  position: relative;
  z-index: var(--z-base);
}

.section--categories .text-center {
  margin-bottom: var(--space-lg);
}

.section--categories h2 {
  font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
}

/* Categories Grid - 4 columns on desktop (wider cards so text fits) */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Category Item */
.category-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--heading) 4%, transparent);
}

/* Animated gradient shimmer on hover */
.category-item::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 30%,
    color-mix(in srgb, var(--cta) 6%, transparent) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}

.category-item:hover::before {
  opacity: 1;
  animation: shimmerEffect 1.5s ease-in-out;
}

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

/* Glowing border on hover */
.category-item::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cta), var(--link), var(--cta));
  -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;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}

.category-item:hover::after {
  opacity: 1;
}

.category-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 
    0 20px 40px color-mix(in srgb, var(--heading) 12%, transparent),
    0 8px 16px color-mix(in srgb, var(--cta) 8%, transparent);
  border-color: transparent;
  background: var(--card);
}

/* Category Image */
.category-item__image {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--heading) 8%, transparent);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.section--categories .category-item__image {
  /* Keep the white square backing but remove the soft shadow that looked grey
     (ensures thumbnails appear on a pure white tile). */
  background: var(--card);
  box-shadow: none;
}

/* Ensure any transparent areas inside the image itself render on white */
.section--categories .category-item__image img {
  background: var(--card);
  background-color: var(--card);
}

.category-item:hover .category-item__image {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cta) 20%, transparent);
  transform: scale(1.05);
}

.category-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform var(--t-med) var(--ease-out);
}

/* Desktop: match mobile rule (show full image, centered, no cropping) */
@media (min-width: 769px) {
  .section--categories .category-item__image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
  }

  .section--categories .category-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }
}

.category-item:hover .category-item__image img {
  transform: none;
}

/* Category Content */
.category-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: var(--space-sm);
}

.category-item__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--heading);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease-out);
}

.category-item:hover .category-item__title {
  color: var(--cta);
}

/* Arrow with enhanced animation */
.category-item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cta) 10%, transparent);
  color: var(--cta);
  opacity: 0;
  transform: translateX(-10px) scale(0.8);
  transition: opacity var(--t-med) var(--ease-spring), transform var(--t-med) var(--ease-spring), color var(--t-med) var(--ease-spring), background-color var(--t-med) var(--ease-spring), border-color var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-spring);
}

.category-item:hover .category-item__arrow {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.category-item__arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast) var(--ease-out);
}

.category-item:hover .category-item__arrow svg {
  animation: arrowBounce 0.6s ease-out;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* Staggered reveal animation - desktop only */
@media (min-width: 769px) {
  .category-item[data-scroll-reveal].is-revealed {
    animation: categoryReveal 0.4s var(--ease-out) forwards;
  }
}

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

/* Tablet - 4 columns then 3 columns */
@media (max-width: 1200px) {
  .categories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 1024px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  
  .category-item {
    padding: var(--space-md);
  }
  
  .category-item__image {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }
}

/* Mobile - Compact 2-column grid */
@media (max-width: 768px) {
  .section--categories {
    padding: clamp(36px, 5vw, 56px) 0;
    /* Stronger + always-visible mobile background */
    background: var(--highlight);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--card) 92%, var(--cta) 8%) 0%,
      color-mix(in srgb, var(--card) 90%, var(--link) 10%) 50%,
      color-mix(in srgb, var(--card) 92%, var(--cta) 8%) 100%
    );
  }
  
  /* Disable floating glow on mobile */
  .section--categories::after {
    display: none;
  }
  
  /* Simpler radial gradients on mobile */
  .section--categories::before {
    /* Keep it subtle and compatible */
    background:
      radial-gradient(ellipse 85% 60% at 50% 45%, var(--highlight) 0%, transparent 75%);
  }
  
  /* Disable heavy scroll animations on mobile */
  .section--categories [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  .section--categories [data-scroll-reveal].is-revealed {
    animation: none !important;
  }
  
  .section--categories .text-center {
    margin-bottom: var(--space-md);
  }
  
  .section--categories h2 {
    font-size: var(--text-xl);
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .category-item {
    padding: 12px 14px;
    gap: 12px;
    border-radius: var(--radius);
  }
  
  .category-item__image {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }

  .category-item__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  
  .category-item__title {
    font-size: var(--text-sm);
    line-height: 1.3;
  }
  
  .category-item__arrow {
    display: none;
  }
  
  /* Simple touch feedback - no bounce */
  .category-item {
    transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  }
  
  .category-item:active {
    background: color-mix(in srgb, var(--cta) 5%, var(--card));
  }
}

/* Small mobile - even more compact */
@media (max-width: 480px) {
  .categories-grid {
    gap: 8px;
  }
  
  .category-item {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .category-item__image {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 6px;
  }

  .category-item__image img {
    object-position: center;
  }
  
  .category-item__title {
    font-size: var(--text-sm);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section--categories::after,
  .category-item::before,
  .category-item__arrow svg {
    animation: none;
  }
  
  .category-item:hover {
    transform: translateY(-2px);
  }
}

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

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

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

@media (max-width: 480px) {
  .usp-grid {
    grid-template-columns: 1fr;
  }
}

.usp-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient shimmer on hover */
.usp-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 40%,
    color-mix(in srgb, var(--cta) 5%, transparent) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity var(--t-med);
}

.usp-card:hover::before {
  opacity: 1;
  animation: shimmerCard 1.5s ease-in-out;
}

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

.usp-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px color-mix(in srgb, var(--heading) 10%, transparent),
    0 8px 16px color-mix(in srgb, var(--cta) 8%, transparent);
  border-color: color-mix(in srgb, var(--cta) 25%, var(--border));
}

.usp-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  background: color-mix(in srgb, var(--cta) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--cta) 15%, transparent);
  border-radius: 12px;
  display: grid;
  place-items: center;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.usp-card:hover .usp-card__icon {
  background: color-mix(in srgb, var(--cta) 12%, var(--bg));
  transform: scale(1.05);
}

.usp-card__icon svg {
  width: 26px;
  height: 26px;
  fill: var(--cta);
}

.usp-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--space-sm);
}

.usp-card__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================
   TESTIMONIALS
   ========================================= */

.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.testimonial-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.testimonial-card__stars svg {
  width: 14px;
  height: 14px;
  fill: #fbbf24;
}

.testimonial-card__text {
  font-size: var(--text-sm);
  font-style: normal;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.6;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.testimonial-card__avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  background: transparent;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  aspect-ratio: 1 / 1;
}

/* Ensure review avatars never show placeholder overlays */
.testimonial-card__avatar img::before,
.testimonial-card__avatar img::after {
  content: none;
  display: none;
}

.testimonial-card__name {
  font-weight: 600;
  color: var(--heading);
  font-size: var(--text-sm);
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* =========================================
   CTA SECTION - Premium Style
   ========================================= */

.cta-section {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--link) 8%, var(--card)) 0%,
    var(--card) 55%,
    color-mix(in srgb, var(--cta) 10%, var(--card)) 100%
  );
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2, var(--shadow-card));
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cta) 8%, transparent) 0%, transparent 55%);
  pointer-events: none;
}

.cta-section__content {
  position: relative;
  z-index: var(--z-base);
  max-width: 600px;
  margin: 0 auto;
}

.cta-section h2 {
  color: var(--heading);
  margin-bottom: var(--space-md);
}

.cta-section p {
  color: var(--text-muted);
  font-size: var(--text-lg);
  margin: 0 auto var(--space-xl);
}

.cta-section .btn--primary {
  background: var(--cta);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cta) 40%, transparent);
}

.cta-section .btn--primary:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--cta) 50%, transparent);
}

.cta-section .btn--outline {
  border-color: var(--border);
  color: var(--heading);
}

.cta-section .btn--outline:hover {
  background: color-mix(in srgb, var(--cta) 8%, transparent);
  border-color: var(--cta);
}

/* CTA Section Light Variant - for light backgrounds */
.cta-section--light {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.cta-section--light::before {
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cta) 6%, transparent) 0%, transparent 55%);
}

.cta-section--light h2 {
  color: var(--heading);
}

.cta-section--light p {
  color: var(--text-muted);
}

.cta-section--light .btn--outline {
  border-color: var(--border);
  color: var(--heading);
}

.cta-section--light .btn--outline:hover {
  background: color-mix(in srgb, var(--cta) 8%, transparent);
  border-color: var(--cta);
}

/* =========================================
   FOOTER - Professional Clean Style
   ========================================= */

.footer {
  background: var(--bg-soft);
  color: var(--text);
  padding: var(--space-3xl) 0 var(--space-xl);
  border-top: 1px solid var(--border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

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

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand {
  max-width: 320px;
}

.footer__brand .logo {
  color: var(--heading);
  margin-bottom: var(--space-md);
  font-size: var(--text-2xl);
}

/* Larger logo in footer for better visibility */
.footer__brand .logo::before {
  width: 88px;
  height: 88px;
}

.footer__brand p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social a {
  width: 40px;
  height: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.footer__social a:hover {
  background: var(--cta);
  border-color: var(--cta);
  transform: translateY(-2px);
}

.footer__social a:hover svg {
  color: var(--cta-text);
}

.footer__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  color: var(--text-muted);
}

.footer__social svg path {
  fill: currentColor;
}

.footer__column h3 {
  color: var(--heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  color: var(--text-muted);
  font-size: var(--text-sm);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.footer__links a:hover {
  color: var(--heading);
  padding-left: 4px;
}

.footer__bottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

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

.footer__legal a {
  color: var(--text-muted);
}

.footer__legal a:hover {
  color: var(--heading);
}

/* Compact payment icons for footer (small, mobile-friendly) */
.footer__payments {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 100%;
  --footer-payment-icon-h: 14px;
  --footer-payment-icon-maxw: 48px;
}

.footer__payments .payment-icon {
  max-height: var(--footer-payment-icon-h) !important;
  max-width: var(--footer-payment-icon-maxw) !important;
  height: auto !important;
  width: auto !important;
  display: block;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--t-fast);
  flex: 0 0 auto;
}

.footer__payments .payment-icon:hover {
  opacity: 1;
}

@media (max-width: 480px) {
  .footer__payments {
    gap: 3px;
    --footer-payment-icon-h: 10px;
    --footer-payment-icon-maxw: 40px;
  }
  .footer__payments .payment-icon {
    max-height: var(--footer-payment-icon-h);
  }
}

@media (max-width: 768px) {
  .footer__bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}

/* =========================================
   MOBILE NAVIGATION - 2026 Premium
   Full-screen slide-in navigation optimized for touch
   Works on ALL screen sizes for consistent UX
   ========================================= */

/* Overlay backdrop when nav is open */
.mobile-nav-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* Keep above floating UI (chat widget, mobile bottom nav) */
  z-index: var(--z-mobile-nav);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med);
}

.mobile-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Main navigation panel - works on all screen sizes */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 380px);
  background: var(--card);
  /* Above overlay and any floating widgets */
  z-index: var(--z-mobile-panel);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
  box-shadow: -8px 0 32px color-mix(in oklab, var(--heading) 12%, transparent);
  display: flex;
  flex-direction: column;
}

/* Desktop: wider panel for better readability */
@media (min-width: 1025px) {
  .mobile-nav {
    width: min(420px, 30vw);
  }
}

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

/* Prevent body scroll when mobile nav is open */
body.mobile-nav-open,
html.mobile-nav-open {
  overflow: hidden;
  touch-action: none;
  position: fixed;
  width: 100%;
}

/* Navigation header with close button */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  padding-top: calc(var(--space-md) + var(--safe-top, 0px));
  border-bottom: 1px solid var(--stroke);
  background: var(--card);
  flex-shrink: 0;
}

.mobile-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.mobile-nav__logo img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.mobile-nav__brand-text {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.02em;
}

.mobile-nav__brand {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: var(--soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav__close:hover,
.mobile-nav__close:active {
  background: var(--stroke);
  color: var(--text-primary);
}

.mobile-nav__close svg {
  width: 20px;
  height: 20px;
}

/* Scroll container wrapper */
.mobile-nav__scroll-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Scrollable content area */
.mobile-nav__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide default scrollbar on Firefox */
  -ms-overflow-style: none; /* Hide default scrollbar on IE/Edge */
}

/* Hide default webkit scrollbar */
.mobile-nav__scroll::-webkit-scrollbar {
  display: none;
}

/* Custom scroll indicator track - visible on all devices */
.mobile-nav__scrollbar {
  position: absolute;
  top: 8px;
  right: 6px;
  bottom: 8px;
  width: 4px;
  background: var(--soft);
  border-radius: 4px;
  z-index: var(--z-dropdown);
  pointer-events: none;
}

.mobile-nav__scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 60px;
  background: var(--accent, #3b82f6);
  border-radius: 4px;
  transition: top 0.05s ease-out;
}

/* Scroll fade gradient at bottom to indicate more content */
.mobile-nav__scroll-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 12px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
  z-index: var(--z-base);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.mobile-nav__scroll-fade.is-hidden {
  opacity: 0;
}

.mobile-nav__inner {
  padding: var(--space-xs) 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Section dividers */
.mobile-nav__section {
  padding: var(--space-xs) var(--space-lg);
}

.mobile-nav__section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  padding: 0 var(--space-md);
}

/* Main navigation links */
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  min-height: 56px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 0;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  text-decoration: none;
}

.mobile-nav__link:hover,
.mobile-nav__link:active {
  background: var(--soft);
}

.mobile-nav__link svg {
  width: 20px;
  height: 20px;
  opacity: 0.4;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out), opacity var(--t-fast);
  pointer-events: none;
}

.mobile-nav__link.is-expanded svg {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* Links without submenu - no arrow */
.mobile-nav__link:not([data-submenu]) {
  justify-content: flex-start;
}

.mobile-nav__link:not([data-submenu]) svg {
  display: none;
}

/* Submenu styling - smooth accordion */
.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--heading) 2%, var(--card));
  transition: max-height 0.3s var(--ease-out);
}

.mobile-nav__submenu.is-open {
  max-height: 600px;
}

.mobile-nav__submenu a {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  padding-left: calc(var(--space-lg) + var(--space-lg));
  min-height: 48px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.mobile-nav__submenu a:hover,
.mobile-nav__submenu a:active {
  background: var(--soft);
  color: var(--accent);
}

/* Active page indicator */
.mobile-nav__link.is-active,
.mobile-nav__submenu a.is-active {
  color: var(--accent);
}

.mobile-nav__link.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Divider line */
.mobile-nav__divider {
  height: 1px;
  background: var(--stroke);
  margin: var(--space-xs) var(--space-lg);
}

/* CTA section at bottom */
.mobile-nav__cta {
  padding: var(--space-lg);
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom, 0px));
  background: var(--soft);
  border-top: 1px solid var(--stroke);
  margin-top: auto;
  flex-shrink: 0;
}

.mobile-nav__cta .btn {
  width: 100%;
  margin-bottom: var(--space-sm);
  min-height: 52px;
  font-weight: 600;
}

.mobile-nav__cta .btn:last-child {
  margin-bottom: 0;
}

/* Contact info in nav */
.mobile-nav__contact {
  padding: var(--space-md) var(--space-lg);
  background: var(--soft);
  border-radius: var(--radius);
  margin: var(--space-sm) var(--space-lg);
}

.mobile-nav__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.mobile-nav__contact-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}

.mobile-nav__contact-item a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
}

.mobile-nav__contact-item a:hover {
  color: var(--accent);
}

/* Compact mode: reduce spacing so the opened drawer fits on low-height phones */
@media (max-width: 768px) and (max-height: 780px) {
  .mobile-nav__header {
    padding: var(--space-sm) var(--space-md);
    padding-top: calc(var(--space-sm) + var(--safe-top, 0px));
  }

  .mobile-nav__brand {
    font-size: var(--text-base);
  }

  .mobile-nav__close {
    width: 40px;
    height: 40px;
  }

  .mobile-nav__inner {
    padding: 0;
  }

  .mobile-nav__section {
    padding: 0 var(--space-md);
  }

  .mobile-nav__section-title {
    margin-bottom: 4px;
    padding: 0;
  }

  .mobile-nav__link {
    padding: 10px var(--space-md);
    min-height: 48px;
    font-size: var(--text-sm);
  }

  .mobile-nav__submenu a {
    padding: 8px var(--space-md);
    padding-left: calc(var(--space-md) + var(--space-md));
    min-height: 40px;
    font-size: var(--text-xs);
  }

  .mobile-nav__divider {
    margin: 6px var(--space-md);
  }

  .mobile-nav__cta {
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + var(--safe-bottom, 0px));
    background: var(--card);
  }

  .mobile-nav__cta .btn {
    min-height: 40px;
    padding: 10px 12px;
    font-size: var(--text-xs);
    margin-bottom: 0;
  }

  /* Put the 2 CTA buttons side-by-side to save vertical space */
  .mobile-nav__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .mobile-nav__contact {
    padding: 6px var(--space-md);
    margin: 0;
    background: transparent;
    border-radius: 0;
  }

  .mobile-nav__contact-item {
    padding: 2px 0;
    font-size: var(--text-xs);
  }

  .mobile-nav__scroll-fade {
    height: 36px;
  }
}

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

.page-header {
  padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--soft);
  text-align: center;
}

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

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

.page-header__breadcrumb svg {
  width: 14px;
  height: 14px;
}

.page-header h1 {
  margin-bottom: var(--space-md);
}

.page-header p {
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================
   FORM ELEMENTS
   ========================================= */

.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  font-size: var(--text-base); /* Prevents iOS zoom on focus */
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius);
  background: var(--card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 52px; /* Touch-friendly minimum height */
  -webkit-appearance: none;
  appearance: none;
}

/* Mobile-specific form optimizations */
@media (max-width: 768px) {
  .form-input,
  .form-textarea,
  .form-select {
    padding: 16px;
    min-height: 56px;
  }
  
  .form-textarea {
    min-height: 130px;
  }
}

/* Note: Logo text is now displayed, not hidden. The old rule that hid .logo__word has been removed. */

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

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

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

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

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-out) forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

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

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

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }

/* =========================================
   PLACEHOLDER IMAGES
   When actual images are missing, show styled placeholders
   ========================================= */

.product-card__image,
.hero__visual,
.project-card__image,
.testimonial-card__avatar,
img[src$=".jpg"]:not([src^="http"]):not([src^="data:"]),
img[src$=".png"]:not([src^="http"]):not([src^="data:"]),
img[src$=".webp"]:not([src^="http"]):not([src^="data:"]),
img[src$=".svg"]:not([src^="http"]):not([src^="data:"]) {
  position: relative;
}

/* Fallback placeholder for broken images */
img {
  background: linear-gradient(135deg, var(--soft) 0%, color-mix(in srgb, var(--soft) 70%, var(--bg)) 100%);
  min-height: 120px;
}

/* Override for testimonial avatars - must come after global img rule */
.testimonial-card__avatar,
.testimonial-card__avatar img {
  min-height: 64px;
  max-height: 64px;
  min-width: 64px;
  max-width: 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
}

.testimonial-card__avatar img {
  object-fit: cover;
  object-position: center top;
  display: block;
}

img::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(135deg, var(--soft) 0%, color-mix(in srgb, var(--soft) 70%, var(--bg)) 100%);
}

img::after {
  content: attr(alt);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  background: linear-gradient(135deg, var(--soft) 0%, color-mix(in srgb, var(--soft) 70%, var(--bg)) 100%);
}

/* SVG placeholder pattern for product images */
.placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--soft) 70%, var(--bg)) 0%, color-mix(in srgb, var(--soft) 40%, var(--bg)) 100%);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  padding: var(--space-lg);
  min-height: 200px;
  border-radius: var(--radius);
}

.placeholder-image svg {
  width: 64px;
  height: 64px;
  opacity: 0.3;
  margin-bottom: var(--space-sm);
}

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

/* Mobile toggle button - improved */
.mobile-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--t-fast);
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--t-med), opacity var(--t-med);
  margin: 0;
}

.mobile-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================
   2026 MOBILE RESPONSIVE - Modern Standards
   ========================================= */

/* Tablet breakpoint */
@media (max-width: 1024px) {
  :root {
    --header-height: 68px;
    --space-3xl: 80px;
    --space-2xl: 56px;
  }
  
  .container {
    padding: 0 var(--space-lg);
  }
  
  /* Hide desktop nav and show hamburger on tablet/mobile */
  .nav {
    display: none !important;
  }
  
  .mobile-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .header__actions .btn--ghost {
    display: none;
  }
}

/* Mobile breakpoint with 2026 optimizations */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --space-3xl: 56px;
    --space-2xl: 40px;
    --space-xl: 32px;
    /* Fluid spacing based on viewport */
    --container-padding: clamp(16px, 5vw, 24px);
  }
  
  body {
    font-size: var(--text-base);
    /* Safe area for bottom navigation gestures */
    padding-bottom: var(--safe-bottom);
  }
  
  .container {
    padding: 0 var(--container-padding);
  }
  
  /* Section spacing */
  .section {
    padding: var(--space-2xl) 0;
  }
  
  .section--sm {
    padding: var(--space-xl) 0;
  }
  
  /* Header - seamless with hero */
  .header {
    padding-top: var(--safe-top);
    height: calc(var(--header-height) + var(--safe-top));
    background: var(--card);
    background-image: none;
    color: var(--text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border);
  }
  
  .header.is-scrolled {
    background: var(--card);
    background-image: none;
    color: var(--text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--border);
  }

  html.mobile-nav-open .header,
  body.mobile-nav-open .header {
    background: var(--card);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* ── Hero overlay header: transparent until scroll ── */
  .header.header--hero-overlay {
    background: transparent;
    background-image: none;
    border-bottom: none;
    box-shadow: none;
  }

  .header.header--hero-overlay.is-scrolled {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
  }

  html.mobile-nav-open .header.header--hero-overlay,
  body.mobile-nav-open .header.header--hero-overlay {
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }
  
  /* Logo dark by default, white on hero overlay */
  .header .logo {
    color: var(--heading);
    transition: color var(--t-med);
  }
  
  /* Ensure logo never gets too big on mobile */
  .header .logo,
  .header .header__logo {
    max-height: 44px;
    overflow: hidden;
  }
  
  .header .logo::before {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  
  .header .header__logo-img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
  }

  .header .logo__icon svg {
    fill: var(--heading);
  }
  
  /* Mobile menu toggle must always be dark on mobile */
  .header .mobile-toggle span {
    background: var(--text);
    transition: background var(--t-med);
  }

  /* ── Hero overlay: white logo + hamburger when transparent ── */
  .header.header--hero-overlay .logo {
    color: #fff;
  }

  .header.header--hero-overlay .logo::before {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
  }

  .header.header--hero-overlay .logo__icon svg {
    fill: #fff;
  }

  .header.header--hero-overlay .mobile-toggle span {
    background: #fff;
  }

  .header.header--hero-overlay .header__actions .btn {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }

  /* ── Hero overlay scrolled: revert to dark ── */
  .header.header--hero-overlay.is-scrolled .logo {
    color: var(--heading);
  }

  .header.header--hero-overlay.is-scrolled .logo::before {
    filter: none;
  }

  .header.header--hero-overlay.is-scrolled .logo__icon svg {
    fill: var(--heading);
  }

  .header.header--hero-overlay.is-scrolled .mobile-toggle span {
    background: var(--text);
  }

  .header.header--hero-overlay.is-scrolled .header__actions .btn {
    color: var(--cta-text);
    border-color: var(--cta-bg);
    background: var(--cta-bg);
  }

  html.mobile-nav-open .header.header--hero-overlay .logo,
  body.mobile-nav-open .header.header--hero-overlay .logo {
    color: var(--heading);
  }

  html.mobile-nav-open .header.header--hero-overlay .logo::before,
  body.mobile-nav-open .header.header--hero-overlay .logo::before {
    filter: none;
  }

  html.mobile-nav-open .header.header--hero-overlay .mobile-toggle span,
  body.mobile-nav-open .header.header--hero-overlay .mobile-toggle span {
    background: var(--text);
  }

  /* Any header icons using currentColor should remain dark on mobile */
  .header .theme-toggle,
  .header .theme-toggle svg {
    color: var(--text);
  }
  
  .header__inner {
    padding: 0 var(--container-padding);
    height: var(--header-height);
  }

  /* Fixed mobile search bar stacked under header - expandable from right */
  body.has-mobile-searchbar .mobile-searchbar {
    position: fixed;
    top: calc(var(--header-height) + var(--safe-top, 0px) + 8px);
    right: var(--container-padding);
    left: auto;
    height: var(--mobile-searchbar-height, 48px);
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    z-index: var(--z-header);
    transition: width 0.35s var(--ease-out);
    overflow: visible;
  }

  body.has-mobile-searchbar .mobile-searchbar.is-expanded {
    /* Use 100% instead of 100vw to avoid Windows scrollbar overflow */
    width: calc(100% - var(--container-padding) * 2);
  }

  body.has-mobile-searchbar .mobile-searchbar__toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--cta-bg, var(--cta));
    cursor: pointer;
    box-shadow: 
      0 2px 8px rgba(0,0,0,0.08),
      0 4px 12px rgba(0,0,0,0.06);
    transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
    z-index: var(--z-base);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.has-mobile-searchbar .mobile-searchbar__toggle:active {
    transform: translateY(-50%) scale(0.92);
  }

  body.has-mobile-searchbar .mobile-searchbar__toggle svg {
    width: 22px;
    height: 22px;
    transition: transform var(--t-med) var(--ease-out);
  }

  body.has-mobile-searchbar .mobile-searchbar.is-expanded .mobile-searchbar__toggle {
    background: var(--cta-bg, var(--cta));
    color: var(--cta-text, #fff);
    border-color: var(--cta-bg, var(--cta));
    box-shadow: 
      0 4px 16px color-mix(in srgb, var(--cta) 35%, transparent),
      0 2px 4px color-mix(in srgb, var(--cta) 20%, transparent);
  }

  body.has-mobile-searchbar .mobile-searchbar.is-expanded .mobile-searchbar__toggle svg {
    transform: rotate(90deg);
  }

  body.has-mobile-searchbar .mobile-searchbar__form {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 56px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease-out), visibility 0.25s;
  }

  body.has-mobile-searchbar .mobile-searchbar.is-expanded .mobile-searchbar__form {
    opacity: 1;
    visibility: visible;
  }

  /* Inline results under the gliding search bar */
  body.has-mobile-searchbar .mobile-searchbar__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 100%;
    max-height: min(60vh, 420px);
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
    z-index: var(--z-base);
  }

  body.has-mobile-searchbar .mobile-searchbar__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  body.has-mobile-searchbar .mobile-searchbar__results {
    padding: 6px 8px;
  }

  body.has-mobile-searchbar .mobile-searchbar__section + .mobile-searchbar__section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  body.has-mobile-searchbar .mobile-searchbar__section-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 6px 6px;
  }

  body.has-mobile-searchbar .mobile-searchbar__list {
    display: grid;
    gap: 2px;
  }

  body.has-mobile-searchbar .mobile-searchbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    color: var(--text);
    font-size: var(--text-xs);
    line-height: 1.2;
    background: transparent;
  }

  body.has-mobile-searchbar .mobile-searchbar__item:hover {
    background: color-mix(in srgb, var(--cta) 10%, transparent);
    border-color: color-mix(in srgb, var(--cta) 20%, transparent);
  }

  body.has-mobile-searchbar .mobile-searchbar__item--product {
    align-items: center;
    min-height: 0;
  }

  body.has-mobile-searchbar .mobile-searchbar__thumb {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    min-width: 18px;
    min-height: 18px;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex: 0 0 18px;
    border: 1px solid var(--border);
    background: var(--bg);
  }

  body.has-mobile-searchbar .mobile-searchbar__item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
  }

  body.has-mobile-searchbar .mobile-searchbar__name {
    font-weight: 600;
    font-size: var(--text-xs);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.has-mobile-searchbar .mobile-searchbar__meta {
    display: none;
  }

  body.has-mobile-searchbar .mobile-searchbar__empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: var(--text-sm);
  }

  body.has-mobile-searchbar .mobile-searchbar__footer {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
  }

  body.has-mobile-searchbar .mobile-searchbar__all {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--cta) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cta) 20%, transparent);
    color: var(--heading);
    font-weight: 600;
    font-size: var(--text-xs);
    text-align: center;
  }

  body.has-mobile-searchbar .mobile-searchbar__input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    padding-right: 40px;
    border-radius: var(--radius-pill, 22px);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 500;
    outline: none;
    box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,0.08));
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }

  body.has-mobile-searchbar .mobile-searchbar__input::placeholder {
    color: var(--text-muted, var(--text-muted));
    font-weight: 400;
  }

  body.has-mobile-searchbar .mobile-searchbar__input:focus {
    border-color: var(--cta-bg, var(--cta));
    box-shadow: 
      var(--shadow-1, 0 2px 8px rgba(0,0,0,0.08)),
      0 0 0 3px color-mix(in srgb, var(--cta) 15%, transparent);
  }

  body.has-mobile-searchbar .mobile-searchbar__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-fast), color var(--t-fast);
  }

  body.has-mobile-searchbar .mobile-searchbar__clear.is-visible {
    opacity: 1;
    visibility: visible;
  }

  body.has-mobile-searchbar .mobile-searchbar__clear:hover {
    color: var(--text);
  }

  body.has-mobile-searchbar .mobile-searchbar__clear svg {
    width: 18px;
    height: 18px;
  }

  /* Backdrop when search is expanded */
  body.has-mobile-searchbar .mobile-searchbar__backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    top: calc(var(--header-height) + var(--safe-top, 0px));
    background: color-mix(in srgb, var(--heading) 20%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease-out), visibility 0.25s;
    z-index: -1;
  }

  body.has-mobile-searchbar .mobile-searchbar.is-expanded .mobile-searchbar__backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* Webshop: tighter mobile header actions so all icons fit nicely */
  html.is-webshop .header__actions {
    gap: 4px;
  }

  html.is-webshop .search-toggle,
  html.is-webshop .cart-icon,
  html.is-webshop .mobile-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  html.is-webshop .header__actions .btn.btn--sm {
    padding: 8px 12px;
    min-height: 44px;
  }
  
  .logo {
    font-size: var(--text-lg);
  }
  
  .logo__icon {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--radius-sm);
  }
  
  .logo__icon img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
  }
  
  .logo__icon svg {
    width: 20px;
    height: 20px;
  }
  
  /* Hero mobile - Compact layout */
  .hero {
    min-height: auto;
    /* Fluid vertical spacing on mobile */
    padding: clamp(12px, 4vh, 28px) 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }

  /* Ultra hero: remove the generic mobile `.hero` padding so the container can align to the searchbar */
  .hero.hero--ultra {
    padding: 0;
  }

  /* Keep the ultra hero background image visible on mobile */
  .hero--ultra {
    background-image:
      linear-gradient(
        135deg,
        rgba(245, 245, 245, 0.94) 0%,
        rgba(245, 245, 245, 0.82) 35%,
        rgba(245, 245, 245, 0.60) 60%,
        rgba(245, 245, 245, 0.25) 100%
      ),
      url("/assets/images/hero/83801F8D-2A4D-4CF5-87CE-CFF7E5E45F5C.png");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
  
  /* Hide image on mobile */
  /* Hide background visual on mobile to keep layout compact */
  .hero__visual {
    display: none;
  }

  /* =========================================
     MOBILE HERO – Advanced UX Gradient System
     Multi-layer animated gradient with floating window/door shapes
     ========================================= */

  /* Keyframes for mobile hero animations */
  @keyframes mobileHeroGradientShift {
    0%, 100% { background-position: 0% 50%, 20% 30%, 80% 70%, 0 0; }
    25% { background-position: 100% 50%, 25% 35%, 75% 65%, 10px -5px; }
    50% { background-position: 50% 100%, 30% 25%, 70% 75%, 0 -10px; }
    75% { background-position: 0% 50%, 15% 40%, 85% 60%, -10px -5px; }
  }

  @keyframes mobileHeroFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
  }

  @keyframes mobileHeroOrb {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
  }

  @keyframes mobileHeroPulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.10; }
  }

  /* Primary animated gradient layer */
  .hero::before {
    content: '';
    width: 68px;
    height: 68px;
    z-index: var(--z-base);
    pointer-events: none;
    background-image:
      /* Smooth animated gradient sweep */
      linear-gradient(135deg,
        rgba(37,99,235,0.12) 0%,
        rgba(96,165,250,0.08) 25%,
        rgba(47,95,143,0.10) 50%,
        rgba(47,95,143,0.06) 75%,
        rgba(245,245,245,0.00) 100%),
      /* Floating orb 1 - blue */
      radial-gradient(ellipse 50% 40% at 15% 25%, rgba(37,99,235,0.12), transparent 60%),
      /* Floating orb 2 - orange */
      radial-gradient(ellipse 45% 35% at 85% 65%, rgba(47,95,143,0.10), transparent 55%),
      /* Window/door pattern SVG - more detailed shapes */
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><defs><linearGradient id='wg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%232563eb' stop-opacity='0.08'/><stop offset='100%25' stop-color='%232F5F8F' stop-opacity='0.05'/></linearGradient></defs><rect x='10' y='20' width='50' height='75' rx='4' fill='url(%23wg)'/><line x1='35' y1='20' x2='35' y2='95' stroke='%230f172a' stroke-opacity='0.04' stroke-width='1'/><line x1='10' y1='55' x2='60' y2='55' stroke='%230f172a' stroke-opacity='0.04' stroke-width='1'/><rect x='80' y='35' width='40' height='60' rx='3' fill='%230f172a' fill-opacity='0.05'/><circle cx='112' cy='65' r='3' fill='%232F5F8F' fill-opacity='0.12'/><rect x='140' y='15' width='60' height='90' rx='5' fill='url(%23wg)'/><line x1='170' y1='15' x2='170' y2='105' stroke='%230f172a' stroke-opacity='0.04' stroke-width='1'/><rect x='145' y='20' width='20' height='35' rx='2' fill='%232563eb' fill-opacity='0.04'/><rect x='175' y='20' width='20' height='35' rx='2' fill='%232563eb' fill-opacity='0.04'/><rect x='145' y='65' width='20' height='35' rx='2' fill='%232F5F8F' fill-opacity='0.04'/><rect x='175' y='65' width='20' height='35' rx='2' fill='%232F5F8F' fill-opacity='0.04'/><rect x='25' y='130' width='70' height='45' rx='4' fill='%230f172a' fill-opacity='0.045'/><rect x='30' y='135' width='25' height='35' rx='2' fill='%232563eb' fill-opacity='0.05'/><rect x='65' y='135' width='25' height='35' rx='2' fill='%232563eb' fill-opacity='0.05'/><rect x='130' y='140' width='80' height='55' rx='4' fill='url(%23wg)'/><rect x='135' y='145' width='32' height='22' rx='2' fill='%232563eb' fill-opacity='0.04'/><rect x='173' y='145' width='32' height='22' rx='2' fill='%232563eb' fill-opacity='0.04'/><rect x='135' y='172' width='32' height='18' rx='2' fill='%232F5F8F' fill-opacity='0.04'/><rect x='173' y='172' width='32' height='18' rx='2' fill='%232F5F8F' fill-opacity='0.04'/></svg>");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: 200% 200%, 80% 80%, 70% 70%, 180px 180px;
    background-position: 0% 50%, 20% 30%, 80% 70%, 0 0;
    animation: mobileHeroGradientShift 12s ease-in-out infinite;
    opacity: 1;
  }

  /* Secondary floating shapes layer */
  .hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: var(--z-base);
    pointer-events: none;
    background-image:
      /* Accent glow spots */
      radial-gradient(circle 80px at 10% 80%, rgba(37,99,235,0.08), transparent 70%),
      radial-gradient(circle 60px at 90% 20%, rgba(47,95,143,0.07), transparent 70%),
      radial-gradient(circle 100px at 50% 90%, rgba(96,165,250,0.05), transparent 70%),
      /* Subtle noise texture for depth */
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><circle cx='20' cy='30' r='1.5' fill='%232563eb' fill-opacity='0.06'/><circle cx='70' cy='20' r='1' fill='%232F5F8F' fill-opacity='0.05'/><circle cx='40' cy='70' r='1.2' fill='%232563eb' fill-opacity='0.04'/><circle cx='85' cy='60' r='1' fill='%232F5F8F' fill-opacity='0.05'/><circle cx='15' cy='85' r='0.8' fill='%232563eb' fill-opacity='0.04'/></svg>");
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 80px 80px;
    animation: mobileHeroOrb 8s ease-in-out infinite;
    opacity: 0.9;
  }

  /* Ultra hero uses a photographic background; disable mobile gradient overlays */
  .hero--ultra::before,
  .hero--ultra::after {
    content: none;
  }

  /* Ensure hero content stays above the gradient layers */
  .hero .container {
    z-index: var(--z-base);
  }

  /* Reduced motion: disable animations but keep gradients */
  @media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after {
      animation: none;
    }
  }

  .hero__visual img,
  .hero__image img,
  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Content section */
  .hero .container {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: auto;
    /* Keep content readable above the visual; use fluid spacing */
    padding-top: calc(var(--header-height) + var(--safe-top) + clamp(8px, 3vh, 20px));
    padding-bottom: clamp(12px, 4vh, 28px);
    padding-left: clamp(12px, 4vw, var(--space-md));
    padding-right: clamp(12px, 4vw, var(--space-md));
    order: 1;
    width: 100%;
    max-width: 100%;
  }

  /* Homepage: align trust badge with the fixed mobile searchbar level */
  body.page-home.has-mobile-searchbar .hero .container {
    padding-top: calc(var(--header-height) + var(--safe-top, 0px) + 8px);
  }
  
  .hero__content {
    max-width: 100%;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  
  /* Trust badge */
  .hero__badge {
    display: inline-flex;
    font-size: var(--text-xs);
    padding: 6px 12px;
    margin-bottom: var(--space-sm);
    background: color-mix(in srgb, var(--cta) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--cta) 30%, transparent);
    color: var(--cta);
    border-radius: 100px;
  }
  
  .hero__badge svg {
    fill: var(--success-emphasis);
    width: 14px;
    height: 14px;
  }
  
  .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    margin-bottom: var(--space-xs);
    line-height: 1.15;
    text-wrap: balance;
    color: var(--heading);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  
  .hero__title span {
    color: var(--cta);
  }
  
  .hero__text {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 400;
  }
  
  .hero__buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  
  .hero__buttons .btn {
    width: auto;
    justify-content: center;
    min-height: 52px;
    font-weight: 600;
    font-size: var(--text-sm);
    border-radius: 12px;
    padding: 14px 20px;
  }

  /* Primary CTA stays full width; secondary CTAs sit side-by-side */
  .hero__buttons .btn--primary {
    flex: 1 1 100%;
  }

  .hero__buttons .btn--outline,
  .hero__buttons .btn--glass {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
  
  .hero__buttons .btn--primary {
    background: var(--color-secondary);
    color: var(--cta-text);
  }
  
  .hero__buttons .btn--outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--heading);
  }
  
  .hero__buttons .btn--outline:hover,
  .hero__buttons .btn--outline:active {
    background: var(--soft);
    border-color: var(--cta);
  }
  
  .hero__buttons .btn--glass {
    background: color-mix(in srgb, var(--link) 10%, var(--card));
    border: 1.5px solid color-mix(in srgb, var(--link) 28%, var(--stroke));
    color: var(--heading);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
  }
  
  .hero__buttons .btn--glass:hover,
  .hero__buttons .btn--glass:active {
    background: color-mix(in srgb, var(--link) 14%, var(--card));
    border-color: color-mix(in srgb, var(--link) 40%, var(--stroke));
    box-shadow: var(--shadow-card);
  }
  
  .hero__buttons .btn--glass svg {
    color: var(--link);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--link) 20%, transparent));
  }
  
  /* Stats row */
  .hero__stats {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: color-mix(in srgb, var(--soft) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--link) 18%, var(--stroke));
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
  }
  
  .hero__stat {
    text-align: center;
    flex: 1;
  }
  
  .hero__stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--heading);
    line-height: 1;
  }
  
  .hero__stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  
  /* Buttons mobile - 48px minimum touch target */
  .btn {
    padding: 14px 22px;
    font-size: var(--text-sm);
    min-height: var(--touch-target-min);
    /* Haptic feedback hint */
    -webkit-tap-highlight-color: color-mix(in srgb, var(--cta) 20%, transparent);
  }
  
  .btn--lg {
    padding: 16px 28px;
    font-size: var(--text-base);
    min-height: var(--touch-target-comfortable);
  }
  
  .btn--sm {
    padding: 10px 16px;
    font-size: var(--text-sm);
    min-height: 40px;
  }
  
  /* USP Grid mobile - 2 columns with container query support */
  .usp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .usp-card {
    padding: var(--space-md);
  }
  
  .usp-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-sm);
  }
  
  .usp-card__icon svg {
    width: 22px;
    height: 22px;
  }
  
  .usp-card__title {
    font-size: var(--text-sm);
    margin-bottom: var(--space-xs);
  }
  
  .usp-card__text {
    font-size: var(--text-xs);
    line-height: 1.5;
  }
  
  /* Product cards mobile */
  .product-card__content {
    padding: var(--space-md);
  }
  
  .product-card__title {
    font-size: var(--text-lg);
  }
  
  .product-card__text {
    font-size: var(--text-sm);
    text-wrap: pretty;
  }
  
  /* Page header mobile */
  .page-header {
    padding: calc(var(--header-height) + var(--safe-top) + var(--space-lg)) 0 var(--space-lg);
  }
  
  .page-header h1 {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    text-wrap: balance;
  }
  
  .page-header__breadcrumb {
    font-size: var(--text-xs);
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  
  /* CTA Section mobile */
  .cta-section {
    padding: var(--space-xl) var(--space-md);
    border-radius: var(--radius-lg);
    margin: 0 var(--space-sm);
  }
  
  .cta-section h2 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    text-wrap: balance;
  }
  
  .cta-section p {
    font-size: var(--text-sm);
    text-wrap: pretty;
  }
  
  /* Footer mobile with safe areas - IMPROVED 2026 */
  .footer {
    padding: var(--space-xl) 0 calc(var(--space-md) + var(--safe-bottom));
  }
  
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .footer__brand {
    max-width: 100%;
    text-align: center;
    margin-bottom: var(--space-sm);
  }
  
  .footer__brand p {
    font-size: var(--text-sm);
    max-width: 280px;
    margin-inline: auto;
    margin-bottom: var(--space-md);
  }
  
  .footer__social {
    justify-content: center;
    gap: var(--space-sm);
  }
  
  .footer__social a {
    /* Comfortable touch target */
    width: 44px;
    height: 44px;
    min-width: unset;
    min-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .footer__social svg {
    width: 18px;
    height: 18px;
  }
  
  /* Compact accordion-style footer columns on mobile */
  .footer__column {
    text-align: left;
    border-top: 1px solid var(--border);
    padding-top: 0;
  }
  
  .footer__column h3 {
    padding: var(--space-sm) 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: color-mix(in srgb, var(--cta) 15%, transparent);
  }
  
  .footer__column h3::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform var(--t-fast) var(--ease-out);
    flex-shrink: 0;
    margin-left: var(--space-md);
  }
  
  .footer__column.is-expanded h3::after {
    transform: rotate(-135deg);
  }
  
  .footer__links {
    align-items: stretch;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-med) var(--ease-out), padding var(--t-med);
    padding-bottom: 0;
  }
  
  .footer__column.is-expanded .footer__links {
    max-height: 300px;
    padding-bottom: var(--space-md);
  }
  
  .footer__links a {
    /* Touch-friendly link height */
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: var(--space-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }
  
  .footer__links a:active {
    background: color-mix(in srgb, var(--cta) 8%, transparent);
  }
  
  .footer__bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding-top: 8px;
  }
  
  .footer__legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }
  
  /* Testimonials mobile */
  .testimonial-card {
    padding: var(--space-lg);
  }
  
  .testimonial-card__text {
    font-size: var(--text-base);
    text-wrap: pretty;
  }
  
  /* Typography mobile - fluid with text-wrap */
  h1 { 
    font-size: clamp(1.75rem, 8vw, 2.75rem); 
    text-wrap: balance;
    line-height: 1.15;
  }
  h2 { 
    font-size: clamp(1.375rem, 6vw, 2rem); 
    text-wrap: balance;
  }
  h3 { 
    font-size: clamp(1.125rem, 4vw, 1.5rem); 
    text-wrap: balance;
  }
  
  .lead {
    font-size: var(--text-base);
    text-wrap: pretty;
  }
  
  /* Grid improvements */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Extra small screens (< 380px) */
@media (max-width: 480px) {
  :root {
    --space-md: 12px;
    --space-lg: 16px;
    --container-padding: 14px;
  }
  
  .hero__stats .hero__stat:last-child {
    grid-column: span 2;
  }
  
  .hero__stat-value {
    font-size: var(--text-base);
  }
  
  .hero__stat-label {
    font-size: var(--text-xs);
  }
  
  .usp-grid {
    grid-template-columns: 1fr;
  }
  
  .btn {
    padding: 12px 18px;
    font-size: var(--text-sm);
  }
  
  .product-card__footer {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .product-card__footer .btn {
    width: 100%;
  }
}

/* Large phones / small tablets (480-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero__visual {
    height: 40vw;
    max-height: 320px;
  }
  
  .usp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--header-height) + var(--space-md)) 0 var(--space-lg);
  }
  
  .hero__visual {
    height: 35vh;
    max-height: 200px;
  }
  
  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================
   FEATURES GRID - Mobile Optimized
   ========================================= */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--t-med), box-shadow var(--t-med);
}

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

@media (max-width: 768px) {
  .feature-card {
    padding: var(--space-md);
  }
  
  .feature-card:hover {
    transform: none;
  }
}

/* =========================================
   SPECS TABLE - Modern, compact, mobile-friendly
   ========================================= */

.specs-table {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-bottom: 16px;
}

/* Inner scroller to keep overlays (hint/bar) fixed */
.specs-table__scroller {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.specs-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 620px;
}

.specs-table th,
.specs-table td {
  background: var(--bg-soft);
  color: var(--heading);
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
  font-size: var(--text-sm);
  padding: 14px 16px;
}

.specs-table th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  font-weight: 700;
  color: var(--heading);
  background: var(--bg-soft);
  letter-spacing: -0.01em;
}

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

.specs-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--heading) 2%, transparent);
}

.specs-table td:first-child {
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;
}

.specs-table td:not(:first-child),
.specs-table th:not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

/* Horizontal scroll hint + edge fade (only when needed) */
.specs-table__scroll-hint {
  position: absolute;
  right: var(--space-sm);
  bottom: 22px;
  z-index: var(--z-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  pointer-events: none;
}

/* Always-visible horizontal scrollbar indicator (especially helpful on iOS) */
.specs-table__bar {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  z-index: var(--z-base);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
}

.specs-table__thumb {
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--heading) 18%, transparent);
  width: 30%;
  transform: translateX(0);
  transition: background var(--t-med) var(--ease-out);
}

.specs-table.is-scrollable .specs-table__bar {
  opacity: 1;
}

.specs-table.is-scrollable.is-scroll-start .specs-table__scroll-hint {
  opacity: 1;
  transform: translateY(0);
}

.specs-table.is-scrollable::before,
.specs-table.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}

.specs-table.is-scrollable::before {
  left: 0;
  background: linear-gradient(to right, var(--card), transparent);
}

.specs-table.is-scrollable::after {
  right: 0;
  background: linear-gradient(to left, var(--card), transparent);
}

.specs-table.is-scrollable:not(.is-scroll-start)::before {
  opacity: 1;
}

.specs-table.is-scrollable:not(.is-scroll-end)::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .specs-table {
    border-radius: var(--radius);
  }

  .specs-table table {
    min-width: 560px;
  }

  .specs-table th,
  .specs-table td {
    padding: 10px 12px;
    font-size: var(--text-sm);
  }

  /* Encourage visible scrollbar where supported (Android/desktop WebKit) */
  .specs-table__scroller::-webkit-scrollbar {
    height: 10px;
  }

  .specs-table__scroller::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border-radius: 999px;
  }

  .specs-table__scroller::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--heading) 18%, transparent);
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--card) 92%, transparent);
  }
}

/* =========================================
   LEGAL PAGES - Mobile Optimized
   ========================================= */

.legal-content {
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .legal-content {
    padding: 0;
  }
  
  .legal-content h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-xl);
  }
  
  .legal-content h3 {
    font-size: var(--text-lg);
  }
  
  .legal-content p,
  .legal-content li {
    font-size: var(--text-sm);
    line-height: 1.7;
  }
}

/* =========================================
   TOUCH FRIENDLY INTERACTIONS (2026)
   ========================================= */

@media (hover: none) and (pointer: coarse) {
  /* Touch devices - no hover states that require hover */
  .product-card:hover {
    transform: none;
  }
  
  .product-card:hover .product-card__image img {
    transform: none;
  }
  
  .feature-card:hover {
    transform: none;
  }
  
  .btn:hover {
    transform: none;
  }
  
  /* Active states for touch with spring animation */
  .btn:active {
    transform: scale(0.97);
    transition: transform 80ms var(--ease-spring);
  }
  
  .product-card:active {
    transform: scale(0.985);
    transition: transform 80ms var(--ease-spring);
  }
  
  /* Larger tap targets - WCAG 2.2 compliant */
  .nav__link,
  .mega-menu__link,
  .mobile-nav__link,
  .footer__links a {
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    padding-block: 12px;
  }
  
  /* Focus-visible for keyboard only */
  :focus:not(:focus-visible) {
    outline: none;
  }
  
  /* Smooth scrolling momentum */
  .mobile-nav__inner,
  .mega-menu {
    -webkit-overflow-scrolling: touch;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
  
  .hero__visual,
  .product-card__image img {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --stroke: color-mix(in srgb, var(--heading) 15%, transparent);
    --stroke-strong: color-mix(in srgb, var(--heading) 25%, transparent);
  }
  
  .btn--outline {
    border-width: 3px;
  }
  
  .nav__link:focus-visible,
  .btn:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

/* Dark mode support removed - site uses single unified theme */
/* Previously there were prefers-color-scheme overrides here; removed to keep a single color system. */

/* Brand overlay for images to match design (SlimKozijn) */
.product-card__image::after, 
.project-card__image::after,
.hero__visual::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cta-bg) 10%, transparent) 0%,
    color-mix(in srgb, var(--card) 0%, transparent) 100%
  );
  pointer-events: none;
  z-index: var(--z-base);
}

/* Ensure images cover their containers perfectly */
img {
  object-fit: cover;
}

/* =========================================
   COOKIE CONSENT – 2026 Modern Design
   Glassmorphism, smooth animations, 
   responsive on all devices & browsers
   ========================================= */

/* Backdrop overlay */
.cookie-consent-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(15, 23, 42, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cookie-consent-overlay.is-visible {
  background: rgba(15, 23, 42, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

/* Main popup container – centered modal (modern standard) */
.cookie-consent-popup {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On very small screens, allow scrolling if the dialog is tall */
@media (max-width: 768px) {
  .cookie-consent-popup {
    padding: var(--space-sm);
    overflow-y: auto;
  }
}

.cookie-consent-popup.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.cookie-consent-popup.is-hiding {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

/* ---- Card ---- */
.cookie-consent-popup__card {
  width: min(520px, 100%);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--heading, var(--heading));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow:
    0 8px 40px rgba(15, 23, 42, 0.10),
    0 2px 12px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: cookieCardEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

@keyframes cookieCardEntrance {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Header row (icon + title + close) ---- */
.cookie-consent-popup__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cookie-consent-popup__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.05));
  display: grid;
  place-items: center;
  color: var(--cta-bg, var(--cta-bg));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent-popup__icon:hover {
  transform: rotate(-12deg) scale(1.08);
}

.cookie-consent-popup__icon svg {
  display: block;
}

.cookie-consent-popup__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading, var(--heading));
  flex: 1;
}

.cookie-consent-popup__close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-muted, var(--text-muted));
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cookie-consent-popup__close:hover {
  background: rgba(15, 23, 42, 0.10);
  color: var(--heading, var(--heading));
  transform: scale(1.05);
}

.cookie-consent-popup__close:active {
  transform: scale(0.95);
}

/* ---- Description text ---- */
.cookie-consent-popup__desc {
  margin: 0;
  color: var(--text, #334155);
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0.85;
}

.cookie-consent-popup__desc a {
  color: var(--link, var(--link));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.cookie-consent-popup__desc a:hover {
  color: var(--cta-bg-hover, var(--cta-bg-hover));
}

/* ---- Category toggles (settings panel) ---- */
.cookie-consent-popup__categories {
  display: none;
  flex-direction: column;
  gap: 8px;
  animation: cookieCategoriesIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cookie-consent-popup__categories.is-open {
  display: flex;
}

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

.cookie-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cookie-category:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.10);
}

.cookie-category__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.cookie-category__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--heading, var(--heading));
  display: flex;
  align-items: center;
  gap: 6px;
}

.cookie-category__badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: var(--success-dark);
  line-height: 1.4;
}

.cookie-category__badge--required {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-muted);
}

.cookie-category__detail {
  font-size: 0.75rem;
  color: var(--text-muted, var(--text-muted));
  line-height: 1.4;
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  min-width: 44px;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: var(--z-base);
  margin: 0;
}

.cookie-toggle__track {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-toggle input:checked + .cookie-toggle__track {
  background: var(--cta-bg, var(--cta-bg));
}

.cookie-toggle input:disabled + .cookie-toggle__track {
  opacity: 0.5;
}

.cookie-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
  pointer-events: none;
}

.cookie-toggle input:checked ~ .cookie-toggle__thumb {
  transform: translateX(20px);
  box-shadow: 0 1px 6px rgba(47, 95, 143, 0.3);
}

.cookie-toggle input:focus-visible + .cookie-toggle__track {
  outline: 2px solid var(--focus, rgba(47, 95, 143, 0.30));
  outline-offset: 2px;
}

/* ---- Divider ---- */
.cookie-consent-popup__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent);
  border: none;
  margin: 0;
}

/* ---- Action buttons ---- */
.cookie-consent-popup__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cookie-consent-popup__btn {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 12px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Ripple shine on hover */
.cookie-consent-popup__btn::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 55%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.cookie-consent-popup__btn:hover::after {
  transform: translateX(100%);
}

/* Primary: Accept All */
.cookie-consent-popup__btn--primary {
  background: var(--cta-bg, var(--cta-bg));
  color: #fff;
  box-shadow: 0 2px 8px rgba(47, 95, 143, 0.25),
              0 1px 2px rgba(47, 95, 143, 0.15);
}

.cookie-consent-popup__btn--primary:hover {
  background: var(--cta-bg-hover, var(--cta-bg-hover));
  box-shadow: 0 4px 16px rgba(47, 95, 143, 0.30),
              0 2px 4px rgba(47, 95, 143, 0.20);
  transform: translateY(-1px);
}

.cookie-consent-popup__btn--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(47, 95, 143, 0.20);
}

/* Secondary: Decline / Settings */
.cookie-consent-popup__btn--secondary {
  background: rgba(15, 23, 42, 0.05);
  color: var(--heading, var(--heading));
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.cookie-consent-popup__btn--secondary:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.cookie-consent-popup__btn--secondary:active {
  transform: translateY(0) scale(0.98);
  background: rgba(15, 23, 42, 0.10);
}

/* Tertiary: text-link style for settings toggle */
.cookie-consent-popup__btn--link {
  background: none;
  border: none;
  color: var(--text-muted, var(--text-muted));
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 8px 4px;
  min-height: 36px;
  flex: 0 0 auto;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cookie-consent-popup__btn--link::after {
  display: none;
}

.cookie-consent-popup__btn--link:hover {
  color: var(--heading, var(--heading));
  text-decoration-color: currentColor;
}

/* Focus states for accessibility */
.cookie-consent-popup__btn:focus-visible {
  outline: 2px solid var(--focus, rgba(47, 95, 143, 0.30));
  outline-offset: 2px;
}

/* ---- Desktop: wider layout ---- */
@media (min-width: 769px) {
  .cookie-consent-popup {
    padding-bottom: 24px;
  }

  .cookie-consent-popup__card {
    padding: 28px;
  }

  .cookie-consent-popup__actions {
    flex-wrap: nowrap;
  }
}

/* ---- Small mobile: full-width buttons stacked ---- */
@media (max-width: 480px) {
  .cookie-consent-popup__card {
    padding: 20px;
    border-radius: 16px 16px 0 0;
    gap: 14px;
  }

  .cookie-consent-popup__actions {
    flex-direction: column;
  }

  .cookie-consent-popup__btn {
    flex: none;
    width: 100%;
  }

  .cookie-consent-popup__btn--link {
    width: auto;
    align-self: center;
  }
}

/* ---- Print: hide ---- */
@media print {
  .cookie-consent-popup,
  .cookie-consent-overlay {
    display: none !important;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cookie-consent-popup,
  .cookie-consent-overlay,
  .cookie-consent-popup__card,
  .cookie-consent-popup__categories,
  .cookie-consent-popup__btn,
  .cookie-toggle__thumb {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Dark mode / auto-detect ---- */
@media (prefers-color-scheme: dark) {
  .cookie-consent-popup__card {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 8px 40px rgba(0, 0, 0, 0.30),
      0 2px 12px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .cookie-consent-popup__close {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
  }

  .cookie-consent-popup__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
  }

  .cookie-consent-popup__title {
    color: #f1f5f9;
  }

  .cookie-consent-popup__desc {
    color: #94a3b8;
  }

  .cookie-category {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
  }

  .cookie-category:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.10);
  }

  .cookie-category__name {
    color: #f1f5f9;
  }

  .cookie-consent-popup__btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e2e8f0;
  }

  .cookie-consent-popup__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .cookie-consent-popup__btn--link {
    color: #94a3b8;
  }

  .cookie-consent-popup__btn--link:hover {
    color: #e2e8f0;
  }

  .cookie-consent-popup__divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  }

  .cookie-toggle__track {
    background: rgba(255, 255, 255, 0.15);
  }

  .cookie-consent-overlay.is-visible {
    background: rgba(0, 0, 0, 0.30);
  }
}

/* =========================================
   2026 MOBILE BOTTOM NAVIGATION
   Fixed bottom nav for key actions on mobile
   Light, clean design matching site aesthetic
   ========================================= */
/* =========================================
   2026 MOBILE BOTTOM NAVIGATION
   Modern pill-style with refined glass effect
   ========================================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 6px 8px;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 8px));
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02), 0 -8px 32px rgba(0, 0, 0, 0.04);
  will-change: transform;
  transform: translateZ(0);
}

@supports (padding: max(0px)) {
  .mobile-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 12px));
  }
}

/* Hide bottom nav when keyboard is open on iOS/Android */
@media (max-height: 450px) and (max-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

/* Mobile bottom nav is hidden on all screen sizes */
.mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 768px) {
  .footer {
    padding-bottom: var(--space-lg);
  }

  main {
    padding-bottom: var(--space-md);
  }
}

/* Nav item base */
.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  min-width: 56px;
  min-height: 48px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, transform 0.15s ease;
  border-radius: 14px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Icon wrapper with pill background on active */
.mobile-bottom-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  transition: background 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.mobile-bottom-nav__icon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Label styling */
.mobile-bottom-nav__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  opacity: 0.85;
  transition: opacity 0.2s ease, font-weight 0.15s ease;
}

/* Tap/active state */
.mobile-bottom-nav__item:active {
  transform: scale(0.94);
}

.mobile-bottom-nav__item:active .mobile-bottom-nav__icon svg {
  transform: scale(0.92);
}

/* Active state - pill background on icon */
.mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cta) {
  color: var(--cta);
}

.mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cta) .mobile-bottom-nav__icon {
  background: color-mix(in srgb, var(--cta) 12%, transparent);
}

.mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cta) .mobile-bottom-nav__icon svg {
  transform: scale(1.05);
}

.mobile-bottom-nav__item.is-active:not(.mobile-bottom-nav__item--cta) .mobile-bottom-nav__label {
  font-weight: 600;
  opacity: 1;
}

/* Cart badge - modern minimal */
.mobile-bottom-nav__badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--cta-bg);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mobile-bottom-nav__badge:empty {
  display: none;
}

@keyframes badgePop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Center CTA button - elevated floating style */
.mobile-bottom-nav__item--cta {
  background: var(--cta-bg);
  color: #ffffff;
  border-radius: 16px;
  width: 52px;
  height: 52px;
  min-width: 52px;
  padding: 0;
  margin-bottom: 8px;
  box-shadow: 
    0 4px 12px color-mix(in srgb, var(--cta) 30%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: none;
  font-size: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.mobile-bottom-nav__item--cta .mobile-bottom-nav__icon {
  width: auto;
  height: auto;
  background: transparent;
}

.mobile-bottom-nav__item--cta .mobile-bottom-nav__icon svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

.mobile-bottom-nav__item--cta:active {
  transform: scale(0.92);
  box-shadow: 
    0 2px 8px color-mix(in srgb, var(--cta) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mobile-bottom-nav__item--cta.is-active {
  background: var(--cta-bg-hover);
}

/* WhatsApp styles removed */

/* =========================================
   SCROLL LOCKED STATES (2026 Best Practice)
   ========================================= */
html.scroll-locked,
body.scroll-locked,
html.cart-open,
body.cart-open {
  overflow: hidden !important;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* iOS Safari fix for scroll lock */
html.scroll-locked,
html.cart-open {
  position: fixed;
  width: 100%;
  height: 100%;
}

/* =========================================
   FOCUS VISIBLE (2026 Accessibility)
   ========================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-sm);
  z-index: var(--z-nav);
  background: var(--cta-bg, var(--cta));
  color: var(--cta-text);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: var(--space-sm);
}

/* =========================================
   LOADING SKELETON (2026 UX Pattern)
   ========================================= */
.skeleton {
  background: linear-gradient(90deg, var(--soft) 25%, color-mix(in srgb, var(--card) 50%, transparent) 50%, var(--soft) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

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

.skeleton--text {
  height: 1em;
  margin: 0.5em 0;
}

.skeleton--image {
  aspect-ratio: 16/9;
}

.skeleton--card {
  height: 200px;
}

/* =========================================
   HIGH CONTRAST MODE SUPPORT
   ========================================= */
@media (prefers-contrast: high) {
  :root {
    --stroke: color-mix(in srgb, var(--heading) 30%, transparent);
    --stroke-strong: color-mix(in srgb, var(--heading) 50%, transparent);
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* =========================================
   2026 HORIZONTAL SCROLL SECTION
   ========================================= */
.horizontal-section {
  background: var(--bg-soft);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}

.horizontal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-xl);
  padding: 0 var(--space-md);
}

.horizontal-nav {
  display: flex;
  gap: var(--space-sm);
}

.horizontal-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--heading) 6%, transparent);
  border: 1px solid var(--stroke);
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.horizontal-nav__btn:hover {
  background: color-mix(in srgb, var(--heading) 10%, transparent);
  transform: scale(1.05);
}

.horizontal-nav__btn:active {
  transform: scale(0.95);
}

.horizontal-nav__btn svg {
  width: 24px;
  height: 24px;
}

.horizontal-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--space-md), calc((100vw - 1200px) / 2 + var(--space-md)));
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.horizontal-scroll__track {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) max(var(--space-md), calc((100vw - 1200px) / 2 + var(--space-md)));
  padding-right: var(--space-3xl);
}

.project-showcase-card {
  flex: 0 0 340px;
  background: var(--card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--stroke);
  scroll-snap-align: start;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.project-showcase-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px color-mix(in oklab, var(--heading) 30%, transparent);
}

.project-showcase-card__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.project-showcase-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.project-showcase-card:hover .project-showcase-card__image img {
  transform: scale(1.05);
}

.project-showcase-card__overlay {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
}

.project-showcase-card__tag {
  background: color-mix(in srgb, var(--heading) 6%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.project-showcase-card__content {
  padding: var(--space-lg);
}

.project-showcase-card__content h3 {
  color: var(--heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
}

.project-showcase-card__content p {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

.project-showcase-card__meta {
  display: flex;
  gap: var(--space-sm);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.project-showcase-card--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-tertiary) 52%, var(--color-secondary-dark) 100%);
  border-color: transparent;
}

.project-showcase-card__cta-content {
  text-align: center;
  padding: var(--space-xl);
}

.project-showcase-card__cta-content svg {
  color: var(--dark);
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.project-showcase-card__cta-content h3 {
  color: var(--dark);
}

.project-showcase-card__cta-content p {
  color: color-mix(in srgb, var(--heading) 70%, transparent);
  margin-bottom: var(--space-lg);
}

@media (max-width: 768px) {
  .horizontal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  
  .project-showcase-card {
    flex: 0 0 300px;
  }
}

/* =========================================
   2026 BENTO GRID
   ========================================= */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--space-md);
}

.bento-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.bento-card--lg {
  grid-column: span 2;
  grid-row: span 2;
  display: grid;
  grid-template-rows: 1fr auto;
}

.bento-card--wide {
  grid-column: span 2;
}

.bento-card--accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-tertiary) 52%, var(--color-secondary-dark) 100%);
  border-color: transparent;
}

.bento-card--accent .bento-card__content {
  color: var(--dark);
}

.bento-card__visual {
  padding: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  min-height: 200px;
}

.bento-card__content {
  padding: var(--space-lg);
}

.bento-card__content h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xs);
}

.bento-card__content p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bento-card__content--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 180px;
}

.bento-card__content--row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--dark);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
}

.bento-card__icon svg {
  width: 24px;
  height: 24px;
}

.bento-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-top: var(--space-md);
  text-decoration: none;
  transition: gap var(--t-fast) var(--ease-out);
}

.bento-card__link:hover {
  gap: var(--space-sm);
}

.bento-card__link svg {
  width: 18px;
  height: 18px;
}

/* Bento 3D Viewer Animation */
.bento-3d-viewer {
  perspective: 500px;
  width: 120px;
  height: 120px;
}

.bento-3d-cube {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  animation: bento-rotate 8s ease-in-out infinite;
  margin: 20px auto;
}

@keyframes bento-rotate {
  0%, 100% { transform: rotateX(-20deg) rotateY(0deg); }
  25% { transform: rotateX(-20deg) rotateY(90deg); }
  50% { transform: rotateX(-20deg) rotateY(180deg); }
  75% { transform: rotateX(-20deg) rotateY(270deg); }
}

.bento-3d-cube__face {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--cta) 10%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.bento-3d-cube__face--front { transform: translateZ(40px); }
.bento-3d-cube__face--back { transform: rotateY(180deg) translateZ(40px); }
.bento-3d-cube__face--right { transform: rotateY(90deg) translateZ(40px); }
.bento-3d-cube__face--left { transform: rotateY(-90deg) translateZ(40px); }
.bento-3d-cube__face--top { transform: rotateX(90deg) translateZ(40px); }
.bento-3d-cube__face--bottom { transform: rotateX(-90deg) translateZ(40px); }

/* Color Picker Demo */
.color-picker-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
}

.color-picker-demo__swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--swatch-color);
  border: 3px solid var(--card);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring);
  position: relative;
}

.color-picker-demo__swatch:hover {
  transform: scale(1.15);
  z-index: var(--z-base);
}

.color-picker-demo__swatch--more {
  background: var(--soft);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
}

/* Bento Stat */
.bento-stat {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--space-xs);
}

.bento-stat__value {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}

.bento-stat__unit {
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* Delivery Animation */
.delivery-animation {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
}

.delivery-animation__truck {
  position: absolute;
  left: 20%;
  bottom: 20px;
  animation: truck-move 3s ease-in-out infinite;
}

.delivery-animation__truck svg {
  width: 48px;
  height: 48px;
  color: var(--accent);
}

@keyframes truck-move {
  0%, 100% { left: 20%; }
  50% { left: 60%; }
}

.delivery-animation__road {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--stroke) 20%, var(--stroke) 80%, transparent 100%);
  border-radius: 2px;
}

/* Partners */
.bento-partners {
  text-align: center;
  width: 100%;
}

.bento-partners__title {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  display: block;
}

.bento-partners__logos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.bento-partners__logo {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text-secondary);
  opacity: 0.6;
  transition: opacity var(--t-fast);
}

.bento-partners__logo:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .bento-card--lg {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  
  .bento-card--lg,
  .bento-card--wide {
    grid-column: span 1;
  }
}

/* =========================================
   2026 MARQUEE TICKER
   ========================================= */
.marquee-section {
  background: var(--cta);
  overflow: hidden;
  padding: var(--space-md) 0;
}

.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}

.marquee__track {
  display: flex;
  gap: var(--space-xl);
  animation: marquee-scroll 30s linear infinite;
  white-space: nowrap;
}

.marquee__item {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

/* Pause on hover */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* =========================================
   2026 BEFORE/AFTER SLIDER
   ========================================= */
.before-after-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  box-shadow: var(--shadow-hero);
}

.before-after-slider__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.before-after-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.before-after-slider__image--after {
  clip-path: inset(0 50% 0 0);
}

.before-after-slider__label {
  position: absolute;
  bottom: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: color-mix(in srgb, var(--heading) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cta-text);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.before-after-slider__image--before .before-after-slider__label {
  right: var(--space-md);
}

.before-after-slider__image--after .before-after-slider__label {
  left: var(--space-md);
}

.before-after-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: var(--z-dropdown);
}

.before-after-slider__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--card);
  box-shadow: 0 0 10px color-mix(in oklab, var(--heading) 30%, transparent);
}

.before-after-slider__handle-circle {
  position: relative;
  width: 48px;
  height: 48px;
  background: var(--card);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--heading) 20%, transparent);
  transition: transform var(--t-fast) var(--ease-spring);
}

.before-after-slider__handle-circle:hover {
  transform: scale(1.1);
}

.before-after-slider__handle-circle svg {
  width: 24px;
  height: 24px;
  color: var(--dark);
}

/* Before/After Stats */
.before-after-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.before-after-stat {
  text-align: center;
  padding: var(--space-lg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.before-after-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.before-after-stat__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  background: var(--soft);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--accent);
}

.before-after-stat__icon svg {
  width: 24px;
  height: 24px;
}

.before-after-stat__value {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--heading);
  line-height: 1.2;
}

.before-after-stat__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

@media (max-width: 640px) {
  .before-after-stats {
    grid-template-columns: 1fr;
  }
  
  .before-after-slider {
    aspect-ratio: 4/3;
  }
}

/* =========================================
   2026 SECTION DARK VARIANT
   ========================================= */
.section--dark {
  background: var(--bg-soft);
  color: var(--text);
}

/* =========================================
   2026 SCROLL ANIMATIONS
   ========================================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children animations */
.animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll:nth-child(2) { transition-delay: 50ms; }
.animate-on-scroll:nth-child(3) { transition-delay: 100ms; }
.animate-on-scroll:nth-child(4) { transition-delay: 150ms; }
.animate-on-scroll:nth-child(5) { transition-delay: 200ms; }
.animate-on-scroll:nth-child(6) { transition-delay: 250ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================
   MOBILE CONSISTENCY - Global Page Layout
   Ensures all menu pages look consistent
   ========================================= */

/* Stats Grid Component */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  text-align: center;
}

.stat-value {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.stat-label {
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  .stat-value {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .stat-label {
    font-size: var(--text-xs);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
}

/* Stats Grid - Used across pages with inline styles */
.stats-grid,
[style*="grid-template-columns: repeat(4, 1fr)"],
[style*="grid-template-columns:repeat(4"] {
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  /* Override inline 4-column grids */
  .stats-grid,
  .section--soft > .container > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-md) !important;
  }
  
  /* Stats numbers sizing */
  .stats-grid div[style*="font-size: 3rem"],
  .section--soft div[style*="font-size: 3rem"] {
    font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
  }
  
  /* Consistent button groups */
  div[style*="display: flex"][style*="gap"] {
    flex-wrap: wrap;
  }
  
  .section div[style*="display: flex"]:has(.btn) {
    flex-direction: column;
    width: 100%;
  }
  
  .section div[style*="display: flex"]:has(.btn) .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Single column for very small screens */
  .section--soft > .container > div[style*="grid-template-columns"],
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* About Links - Mobile Optimization */
.about-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .about-links {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .about-link {
    padding: var(--space-md);
    gap: var(--space-md);
  }
  
  .about-link__icon {
    width: 44px;
    height: 44px;
  }
  
  .about-link__content h3 {
    font-size: var(--text-base);
  }
  
  .about-link__content p {
    font-size: var(--text-sm);
  }
  
  .about-link__arrow {
    display: none;
  }
}

/* Page Header Product Variant - Mobile consistency */
.page-header--product {
  padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
}

@media (max-width: 768px) {
  .page-header--product {
    padding: calc(var(--header-height) + var(--safe-top) + var(--space-lg)) 0 var(--space-lg);
  }
  
  .page-header--product h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
}

/* Product hero split (Vouwwanden / Vliesgevels) – Mobile centered + image below */
.product-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 768px) {
  .product-hero-split {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .product-hero-copy {
    order: 1;
    text-align: center;
  }

  .product-hero-media {
    order: 2;
    width: 100%;
  }

  .product-hero-copy li {
    justify-content: center;
  }

  .product-hero-actions {
    justify-content: center;
  }
}

/* Product Overview Grid - Mobile */
.product-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .product-overview {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .product-overview__card {
    padding: var(--space-lg);
  }
  
  .product-overview__icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-sm);
  }
  
  .product-overview__title {
    font-size: var(--text-lg);
  }
}

/* Project Filters - Mobile */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
  .project-filters {
    justify-content: flex-start;
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .project-filters::-webkit-scrollbar {
    display: none;
  }
  
  .project-filter {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
}

/* Project Grid - Mobile */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .project-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .project-card__content {
    padding: var(--space-md);
  }
  
  .project-card__title {
    font-size: var(--text-lg);
  }
}

/* Section Title/Subtitle - Consistent on mobile */
.section__title {
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}

.section__subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  text-wrap: pretty;
}

@media (max-width: 768px) {
  .section__title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
  }
  
  .section__subtitle {
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
  }
}

/* Shop Hero - Mobile consistency */
.shop-hero {
  background: var(--bg-soft);
  color: var(--text);
  padding: var(--space-3xl) 0;
  text-align: center;
}

@media (max-width: 768px) {
  .shop-hero {
    padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
  }
  
  .shop-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  
  .shop-hero p {
    font-size: var(--text-sm);
  }
  
  .shop-hero__badges {
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .shop-hero__badge {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
  }
}

/* Shop Layout - Mobile */
.shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  padding: var(--space-2xl) 0;
}

@media (max-width: 1024px) {
  .shop-layout {
    grid-template-columns: 1fr;
    padding: var(--space-lg) 0;
  }
}

/* FAQ Sections - Mobile consistency */
.page-home .home-seo-grid {
  align-items: start;
  gap: var(--space-xl);
}

.page-home .home-seo-prose p + p {
  margin-top: var(--space-md);
}

.page-home .home-seo-card {
  text-align: left;
}

.page-home .home-seo-card .usp-card__text {
  max-width: none;
}

.page-home .home-seo-list {
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
  list-style: none;
}

.page-home .home-seo-note {
  margin-top: var(--space-md);
}

/* =========================================
   HOME FEATURES CARD - Advanced Animations
   ========================================= */
.home-features {
  padding: var(--space-xl);
}

.home-features__title {
  margin-bottom: var(--space-lg);
  position: relative;
}

.home-features__list {
  gap: var(--space-md);
}

.home-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--soft) 50%, transparent);
  border-radius: var(--radius);
  border-left: 3px solid var(--cta);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.home-features__item:hover {
  background: color-mix(in srgb, var(--cta) 8%, var(--card));
  transform: translateX(4px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cta) 15%, transparent);
}

.home-features__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 100%);
  border-radius: var(--radius-sm);
  color: var(--cta-text);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cta) 30%, transparent);
}

.home-features__icon svg {
  width: 22px;
  height: 22px;
}

.home-features__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-features__content strong {
  color: var(--heading);
  font-size: var(--text-base);
}

.home-features__content span {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.home-features__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--stroke);
}

/* Scroll Reveal Animations */
[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: 
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for list items */
[data-scroll-reveal][data-delay="1"] { transition-delay: 0.05s; }
[data-scroll-reveal][data-delay="2"] { transition-delay: 0.1s; }
[data-scroll-reveal][data-delay="3"] { transition-delay: 0.15s; }
[data-scroll-reveal][data-delay="4"] { transition-delay: 0.2s; }
[data-scroll-reveal][data-delay="5"] { transition-delay: 0.25s; }
[data-scroll-reveal][data-delay="6"] { transition-delay: 0.3s; }

/* Enhanced entrance animation variants */
.home-features__item[data-scroll-reveal] {
  transform: translateX(-30px) translateY(10px);
}

.home-features__item[data-scroll-reveal].is-revealed {
  transform: translateX(0) translateY(0);
}

.home-features__title[data-scroll-reveal] {
  transform: translateY(0) scale(0.95);
}

.home-features__title[data-scroll-reveal].is-revealed {
  transform: translateY(0) scale(1);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .home-features {
    padding: var(--space-lg);
  }

  .home-features__item {
    padding: var(--space-sm) var(--space-md);
  }

  .home-features__icon {
    width: 36px;
    height: 36px;
  }

  .home-features__icon svg {
    width: 18px;
    height: 18px;
  }
}

/* =========================================
   2026 MODERN SECTION HEADINGS SYSTEM
   Animated reveals, refined typography, premium feel
   ========================================= */

/* Keyframes for text animations */
@keyframes letterReveal {
  0% {
    opacity: 0;
    transform: translateY(20px) rotateX(-40deg);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeUpSubtle {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes underlineGrow {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Homepage section headings - Modern refined style */
.page-home .section h2,
.page-home #usp-title,
.page-home #products-title,
.page-home #home-seo-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--heading);
  position: relative;
  display: inline-block;
}

/* Animated letter spans (applied via JS) */
.page-home .section h2 .letter,
.page-home .section .lead .letter {
  display: inline-block;
  opacity: 0;
}

/* Trigger animation when element is in view */
.page-home .section h2.is-animated .letter,
.page-home .section .lead.is-animated .letter {
  animation: letterReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays for letters - applied via CSS custom property */
.page-home .section h2.is-animated .letter { animation-delay: calc(var(--i, 0) * 0.025s); }
.page-home .section .lead.is-animated .letter { animation-delay: calc(0.2s + var(--i, 0) * 0.015s); }

/* Word wrapper for proper spacing */
.page-home .section h2 .word,
.page-home .section .lead .word {
  display: inline-block;
  white-space: nowrap;
}

/* Lead text under headings - more refined */
.page-home .section .lead {
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Section badge - smaller and more refined */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--link) 8%, transparent), color-mix(in srgb, var(--cta) 6%, transparent));
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--link) 15%, transparent);
  margin-bottom: var(--space-sm);
  position: relative;
  overflow: hidden;
  animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animated shine effect */
.section-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, white 40%, transparent),
    transparent
  );
  animation: badgeShine 4s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes badgeShine {
  0%, 100% { left: -100%; }
  50%, 80% { left: 100%; }
}

/* Decorative accent line under headings */
.page-home .section .text-center h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--link), var(--cta));
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
  transform-origin: center;
  animation: underlineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.4s;
  transform: scaleX(0);
}

/* Desktop: align SEO heading/subtitle with the 2-column content below */
@media (min-width: 769px) {
  .page-home section[aria-labelledby="home-seo-title"] .text-center {
    text-align: left;
  }

  /* Tablet/Desktop: keep prose left and features card right */
  .page-home section[aria-labelledby="home-seo-title"] .home-seo-card {
    grid-column: 2;
    align-self: start;
  }

  .page-home section[aria-labelledby="home-seo-title"] .home-seo-prose {
    grid-column: 1;
    align-self: start;
  }

  .page-home section[aria-labelledby="home-seo-title"] .text-center p,
  .page-home section[aria-labelledby="home-seo-title"] .text-center .lead {
    margin-left: 0;
    margin-right: 0;
  }

  .page-home section[aria-labelledby="home-seo-title"] .text-center h2::after {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Hover effect for section headings */
.page-home .section h2 {
  transition: color 0.3s ease;
}

.page-home .section h2:hover {
  color: var(--link);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .page-home .section h2,
  .page-home #usp-title,
  .page-home #products-title,
  .page-home #home-seo-title {
    font-size: clamp(1.1rem, 5vw, 1.35rem);
  }
  
  .page-home .section .lead {
    font-size: 0.875rem;
  }
  
  .section-badge {
    font-size: var(--text-xs);
    padding: 4px 10px;
  }
  
  .page-home .section .text-center h2::after {
    width: 32px;
  }
}

.mb-5 {
  margin-bottom: var(--space-xl);
}

/* =========================================
   DARK SECTION VARIANT
   ========================================= */

/* Fade-to-dark transition on preceding section */
.section--fade-to-dark {
  position: relative;
  padding-bottom: clamp(140px, 18vw, 220px);
}

.section--fade-to-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg) 97%, var(--heading)) 10%,
    color-mix(in srgb, var(--bg) 92%, var(--heading)) 20%,
    color-mix(in srgb, var(--bg) 85%, var(--heading)) 30%,
    color-mix(in srgb, var(--bg) 75%, var(--heading)) 40%,
    color-mix(in srgb, var(--bg) 60%, var(--heading)) 50%,
    color-mix(in srgb, var(--bg) 45%, var(--heading)) 60%,
    color-mix(in srgb, var(--bg) 30%, var(--heading)) 70%,
    color-mix(in srgb, var(--bg) 15%, var(--heading)) 80%,
    color-mix(in srgb, var(--bg) 5%, var(--heading)) 90%,
    var(--heading) 100%
  );
  pointer-events: none;
  z-index: var(--z-base);
}

.section--dark {
  background: linear-gradient(135deg, var(--heading) 0%, color-mix(in srgb, var(--heading) 90%, var(--cta)) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  /* Remove top padding since transition handles spacing */
  margin-top: -1px; /* Prevent any gap */
}

/* Pattern overlay */
.section--dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.section--dark h2,
.section--dark .lead {
  color: #fff;
}

.section--dark .section-badge {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* Ensure home "Waarom aluminium" header stays readable on dark background */
.page-home section[aria-labelledby="why-aluminium-title"] .section-badge,
.page-home section[aria-labelledby="why-aluminium-title"] h2,
.page-home section[aria-labelledby="why-aluminium-title"] .lead {
  color: #fff;
}

/* =========================================
   BENEFITS GRID (Stats Cards)
   ========================================= */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
  z-index: var(--z-base);
}

.benefit-card {
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.benefit-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.benefit-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 100%);
  border-radius: var(--radius);
  color: var(--cta-text);
}

.benefit-card__icon svg {
  width: 28px;
  height: 28px;
}

.benefit-card__number {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-xs);
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.benefit-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: #fff;
}

.benefit-card__text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

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

@media (max-width: 640px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .benefit-card {
    padding: var(--space-lg);
  }
}

/* =========================================
   PROCESS TIMELINE
   ========================================= */
.process-timeline {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  position: relative;
}

.process-step__marker {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.process-step__number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 100%);
  color: var(--cta-text);
  font-size: var(--text-lg);
  font-weight: 700;
  border-radius: 50%;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--cta) 40%, transparent);
  position: relative;
  z-index: var(--z-base);
}

.process-step__line {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + var(--space-xl) - 48px);
  background: linear-gradient(to bottom, var(--cta), color-mix(in srgb, var(--cta) 20%, transparent));
}

.process-step--final .process-step__line {
  display: none;
}

.process-step__content {
  flex: 1;
  padding-top: var(--space-xs);
}

.process-step__content h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--space-xs);
}

.process-step__content p {
  color: var(--text-muted);
  line-height: 1.7;
}

.process-step__content a {
  color: var(--cta);
  font-weight: 500;
}

@media (max-width: 640px) {
  .process-step {
    gap: var(--space-md);
  }
  
  .process-step__number {
    width: 40px;
    height: 40px;
    font-size: var(--text-base);
  }
  
  .process-step__line {
    top: 40px;
    height: calc(100% + var(--space-xl) - 40px);
  }
}

/* =========================================
   COMPARISON TABLE
   ========================================= */
.comparison-wrapper {
  overflow-x: visible;
}

.comparison-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--heading) 8%, transparent);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--stroke);
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

/* No-scroll specs table variant (used on sustainability compare section) */
.specs-table--no-scroll {
  overflow: hidden;
}

.specs-table--no-scroll .specs-table__scroller {
  overflow-x: visible;
  overflow-y: visible;
  touch-action: auto;
}

.specs-table--no-scroll table {
  min-width: 0;
  table-layout: fixed;
}

.specs-table--no-scroll th,
.specs-table--no-scroll td {
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
}

.comparison-table thead th {
  background: var(--heading);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-table thead th.comparison-table__highlight {
  background: var(--cta);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:hover {
  background: color-mix(in srgb, var(--soft) 50%, transparent);
}

.comparison-table td:first-child {
  font-weight: 500;
  color: var(--heading);
}

.comparison-table__highlight {
  background: color-mix(in srgb, var(--cta) 8%, transparent);
  color: var(--cta);
  font-weight: 500;
}

.comparison-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-md);
}

@media (max-width: 768px) {
  /* Hide original table on mobile */
  .comparison-table {
    display: none;
  }
  
  /* Mobile card-based comparison */
  .comparison-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .comparison-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .comparison-mobile-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--heading) 8%, transparent);
    border: 1px solid var(--stroke);
  }
  
  .comparison-mobile-card--highlight {
    border: 2px solid var(--cta);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--cta) 20%, transparent);
  }
  
  .comparison-mobile-card__header {
    padding: var(--space-md) var(--space-lg);
    background: var(--heading);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .comparison-mobile-card--highlight .comparison-mobile-card__header {
    background: var(--cta);
  }
  
  .comparison-mobile-card__badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .comparison-mobile-card__body {
    padding: 0;
  }
  
  .comparison-mobile-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--stroke);
  }
  
  .comparison-mobile-card__row:last-child {
    border-bottom: none;
  }
  
  .comparison-mobile-card__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
  }
  
  .comparison-mobile-card__value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--heading);
    text-align: right;
    max-width: 55%;
  }
  
  .comparison-mobile-card--highlight .comparison-mobile-card__value {
    color: var(--cta);
  }
  
  .comparison-mobile-card__value--winner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .comparison-mobile-card__value--winner::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 700;
  }
  
  .comparison-note {
    font-size: var(--text-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--soft);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
  }
}

@media (min-width: 769px) {
  .comparison-mobile-cards {
    display: none;
  }
}

/* =========================================
   APPLICATIONS GRID
   ========================================= */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.application-card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.application-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cta), var(--cta-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}

.application-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px color-mix(in srgb, var(--heading) 12%, transparent);
  border-color: var(--cta);
}

.application-card:hover::before {
  transform: scaleX(1);
}

.application-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cta) 10%, transparent);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  color: var(--cta);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.application-card:hover .application-card__icon {
  background: var(--cta);
  color: var(--cta-text);
}

.application-card__icon svg {
  width: 28px;
  height: 28px;
}

.application-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: var(--space-sm);
}

.application-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.application-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cta);
  transition: color var(--t-fast);
}

.application-card__link:hover {
  color: var(--cta-hover);
}

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

@media (max-width: 640px) {
  .applications-grid {
    grid-template-columns: 1fr;
  }
  
  .application-card {
    padding: var(--space-lg);
  }
}

/* =========================================
   TRUST GRID
   ========================================= */
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--heading) 10%, transparent);
  border-color: var(--cta);
}

.trust-item__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--cta), var(--cta-hover));
  border-radius: var(--radius);
  color: var(--cta-text);
  flex-shrink: 0;
}

.trust-item__icon svg {
  width: 22px;
  height: 22px;
}

.trust-item__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-item__content strong {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--heading);
}

.trust-item__content span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .trust-grid {
    gap: var(--space-sm);
  }
  
  .trust-item {
    flex: 1 1 calc(50% - var(--space-sm));
    min-width: 200px;
    padding: var(--space-sm) var(--space-md);
  }
  
  .trust-item__icon {
    width: 36px;
    height: 36px;
  }
  
  .trust-item__icon svg {
    width: 18px;
    height: 18px;
  }
}

/* =========================================
   ADVANCED SCROLL REVEAL ANIMATIONS
   Many different animation variants
   ========================================= */

/* Extended delay values */
[data-scroll-reveal][data-delay="7"] { transition-delay: 0.35s; }
[data-scroll-reveal][data-delay="8"] { transition-delay: 0.4s; }
[data-scroll-reveal][data-delay="9"] { transition-delay: 0.45s; }
[data-scroll-reveal][data-delay="10"] { transition-delay: 0.5s; }

/* FADE animations */
[data-scroll-reveal][data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(20px);
}

[data-scroll-reveal][data-anim="fade-down"] {
  opacity: 0;
  transform: translateY(-20px);
}

[data-scroll-reveal][data-anim="fade-left"] {
  opacity: 0;
  transform: translateX(-20px);
}

[data-scroll-reveal][data-anim="fade-right"] {
  opacity: 0;
  transform: translateX(20px);
}

/* ZOOM animations */
[data-scroll-reveal][data-anim="zoom-in"] {
  opacity: 0;
  transform: scale(0.8);
}

[data-scroll-reveal][data-anim="zoom-out"] {
  opacity: 0;
  transform: scale(1.2);
}

[data-scroll-reveal][data-anim="scale-up"] {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
}

/* FLIP animations */
[data-scroll-reveal][data-anim="flip-up"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(30deg) translateY(40px);
}

[data-scroll-reveal][data-anim="flip-left"] {
  opacity: 0;
  transform: perspective(1000px) rotateY(30deg) translateX(-30px);
}

/* SLIDE animations */
[data-scroll-reveal][data-anim="slide-right"] {
  opacity: 0;
  transform: translateX(-60px);
}

[data-scroll-reveal][data-anim="slide-left"] {
  opacity: 0;
  transform: translateX(60px);
}

/* BOUNCE animation */
[data-scroll-reveal][data-anim="bounce-in"] {
  opacity: 0;
  transform: scale(0.5);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* BLUR animation */
[data-scroll-reveal][data-anim="blur-in"] {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.95);
}

/* ROTATE animations */
[data-scroll-reveal][data-anim="rotate-in"] {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
}

/* TILT animation */
[data-scroll-reveal][data-anim="tilt-in"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(10deg) rotateY(-5deg) translateY(30px);
}

/* POP animation */
[data-scroll-reveal][data-anim="pop-in"] {
  opacity: 0;
  transform: scale(0.7);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* TYPEWRITER - special reveal for text */
[data-scroll-reveal][data-anim="typewriter"] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

/* SPLIT TEXT animation */
[data-scroll-reveal][data-anim="split-text"] {
  opacity: 0;
  transform: translateY(20px);
  letter-spacing: 0.1em;
}

/* All revealed states */
[data-scroll-reveal][data-anim].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
  letter-spacing: normal;
}

/* Custom timing for specific animations */
[data-scroll-reveal][data-anim="bounce-in"] {
  transition-duration: 0.4s;
}

[data-scroll-reveal][data-anim="blur-in"] {
  transition-duration: 0.4s;
  transition-property: opacity, filter, transform;
}

[data-scroll-reveal][data-anim="typewriter"] {
  transition-duration: 0.5s;
  transition-property: opacity, clip-path;
}

[data-scroll-reveal][data-anim="flip-up"],
[data-scroll-reveal][data-anim="flip-left"] {
  transition-duration: 0.4s;
}

[data-scroll-reveal][data-anim="tilt-in"] {
  transition-duration: 0.4s;
}

/* =========================================
   COUNTER ANIMATION (JavaScript driven)
   ========================================= */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* Reduced motion - disable all fancy animations */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal],
  [data-scroll-reveal][data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

.faq-items {
  display: grid;
  gap: var(--space-md);
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Allow <details> to be styled like a card */
details.faq-item {
  padding: 0;
}

details.faq-item > summary {
  list-style: none;
}

details.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--heading);
  background: transparent;
  text-align: left;
  cursor: pointer;
  min-height: var(--touch-target-min);
  -webkit-tap-highlight-color: transparent;
}

.faq-question svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--t-med) var(--ease-out);
}

.faq-item[open] .faq-question svg,
.faq-item.is-open .faq-question svg {
  transform: rotate(180deg);
}

.faq-question:hover {
  background: color-mix(in srgb, var(--soft) 55%, transparent);
}

.faq-question:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: -2px;
}

.faq-answer__inner {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--text-secondary);
  line-height: var(--lh-prose);
}

.faq-answer__inner a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent);
}

.faq-answer__inner a:hover {
  color: var(--cta);
  text-decoration-color: var(--cta);
}

.faq-section {
  margin-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
  .faq-section {
    margin-bottom: var(--space-xl);
  }
  
  .faq-section__title {
    font-size: var(--text-lg);
  }
  
  .faq-question {
    padding: var(--space-md);
    font-size: var(--text-sm);
    min-height: var(--touch-target-min);
  }
  
  .faq-answer__inner {
    padding: 0 var(--space-md) var(--space-md);
    font-size: var(--text-sm);
  }
}

/* Consistent CTA buttons on mobile */
@media (max-width: 768px) {
  .cta-section .btn,
  .page-header + .section .btn,
  .section:last-of-type .btn {
    min-height: var(--touch-target-min);
  }
  
  /* Full-width CTAs on mobile when stacked */
  .flex:has(.btn) {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .flex:has(.btn) .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Consistent image aspect ratios on mobile */
@media (max-width: 768px) {
  .grid-2 img,
  .section img:not(.logo img):not(.usp-card__icon img) {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
  }
}

/* Mobile-text-center helper enhancement */
@media (max-width: 768px) {
  .mobile-text-center,
  .grid-2 > div:first-child {
    text-align: center;
  }
  
  .mobile-text-center p,
  .mobile-text-center .lead,
  .grid-2 > div:first-child p {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  
  .mobile-text-center div[style*="display: flex"],
  .grid-2 > div:first-child div[style*="display: flex"] {
    justify-content: center;
  }
}

/* Ensure consistent footer across all pages */
.footer {
  background: var(--bg-soft);
  color: var(--text);
  padding: var(--space-3xl) 0 var(--space-xl);
}

/* Override white text colors for light footer */
.footer__brand .logo {
  color: var(--heading);
}

.footer__brand p {
  color: var(--text-muted);
}

.footer__social a {
  background: var(--card);
  border: 1px solid var(--border);
}

.footer__social a:hover {
  background: var(--cta);
  border-color: var(--cta);
}

.footer__social svg {
  color: var(--text);
}

.footer__column h3 {
  color: var(--heading);
}

.footer__links a {
  color: var(--text-muted);
}

.footer__links a:hover {
  color: var(--heading);
}

.footer__bottom {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.footer__legal a {
  color: var(--text-muted);
}

.footer__legal a:hover {
  color: var(--heading);
}

/* Simple footer variant (used on most subpages) */
.footer .footer__bottom[style*="border-top: none"] {
  padding-top: var(--space-lg);
  border-top: none;
}

@media (max-width: 768px) {
  .footer {
    padding: var(--space-xl) 0 calc(var(--space-md) + var(--safe-bottom));
  }
  
  /* Simplified footer on mobile */
  .footer__bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  
  .footer__legal {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Simple footer adjustments */
  .footer .footer__bottom[style*="border-top: none"] {
    padding: var(--space-lg) 0;
  }
}

/* =========================================
   PRINT STYLES (Often Forgotten!)
   ========================================= */
@media print {
  .header,
  .footer,
  .mobile-bottom-nav,
  .chat-widget,
  .back-to-top,
  .cookie-consent-popup,
  .cookie-consent-overlay {
    display: none !important;
  }
  
  body {
    padding: 0 !important;
  }
  
  main {
    padding: 0 !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--text-muted);
  }
}
/* =========================================
   MOBILE SCROLL OPTIMIZATION (2026 Standards)
   Ensures smooth scrolling, proper footer ending,
   and best touch experience across all mobile devices
   ========================================= */

/* Ensure page scrolls naturally to footer end */
@media (max-width: 768px) {
  /* Remove overscroll effects that can interfere with natural scrolling */
  html, body {
    overscroll-behavior: none;
  }
  
  /* Main content area - ensure it's scrollable */
  main {
    /* Allow content to determine height naturally */
    min-height: 0;
    /* Ensure smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
  }
  
  /* Footer adjustments when mobile bottom nav exists - :has() for modern browsers */
  body:has(.mobile-bottom-nav) .footer {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 70px) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
  
  /* Fallback for older browsers - uses JS-set class */
  body.has-mobile-bottom-nav .footer {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 70px) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
  
  /* Ensure all scrollable containers have proper touch behavior */
  .horizontal-scroll,
  .mobile-nav,
  .specs-table,
  [style*="overflow"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Ensure fixed elements don't block touch on scroll areas */
  .header,
  .mobile-bottom-nav {
    touch-action: none;
  }
  
  /* Cookie popup positioning above mobile nav – handled in cookie consent section */
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  body {
    /* Fix iOS Safari bounce scroll */
    height: -webkit-fill-available;
  }
  
  main {
    /* Ensure main content respects iOS viewport */
    min-height: 0;
  }
  
  /* Fix iOS rubber band effect at page bottom */
  .footer {
    transform: translateZ(0);
  }
}

/* Android Chrome specific fixes */
@supports (display: -webkit-box) and (not (-webkit-touch-callout: none)) {
  body {
    /* Prevent address bar hide/show jank */
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Landscape mobile - ensure footer is reachable */
@media (max-width: 926px) and (orientation: landscape) {
  .footer {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  }
  
  /* Reduce fixed nav height in landscape */
  .mobile-bottom-nav {
    padding: var(--space-xs) var(--space-md);
  }
  
  /* WhatsApp styles removed */
}

/* Prevent momentum scroll issues when modals/nav open */
body.mobile-nav-open,
body.nav-open,
body.scroll-locked,
body.cart-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  /* Preserve scroll position when locking */
  top: var(--scroll-position, 0);
}

/* Ensure smooth scroll snap for horizontal sections on mobile */
@media (max-width: 768px) {
  .horizontal-scroll {
    scroll-snap-type: x proximity;
    scroll-padding: 16px;
  }
  
  .horizontal-scroll__track > * {
    scroll-snap-align: start;
  }
}

/* Extra touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets on pure touch devices */
  .footer__links a {
    min-height: 44px;
    padding: 10px 0;
  }
  
  .footer__social a {
    width: 48px;
    height: 48px;
  }
  
  /* Remove hover effects that can cause sticky states on touch */
  .btn:hover,
  .product-card:hover,
  .feature-card:hover {
    transform: none;
  }
  
  /* Ensure links have adequate spacing for touch */
  .nav__link,
  .mega-menu__link,
  .mobile-nav__link {
    min-height: 44px;
  }
}

/* =========================================
   NEWS ARTICLE SECTION - 2026 Updates
   Innovative 3D design for readability
   ========================================= */

.section--news-article {
  background: linear-gradient(180deg, var(--bg) 0%, var(--soft) 100%);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

.section--news-article::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cta) 5%, transparent), transparent 70%);
  pointer-events: none;
}

.news-article-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 12px 24px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.05),
    0 0 0 1px color-mix(in srgb, var(--heading) 5%, transparent);
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  /* Subtle 3D lift effect */
  transform-style: preserve-3d;
  perspective: 1000px;
  scroll-margin-top: calc(var(--header-height) + var(--space-lg));
}

/* Premium paper texture overlay */
.news-article-wrapper::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Article Header */
.news-article__header {
  background: linear-gradient(135deg, var(--cta) 0%, color-mix(in srgb, var(--cta) 85%, var(--heading)) 100%);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}

.news-article__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.828zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.828zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.344 60h2.828L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.828zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413L30 12.142l7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='rgba(255,255,255,0.03)' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events: none;
}

.news-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.news-article__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.news-article__badge svg {
  flex-shrink: 0;
}

.news-article__date {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  font-weight: 500;
}

.news-article__title {
  color: #ffffff;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-md);
  max-width: 800px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.news-article__subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  max-width: 700px;
  font-weight: 500;
}

/* Article Content Layout */
.news-article__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: clamp(32px, 5vw, 56px);
}

@media (min-width: 1024px) {
  .news-article__content {
    grid-template-columns: 1fr 280px;
  }
}

/* Article Body - Typography focused */
.news-article__body {
  max-width: 720px;
}

.news-article__lead {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.75;
  color: var(--text);
  font-weight: 400;
  margin-bottom: var(--space-xl);
  position: relative;
  padding-left: 0;
}

/* Drop cap */
.news-article__dropcap {
  float: left;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 0.8;
  color: var(--cta);
  margin-right: 12px;
  margin-top: 6px;
  font-family: Georgia, 'Times New Roman', serif;
}

/* Content Sections */
.news-article__section {
  margin-bottom: var(--space-xl);
}

.news-article__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.news-article__section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--cta) 12%, transparent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.news-article__section-icon svg {
  fill: var(--cta);
}

.news-article__section p {
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: var(--space-md);
  font-family: var(--font-family);
}

.news-article__section p:last-child {
  margin-bottom: 0;
}

.news-article__section strong {
  font-weight: 700;
  color: var(--heading);
}

/* Highlight Box */
.news-article__highlight {
  display: flex;
  gap: var(--space-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cta) 8%, var(--bg)) 0%, color-mix(in srgb, var(--cta) 4%, var(--bg)) 100%);
  border-left: 4px solid var(--cta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

.news-article__highlight-icon {
  flex-shrink: 0;
}

.news-article__highlight-icon svg {
  fill: var(--cta);
}

.news-article__highlight-content {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text);
}

.news-article__highlight-content strong {
  color: var(--cta);
  font-weight: 700;
}

/* Stats Grid */
.news-article__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (max-width: 640px) {
  .news-article__stats {
    grid-template-columns: 1fr;
  }
}

.news-article__stat {
  background: var(--soft);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.news-article__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cta), color-mix(in srgb, var(--cta) 60%, var(--link)));
}

.news-article__stat-value {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--cta);
  display: block;
  line-height: 1.1;
}

.news-article__stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

/* CTA Section */
.news-article__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: linear-gradient(135deg, var(--soft) 0%, color-mix(in srgb, var(--cta) 5%, var(--soft)) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

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

.news-article__cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cta) 10%, transparent), transparent 70%);
  pointer-events: none;
}

.news-article__cta-content {
  position: relative;
}

.news-article__cta-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--space-xs);
}

.news-article__cta-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 400px;
  margin: 0;
}

.news-article__cta-buttons {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  position: relative;
}

/* Sidebar */
.news-article__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (max-width: 1023px) {
  .news-article__sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width: 1024px) {
  .news-article__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    align-self: start;
  }
}

/* Table of Contents */
.news-article__toc {
  background: var(--soft);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.news-article__toc-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-article__toc-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.news-article__toc-link {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-xs) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.news-article__toc-link:hover {
  color: var(--cta);
  border-left-color: var(--cta);
  padding-left: var(--space-md);
}

/* Author Box */
.news-article__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--soft);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.news-article__author-avatar {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--cta) 15%, var(--bg));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.news-article__author-avatar svg {
  fill: var(--cta);
}

.news-article__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-article__author-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--heading);
}

.news-article__author-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Share Section */
.news-article__share {
  background: var(--soft);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.news-article__share-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--heading);
  display: block;
  margin-bottom: var(--space-md);
}

.news-article__share-buttons {
  display: flex;
  gap: var(--space-sm);
}

.news-article__share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  cursor: pointer;
}

.news-article__share-btn svg {
  fill: var(--text-muted);
  transition: fill var(--t-fast) var(--ease-out);
}

.news-article__share-btn:hover {
  background: var(--cta);
  border-color: var(--cta);
  transform: translateY(-2px);
}

.news-article__share-btn:hover svg {
  fill: #ffffff;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .news-article__header {
    padding: var(--space-lg);
  }
  
  .news-article__content {
    padding: var(--space-lg);
  }
  
  .news-article__lead {
    font-size: 1.0625rem;
  }
  
  .news-article__dropcap {
    font-size: 3.5rem;
    margin-right: 8px;
  }
  
  .news-article__highlight {
    flex-direction: column;
    padding: var(--space-md);
  }
  
  .news-article__cta {
    padding: var(--space-lg);
  }
  
  .news-article__cta-buttons {
    width: 100%;
  }
  
  .news-article__cta-buttons .btn {
    flex: 1;
    justify-content: center;
  }
}

/* Ensure news article is always visible - no scroll reveal delay */
.news-article-wrapper {
  opacity: 1 !important;
  transform: none !important;
}

.section--news-article {
  opacity: 1;
  visibility: visible;
}

/* =========================================
   NEWS HUB (OVERVIEW + PREVIEW CARDS)
   Reuses existing typography + spacing tokens
   ========================================= */

.news-hub__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .news-hub__list {
    grid-template-columns: 1fr;
  }
}

.news-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: var(--shadow-soft);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.news-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--cta) 12%, transparent);
  color: var(--heading);
  border: 1px solid color-mix(in srgb, var(--cta) 18%, transparent);
}

.news-card__date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
}

.news-card__title {
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--heading);
  font-weight: 800;
  margin: 0;
}

.news-card__excerpt {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.news-card__btn.btn {
  padding: 10px 16px;
}

.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--cta);
  margin-top: auto;
  padding-top: var(--space-sm);
  transition: color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}

.news-card__link:hover {
  color: var(--cta-hover);
  gap: var(--space-sm);
}

.news-card__link svg {
  transition: transform var(--t-fast) var(--ease-out);
}

.news-card__link:hover svg {
  transform: translateX(4px);
}

/* Card hover effect */
.news-card {
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

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

/* =========================================
   FLOATING COMPARE BAR (Global)
   ========================================= */

.compare-floating-bar {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  padding: var(--space-md) var(--space-lg);
  z-index: var(--z-header);
  transition: bottom var(--t-normal) var(--ease-out);
}

.compare-floating-bar--visible {
  bottom: 0;
}

.compare-bar__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.compare-bar__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--heading);
  font-weight: 600;
}

.compare-bar__text {
  color: var(--text-muted);
  font-weight: 400;
}

.compare-bar__icon {
  color: var(--cta);
}

.compare-bar__count {
  background: var(--cta);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
}

.compare-bar__actions {
  display: flex;
  gap: var(--space-sm);
}

.compare-bar__btn {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  border: none;
}

.compare-bar__btn--primary {
  background: var(--cta);
  color: white;
}

.compare-bar__btn--primary:hover {
  background: var(--cta-hover);
}

.compare-bar__btn--clear {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--stroke);
}

.compare-bar__btn--clear:hover {
  background: var(--soft);
  color: var(--text);
}

.compare-bar__products {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.compare-bar__product {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--heading) 8%, transparent);
}

.compare-bar__product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: white;
}

.compare-bar__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--error);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: var(--z-base);
}

.compare-bar__product:hover .compare-bar__remove {
  opacity: 1;
}

/* Mobile adjustments for compare bar */
@media (max-width: 640px) {
  .compare-floating-bar {
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 8px));
  }
  
  .compare-bar__content {
    gap: var(--space-xs);
  }
  
  .compare-bar__info {
    font-size: var(--text-sm);
  }
  
  .compare-bar__text {
    display: none;
  }
  
  .compare-bar__btn {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
  }
  
  .compare-bar__products {
    gap: var(--space-xs);
    margin-top: var(--space-xs);
  }
  
  .compare-bar__product {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  
  .compare-bar__product img {
    width: 100%;
    height: 100%;
  }
  
  .compare-bar__remove {
    width: 16px;
    height: 16px;
    font-size: 10px;
    opacity: 1;
    top: 2px;
    right: 2px;
  }
}

/* =========================================
   COMPARE BAR (features.js version)
   ========================================= */

.compare-bar {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  padding: var(--space-md) var(--space-lg);
  z-index: var(--z-header);
  transition: bottom var(--t-normal) var(--ease-out);
}

.compare-bar.visible {
  bottom: 0;
}

.compare-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.compare-bar__items {
  display: flex;
  gap: var(--space-sm);
}

.compare-bar__item {
  position: relative;
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--heading) 8%, transparent);
}

.compare-bar__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: white;
}

.compare-bar__item-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--error);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: var(--z-base);
}

.compare-bar__item:hover .compare-bar__item-remove {
  opacity: 1;
}

.compare-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.compare-bar__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.compare-bar__clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.compare-bar__clear:hover {
  background: var(--soft);
  color: var(--error);
}

/* Mobile for compare-bar (features.js) */
@media (max-width: 640px) {
  .compare-bar {
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 8px));
  }
  
  .compare-bar__inner {
    gap: var(--space-xs);
  }
  
  .compare-bar__items {
    gap: var(--space-xs);
  }
  
  .compare-bar__item {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  
  .compare-bar__item img {
    width: 100%;
    height: 100%;
  }
  
  .compare-bar__item-remove {
    width: 16px;
    height: 16px;
    font-size: 10px;
    opacity: 1;
  }
  
  .compare-bar__count {
    font-size: var(--text-xs);
  }
}

/* =========================================
   HERO CAROUSEL - 2026 Modern Hover Cards
   ========================================= */
.hero-carousel {
  width: 100%;
  margin-top: var(--space-xl);
  position: relative;
}

.hero-carousel__track {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}

.hero-carousel__track::-webkit-scrollbar {
  display: none;
}

.hero-carousel__track:active {
  cursor: grabbing;
}

/* Modern Card Design */
.hero-carousel__card {
  flex: 0 0 160px;
  height: 200px;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hero-carousel__card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.hero-carousel__card img,
.hero-carousel__card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.hero-carousel__card:hover img,
.hero-carousel__card:hover video {
  transform: scale(1.1);
}

/* Gradient Overlay */
.hero-carousel__overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 40%,
    rgba(0,0,0,0.7) 100%
  );
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.hero-carousel__card:hover .hero-carousel__overlay {
  opacity: 0.8;
}

/* Corner Ribbon - Glass effect matching Bekijk collectie */
.hero-carousel__ribbon {
  position: absolute;
  top: 12px;
  left: -32px;
  width: 120px;
  padding: 6px 0;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: var(--z-base);
}

.hero-carousel__ribbon span {
  display: block;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* CTA at bottom */
.hero-carousel__cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-md) var(--space-sm);
  color: white;
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: var(--z-base);
}

.hero-carousel__cta svg {
  transition: transform 0.3s ease;
}

.hero-carousel__card:hover .hero-carousel__cta {
  opacity: 1;
  transform: translateY(0);
}

.hero-carousel__card:hover .hero-carousel__cta svg {
  transform: translateX(4px);
}

/* Glass pill button effect on CTA */
.hero-carousel__cta::before {
  content: '';
  position: absolute;
  top: 8px; right: 12px; bottom: 8px; left: 12px;
  inset: 8px 12px;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  z-index: -1;
  transition: background 0.3s ease;
}

.hero-carousel__card:hover .hero-carousel__cta::before {
  background: rgba(255,255,255,0.25);
}

/* Navigation */
.hero-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.hero-carousel__btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-carousel__btn:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

.hero-carousel__btn:active {
  transform: scale(0.95);
}

.hero-carousel__dots {
  display: flex;
  gap: 8px;
}

.hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  padding: 0;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-carousel__dot.is-active {
  background: linear-gradient(135deg, var(--cta) 0%, var(--primary) 100%);
  border-color: rgba(255,255,255,0.95);
  transform: scale(1.6);
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .hero-carousel__card {
    flex: 0 0 200px;
    height: 250px;
  }
  
  .hero-carousel__ribbon {
    top: 14px;
    left: -28px;
    font-size: 11px;
  }
  
  .hero-carousel__track {
    gap: var(--space-lg);
    padding: var(--space-md);
    justify-content: center;
    overflow-x: visible;
  }
  
  .hero-carousel__nav {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hero-carousel__card {
    flex: 0 0 220px;
    height: 280px;
  }
  
  .hero-carousel__ribbon {
    top: 16px;
    left: -24px;
    font-size: 12px;
  }
}

/* Touch: show CTA always on mobile */
@media (hover: none) and (pointer: coarse) {
  .hero-carousel__cta {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hero-carousel__cta::before {
    background: rgba(0,0,0,0.3);
  }
}

/* =========================================
   INMETEN SECTION - Clean & Human 2026
   ========================================= */
.inmeten-section {
  background: var(--bg);
  padding: var(--space-3xl) 0;
}

/* Header */
.inmeten-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--space-2xl);
}

.section-badge--savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--success-emphasis);
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
}

.inmeten-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--heading);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.text-gradient {
  color: var(--cta);
}

.inmeten-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}

/* Visual Steps Grid */
.inmeten-steps-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

@media (max-width: 1024px) {
  .inmeten-steps-visual {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .inmeten-steps-visual {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .inmeten-steps-visual {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto var(--space-2xl);
  }
}

/* Step Card */
.inmeten-step-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  position: relative;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.inmeten-step-card:hover {
  border-color: var(--cta);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.1);
}

/* Step Badge - Visible above card */
.inmeten-step-badge {
  display: inline-block;
  background: var(--cta);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.inmeten-step-illustration {
  width: 100%;
  max-width: 120px;
  height: 90px;
  margin: 0 auto var(--space-md);
}

.inmeten-step-illustration svg {
  width: 100%;
  height: 100%;
}

.inmeten-step-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 6px;
}

.inmeten-step-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.inmeten-step-desc strong {
  color: var(--cta);
  font-weight: 600;
}

/* Bottom Section */
.inmeten-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (max-width: 1024px) {
  .inmeten-bottom {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Benefits */
.inmeten-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inmeten-benefit {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inmeten-benefit:hover {
  border-color: var(--cta);
  background: var(--soft);
}

.inmeten-benefit-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--soft) 0%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inmeten-benefit-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--cta);
}

.inmeten-benefit-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inmeten-benefit-content strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--heading);
}

.inmeten-benefit-content span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* CTA Box */
.inmeten-cta-box {
  background: linear-gradient(135deg, var(--heading) 0%, #1e3a5f 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.inmeten-cta-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .inmeten-cta-box {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }
}

.inmeten-savings-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--success-emphasis) 0%, var(--success-dark) 100%);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.5);
  animation: pulse-badge 3s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.savings-amount {
  font-size: var(--text-xl);
  font-weight: 800;
  color: white;
  line-height: 1;
}

.savings-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.inmeten-cta-content {
  flex: 1;
}

.inmeten-cta-content h3 {
  color: white;
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.inmeten-cta-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.inmeten-cta-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

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

.inmeten-cta-buttons .btn--outline {
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.inmeten-cta-buttons .btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* =========================================
   KEUZEHULP SECTION - Clean & Human 2026
   ========================================= */
.keuzehulp-section {
  background: linear-gradient(135deg, #1e3a5f 0%, var(--heading) 100%);
  padding: var(--space-3xl) 0;
}

/* Force all text white in keuzehulp section */
.keuzehulp-section,
.keuzehulp-section * {
  color: #ffffff;
}

.keuzehulp-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 1024px) {
  .keuzehulp-content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    display: flex;
    flex-direction: column;
  }
  
  .keuzehulp-text {
    order: 1;
    width: 100%;
    text-align: center;
  }
  
  .keuzehulp-checklist {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
  }
  
  .keuzehulp-visual {
    order: 2;
    width: 100%;
  }
}

/* Text Content */
.keuzehulp-text {
  color: #ffffff !important;
}

.section-badge--light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.keuzehulp-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: var(--space-md);
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.keuzehulp-title em {
  font-style: normal;
  color: #93c5fd !important;
}

.keuzehulp-subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.95) !important;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  max-width: 480px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Checklist */
.keuzehulp-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.keuzehulp-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* CTA Button */
.keuzehulp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--success-emphasis) 0%, var(--success-dark) 50%, #047857 100%) !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 18px 40px;
  border-radius: 60px;
  box-shadow:
    0 8px 30px -6px rgba(16, 185, 129, 0.55),
    0 0 0 0 rgba(16, 185, 129, 0),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: keuzehulpGlow 3s ease-in-out infinite;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  border: none;
}

.keuzehulp-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: keuzehulpShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.keuzehulp-cta svg {
  width: 22px;
  height: 22px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
  flex-shrink: 0;
  fill: #ffffff !important;
}

.keuzehulp-cta:hover {
  background: linear-gradient(135deg, var(--success-dark) 0%, #047857 50%, #065f46 100%) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 14px 40px -8px rgba(16, 185, 129, 0.6),
    0 0 20px 2px rgba(16, 185, 129, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.keuzehulp-cta:hover svg {
  transform: translateX(5px);
}

.keuzehulp-cta:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow:
    0 6px 20px -4px rgba(16, 185, 129, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes keuzehulpGlow {
  0%, 100% {
    box-shadow:
      0 8px 30px -6px rgba(16, 185, 129, 0.55),
      0 0 0 0 rgba(16, 185, 129, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 8px 30px -6px rgba(16, 185, 129, 0.55),
      0 0 25px 4px rgba(16, 185, 129, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

@keyframes keuzehulpShimmer {
  0%, 100% { left: -100%; }
  40%, 60% { left: 100%; }
}

/* Visual Preview Card */
.keuzehulp-visual {
  display: flex;
  justify-content: center;
}

.keuzehulp-preview {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  width: 100%;
  max-width: 380px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.keuzehulp-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.keuzehulp-preview-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: #ffffff !important;
}

.keuzehulp-preview-time {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
}

/* Questions List */
.keuzehulp-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.keuzehulp-question {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.keuzehulp-question--active {
  background: rgba(96, 165, 250, 0.25);
}

.keuzehulp-question-num {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.keuzehulp-question--active .keuzehulp-question-num {
  background: #3b82f6;
  color: #ffffff !important;
}

.keuzehulp-question-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.keuzehulp-question-label {
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9) !important;
}

.keuzehulp-question--active .keuzehulp-question-label {
  color: #ffffff !important;
}

.keuzehulp-question-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7) !important;
}

.keuzehulp-question--active .keuzehulp-question-hint {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Result */
.keuzehulp-result {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--success-emphasis);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.keuzehulp-result svg {
  color: #ffffff !important;
  flex-shrink: 0;
}

.keuzehulp-result-title {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  color: #ffffff !important;
}

.keuzehulp-result-sub {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================
   TABLET HERO LAYOUT - Stacked with buttons after carousel
   ========================================= */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero--ultra .hero__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hero--ultra .hero__content {
    order: 1;
    max-width: 640px;
  }
  
  .hero--ultra .hero__buttons {
    order: 2;
    margin-bottom: var(--space-lg);
  }
  
  .hero--ultra .hero-carousel {
    order: 3;
    width: 100%;
    margin-top: 0;
  }
}

/* =========================================
   DESKTOP HERO LAYOUT - Cards on Right Side
   ========================================= */
@media (min-width: 1200px) {
  .hero--ultra {
    overflow: hidden;
  }

  .hero--ultra .hero__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    grid-template-rows: auto auto;
    gap: 0 var(--space-2xl);
    align-items: start;
  }

  .hero--ultra .hero__content {
    grid-column: 1;
    grid-row: 1;
    max-width: 640px;
    padding-bottom: var(--space-md);
  }
  
  .hero--ultra .hero__buttons {
    grid-column: 1;
    grid-row: 2;
    max-width: 640px;
    margin-top: 0;
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .hero--ultra .hero-carousel {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 0;
    position: relative;
  }

  .hero--ultra .hero-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    overflow: visible;
    padding: 0;
  }

  .hero--ultra .hero-carousel__card {
    flex: none;
    width: 100%;
    height: 170px;
  }

  .hero--ultra .hero-carousel__nav {
    display: none;
  }

  .hero__scroll-indicator {
    display: none;
  }
}

@media (min-width: 1400px) {
  .hero--ultra .hero__container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  }

  .hero--ultra .hero-carousel__card {
    height: 185px;
  }
}

/* =========================================
   DESKTOP NAVIGATION - Dropdown Arrows & Menus
   ========================================= */
@media (min-width: 1025px) {
  .nav__item {
    position: relative;
  }

  /* Ensure dropdown arrows are visible */
  .nav__link svg {
    display: inline-flex;
    opacity: 0.7;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav__item:hover .nav__link svg {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* Mega-menu: hidden by default, show on hover */
  .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--z-overlay);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .nav__item:hover .mega-menu,
  .nav__item:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* =========================================
   DESKTOP HOME SEO ALIGNMENT FIX
   ========================================= */
@media (min-width: 1025px) {
  .page-home .home-seo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3xl) !important;
    align-items: stretch !important;
  }

  .page-home .home-seo-prose {
    grid-column: 1;
    margin-top: 0;
    padding: var(--space-xl);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-home .home-seo-prose p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--text-primary);
  }

  .page-home .home-seo-prose p + p {
    margin-top: var(--space-lg);
  }

  .page-home .home-seo-prose a {
    color: var(--link);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .page-home .home-seo-prose a:hover {
    color: var(--cta);
  }

  .page-home .home-seo-card {
    grid-column: 2;
    align-self: stretch;
    margin-top: 0;
  }

  .page-home .home-features {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .page-home .home-features__title {
    margin-top: 0;
    font-size: var(--text-xl);
  }

  .page-home .home-features__list {
    flex: 1;
  }
}

/* =========================================
   2026 MODERN NAVIGATION SYSTEM
   Enhanced mega menus, better UX
   ========================================= */

/* Desktop Navigation Enhancements */
@media (min-width: 1025px) {
  /* Header layout improvements — all containers now unified via --container-max */
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--container-padding);
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .header__nav-row {
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 0 var(--container-padding);
  }

  .header__nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  /* Primary navigation styling */
  .nav--primary {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .nav--primary .nav__link {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nav--primary .nav__link:hover {
    background: var(--soft);
    color: var(--heading);
  }

  /* CTA link styling */
  .nav__link--cta {
    background: linear-gradient(135deg, var(--cta) 0%, #2d9d78 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .nav__link--cta:hover {
    background: linear-gradient(135deg, #2d9d78 0%, var(--cta) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 95, 143, 0.25);
  }

  .nav__link--cta svg {
    opacity: 1 !important;
  }

  /* Products Mega Menu - Full Width */
  .mega-menu--products {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    transform: translateY(10px);
    width: 100%;
    max-width: none;
    min-width: auto;
    background: var(--card);
    border: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    padding: 0;
    z-index: var(--z-banner);
  }

  .nav__item--mega:hover .mega-menu--products {
    transform: translateY(0);
  }

  /* Mega menu grid layout */
  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
  }

  .mega-menu__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .mega-menu__title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--heading);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--cta);
    display: inline-block;
  }

  .mega-menu__link {
    padding: var(--space-xs) 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
    transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .mega-menu__link:hover {
    color: var(--cta);
    transform: translateX(4px);
    background: transparent;
  }

  .mega-menu__link--highlight {
    font-weight: 700;
    color: var(--cta);
  }

  .mega-menu__link--small {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .mega-menu__divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-md) 0;
  }

  /* Mega menu footer */
  .mega-menu__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    background: var(--soft);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
  }

  .mega-menu__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: linear-gradient(135deg, var(--cta) 0%, #2d9d78 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: var(--text-sm);
    border-radius: var(--radius-pill);
    transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  }

  .mega-menu__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(47, 95, 143, 0.3);
  }

  .mega-menu__help {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    transition: color var(--t-fast);
  }

  .mega-menu__help:hover {
    color: var(--cta);
  }

  /* Account icon styling */
  .account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  }

  .account-icon:hover {
    background: var(--soft);
    color: var(--heading);
  }

  /* Desktop-only elements */
  .desktop-only {
    display: inline-flex;
  }
}

/* Hide desktop-only elements on mobile */
@media (max-width: 1024px) {
  .desktop-only {
    display: none !important;
  }
  
  .header__nav-row {
    display: none;
  }
}

/* =========================================
   2026 MOBILE NAVIGATION ENHANCEMENTS
   ========================================= */

/* Quick Actions in Mobile Menu */
.mobile-nav__quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}

.mobile-nav__quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--soft);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}

.mobile-nav__quick-action:hover,
.mobile-nav__quick-action:active {
  background: var(--border);
}

.mobile-nav__quick-action--highlight {
  background: linear-gradient(135deg, var(--cta) 0%, #2d9d78 100%);
  color: #ffffff;
}

.mobile-nav__quick-action--highlight:hover,
.mobile-nav__quick-action--highlight:active {
  background: linear-gradient(135deg, #2d9d78 0%, var(--cta) 100%);
}

.mobile-nav__quick-action svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Legal section styling */
.mobile-nav__section--legal {
  background: transparent;
  margin: 0;
  border-radius: 0;
  padding: var(--space-xs) var(--space-lg);
}

.mobile-nav__section--legal .mobile-nav__section-title {
  padding: 0 var(--space-md);
}

.mobile-nav__link--small {
  min-height: auto;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Indent legal subpages to mirror submenu hierarchy */
.mobile-nav__section--legal .mobile-nav__link--small {
  padding-left: calc(var(--space-lg) * 2);
  padding-right: var(--space-lg);
}

.mobile-nav__link--small span {
  font-weight: 500;
}

/* Mobile nav scroll container improvements */
.mobile-nav__scroll-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.mobile-nav__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-xl);
}

/* Improved mobile nav CTA area */
@media (max-width: 768px) {
  .mobile-nav__cta {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-lg) + var(--safe-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--border);
  }
}

/* Cart icon in header */
.cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}

.cart-icon:hover {
  background: var(--soft);
  color: var(--heading);
}

.cart-icon svg {
  width: 24px;
  height: 24px;
}

/* =========================================
   2026 Navigation – Header Actions with Text Labels
   Webshop-focused UX Enhancement
   ========================================= */

/* Header Action Links (Cart, Account with text) */
.header__action-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  white-space: nowrap;
}

.header__action-link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.header__action-link:hover {
  background: var(--soft);
  color: var(--heading);
}

.header__action-link .cart-icon__count {
  position: absolute;
  top: 2px;
  left: 24px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cta);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.header__action-link .cart-icon__count.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hide text labels on smaller screens, show icons only */
@media (max-width: 1024px) {
  .header__action-text {
    display: none;
  }
  
  .header__action-link {
    padding: var(--space-xs);
  }
}

/* Show text labels on larger screens */
@media (min-width: 1025px) {
  .header__action-text {
    display: inline;
  }
}

/* Webshop Primary Nav Link - Make it stand out */
.nav__link--shop {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--cta) !important;
  background: color-mix(in oklab, var(--cta) 8%, transparent);
  padding: var(--space-xs) var(--space-sm) !important;
  border-radius: var(--radius);
}

.nav__link--shop svg:first-child {
  width: 18px;
  height: 18px;
}

.nav__link--shop:hover {
  background: color-mix(in oklab, var(--cta) 14%, transparent) !important;
  color: var(--cta) !important;
}

.nav__item--primary {
  order: -1; /* Ensure Webshop appears first */
}

/* Keuzehulp accent styling */
.nav__link--accent {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--link) !important;
  font-weight: 500;
}

.nav__link--accent svg {
  width: 16px;
  height: 16px;
  color: var(--link);
}

.nav__link--accent:hover {
  color: var(--heading) !important;
}

/* Webshop Mega Menu Special Styling */
.mega-menu--webshop {
  min-width: 680px;
}

.mega-menu--webshop .mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.mega-menu--webshop .mega-menu__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.mega-menu--webshop .mega-menu__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--heading);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mega-menu__link--highlight {
  font-weight: 600;
  color: var(--cta);
}

.mega-menu__link--all {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--soft);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--heading);
}

.mega-menu__link--all:hover {
  background: var(--border);
}

.mega-menu__link--all svg {
  width: 16px;
  height: 16px;
}

/* Mega menu footer highlight (for Webshop) */
.mega-menu__footer--highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--cta) 8%, transparent) 0%, color-mix(in oklab, var(--link) 6%, transparent) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  margin-top: var(--space-sm);
}

.mega-menu__promo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.mega-menu__promo-badge {
  padding: 2px 8px;
  background: var(--cta);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile Nav - Webshop Primary Section */
.mobile-nav__section--primary {
  background: color-mix(in oklab, var(--cta) 5%, transparent);
  margin: 0 var(--space-sm);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}

.mobile-nav__section--primary .mobile-nav__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--cta);
  font-weight: 600;
}

.mobile-nav__section--primary .mobile-nav__section-title svg {
  width: 16px;
  height: 16px;
}

.mobile-nav__link--highlight {
  font-weight: 600;
  color: var(--cta);
}

.mobile-nav__link--accent {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: color-mix(in oklab, var(--link) 8%, transparent);
  border-radius: var(--radius);
  margin: 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--link);
  font-weight: 600;
}

.mobile-nav__link--accent svg {
  width: 20px;
  height: 20px;
  color: var(--link);
  flex-shrink: 0;
}

.mobile-nav__link--cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--cta) 0%, #2d9d78 100%);
  border-radius: var(--radius);
  margin: 0 var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: #ffffff;
  font-weight: 600;
}

.mobile-nav__link--cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mobile-nav__link--cta:hover,
.mobile-nav__link--cta:active {
  background: linear-gradient(135deg, #2d9d78 0%, var(--cta) 100%);
}

/* Quick action primary styling */
.mobile-nav__quick-action--primary {
  background: var(--cta);
  color: #ffffff;
}

.mobile-nav__quick-action--primary:hover,
.mobile-nav__quick-action--primary:active {
  background: #2d9d78;
}