/* ================================================================
   aluplast® IDEAL Series — Industrial Precision Design System
   Based on "The Architectural Monolith" Creative North Star
   ================================================================ */

/* ----------------------------------------------------------------
   CUSTOM PROPERTIES — LIGHT THEME ADAPTATION
   ---------------------------------------------------------------- */
:root {
  /* Brand — Vibrant Red Accent (from brand guide) */
  --ap-red: #b2001d;
  --ap-red-light: #ffb3ae;
  --ap-red-glow: rgba(178, 0, 29, 0.15);
  --ap-red-hover: #8f0018;

  /* Secondary — Slate Blue (from brand guide) */
  --secondary: #304d5a;
  --secondary-light: #adcbda;

  /* Surface Hierarchy — Light Theme (adapted from brand guide) */
  --surface: #ffffff;
  --surface-container-lowest: #f0f2f4;
  --surface-container-low: #f5f7f9;
  --surface-container: #e8ecef;
  --surface-container-high: #dce2e6;
  --surface-container-highest: #d0d8dd;

  /* Text colors — Light theme */
  --on-surface: #1a1d21;
  --on-surface-variant: #4a5158;
  --outline-variant: rgba(74, 81, 88, 0.15);

  /* Legacy mappings */
  --ap-dark-grey: #1a1d21;
  --ap-mid-grey: #4a5158;
  --ap-light-grey: #c7c7c6;
  --ap-ultra-light: #f5f7f9;
  --white: #ffffff;
  --off-white: #fafafa;
  --black: #0a0a0a;
  --cream: #f8f6f3;

  /* Luxury accents */
  --gold: #c9a96e;
  --gold-light: rgba(201, 169, 110, 0.12);
  --platinum: #e5e4e2;

  /* Scroll-driven background — Light Theme Default */
  --scroll-bg: #ffffff;
  --scroll-text: #1a1d21;

  /* Typography — Space Grotesk (Technical) + Inter (Functional) */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-primary: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --space-2xl: 12rem;

  /* Layout */
  --nav-height: 56px;
  --max-width: 1440px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --trans-fast: 0.25s var(--ease-out-expo);
  --trans-base: 0.4s var(--ease-out-expo);
  --trans-slow: 0.7s var(--ease-out-expo);
  --trans-xslow: 1.2s var(--ease-out-expo);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(24px);

  /* Brand glassmorphism */
  --glass-red-bg: rgba(210, 10, 17, 0.08);
  --glass-red-border: rgba(210, 10, 17, 0.15);
  --glass-dark-bg: rgba(10, 10, 10, 0.65);
  --glass-dark-border: rgba(255, 255, 255, 0.08);

  /* Cursor glow */
  --cursor-x: 50%;
  --cursor-y: 50%;

  /* Noise overlay */
  --noise-opacity: 0.025;
}

/* ----------------------------------------------------------------
   GLASSMORPHISM UTILITY CLASSES — Light Theme
   Using "Glass & Gradient" rule from brand guide
   ---------------------------------------------------------------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-radius: 0.125rem; /* rounded-sm for industrial feel */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
}
.glass-panel--red {
  background: rgba(178, 0, 29, 0.06);
  border-color: var(--outline-variant);
  box-shadow: 0 8px 32px rgba(178, 0, 29, 0.08);
}
.glass-panel--dark {
  background: rgba(26, 29, 33, 0.85);
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--on-surface-variant);
  background: var(--surface);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition:
    background-color 0.8s ease,
    color 0.6s ease;
}

/* Film grain noise overlay — subtle for light theme */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

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

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

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

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--ap-red);
  color: var(--white);
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--ap-red);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--ap-red);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------------
   SMOOTH SCROLLING BACKGROUND THEME ZONES
   Body data attributes drive transitions
   ---------------------------------------------------------------- */
body[data-theme='light'] {
  --scroll-bg: #ffffff;
  --scroll-text: #4a4a49;
}
body[data-theme='cream'] {
  --scroll-bg: #f8f6f3;
  --scroll-text: #4a4a49;
}
body[data-theme='dark'] {
  --scroll-bg: #0a0a0a;
  --scroll-text: #f2f2f2;
}
body[data-theme='charcoal'] {
  --scroll-bg: #1a1a1a;
  --scroll-text: #e0e0e0;
}
body[data-theme='warm-grey'] {
  --scroll-bg: #2c2a27;
  --scroll-text: #d6d0c4;
}
body[data-theme='slate'] {
  --scroll-bg: #1e2328;
  --scroll-text: #c7c7c6;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY — Space Grotesk (Technical) + Inter (Functional)
   Per brand guide: "etched into metal" aesthetic
   ---------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em; /* tight letter-spacing per brand guide */
  color: var(--on-surface);
}

.heading-display {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.heading-xl {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.heading-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
}

.heading-md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
}

/* Body text uses Inter for high legibility */
.text-body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: var(--on-surface-variant);
}
.text-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.text-xs {
  font-family: var(--font-body);
  font-size: 0.75rem;
}
.text-thin {
  font-weight: 300;
}
.text-light {
  font-weight: 400;
}
.fw-900 {
  font-weight: 700;
}

/* Label — All-caps with increased letter-spacing (blueprint feel) */
.label-technical {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}

sup {
  font-size: 0.45em;
  vertical-align: super;
  line-height: 0;
}

/* Luxury label — small caps tracking */
.label-luxury {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gold);
}

/* ----------------------------------------------------------------
   LAYOUT UTILITIES
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

.section-padding {
  padding-block: clamp(5rem, 10vh, 8rem);
}

.section-padding-sm {
  padding-block: clamp(3rem, 6vh, 5rem);
}

.section-padding-lg {
  padding-block: clamp(6rem, 12vh, 10rem);
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(3rem, 6vh, 4rem);
}

/* Section Background Themes — aluplast Grey Palette */
.bg-ultra-light {
  background-color: var(--ap-ultra-light);
}
.bg-light-grey {
  background-color: var(--ap-light-grey);
}
.bg-mid-grey {
  background-color: var(--ap-mid-grey);
  color: var(--white);
}
.bg-mid-grey h2,
.bg-mid-grey h3,
.bg-mid-grey p {
  color: var(--white);
}
.bg-mid-grey .section-header h2,
.bg-mid-grey .section-header p {
  color: var(--white);
}
.bg-dark-grey {
  background-color: var(--ap-dark-grey);
  color: var(--white);
}
.bg-dark-grey h2,
.bg-dark-grey h3,
.bg-dark-grey p {
  color: var(--white);
}
.bg-dark-grey .section-header h2,
.bg-dark-grey .section-header p {
  color: var(--white);
}

/* ----------------------------------------------------------------
   LUXURY DIVIDER LINE
   ---------------------------------------------------------------- */
.lux-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--ap-red), var(--gold));
  margin-block: var(--space-md);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 1s var(--ease-out-expo);
}
.lux-divider.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ----------------------------------------------------------------
   LOADING SCREEN — Light Theme
   ---------------------------------------------------------------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.7s;
}
.loading-screen.exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Inner wrapper ── */
.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.loading-screen.exiting .loading-inner {
  animation: ls-exit 0.55s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes ls-exit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.06) translateY(-10px);
  }
}

/* ── Window SVG frame ── */
.loading-frame {
  width: auto;
  height: auto;
  margin-bottom: 1.1rem;
  opacity: 0;
  animation: loadFadeIn 0.01s 0.1s forwards;
}
.ls-svg {
  width: 100%;
  height: 100%;
}
.ls-ef-mark {
  display: block;
  width: 132px;
  height: auto;
  color: #1a1a1a;
  opacity: 0;
  transform: scale(0.92);
  animation: lsEfIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}
@keyframes lsEfIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* rect draws itself in */
@keyframes ls-draw-rect {
  to {
    stroke-dashoffset: 0;
  }
}
.ls-rect {
  animation: ls-draw-rect 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards;
}

/* cross-hair lines draw in after rect */
@keyframes ls-draw-line {
  to {
    stroke-dashoffset: 0;
  }
}
.ls-cross-h {
  animation: ls-draw-line 0.35s ease 0.9s forwards;
}
.ls-cross-v {
  animation: ls-draw-line 0.35s ease 1.05s forwards;
}

/* Center dot pulses */
@keyframes ls-dot-pulse {
  0% {
    opacity: 0;
    r: 0;
  }
  40% {
    opacity: 1;
    r: 4;
  }
  70% {
    opacity: 0.7;
    r: 2.5;
  }
  100% {
    opacity: 1;
    r: 2.5;
  }
}
.ls-dot {
  animation: ls-dot-pulse 0.5s ease 1.3s forwards;
}

/* ── Logo ── */
.loading-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--on-surface);
  letter-spacing: 0.03em;
  opacity: 0;
  clip-path: inset(0 102% 0 0);
  animation: ls-logo-wipe 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes ls-logo-wipe {
  0% {
    opacity: 1;
    clip-path: inset(0 102% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
  }
}
.loading-logo .logo-red {
  color: var(--ap-red);
}

/* ── Tagline ── */
.loading-tagline {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  opacity: 0;
  transform: translateY(6px);
  animation: ls-tag-in 0.5s ease 1.8s forwards;
}
@keyframes ls-tag-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Progress ── */
.loading-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: loadFadeIn 0.4s ease 1.9s forwards;
  margin-top: 0.25rem;
}
@keyframes loadFadeIn {
  to {
    opacity: 1;
  }
}
.loading-bar-track {
  width: 180px;
  height: 2px;
  background: var(--surface-container);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}
.loading-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--ap-red);
  width: 0%;
  transition: width 0.15s linear;
  box-shadow: 0 0 8px var(--ap-red-glow);
  overflow: hidden;
}
/* Traveling shine on the fill */
.loading-bar-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -24px;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: ls-shine 1.6s linear infinite;
}
@keyframes ls-shine {
  0% {
    transform: translateX(-80px);
  }
  100% {
    transform: translateX(4px);
  }
}
.loading-percent {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* ----------------------------------------------------------------
   NAVIGATION — Light Theme with Glassmorphism
   ---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  transition: all var(--trans-base);
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: all var(--trans-slow);
  border-bottom: 1px solid transparent;
}
.nav.scrolled::before {
  background: #ffffff;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-bottom-color: var(--outline-variant);
}
/* Dark theme nav */
body[data-theme='dark'] .nav.scrolled::before,
body[data-theme='charcoal'] .nav.scrolled::before,
body[data-theme='warm-grey'] .nav.scrolled::before,
body[data-theme='slate'] .nav.scrolled::before {
  background: rgba(10, 10, 10, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
.nav-inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--on-surface);
  letter-spacing: 0;
  transition: color var(--trans-base);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.nav-logo__mark {
  height: 20px;
  width: auto;
  flex-shrink: 0;
}
.nav-logo__text {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: inherit;
}
.nav-logo sup {
  font-size: 0.4em;
}
.nav.scrolled .nav-logo {
  color: inherit; /* locked — no colour change on scroll */
}
/* White logo on pages with dark hero images (about, contact) */
body.page-dark-hero .nav:not(.scrolled) .nav-logo {
  color: #ffffff;
}
body[data-theme='dark'] .nav.scrolled .nav-logo,
body[data-theme='charcoal'] .nav.scrolled .nav-logo,
body[data-theme='warm-grey'] .nav.scrolled .nav-logo,
body[data-theme='slate'] .nav.scrolled .nav-logo {
  color: var(--white);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
}

/* ── Nav Pill — visible only at top, morphs away on scroll ── */
.nav-pill {
  display: flex;
  align-items: center;
  padding: 0.45rem 1.5rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 100px;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    background var(--trans-slow),
    border-color var(--trans-slow),
    box-shadow var(--trans-slow),
    padding var(--trans-slow),
    border-radius var(--trans-slow);
}

/* Dissolve pill on scroll — become invisible container */
.nav.scrolled .nav-pill {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
  border-radius: 0;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: all var(--trans-fast);
  position: relative;
  white-space: nowrap;
}
.nav.scrolled .nav-links a {
  color: var(--on-surface-variant);
}
body[data-theme='dark'] .nav.scrolled .nav-links a,
body[data-theme='charcoal'] .nav.scrolled .nav-links a,
body[data-theme='warm-grey'] .nav.scrolled .nav-links a,
body[data-theme='slate'] .nav.scrolled .nav-links a {
  color: rgba(255, 255, 255, 0.6);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ap-red);
  transition: width var(--trans-base);
}
.nav-links a:hover {
  color: var(--on-surface);
}
.nav.scrolled .nav-links a:hover {
  color: var(--on-surface);
}
.nav-links a:hover::after {
  width: 100%;
}

/* Hamburger — Light Theme */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 30px;
  padding: 4px 0;
  z-index: 1001;
}
.hamburger span {
  height: 1.5px;
  background: var(--on-surface);
  border-radius: 0;
  transition: all var(--trans-base);
  transform-origin: center;
}
.nav.scrolled .hamburger span {
  background: var(--on-surface);
}
body[data-theme='dark'] .nav.scrolled .hamburger span {
  background: var(--white);
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5.5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5.5px);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: all var(--trans-slow);
}
.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}
.mobile-menu a {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 200;
  color: var(--white);
  letter-spacing: 0.04em;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.5s var(--ease-out-expo);
}
.mobile-menu.active a {
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu.active a:nth-child(1) {
  transition-delay: 0.08s;
}
.mobile-menu.active a:nth-child(2) {
  transition-delay: 0.14s;
}
.mobile-menu.active a:nth-child(3) {
  transition-delay: 0.2s;
}
.mobile-menu.active a:nth-child(4) {
  transition-delay: 0.26s;
}
.mobile-menu.active a:nth-child(5) {
  transition-delay: 0.32s;
}
.mobile-menu.active a:nth-child(6) {
  transition-delay: 0.38s;
}
.mobile-menu a:hover {
  color: var(--ap-red);
}

@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}

/* ----------------------------------------------------------------
   BUTTONS — Industrial Precision with Pill Primary
   Per brand guide: Primary is pill-shaped (rounded-full)
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2.4em;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0; /* sharp — no rounded corners */
  position: relative;
  overflow: hidden;
  transition:
    color var(--trans-fast),
    box-shadow var(--trans-base);
  white-space: nowrap;
  isolation: isolate;
  cursor: pointer;
}
/* Slide-fill wipe on hover */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.42s var(--ease-out-expo);
}
.btn:hover::before {
  transform: translateX(0);
}

/* Primary Button — solid red, dark wipe on hover */
.btn-primary {
  background: var(--ap-red);
  color: #ffffff;
  border: 2px solid var(--ap-red);
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 24px rgba(178, 0, 29, 0.25);
}
.btn-primary::before {
  background: var(--ap-red-hover);
  transform: translateX(-101%);
}
.btn-primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 36px rgba(178, 0, 29, 0.35);
  transform: translateY(-2px);
}

/* Secondary Button — Slate */
.btn-secondary {
  background: var(--secondary);
  color: var(--white);
  border: 2px solid var(--secondary);
  border-radius: 0;
}
.btn-secondary::before {
  background: #243a44;
}
.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  background: transparent;
  border-radius: 0;
}
.btn-outline-light::before {
  background: var(--white);
  transform: translateY(101%);
}
.btn-outline-light:hover::before {
  transform: translateY(0);
}
.btn-outline-light:hover {
  color: var(--on-surface);
}

.btn-outline-dark {
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  background: transparent;
  border-radius: 0;
}
.btn-outline-dark::before {
  background: var(--ap-red);
  transform: translateY(101%);
}
.btn-outline-dark:hover::before {
  transform: translateY(0);
}
.btn-outline-dark:hover {
  color: var(--white);
  border-color: var(--ap-red);
}

/* Magnetic button wrapper (JS adds the effect) */
.magnetic-wrap {
  display: inline-block;
  transition: transform var(--trans-fast);
}

/* ----------------------------------------------------------------
   HERO SECTION — Light Theme with Architectural Image
   "The Architectural Monolith" aesthetic for light environments
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  padding-top: calc(var(--nav-height) + 2.75rem);
  padding-bottom: 1.5rem;
}

/* ---- Hero Image Background — Light Theme ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.05);
  animation: heroImageReveal 2.5s var(--ease-out-expo) forwards;
  filter: saturate(1.05) brightness(1) contrast(1.02);
}
@keyframes heroImageReveal {
  0% {
    transform: scale(1.15);
    filter: saturate(0.8) brightness(0.9) blur(5px);
  }
  100% {
    transform: scale(1.05);
    filter: saturate(1.05) brightness(1) contrast(1.02);
  }
}

/* ---- Multi-layer Gradient System — Light Theme ---- */
.hero-gradient-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-gradient-1 {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 25%,
    rgba(255, 255, 255, 0.4) 45%,
    transparent 60%
  );
}
.hero-gradient-2 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.2) 15%,
    transparent 35%
  );
}
.hero-gradient-3 {
  background: radial-gradient(
    ellipse 60% 80% at 70% 50%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%
  );
}
@keyframes pulseGradient {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ---- Animated Mesh Grid — Light Theme ---- */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
}
.hero-mesh-svg {
  width: 100%;
  height: 100%;
}
.hero-mesh-line {
  stroke: rgba(178, 0, 29, 0.15);
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: meshDraw 3s ease-out forwards;
}
.hero-mesh-line:nth-child(2) {
  animation-delay: 0.3s;
}
.hero-mesh-line:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes meshDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---- Hero Particles Container — Light Theme ---- */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(178, 0, 29, 0.4);
  box-shadow: 0 0 8px rgba(178, 0, 29, 0.2);
  animation: particleFloat 15s linear infinite;
}
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ---- Noise Texture Overlay — Light Theme ---- */
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

/* ---- Cursor Reactive Glow — Light Theme ---- */
.hero-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    800px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    rgba(178, 0, 29, 0.04) 0%,
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero:hover .hero-cursor-glow {
  opacity: 1;
}

/* ---- Floating Accent Shapes — Light Theme ---- */
.hero-shapes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero-shape {
  position: absolute;
  border: 1px solid rgba(178, 0, 29, 0.1);
}
.hero-shape-1 {
  top: 15%;
  right: 10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  animation: shapeFloat1 20s ease-in-out infinite;
}
.hero-shape-2 {
  bottom: 20%;
  left: 5%;
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  animation: shapeFloat2 15s ease-in-out infinite;
}
.hero-shape-3 {
  top: 40%;
  right: 30%;
  width: 100px;
  height: 100px;
  border-width: 2px;
  border-color: rgba(48, 77, 90, 0.08);
  animation: shapeFloat3 12s ease-in-out infinite;
}
@keyframes shapeFloat1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-30px, 30px) scale(1.05);
  }
}
@keyframes shapeFloat2 {
  0%,
  100% {
    transform: rotate(45deg) translate(0, 0);
  }
  50% {
    transform: rotate(45deg) translate(20px, -20px);
  }
}
@keyframes shapeFloat3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate(-15px, 15px) rotate(90deg);
    opacity: 1;
  }
}

/* ---- Hero split grid ---- */
.hero-split {
  position: relative;
  z-index: 10;
  isolation: isolate;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  /* Light Glassmorphism Panel */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.92) 40%,
    rgba(255, 255, 255, 0.95) 100%
  );
  backdrop-filter: blur(36px) saturate(1.6);
  -webkit-backdrop-filter: blur(36px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.75rem;
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}

/* Subtle inner highlight */
.hero-split::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, 0.45) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Top accent glow line */
.hero-split::after {
  content: '';
  position: absolute;
  top: 0;
  left: 3rem;
  right: 3rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 25%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.9) 75%,
    transparent 100%
  );
  z-index: 1;
}

/* ---- Left text ---- */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
  gap: 0.5rem;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--ap-dark-grey);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.7s 0.15s var(--ease-out-expo);
}
.hero-eyebrow.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero split — force dark text regardless of theme class ── */
.hero-split .hero-eyebrow,
.hero-split .hero-eyebrow * {
  color: #555555 !important;
}

.hero-split .hero-line span {
  color: #1a1a1a !important;
}
.hero-split .hero-line3 span {
  background: linear-gradient(135deg, var(--ap-red) 0%, #d42940 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-split .hero-sub {
  color: #3a3a3a !important;
}

.hero-split .hero-brand-pill {
  color: #1a1a1a !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Award-winning headline styling — Light Theme ---- */
.hero-headline {
  overflow: visible;
  margin-bottom: 0;
  position: relative;
}
.hero-headline::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, var(--ap-red), rgba(178, 0, 29, 0.3));
  transition: height 1.2s 0.5s var(--ease-out-expo);
}
.hero-line.revealed ~ .hero-line.revealed ~ .hero-line.revealed ~ .hero-headline::before,
.hero-headline:has(.hero-line.revealed)::before {
  height: 80%;
}
.hero-line {
  display: block;
  overflow: hidden;
  position: relative;
}
.hero-line span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s var(--ease-out-expo);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4.5rem);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.hero-line3 span {
  background: linear-gradient(135deg, var(--ap-red) 0%, #d42940 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-line.revealed span {
  transform: translateY(0);
}
.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 400;
  color: #3a3a3a;
  max-width: 460px;
  margin-top: 1rem;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.8s 0.9s var(--ease-out-expo);
  letter-spacing: 0.01em;
}
.hero-sub.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Aluplast Brand Band */
.hero-brand-band {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(178, 0, 29, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.55rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-brand-band__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-brand-band__label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}
.hero-brand-band__logo {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.hero-brand-band__logo sup {
  font-size: 0.55em;
  vertical-align: super;
}
.hero-brand-band__divider {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}
.hero-brand-band__tag {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.04em;
}

/* Hero Brand Pills */
.hero-brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.8s 1s var(--ease-out-expo);
}
.hero-brand-pills.revealed {
  opacity: 1;
  transform: translateY(0);
}
.hero-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  letter-spacing: 0.02em;
}
.hero-brand-pill svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.8s 1.1s var(--ease-out-expo);
}
.hero-ctas.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero CTA — bold red pill button */
.btn-hero {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.82rem;
  padding: 1.05rem 2.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 28px rgba(178, 0, 29, 0.22);
  transition:
    box-shadow var(--trans-base),
    transform var(--trans-fast);
}
/* Corner accent marks — top-left and bottom-right engineering markers */
.btn-hero::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: all 0.25s ease;
}
.btn-hero:hover {
  box-shadow: 0 12px 44px rgba(178, 0, 29, 0.38);
  transform: translateY(-2px);
}
.btn-hero:hover::after {
  width: 16px;
  height: 16px;
  top: 5px;
  left: 5px;
}

/* Glassmorphism button — sharp square, dark text */
.btn-glass {
  font-family: var(--font-display);
  font-size: 0.82rem;
  padding: 1.05rem 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--on-surface);
  transition:
    background var(--trans-fast),
    border-color var(--trans-fast),
    box-shadow var(--trans-fast);
}
.btn-glass::before {
  background: rgba(255, 255, 255, 0.3);
}
.btn-glass:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--ap-red);
  color: var(--ap-red);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   HERO PRODUCT SELECTOR — Light Theme
   ---------------------------------------------------------------- */
.hero-product-selector {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 0;
  z-index: 30;
  opacity: 0;
  transition: all 0.8s 0.6s var(--ease-out-expo);
  margin-bottom: 1rem;
  flex-shrink: 0;
  align-self: center;
}
.hero-product-selector.revealed {
  opacity: 1;
}

.product-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.9rem 2rem;
  min-width: 10rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.5rem;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.28s var(--ease-out-expo),
    border-color 0.28s var(--ease-out-expo),
    box-shadow 0.28s var(--ease-out-expo),
    transform 0.28s var(--ease-out-expo);
}
/* First tab rounded left, last tab rounded right */
.product-tab:first-child {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.product-tab:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Bottom accent bar — full width, fills in on active */
.product-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ap-red), var(--ap-red-hover));
  transition: width 0.35s var(--ease-out-expo);
}
/* Red left-edge rule — engineering precision marker */
.product-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--ap-red);
  transition: width 0.28s var(--ease-out-expo);
}

.product-tab:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.product-tab:hover::after {
  width: 50%;
}

.product-tab.active {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(178, 0, 29, 0.35);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(178, 0, 29, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.product-tab.active::after {
  width: 100%;
}
.product-tab.active::before {
  width: 3px;
}

.product-tab-name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000000;
  line-height: 1;
}

.product-tab-spec {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000000 !important;
  line-height: 1;
}

.product-tab-name sup {
  font-size: 0.5em;
  top: -0.5em;
  position: relative;
  color: var(--on-surface) !important;
}
.product-tab-spec {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: 0.15rem;
}

/* ----------------------------------------------------------------
   HERO PROFILE — Right side with Product Selector + Bubbles
   ---------------------------------------------------------------- */
.hero-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 1;
  padding: 0;
}

/* Profile variants for switching */
.hero-profile-variant {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
  transform: scale(0.96);
  z-index: 1;
}
.hero-profile-variant.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  z-index: 1;
}

/* Ambient glow behind profile image */
.hero-profile-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

.hero-profile-img {
  position: relative;
  z-index: 2;
  height: clamp(320px, 55vh, 520px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.2)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12));
  opacity: 0;
  transform: translateY(40px) scale(0.94);
  transition:
    opacity 1.2s var(--ease-out-expo),
    transform 1.2s var(--ease-out-expo);
}
.hero-profile-img.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ----------------------------------------------------------------
   GLASSMORPHISM INFO BUBBLES — Feature Callouts
   ---------------------------------------------------------------- */
.hero-bubble {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}

/* Left bubbles slide in from left */
.hero-bubble--left {
  flex-direction: row;
  transform: translateX(-20px);
}
/* Right bubbles slide in from right */
.hero-bubble--right {
  flex-direction: row;
  transform: translateX(20px);
}
.hero-bubble.revealed {
  opacity: 1;
  transform: translateX(0);
}

.hero-bubble-text {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  background: rgba(20, 24, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
}

.hero-bubble-line {
  display: block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(178, 0, 29, 0.8), rgba(178, 0, 29, 0.4));
  flex-shrink: 0;
  position: relative;
}
/* Reverse gradient for left-side bubbles */
.hero-bubble--left .hero-bubble-line {
  background: linear-gradient(90deg, rgba(178, 0, 29, 0.4), rgba(178, 0, 29, 0.8));
}
/* Right bubbles line goes dot to text */
.hero-bubble--right .hero-bubble-line {
  background: linear-gradient(90deg, rgba(178, 0, 29, 0.8), rgba(178, 0, 29, 0.4));
}

.hero-bubble-dot {
  display: block;
  width: 10px;
  height: 10px;
  background: var(--ap-red);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(178, 0, 29, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.3);
  animation: dotPulse 2.5s ease-in-out infinite;
  position: relative;
}

.hero-bubble-dot::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(178, 0, 29, 0.35);
  animation: dotRing 2.5s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 2px rgba(210, 10, 17, 0.3),
      0 0 12px rgba(210, 10, 17, 0.6),
      0 0 24px rgba(210, 10, 17, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 0 3px rgba(210, 10, 17, 0.4),
      0 0 16px rgba(210, 10, 17, 0.8),
      0 0 32px rgba(210, 10, 17, 0.4);
  }
}

@keyframes dotRing {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.3;
  }
}

/* ---- Bubble positions — aligned to the profile's anatomy ---- */
/* 1: 3-Chamber Insulation — top of profile, left side */
.hero-bubble--1 {
  top: 15%;
  right: 65%;
}
/* 2: Double Glazing — upper-mid, left side */
.hero-bubble--2 {
  top: 32%;
  right: 62%;
}
/* 3: Steel Reinforcement — upper-mid, right side */
.hero-bubble--3 {
  top: 25%;
  left: 65%;
}
/* 4: 60mm Depth — lower-mid, left side */
.hero-bubble--4 {
  top: 52%;
  right: 60%;
}
/* 5: Dual Sealing — lower, right side */
.hero-bubble--5 {
  top: 58%;
  left: 62%;
}

/* Right-side bubble text alignment */
.hero-bubble--right .hero-bubble-text {
  text-align: left;
}
.hero-bubble--left .hero-bubble-text {
  text-align: right;
}

/* ---- IDEAL 4000 specific bubble positions ---- */
.hero-profile-variant[data-variant='ideal4000'] .hero-bubble--1 {
  top: 10%;
  right: 62%;
}
.hero-profile-variant[data-variant='ideal4000'] .hero-bubble--2 {
  top: 35%;
  right: 64%;
}
.hero-profile-variant[data-variant='ideal4000'] .hero-bubble--3 {
  top: 20%;
  left: 58%;
}
.hero-profile-variant[data-variant='ideal4000'] .hero-bubble--4 {
  top: 55%;
  right: 60%;
}
.hero-profile-variant[data-variant='ideal4000'] .hero-bubble--5 {
  top: 65%;
  left: 55%;
}

/* Profile bottom label — Inside Glass Panel */
.hero-profile-label {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.6rem 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2rem;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s 1.5s var(--ease-out-expo);
  flex-shrink: 0;
}
.hero-profile-label.revealed {
  opacity: 1;
}
.hero-sparkle {
  animation: sparkleSpin 8s linear infinite;
  fill: var(--ap-red);
  opacity: 0.6;
}
@keyframes sparkleSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Scroll indicator — Light Theme ---- */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeInUp 0.6s 2s forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
  }
}
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--on-surface-variant), transparent);
  animation: scrollLineMove 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLineMove {
  0%,
  100% {
    scaley: 1;
    opacity: 1;
  }
  50% {
    scaley: 0.4;
    opacity: 0.3;
  }
}
.scroll-indicator .scroll-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* Nav lang dropdown — Light Theme */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--on-surface-variant);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color var(--trans-fast);
}
.nav-lang:hover {
  color: var(--on-surface);
}
.nav-lang svg {
  transition: transform var(--trans-fast);
}
.nav-lang:hover svg {
  transform: translateY(1px);
}

/* ---- Hero responsive ---- */
@media (max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    margin-top: 0;
    padding: 1.5rem;
  }
  .hero-profile-img {
    height: clamp(250px, 40vh, 350px);
  }
  .hero-content {
    text-align: left;
  }
  .hero-bubble {
    display: none;
  }
  .product-tab {
    padding: 0.7rem 1.2rem;
    min-width: auto;
  }
}

@media (max-width: 767px) {
  .hero-split {
    margin-top: 0;
    padding: 1.25rem;
    border-radius: 1.25rem;
  }
  .hero-line span {
    font-size: clamp(1.9rem, 9vw, 3rem);
  }
  .hero-product-selector {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .product-tab {
    width: 100%;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }
  .product-tab:first-child,
  .product-tab:last-child {
    border-radius: 0.5rem !important;
  }
  .hero-profile-label {
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
  }
}

/* ----------------------------------------------------------------
   SCROLL-DRIVEN FRAME ANIMATION
   ---------------------------------------------------------------- */
.scroll-animation {
  position: relative;
  height: 400vh;
}
.scroll-animation-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}
.scroll-animation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Text overlays */
.scroll-animation-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.scroll-text {
  position: absolute;
  color: var(--white);
  opacity: 0;
  will-change: transform, opacity;
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.5rem);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}
.scroll-text-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.scroll-text-1 .st-title {
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 0.2em;
}
.scroll-text-1 .st-sub {
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 300;
  opacity: 0.7;
  letter-spacing: 0.06em;
}
.scroll-text-2 {
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  text-align: right;
}
.scroll-text-3 {
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  text-align: left;
}
.scroll-text-2 .st-stat,
.scroll-text-3 .st-stat {
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.scroll-text-2 .st-label,
.scroll-text-3 .st-label {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 400;
  opacity: 0.5;
  margin-top: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-text-4 {
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
}
.scroll-text-4 .st-final {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 200;
  letter-spacing: 0.04em;
}

/* Reduced motion fallback */
.scroll-animation-fallback {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .scroll-animation {
    height: 300vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-animation {
    height: 100vh;
  }
  .scroll-animation-sticky {
    position: relative;
  }
  .scroll-animation-canvas {
    display: none;
  }
  .scroll-animation-fallback {
    display: block;
  }
  .scroll-text {
    opacity: 1 !important;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }
}

/* ----------------------------------------------------------------
   KEYWORD FEATURE SECTIONS (Oknoplast-inspired)
   ---------------------------------------------------------------- */
.keyword-feature {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.kw-feature-sticky {
  width: 100%;
  padding: clamp(4rem, 8vh, 8rem) 0;
}

.kw-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  min-height: 70vh;
  align-items: center;
}

.kw-feature-inner.kw-feature-reverse {
  direction: rtl;
}
.kw-feature-inner.kw-feature-reverse > * {
  direction: ltr;
}

.kw-feature-media {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 500px;
}

.kw-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.kw-feature-content {
  padding: clamp(3rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Glassmorphism content card overlay — Light Theme */
.kw-feature-content::before {
  content: '';
  position: absolute;
  inset: 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: none;
  border-radius: 0.125rem;
  z-index: -1;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.06);
}

.kw-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ap-red);
  margin-bottom: var(--space-md);
  display: block;
}

.kw-keyword {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--on-surface);
  margin-bottom: var(--space-md);
  transition: color 0.6s ease;
  background: linear-gradient(135deg, var(--on-surface) 40%, var(--ap-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.kw-desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--on-surface-variant);
  max-width: 480px;
}

@media (max-width: 767px) {
  .kw-feature-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .kw-feature-inner.kw-feature-reverse {
    direction: ltr;
  }
  .kw-feature-media {
    min-height: 300px;
  }
  .kw-keyword {
    font-size: clamp(3rem, 15vw, 5rem);
  }
}

/* ----------------------------------------------------------------
   BRAND SPLIT HEADLINE — Light Theme
   ---------------------------------------------------------------- */
.brand-split-headline {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin-bottom: 0.5em;
}

.split-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--on-surface);
  transition: color 0.6s ease;
  will-change: transform, opacity;
}

.split-line-accent {
  font-weight: 700;
  background: linear-gradient(135deg, var(--ap-red), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----------------------------------------------------------------
   VIDEO SHOWCASE — Light Theme
   ---------------------------------------------------------------- */
.video-showcase {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-container-low);
}
.video-showcase .section-header h2 {
  color: var(--on-surface);
}
.video-showcase .section-header p {
  color: var(--on-surface-variant);
}

.video-player-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: var(--space-lg) auto 0;
  border-radius: 0.125rem;
  overflow: hidden;
  background: var(--on-surface);
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.1);
}

.video-player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: opacity 0.4s ease;
  border-radius: 0;
  z-index: 2;
}
.video-play-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.video-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 80px;
  height: 80px;
  transition:
    transform 0.3s var(--ease-out-expo),
    opacity 0.3s ease;
}
.video-play-btn:hover {
  transform: scale(1.12);
}
.video-play-btn svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.2));
}

@media (max-width: 640px) {
  .video-play-btn {
    width: 56px;
    height: 56px;
  }
}

/* ----------------------------------------------------------------
   BRAND PROMISE — Light Theme
   ---------------------------------------------------------------- */
.brand-promise {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-container-low);
}
.brand-promise .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.brand-text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.9;
  color: var(--on-surface-variant);
  max-width: 520px;
  margin-top: var(--space-md);
}
.brand-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.brand-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Gold corner accent */
.brand-image-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  pointer-events: none;
  opacity: 0.5;
}

@media (max-width: 767px) {
  .brand-promise .container {
    grid-template-columns: 1fr;
  }
  .brand-image-wrap {
    aspect-ratio: 16/10;
  }
}

/* ----------------------------------------------------------------
   PRODUCT SHOWCASE SECTIONS
   ---------------------------------------------------------------- */
.product-section {
  position: relative;
  overflow: hidden;
  background-color: var(--ap-light-grey);
}
.product-section.reverse {
  background-color: var(--ap-mid-grey);
}
.product-section.reverse h2,
.product-section.reverse h3,
.product-section.reverse p,
.product-section.reverse .prod-copy,
.product-section.reverse .spec-item strong,
.product-section.reverse .spec-item span {
  color: var(--white);
}
.product-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
}
.product-section.reverse .container {
  direction: rtl;
}
.product-section.reverse .container > * {
  direction: ltr;
}

.product-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.profile-placeholder {
  width: 100%;
  max-width: 400px;
}
.product-profile-img {
  width: 100%;
  max-width: 450px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.15));
  transition: transform 0.6s var(--ease-out-expo);
}
.product-visual:hover .product-profile-img {
  transform: scale(1.03);
}

.product-info {
  max-width: 560px;
}

.product-title {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 900;
  color: var(--scroll-text);
  margin-bottom: 0.1em;
  position: relative;
  display: inline-block;
  transition: color 0.6s ease;
}
.product-title .underline-accent {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ap-red), var(--gold));
  width: 0;
  transition: width 1s var(--ease-out-expo);
}
.product-title.revealed .underline-accent {
  width: 100%;
}
.product-title .num-red {
  color: var(--ap-red);
}

.product-tagline {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 300;
  color: var(--ap-mid-grey);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.01em;
}

/* Spec grid */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md) var(--space-sm);
  margin-bottom: var(--space-lg);
}
.spec-item {
  text-align: center;
  padding: var(--space-sm);
  position: relative;
}
.spec-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
  background: var(--gold);
  opacity: 0.3;
}
.spec-value {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  color: var(--scroll-text);
  line-height: 1.1;
  margin-bottom: 0.3em;
  transition: color 0.6s ease;
}
.spec-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ap-mid-grey);
}

/* Features */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: var(--space-lg);
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  font-size: 0.92rem;
  color: var(--ap-mid-grey);
  line-height: 1.7;
}
.feature-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
}

@media (max-width: 767px) {
  .product-section .container {
    grid-template-columns: 1fr;
  }
  .product-section.reverse .container {
    direction: ltr;
  }
  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ----------------------------------------------------------------
   COMPARISON SECTION
   ---------------------------------------------------------------- */
.comparison-section {
  position: relative;
  background-color: var(--ap-mid-grey);
}
.comparison-heading h2 {
  color: var(--white);
}
.comparison-heading {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.comparison-heading h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--scroll-text);
  transition: color 0.6s ease;
}
.comparison-slider-wrap {
  position: relative;
  max-width: 1100px;
  margin-inline: auto;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  aspect-ratio: 16/9;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.comparison-side {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4.5rem);
}
.comparison-left {
  left: 0;
  width: 100%;
  background: var(--white);
  color: var(--ap-dark-grey);
}
.comparison-right {
  right: 0;
  width: 100%;
  background: var(--black);
  color: var(--white);
  clip-path: inset(0 0 0 50%);
}
.comparison-side h3 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: var(--space-md);
}
.comparison-specs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.comparison-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.88rem;
}
.comparison-right .comparison-spec-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.comparison-spec-row .spec-name {
  font-weight: 400;
  color: var(--ap-mid-grey);
}
.comparison-right .comparison-spec-row .spec-name {
  color: rgba(255, 255, 255, 0.45);
}
.comparison-spec-row .spec-val {
  font-weight: 700;
}

.comparison-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--ap-red);
  cursor: col-resize;
  z-index: 10;
  transform: translateX(-50%);
  box-shadow: 0 0 20px var(--ap-red-glow);
}
.comparison-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: var(--ap-red);
  border-radius: 0;
  box-shadow: 0 4px 20px var(--ap-red-glow);
}
.comparison-divider::after {
  content: '⟨  ⟩';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.comparison-recommendation {
  text-align: center;
  max-width: 650px;
  margin: var(--space-xl) auto 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 300;
  color: var(--ap-mid-grey);
  line-height: 1.8;
}
.comparison-recommendation strong {
  color: var(--scroll-text);
  font-weight: 700;
}

@media (max-width: 767px) {
  .comparison-slider-wrap {
    aspect-ratio: auto;
    min-height: 500px;
  }
}

/* ================================================================
   PRODUCTS SHOWCASE — Advanced Dual-Panel Layout
   ================================================================ */
.products-showcase {
  position: relative;
  overflow: hidden;
}

/* ================================================================
   DUAL PRODUCTS SHOWCASE — Side-by-Side with Tabs
   ================================================================ */
/* ================================================================
   PRODUCTS DUAL SHOWCASE — Light Theme
   ================================================================ */
.products-dual-showcase {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-block: clamp(4rem, 8vh, 6rem) clamp(5rem, 10vh, 8rem);
}

/* Animated Background — Light Theme */
.products-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.products-bg__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #060709 0%, #0e1014 50%, #060709 100%);
}

.products-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

.products-bg__glow {
  position: absolute;
  border-radius: 0;
  filter: blur(100px);
  opacity: 0.3;
  animation: pulseGlow 8s ease-in-out infinite;
}

.products-bg__glow--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(178, 0, 29, 0.28) 0%, transparent 70%);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.products-bg__glow--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(48, 77, 90, 0.28) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  animation-delay: -4s;
}

@keyframes pulseGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
}

/* Tabs Container */
.products-tabs-container {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

/* Premium Tab Bar — Dark Theme */
.products-tabs-premium {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.125rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Animated Tab Indicator */
.tabs-indicator {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  height: calc(100% - 0.75rem);
  background: var(--ap-red);
  border-radius: 0.125rem;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  box-shadow: 0 4px 16px var(--ap-red-glow);
}

.tabs-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(178, 0, 29, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.products-tabs-premium:hover .tabs-glow {
  opacity: 1;
}

.products-tab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 0.125rem;
  white-space: nowrap;
}

.products-tab .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.products-tab .tab-icon svg {
  width: 14px;
  height: 14px;
}

.products-tab .tab-text {
  position: relative;
}

.products-tab:hover {
  color: #ffffff;
}

.products-tab:hover .tab-icon {
  opacity: 1;
  transform: scale(1.1);
}

.products-tab.active {
  color: white;
}

.products-tab.active .tab-icon {
  opacity: 1;
}

/* Split Pane Layout */
.products-split {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: calc(100vh - 10rem);
  gap: 1.5rem;
  padding: 1rem 2rem 3rem;
}

.product-pane {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-pane:hover {
  z-index: 10;
}

.product-pane--2000,
.product-pane--4000 {
  background: transparent;
  color: #ffffff;
}

/* Inner panel — Dark Glass (showcase-card style) */
.product-pane__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 820px;
  height: 700px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-pane:hover .product-pane__inner {
  transform: translateY(-8px);
  box-shadow: 0 35px 60px rgba(0, 0, 0, 0.55);
}

/* Animated border glow */
.pane-border-glow {
  position: absolute;
  inset: -2px;
  border-radius: 0.125rem;
  background: linear-gradient(
    135deg,
    rgba(178, 0, 29, 0.3) 0%,
    transparent 50%,
    rgba(48, 77, 90, 0.2) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.product-pane:hover .pane-border-glow {
  opacity: 1;
}

@keyframes borderRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.product-pane__content {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.product-pane__image {
  position: relative;
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.product-pane__image .feature-pills {
  position: absolute;
  bottom: 1.5rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.product-pane__image .feature-pill {
  font-size: 0.65rem;
  padding: 0.35rem 0.6rem;
}

.image-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(178, 0, 29, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.product-pane:hover .image-glow {
  opacity: 1;
}

.product-pane__image img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.18)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-pane:hover .product-pane__image img {
  transform: scale(1.05) translateY(-5px);
}

/* Pane Header - Light Theme */
.product-pane__header {
  margin-bottom: 1.5rem;
}

.product-pane__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ap-red-light);
  margin-bottom: 1rem;
}

.label-dot {
  width: 6px;
  height: 6px;
  background: var(--ap-red);
  border-radius: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

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

.product-pane__title {
  margin: 0 0 0.75rem 0;
}

.title-line {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.title-accent {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--ap-red) 0%, #d42940 50%, var(--ap-red) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}

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

.product-pane__subtitle {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--font-display);
  color: rgba(255, 255, 255, 0.55);
}

.subtitle-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.subtitle-unit {
  font-size: 0.75rem;
  text-transform: lowercase;
}

.subtitle-text {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 0.5rem;
}

/* Main Content Area */
.product-pane__main {
  flex: 1;
  min-height: 0;
}

.product-pane__section {
  animation: sectionReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-pane__section.hidden {
  display: none;
}

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

/* Specification Grid - Premium */
.spec-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
}

.spec-item-minimal {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.spec-item-minimal:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(178, 0, 29, 0.4);
  transform: translateY(-2px);
}

.spec-item-minimal__label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
}

.spec-item-minimal__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1;
}

.spec-item-minimal__value small {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 2px;
}

/* Features List - Light Theme */
.features-list-minimal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.features-list-minimal li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  padding: 0.55rem 0.75rem;
  padding-left: 1.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.125rem;
  transition: all 0.3s ease;
}

.features-list-minimal li:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.features-list-minimal li::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--ap-red);
  border-radius: 0;
}

/* Technical List - Light Theme */
.technical-list-minimal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* uPVC Colour Options — IDEAL 2000 features pane */
.pane-colour-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pane-colour-section__label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 0.75rem;
}
.pane-colour-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.pane-colour-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: default;
  transition: transform 0.2s ease;
}
.pane-colour-swatch:hover {
  transform: scale(1.2);
}
.pane-colour-section__note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.pane-colour-section__note svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}
.pane-colour-section__note strong {
  color: rgba(255, 255, 255, 0.85);
}

.technical-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.125rem;
  border-left: 2px solid var(--ap-red);
  transition: all 0.3s ease;
}

.technical-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.technical-num {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ap-red);
  flex-shrink: 0;
  opacity: 0.7;
}

.technical-item p {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.3;
}

/* Footer */
.product-pane__footer {
  display: none;
}

/* ----------------------------------------------------------------
   FEATURE PILLS — Light Theme
   ---------------------------------------------------------------- */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Pills placed directly under the 6 spec blocks */
.feature-pills--under-specs {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(178, 0, 29, 0.15);
}

.feature-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: rgba(178, 0, 29, 0.2);
  border: 1px solid rgba(178, 0, 29, 0.3);
  border-radius: 0.125rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  overflow: hidden;
}

.feature-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(178, 0, 29, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-pill:hover {
  background: rgba(178, 0, 29, 0.38);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(178, 0, 29, 0.35);
}

.feature-pill:hover::before {
  opacity: 1;
}

.feature-pill--glow {
  animation: none;
}

.feature-pill svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ap-red);
}

/* Responsive - Premium */
@media (max-width: 1024px) {
  .products-split {
    flex-direction: column;
    padding: 1rem;
  }

  .product-pane {
    min-height: auto;
  }

  .product-pane__inner {
    flex-direction: column;
    max-width: 100%;
  }

  .product-pane__content {
    width: auto;
  }

  .product-pane__image {
    width: 100%;
    height: 320px;
    order: -1;
  }

  .products-tabs-premium {
    gap: 0.125rem;
    padding: 0.25rem;
  }

  .products-tab {
    padding: 0.6rem 1rem;
    font-size: 0.55rem;
  }

  .products-tab .tab-icon {
    display: none;
  }
}

@media (max-width: 640px) {
  .products-tabs-premium {
    flex-direction: column;
    width: calc(100% - 2rem);
    margin: 0 1rem;
    border-radius: 0;
  }

  .tabs-indicator {
    width: calc(100% - 0.75rem) !important;
    left: 0.375rem !important;
  }

  .products-tab {
    width: 100%;
    justify-content: center;
  }

  .spec-grid-2col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-pane__title {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .feature-pills {
    gap: 0.5rem;
  }

  .feature-pill {
    font-size: 0.6rem;
    padding: 0.4rem 0.8rem;
  }
}

/* ================================================================
   IDEAL 4000 PANEL — Dual-Panel Dark Layout
   ================================================================ */
.product-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.product-panel__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.product-panel--light {
  background: linear-gradient(135deg, var(--ap-ultra-light) 0%, var(--ap-light-grey) 100%);
}

.product-panel--light .product-panel__bg {
  background:
    radial-gradient(ellipse 80% 60% at 85% 50%, rgba(210, 10, 17, 0.04) 0%, transparent 70%),
    radial-gradient(circle at 15% 80%, rgba(0, 0, 0, 0.02) 0%, transparent 40%);
}

.product-panel--dark {
  background: linear-gradient(135deg, var(--ap-dark-grey) 0%, #1a1a1a 100%);
}

.product-panel--dark .product-panel__bg {
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(210, 10, 17, 0.08) 0%, transparent 70%),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
}

/* Panel Content */
.product-panel__content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 10rem);
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(4rem, 8vh, 8rem) clamp(1.5rem, 5vw, 5rem);
}

.product-panel__content--reverse {
  direction: rtl;
}

.product-panel__content--reverse > * {
  direction: ltr;
}

/* Panel Info */
.product-panel__info {
  max-width: 580px;
}

.product-panel__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--ap-red);
  padding: 0.6em 1.5em;
  border: 1px solid var(--ap-red);
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
}

.product-panel__label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ap-red);
  opacity: 0.08;
}

.product-panel__title {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.2em;
  color: var(--ap-dark-grey);
  letter-spacing: -0.02em;
}

.product-panel--dark .product-panel__title {
  color: var(--white);
}

.product-panel__title .text-red {
  color: var(--ap-red);
}

.product-panel__title sup {
  font-size: 0.35em;
  vertical-align: super;
  margin-left: 0.1em;
}

.product-panel__tagline {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  color: var(--ap-mid-grey);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.01em;
}

.product-panel--dark .product-panel__tagline {
  color: rgba(255, 255, 255, 0.6);
}

/* Spec Blocks */
.product-panel__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.spec-block {
  text-align: center;
  padding: var(--space-sm) var(--space-xs);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.4s var(--ease-out-expo);
}

.product-panel--dark .spec-block {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.spec-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

.product-panel--dark .spec-block:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.spec-block__value {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--ap-dark-grey);
  line-height: 1.1;
  margin-bottom: 0.25em;
}

.product-panel--dark .spec-block__value {
  color: var(--white);
}

.spec-block__value small {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--ap-mid-grey);
  margin-left: 0.1em;
}

.product-panel--dark .spec-block__value small {
  color: rgba(255, 255, 255, 0.5);
}

.spec-block__label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ap-mid-grey);
}

.product-panel--dark .spec-block__label {
  color: rgba(255, 255, 255, 0.4);
}

/* Features List */
.product-panel__features {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-panel__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  font-size: 0.92rem;
  color: var(--ap-mid-grey);
  line-height: 1.6;
}

.product-panel--dark .product-panel__features li {
  color: rgba(255, 255, 255, 0.7);
}

.product-panel__features svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--ap-red);
}

/* Panel Buttons */
.product-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 1em 2em;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ap-dark-grey);
  background: transparent;
  border: 2px solid var(--ap-dark-grey);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}

.product-panel__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ap-dark-grey);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
  z-index: -1;
}

.product-panel__btn:hover {
  color: var(--white);
}

.product-panel__btn:hover::before {
  transform: scaleX(1);
}

.product-panel__btn--light {
  color: var(--white);
  border-color: var(--white);
}

.product-panel__btn--light::before {
  background: var(--white);
}

.product-panel__btn--light:hover {
  color: var(--ap-dark-grey);
}

/* Panel Visual */
.product-panel__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-panel__image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-panel__image {
  max-width: 100%;
  width: clamp(280px, 35vw, 500px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.15));
  transition: transform 0.8s var(--ease-out-expo);
  will-change: transform;
}

.product-panel--dark .product-panel__image {
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.4));
}

.product-panel__image-wrap:hover .product-panel__image {
  transform: scale(1.05) translateY(-10px);
}

.product-panel__glow {
  position: absolute;
  width: 120%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(210, 10, 17, 0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  animation: glowPulse 4s ease-in-out infinite;
}

.product-panel__glow--dark {
  background: radial-gradient(ellipse at center, rgba(210, 10, 17, 0.2) 0%, transparent 60%);
  opacity: 0.8;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* Comparison Badge */
.products-showcase__compare {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 10;
}

.compare-badge {
  display: flex;
  align-items: center;
  gap: 1.5em;
  background: var(--white);
  padding: 1.25em 2.5em;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.compare-badge__text {
  font-size: 0.85rem;
  color: var(--ap-mid-grey);
  white-space: nowrap;
}

.compare-badge__text strong {
  color: var(--ap-dark-grey);
  font-weight: 700;
}

.compare-badge__divider {
  width: 1px;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
  .product-panel__content {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .product-panel__content--reverse {
    direction: ltr;
  }

  .product-panel__info {
    max-width: 100%;
    order: 2;
  }

  .product-panel__visual {
    order: 1;
  }

  .product-panel__specs {
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
    margin-inline: auto;
  }

  .product-panel__features {
    align-items: center;
    text-align: left;
    max-width: 400px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .product-panel {
    min-height: auto;
    padding: var(--space-xl) 0;
  }

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

  .compare-badge {
    flex-direction: column;
    gap: 0.75em;
    text-align: center;
    padding: 1.5em 2em;
  }

  .compare-badge__divider {
    width: 40px;
    height: 1px;
  }

  .products-showcase__compare {
    position: relative;
    transform: none;
    left: auto;
    padding: var(--space-lg) var(--space-md);
    background: var(--ap-dark-grey);
  }
}

/* ----------------------------------------------------------------
   TECHNOLOGY — Horizontal Scroll
   ---------------------------------------------------------------- */
.tech-section {
  overflow: hidden;
  background-color: var(--ap-ultra-light);
  display: flex;
  flex-direction: column;
}
.tech-section .container {
  display: flex;
  flex-direction: column;
}
.tech-section .section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  flex-shrink: 0;
}
.tech-section .section-header h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--scroll-text);
  transition: color 0.6s ease;
}
.tech-section .section-header p {
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  color: var(--ap-mid-grey);
  font-weight: 300;
  margin-top: 1em;
  letter-spacing: 0.02em;
}
.tech-track-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tech-track-wrapper::-webkit-scrollbar {
  display: none;
}
.tech-track {
  display: flex;
  gap: var(--space-md);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  width: max-content;
}
.tech-card {
  flex: 0 0 clamp(320px, 38vw, 500px);
  aspect-ratio: 3/4;
  scroll-snap-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  cursor: grab;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}
.tech-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
}
.tech-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-expo);
}
.tech-card:hover .tech-card-bg img {
  transform: scale(1.08);
}
.tech-card-content {
  position: relative;
  z-index: 2;
  color: var(--white);
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
  margin: -0.5rem;
}
.tech-card-title {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  margin-bottom: 0.5em;
}
.tech-card-desc {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.75;
}
.tech-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}
.tech-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--ap-light-grey);
  border: none;
  cursor: pointer;
  transition: all var(--trans-base);
  padding: 0;
}
.tech-dot.active {
  background: var(--ap-red);
  box-shadow: 0 0 10px var(--ap-red-glow);
  transform: scale(1.5);
}

/* ----------------------------------------------------------------
   AWARDS & RECOGNITION (replaces Design Options)
   ---------------------------------------------------------------- */
.awards-section {
  position: relative;
  overflow: hidden;
  background-color: var(--ap-dark-grey);
  display: flex;
  align-items: center;
}

/* Background photo */
.awards-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.awards-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(0.75) brightness(0.55);
  transform: scale(1.04);
}

/* Dark gradient scrim — deepens edges so glass cards read clearly */
.awards-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.55) 0%,
      rgba(10, 10, 10, 0.3) 40%,
      rgba(10, 10, 10, 0.55) 100%
    ),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10, 10, 10, 0.45) 100%);
}

.awards-section .container {
  position: relative;
  z-index: 2;
}
.awards-section .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.awards-section .section-header h2,
.awards-section .section-header p {
  color: var(--white);
}
.awards-section .award-title,
.awards-section .award-desc {
  color: rgba(255, 255, 255, 0.85);
}
.awards-section .section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  flex-shrink: 0;
}
.awards-section .section-header h2 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--scroll-text);
  transition: color 0.6s ease;
}
.awards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  max-width: 1100px;
  margin-inline: auto;
}
.award-card {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 340px;
  position: relative;
  padding: clamp(2rem, 3vw, 3rem);
  background: rgba(10, 10, 10, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.28);
  transition:
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Top-edge highlight shimmer */
.award-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%);
  pointer-events: none;
}
.award-card:hover::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.award-card:hover {
  background: rgba(10, 10, 10, 0.68);
  border-color: rgba(178, 0, 29, 0.35);
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 24px 64px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(178, 0, 29, 0.12);
}
.award-number {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--ap-red), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-sm);
}
.award-title {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
  color: var(--scroll-text);
  margin-bottom: 0.75em;
  transition: color 0.6s ease;
}
.award-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ap-mid-grey);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .awards-grid {
    flex-direction: column;
  }
  .award-card {
    max-width: 100%;
  }
}

/* ================================================================
   GLOBAL PRESENCE — Premium Industrial Redesign
   ================================================================ */

/* ── Section shell ── */
.gp-section {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(5rem, 10vh, 8rem);
  background: #0e1014;
}

/* ── Background with parallax-ready structure ── */
.gp-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}
.gp-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  transform: scale(1);
  transform-origin: 60% 50%;
  filter: saturate(1.1) contrast(1.05) brightness(0.95);
}
@keyframes gp-kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-1.5%, 2%);
  }
}

/* ── Cinematic multi-layer overlay ── */
.gp-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Deep bottom fade for grounding */
    linear-gradient(
      to top,
      rgba(8, 10, 12, 0.98) 0%,
      rgba(8, 10, 12, 0.75) 20%,
      rgba(8, 10, 12, 0.35) 40%,
      transparent 60%
    ),
    /* Left content protection */
    linear-gradient(
        105deg,
        rgba(8, 10, 12, 0.95) 0%,
        rgba(8, 10, 12, 0.8) 25%,
        rgba(8, 10, 12, 0.45) 45%,
        transparent 70%
      ),
    /* Top vignette */ linear-gradient(to bottom, rgba(8, 10, 12, 0.5) 0%, transparent 20%),
    /* Brand red ambient glow */
    radial-gradient(ellipse 60% 70% at 5% 55%, rgba(178, 0, 29, 0.15) 0%, transparent 60%),
    /* Secondary blue accent */
    radial-gradient(ellipse 50% 60% at 95% 25%, rgba(48, 77, 90, 0.12) 0%, transparent 55%);
}

/* Animated grain texture */
.gp-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Main content grid ── */
.gp-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width, 1440px);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr minmax(360px, 420px);
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
}

/* ── Certification badge pills ── */
.gp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.gp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.gp-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-red);
  flex-shrink: 0;
  box-shadow:
    0 0 8px rgba(178, 0, 29, 0.9),
    0 0 20px rgba(178, 0, 29, 0.4);
  animation: gp-badge-pulse 2s ease-in-out infinite;
}
@keyframes gp-badge-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}
.gp-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ── Eyebrow label ── */
.gp-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gp-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

/* ── Main heading ── */
.gp-heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 60px rgba(0, 0, 0, 0.4);
}
.gp-heading-em {
  font-style: normal;
  background: linear-gradient(135deg, var(--ap-red) 0%, #e8303c 45%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}
.gp-heading-em::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: 0;
  width: 100%;
  height: 0.08em;
  background: linear-gradient(90deg, var(--ap-red) 0%, transparent 100%);
  opacity: 0.4;
  border-radius: 2px;
}

/* ── Body copy ── */
.gp-body {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
  max-width: 48ch;
  margin-bottom: 2rem;
}
.gp-body sup {
  font-size: 0.6em;
  color: var(--ap-red);
}

/* ── CTAs ── */
.gp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.gp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2.4em;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.gp-btn--primary {
  background: var(--ap-red);
  color: #fff;
  border: 2px solid var(--ap-red);
  box-shadow: 0 6px 24px rgba(178, 0, 29, 0.25);
}
.gp-btn--primary:hover::before {
  opacity: 1;
}
.gp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(178, 0, 29, 0.35);
}
.gp-btn--primary svg {
  transition: transform 0.4s var(--ease-out-expo);
}
.gp-btn--primary:hover svg {
  transform: translateX(5px);
}

.gp-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}
.gp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ── Stats row with animated counters ── */
.gp-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.gp-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: var(--ap-red);
}
.gp-stat {
  flex: 1;
  padding-right: 2rem;
  position: relative;
}
.gp-stat + .gp-stat {
  padding-left: 2rem;
  padding-right: 2rem;
}
.gp-stat + .gp-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
}
.gp-stat:last-child {
  padding-right: 0;
}
.gp-stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  position: relative;
}
.gp-stat-plus {
  font-size: 0.48em;
  color: var(--ap-red);
  vertical-align: super;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(178, 0, 29, 0.5);
}
.gp-stat-lbl {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 0.55rem;
}

/* ══════════════════════════════════════════════════════
   GLASS PRESENCE PANEL (right column) — Premium Glass
   ══════════════════════════════════════════════════════ */
.gp-panel {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.5rem;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
}
.gp-panel:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(178, 0, 29, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Gradient orbs */
.gp-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(178, 0, 29, 0.2) 0%, transparent 65%);
  pointer-events: none;
  animation: gp-orb-float 8s ease-in-out infinite;
}
.gp-panel::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -25%;
  width: 70%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(48, 77, 90, 0.15) 0%, transparent 60%);
  pointer-events: none;
  animation: gp-orb-float 10s ease-in-out infinite reverse;
}
@keyframes gp-orb-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(10%, 10%) scale(1.05);
  }
}

/* ── Globe wireframe with rotation ── */
.gp-globe {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.8rem;
  position: relative;
  z-index: 1;
}
.gp-globe-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  opacity: 0.92;
  animation: gp-globe-rotate 60s linear infinite;
}
@keyframes gp-globe-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Panel heading ── */
.gp-panel-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── Regions list ── */
.gp-regions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  margin-bottom: 0.5rem;
}
.gp-region {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.75rem;
  transition: all 0.35s var(--ease-out-expo);
  position: relative;
  background: transparent;
}
.gp-region::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gp-region:hover::before {
  opacity: 1;
}
.gp-region:hover {
  transform: translateX(4px);
}
.gp-region-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all 0.35s ease;
}
.gp-region:hover .gp-region-dot {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}
.gp-region--hq .gp-region-dot {
  background: var(--ap-red);
  box-shadow: 0 0 0 0 rgba(178, 0, 29, 0.6);
  animation: gp-ping 2.2s ease-out infinite;
}
@keyframes gp-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(178, 0, 29, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(178, 0, 29, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(178, 0, 29, 0);
  }
}
.gp-region-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.gp-region-text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.25;
  transition: color 0.35s ease;
}
.gp-region:hover .gp-region-text strong {
  color: #fff;
}
.gp-region-text small {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.38);
  font-weight: 400;
  transition: color 0.35s ease;
}
.gp-region:hover .gp-region-text small {
  color: rgba(255, 255, 255, 0.55);
}
.gp-region-tag {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.25) 0%, rgba(178, 0, 29, 0.15) 100%);
  border: 1px solid rgba(178, 0, 29, 0.4);
  color: rgba(255, 160, 160, 0.95);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 12px rgba(178, 0, 29, 0.2);
}

/* ── Panel footer stat bar ── */
.gp-panel-footer {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border-radius: 1rem;
  padding: 1.3rem 0.5rem;
  margin-top: 1.5rem;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gp-panel-stat {
  text-align: center;
  flex: 1;
  position: relative;
}
.gp-panel-stat + .gp-panel-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
}
.gp-panel-stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.gp-panel-stat-val sup {
  font-size: 0.55em;
  color: var(--ap-red);
  text-shadow: 0 0 10px rgba(178, 0, 29, 0.5);
}
.gp-panel-stat-lbl {
  display: block;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.35rem;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .gp-container {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 3rem;
  }
  .gp-panel {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
  .gp-globe-svg {
    max-width: 180px;
  }
}
@media (max-width: 600px) {
  .gp-heading {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }
  .gp-panel {
    border-radius: 1.5rem;
    padding: 1.8rem 1.5rem 1.5rem;
  }
  .gp-stats {
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 0;
    border-top: none;
  }
  .gp-stats::before {
    display: none;
  }
  .gp-stat {
    flex: 0 0 100%;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem !important;
  }
  .gp-stat + .gp-stat::before {
    display: none;
  }
  .gp-badges {
    justify-content: center;
  }
  .gp-content {
    text-align: center;
  }
  .gp-eyebrow::before {
    display: none;
  }
  .gp-actions {
    justify-content: center;
  }
  .gp-body {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-bg img {
    animation: none;
  }
  .gp-region--hq .gp-region-dot {
    animation: none;
  }
  .gp-globe-svg {
    animation: none;
  }
  .gp-panel::before,
  .gp-panel::after {
    animation: none;
  }
  .gp-badge::before {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════
   SPECIFICATION CREDENTIAL PANEL — Architect-Facing
   ══════════════════════════════════════════════════════ */

/* Panel modifier — tighten inner padding slightly */
.gp-spec-panel {
  padding: 1.75rem 1.6rem 1.5rem;
}

.gp-spec-header {
  margin-bottom: 1.6rem;
  position: relative;
  z-index: 1;
}
.gp-spec-eyebrow {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gp-spec-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  flex-shrink: 0;
}
.gp-spec-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ── Spec list ── */
.gp-spec-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
  margin-bottom: 1.4rem;
}
.gp-spec-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.85rem;
  border-radius: 0.75rem;
  position: relative;
  transition:
    background 0.3s var(--ease-out-expo),
    transform 0.3s var(--ease-out-expo);
}
.gp-spec-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.025) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gp-spec-item:hover::before {
  opacity: 1;
}
.gp-spec-item:hover {
  transform: translateX(3px);
}

/* Left icon */
.gp-spec-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.18) 0%, rgba(178, 0, 29, 0.08) 100%);
  border: 1px solid rgba(178, 0, 29, 0.28);
  border-radius: 0.6rem;
  flex-shrink: 0;
  color: rgba(255, 160, 140, 0.9);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
.gp-spec-item:hover .gp-spec-icon {
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.28) 0%, rgba(178, 0, 29, 0.14) 100%);
  border-color: rgba(178, 0, 29, 0.5);
  box-shadow: 0 0 16px rgba(178, 0, 29, 0.2);
}

/* Text block */
.gp-spec-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.gp-spec-text strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.gp-spec-text small {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  line-height: 1.4;
  transition: color 0.3s ease;
}
.gp-spec-item:hover .gp-spec-text small {
  color: rgba(255, 255, 255, 0.58);
}

/* Grade badge */
.gp-spec-grade {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 200, 180, 0.85);
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.2) 0%, rgba(178, 0, 29, 0.1) 100%);
  border: 1px solid rgba(178, 0, 29, 0.3);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

/* ── Exclusive distributor block ── */
.gp-exclusive {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.1) 0%, rgba(178, 0, 29, 0.04) 100%);
  border: 1px solid rgba(178, 0, 29, 0.25);
  border-radius: 1rem;
  position: relative;
  z-index: 1;
}
.gp-exclusive-mark {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gp-exclusive-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gp-exclusive-text strong {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  font-family: var(--font-display);
}
.gp-exclusive-text span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ================================================================
   TRUST / TESTIMONIALS — Ultra-Premium Award-Winning Design
   Advanced CSS with 3D transforms, animated gradients, glassmorphism
   ================================================================ */

/* ── Section shell with perspective ── */
.trust-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0b 0%, #131517 50%, #1a1d21 100%);
  padding-block: clamp(5rem, 10vh, 8rem);
}

/* ── Cinematic background composition ── */
.trust-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Animated mesh gradient */
.trust-gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
}
.trust-gradient--1 {
  top: -20%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(178, 0, 29, 0.2) 0%, transparent 70%);
}
.trust-gradient--2 {
  bottom: -20%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.1) 0%, transparent 70%);
}

/* Subtle grid overlay */
.trust-grid-overlay {
  display: none;
}

/* Floating particles - disabled for cleaner look */
.trust-section::before {
  display: none;
}

/* ══════════════════════════════════════════════════════
   PREMIUM MARQUEE WITH GLOW
   ══════════════════════════════════════════════════════ */
.trust-marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 1rem 0;
  background: rgba(178, 0, 29, 0.06);
  border-top: 1px solid rgba(178, 0, 29, 0.15);
  border-bottom: 1px solid rgba(178, 0, 29, 0.15);
}
.trust-marquee::before,
.trust-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.trust-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #0a0a0b 0%, transparent 100%);
}
.trust-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #0a0a0b 0%, transparent 100%);
}
.trust-marquee__track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: trust-scroll 45s linear infinite;
}
.trust-marquee__track:hover {
  animation-play-state: paused;
}
@keyframes trust-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.trust-marquee__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
}
.trust-marquee__item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ap-red);
  transition: width 0.4s var(--ease-out-expo);
}
.trust-marquee__item:hover {
  color: #fff;
}
.trust-marquee__item:hover::after {
  width: 100%;
}
.trust-marquee__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ap-red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 6px;
}
.trust-marquee__divider {
  width: 4px;
  height: 4px;
  background: var(--ap-red);
  border-radius: 50%;
  opacity: 0.5;
}

/* ══════════════════════════════════════════════════════
   MAIN CONTAINER
   ══════════════════════════════════════════════════════ */
.trust-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

/* ══════════════════════════════════════════════════════
   SECTION HEADER — CINEMATIC
   ══════════════════════════════════════════════════════ */
.trust-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vh, 4rem);
  position: relative;
}

.trust-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(178, 0, 29, 0.1);
  border: 1px solid rgba(178, 0, 29, 0.25);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.trust-header__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--ap-red);
  border-radius: 50%;
}
.trust-header__badge-text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.trust-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.trust-header__title-accent {
  color: var(--ap-red);
}

.trust-header__subtitle {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.5);
  max-width: 48ch;
  margin-inline: auto;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════
   BENTO GRID — 3D DEPTH
   ══════════════════════════════════════════════════════ */
.trust-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vh, 4rem);
}

/* Featured card spans full width */
.trust-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 380px;
}

/* Standard cards */
.trust-card:not(.trust-card--featured):nth-of-type(2) {
  grid-column: 1 / 7;
}
.trust-card:not(.trust-card--featured):nth-of-type(3) {
  grid-column: 7 / -1;
}

/* Stats card */
.trust-stats-card {
  grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════
   CARD — PREMIUM GLASSMORPHISM
   ══════════════════════════════════════════════════════ */
.trust-card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.5s var(--ease-out-expo);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transform-style: preserve-3d;
}

/* Animated border gradient */
.trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(178, 0, 29, 0.5) 0%,
    transparent 25%,
    rgba(201, 169, 110, 0.3) 50%,
    transparent 75%,
    rgba(178, 0, 29, 0.5) 100%
  );
  background-size: 400% 400%;
  -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.6s ease;
  pointer-events: none;
  animation: trust-border-flow 6s linear infinite paused;
}
@keyframes trust-border-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 400%;
  }
}
.trust-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* Inner glow */
.trust-card__glow {
  display: none;
}

/* Hover effect */
.trust-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(178, 0, 29, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  border-color: rgba(178, 0, 29, 0.25);
}

/* ── Card content ── */
.trust-card__content {
  padding: clamp(2rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}
.trust-card--featured .trust-card__content {
  justify-content: center;
}

.trust-card__quote-mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(178, 0, 29, 0.1);
  border: 1px solid rgba(178, 0, 29, 0.2);
  border-radius: 12px;
  color: var(--ap-red);
  margin-bottom: 1.5rem;
}
.trust-card__quote-mark svg {
  width: 24px;
  height: 24px;
}

.trust-card__quote {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2rem;
  flex: 1;
}
.trust-card--featured .trust-card__quote {
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  color: rgba(255, 255, 255, 0.85);
}
.trust-card__quote sup {
  font-size: 0.55em;
  color: var(--ap-red);
  font-weight: 700;
}

/* ── Card author — Premium ── */
.trust-card__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.trust-card__author::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--ap-red) 0%, transparent 100%);
}

.trust-card__avatar {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--ap-red) 0%, #6d0012 100%);
  border-radius: 18px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 8px 20px rgba(178, 0, 29, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.trust-card__avatar::before {
  content: attr(data-initials);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.trust-card__avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}
.trust-card__avatar svg {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  color: rgba(255, 255, 255, 0.15);
}

.trust-card__author-info {
  flex: 1;
  min-width: 0;
}
.trust-card__name {
  display: block;
  font-style: normal;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}
.trust-card__role {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.trust-card__company {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ap-red);
  margin-top: 0.25rem;
  padding: 0.2rem 0.6rem;
  background: rgba(178, 0, 29, 0.15);
  border-radius: 999px;
}

.trust-card__rating {
  display: flex;
  gap: 0.25rem;
  color: var(--gold);
  font-size: 1rem;
  text-shadow: 0 0 15px rgba(201, 169, 110, 0.5);
}

/* ── Featured card image — Cinematic ── */
.trust-card__image {
  position: relative;
  overflow: hidden;
}
.trust-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1s var(--ease-out-expo),
    filter 0.6s ease;
  filter: saturate(0.9);
}
.trust-card:hover .trust-card__image img {
  transform: scale(1.08);
  filter: saturate(1.1);
}
.trust-card__image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(178, 0, 29, 0.3) 0%, transparent 60%),
    linear-gradient(to right, rgba(10, 10, 11, 0.8) 0%, transparent 40%);
}
.trust-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.6) 0%, transparent 30%);
}

/* ══════════════════════════════════════════════════════
   STATS CARD — ULTRA PREMIUM
   ══════════════════════════════════════════════════════ */
.trust-stats-card {
  background: linear-gradient(
    145deg,
    rgba(178, 0, 29, 0.12) 0%,
    rgba(10, 10, 11, 0.95) 30%,
    rgba(10, 10, 11, 0.98) 100%
  );
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(178, 0, 29, 0.2);
  border-radius: 1.5rem;
  padding: 2.5rem 3rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Top accent line */
.trust-stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ap-red) 50%, transparent 100%);
}

.trust-stats-card__inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 1;
}

.trust-stats-card__item {
  text-align: center;
  position: relative;
}

.trust-stats-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}
.trust-stats-card__value sup {
  font-size: 0.35em;
  color: var(--ap-red);
  margin-left: 0.1em;
}
.trust-stats-card__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.6rem;
}

.trust-stats-card__divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
}

/* ══════════════════════════════════════════════════════
   TRUST INDICATORS — FLOATING PILLS
   ══════════════════════════════════════════════════════ */
.trust-indicators {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: clamp(2rem, 4vh, 3rem);
  position: relative;
}
.trust-indicators::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(178, 0, 29, 0.4) 50%, transparent 100%);
}

.trust-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  transition: all 0.4s var(--ease-out-expo);
}
.trust-indicator:hover {
  transform: translateY(-2px);
  border-color: rgba(178, 0, 29, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.trust-indicator__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-red);
  border-radius: 8px;
  color: #fff;
}
.trust-indicator__icon svg {
  width: 16px;
  height: 16px;
}

.trust-indicator__text {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .trust-card--featured {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .trust-card__image {
    height: 320px;
    order: -1;
  }
}

@media (max-width: 900px) {
  .trust-bento {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .trust-stats-card {
    padding: 2.5rem 2rem;
  }
  .trust-stats-card__inner {
    flex-direction: column;
    gap: 2.5rem;
  }
  .trust-stats-card__divider {
    width: 80px;
    height: 1px;
  }
}

@media (max-width: 600px) {
  .trust-header__title {
    font-size: clamp(2.4rem, 10vw, 3.2rem);
  }
  .trust-card__content {
    padding: 2rem;
  }
  .trust-indicators {
    gap: 1rem;
  }
  .trust-indicator {
    padding: 0.7rem 1.2rem;
  }
  .trust-marquee::before,
  .trust-marquee::after {
    width: 80px;
  }
  .trust-grid-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-marquee__track {
    animation: none;
  }
  .trust-gradient {
    animation: none;
  }
  .trust-header__badge-dot {
    animation: none;
  }
  .trust-header__title-accent {
    animation: none;
  }
  .trust-header__title-accent::after {
    animation: none;
  }
  .trust-card::before {
    animation: none;
  }
  .trust-stats-card::before {
    animation: none;
  }
  .trust-stats-card::after {
    animation: none;
  }
  .trust-marquee {
    animation: none;
    background-size: 100% 100%;
  }
  .trust-marquee__divider {
    animation: none;
  }
  .trust-section::before {
    animation: none;
  }
}

/* ================================================================
   GLOBAL IMPACT — Advanced 3D Globe Visualization Section
   Premium CSS with 3D transforms, animated rings, glassmorphism
   ================================================================ */

/* ── Section shell with perspective context ── */
.global-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #0a0a0b 0%, #0f1114 30%, #131517 60%, #1a1d21 100%);
  padding-block: clamp(6rem, 12vh, 10rem);
  perspective: 1200px;
  min-height: 100vh;
}

/* Animated grain texture */
.global-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ── Animated mesh background ── */
.global-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.global-mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(178, 0, 29, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 0, 29, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: meshMove 20s linear infinite;
}

@keyframes meshMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(60px, 60px);
  }
}

.global-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: glowPulse 8s ease-in-out infinite;
}

.global-glow--1 {
  top: 10%;
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(178, 0, 29, 0.3) 0%, transparent 70%);
}

.global-glow--2 {
  bottom: 20%;
  right: 10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.15) 0%, transparent 70%);
  animation-delay: -4s;
}

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

/* ══════════════════════════════════════════════════════
   COBE WEBGL GLOBE
   ══════════════════════════════════════════════════════ */
.global-globe-center {
  position: relative;
  flex-shrink: 0;
}

.global-globe-center canvas {
  width: 300px;
  height: 300px;
  opacity: 0.85;
  transition: opacity 0.5s ease;
  display: block;
}

.global-section:hover .global-globe-center canvas {
  opacity: 1;
}

/* Globe location labels using CSS Anchor Positioning */
.globe-label {
  position: absolute;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-bottom: 3px;
  padding: 0.125rem 0.35rem;
  background: var(--ap-red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
  z-index: 10;
  text-transform: uppercase;
}

.global-section.theme-light .globe-label {
  background: var(--ap-red);
  color: #fff;
  box-shadow: 0 1px 4px rgba(178, 0, 29, 0.35);
}

/* ══════════════════════════════════════════════════════
   CONTENT CONTAINER
   ══════════════════════════════════════════════════════ */
.global-container {
  position: relative;
  z-index: 10;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

/* ══════════════════════════════════════════════════════
   SECTION HEADER
   ══════════════════════════════════════════════════════ */
.global-header {
  text-align: center;
  margin-bottom: clamp(4rem, 8vh, 6rem);
}

.global-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.global-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-red);
  flex-shrink: 0;
  box-shadow:
    0 0 8px rgba(178, 0, 29, 0.9),
    0 0 20px rgba(178, 0, 29, 0.4);
  animation: global-badge-pulse 2s ease-in-out infinite;
}

@keyframes global-badge-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

.global-badge:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.global-badge__icon {
  display: none;
}

.global-badge__text {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.75);
}

.global-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.5rem;
}

.global-title__accent {
  background: linear-gradient(135deg, var(--ap-red) 0%, #ff4d6a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.global-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════
   GLOBE SHOWCASE LAYOUT (Stats + Globe side by side)
   ══════════════════════════════════════════════════════ */
.global-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(4rem, 8vh, 6rem);
}

.global-globe-center {
  flex-shrink: 0;
}

.global-globe-center canvas {
  width: 300px;
  height: 300px;
  display: block;
}

.global-stats--left,
.global-stats--right {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

/* ══════════════════════════════════════════════════════
   STATISTICS GRID (Circular Progress)
   ══════════════════════════════════════════════════════ */
.global-stats {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.global-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.global-stat__ring {
  position: relative;
  width: 100px;
  height: 100px;
}

.global-stat__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.global-stat__ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 4;
}

.global-stat__ring-fill {
  fill: none;
  stroke: var(--ap-red);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-stat__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.global-stat__value sup {
  font-size: 0.6em;
  margin-left: 2px;
  color: var(--ap-red);
}

.global-stat__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════
   REGIONAL CARDS GRID (Glassmorphism)
   ══════════════════════════════════════════════════════ */
.global-regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.region-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.region-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.region-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.region-card:hover .region-card__bg {
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-color: rgba(178, 0, 29, 0.3);
}

.region-card__content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

.region-card__icon {
  width: 48px;
  height: 48px;
  color: var(--ap-red);
  margin-bottom: 1.25rem;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.region-card:hover .region-card__icon {
  transform: scale(1.1) rotate(-5deg);
}

.region-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}

.region-card__desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.region-card__stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

.region-card__stats strong {
  color: var(--ap-red);
  font-weight: 600;
}

.region-card__glow {
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(178, 0, 29, 0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.region-card:hover .region-card__glow {
  opacity: 1;
}
/* ══════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════════════════════ */
.global-section.theme-light {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 50%, #f5f7f9 100%);
}

.global-section.theme-light::after {
  opacity: 0.02;
}

.global-section.theme-light .global-mesh {
  background-image:
    linear-gradient(rgba(178, 0, 29, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 0, 29, 0.05) 1px, transparent 1px);
}

.global-section.theme-light .global-glow {
  opacity: 0.2;
}

.global-section.theme-light .global-title {
  color: var(--ap-dark-grey);
}

.global-section.theme-light .global-badge {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  border-color: rgba(0, 0, 0, 0.1);
}

.global-section.theme-light .global-badge__text {
  color: rgba(0, 0, 0, 0.65);
}

.global-section.theme-light .global-subtitle {
  color: var(--ap-mid-grey);
}

.global-section.theme-light .global-stat__ring-bg {
  stroke: rgba(0, 0, 0, 0.1);
}

.global-section.theme-light .global-stat__value {
  color: var(--ap-dark-grey);
}

.global-section.theme-light .global-stat__label {
  color: var(--ap-mid-grey);
}

.global-section.theme-light .region-card__bg {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.8) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.global-section.theme-light .region-card__title {
  color: var(--ap-dark-grey);
}

.global-section.theme-light .region-card__desc {
  color: var(--ap-mid-grey);
}

.global-section.theme-light .region-card__stats {
  color: var(--ap-mid-grey);
}

.global-section.theme-light .global-globe-center canvas {
  filter: none;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .global-showcase {
    gap: 1.5rem;
  }

  .global-globe-center canvas {
    width: 260px;
    height: 260px;
  }

  .global-stats--left,
  .global-stats--right {
    gap: 1.5rem;
  }

  .global-stat__ring {
    width: 80px;
    height: 80px;
  }

  .global-stat__value {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .global-section {
    min-height: auto;
    padding-block: clamp(4rem, 8vh, 6rem);
  }

  .global-showcase {
    flex-direction: column;
    gap: 2rem;
  }

  .global-stats--left,
  .global-stats--right {
    flex-direction: row;
    gap: 2rem;
  }

  .global-globe-center canvas {
    width: 240px;
    height: 240px;
  }

  .global-regions {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .region-card__content {
    padding: 1.5rem;
  }

  .global-stat__ring {
    width: 70px;
    height: 70px;
  }

  .global-stat__value {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-mesh,
  .global-glow {
    animation: none;
  }

  .global-globe-center canvas {
    animation: none;
  }
}

/* ================================================================
   CONTACT — Ultra-Premium Light Theme Design
   ================================================================ */

/* ── Section shell ── */
.contact-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 40%, #f0f2f5 100%);
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vh, 8rem);
}

/* ── Decorative background elements ── */
.contact-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(178, 0, 29, 0.04) 0%, transparent 65%);
  pointer-events: none;
  animation: contact-glow 15s ease-in-out infinite;
}
.contact-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -15%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05) 0%, transparent 60%);
  pointer-events: none;
  animation: contact-glow 20s ease-in-out infinite reverse;
}
@keyframes contact-glow {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(3%, 3%) scale(1.08);
    opacity: 1;
  }
}

/* Grid pattern overlay */
.contact-section .contact-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Main container ── */
.contact-section .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(4rem, 8vw, 10rem);
  align-items: center;
  width: 100%;
}

/* ══════════════════════════════════════════════════════
   CTA CONTENT — LEFT SIDE
   ══════════════════════════════════════════════════════ */
.contact-cta {
  position: relative;
}

/* Premium badge */
.contact-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  margin-bottom: 2rem;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.contact-cta__badge:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.contact-cta__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--ap-red);
  border-radius: 50%;
  animation: gp-badge-pulse 2s ease-in-out infinite;
  box-shadow:
    0 0 8px rgba(178, 0, 29, 0.9),
    0 0 20px rgba(178, 0, 29, 0.4);
  flex-shrink: 0;
}
.contact-cta__badge-text {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-mid-grey);
}

/* Title styling */
.contact-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.contact-cta h2 sup {
  font-size: 0.35em;
  color: var(--ap-red);
}
.contact-cta__title-accent {
  background: linear-gradient(135deg, var(--ap-red) 0%, #e83a4e 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.contact-cta p {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  color: var(--on-surface-variant);
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 42ch;
}

/* Buttons */
.contact-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Trust mini-indicators */
.contact-cta__trust {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-cta__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  letter-spacing: 0.03em;
}
.contact-cta__trust-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ap-red) 0%, #8f0018 100%);
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(178, 0, 29, 0.25);
}
.contact-cta__trust-icon svg {
  width: 16px;
  height: 16px;
}

/* ══════════════════════════════════════════════════════
   FORM CARD — PREMIUM GLASSMORPHISM
   ══════════════════════════════════════════════════════ */
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2rem;
  padding: clamp(2.5rem, 5vw, 4rem);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.04),
    0 20px 60px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.6s var(--ease-out-expo);
}

/* Form glow on hover */
.contact-form::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 2rem;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(178, 0, 29, 0.3) 0%,
    transparent 40%,
    rgba(201, 169, 110, 0.2) 70%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.contact-form:hover::before {
  opacity: 1;
}

/* Decorative corner accent */
.contact-form::after {
  content: '';
  position: absolute;
  top: -2px;
  right: 40px;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--ap-red) 0%, var(--gold) 100%);
  border-radius: 0 0 4px 4px;
}

.contact-form:hover {
  transform: translateY(-6px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 30px 80px rgba(178, 0, 29, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(178, 0, 29, 0.15);
}

/* Form header */
.contact-form__header {
  margin-bottom: 0.5rem;
}
.contact-form__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}
.contact-form__subtitle {
  font-size: 0.88rem;
  color: var(--on-surface-variant);
}

/* ── Form fields — Premium floating labels ── */
.form-field {
  position: relative;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 1.2rem 1rem 0.8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-surface);
  background: rgba(0, 0, 0, 0.02);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 14px;
  outline: none;
  transition: all 0.4s var(--ease-out-expo);
  resize: none;
}
.form-field textarea {
  min-height: 130px;
  padding-top: 1.4rem;
}
.form-field input:hover,
.form-field textarea:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.03);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--ap-red);
  background: rgba(178, 0, 29, 0.02);
  box-shadow: 0 0 0 4px rgba(178, 0, 29, 0.08);
}

/* Floating labels */
.form-field label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  pointer-events: none;
  transition: all 0.3s var(--ease-out-expo);
  padding: 0 0.25rem;
  background: transparent;
}
.form-field textarea + label {
  top: 1.2rem;
  transform: translateY(0);
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ap-red);
  background: #fff;
}

/* Submit button enhancement */
.contact-form .btn-primary {
  padding: 1rem 2rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 20px rgba(178, 0, 29, 0.3);
  transition: all 0.4s var(--ease-out-expo);
}
.contact-form .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 30px rgba(178, 0, 29, 0.4);
}

/* Response time indicator */
.contact-form__response {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--on-surface-variant);
}
.contact-form__response-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: contact-pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .contact-section .container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-cta {
    text-align: center;
  }
  .contact-cta p {
    margin-inline: auto;
  }
  .contact-cta-buttons {
    justify-content: center;
  }
  .contact-cta__trust {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .contact-form {
    padding: 2rem;
    border-radius: 1.5rem;
  }
  .contact-cta h2 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  .contact-cta__trust {
    flex-direction: column;
    gap: 1rem;
  }
  .form-field input,
  .form-field textarea {
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-cta__badge::before {
    animation: none;
  }
  .contact-cta__badge-dot {
    animation: none;
  }
  .contact-section::before,
  .contact-section::after {
    animation: none;
  }
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: var(--ap-dark-grey);
  color: var(--white);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ap-red), var(--gold), var(--ap-red));
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(4rem, 8vh, 6rem);
}
.footer-brand .footer-logo {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--white);
  margin-bottom: var(--space-md);
  display: inline-block;
}
/* EuroFenster stacked logo in footer */
.footer-logo-ef {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  margin-bottom: 1.25rem;
}
.footer-logo-ef__mark {
  height: 48px;
  width: auto;
  color: rgba(255, 255, 255, 0.92);
}
.footer-logo-ef__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--white);
  margin-top: 0.35rem;
}
.footer-logo-ef__tagline {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}
.footer-brand p {
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.8;
  max-width: 280px;
}

/* ============================================================
   HERO EF LOGO
   ============================================================ */
.hero-ef-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.75rem, 1.5vh, 1.25rem);
}
.hero-ef-logo__mark {
  height: clamp(72px, 10vw, 120px);
  width: auto;
  color: var(--on-surface);
  flex-shrink: 0;
}
.hero-ef-logo__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.hero-ef-logo__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--on-surface);
  line-height: 1;
}
.hero-ef-logo__sub {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 0.75vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}

/* About page hero — white EF logo */
.page-hero__ef-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}
.page-hero__ef-logo__mark {
  height: clamp(44px, 6vw, 72px);
  width: auto;
  color: rgba(255, 255, 255, 0.95);
}
.page-hero__ef-logo__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.95);
}
.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5em;
  color: rgba(255, 255, 255, 0.25);
}
.footer-col a {
  display: block;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  padding-block: 0.3em;
  transition: color var(--trans-fast);
}
.footer-col a:hover {
  color: var(--white);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.footer-copyright {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.25);
}
.footer-socials {
  display: flex;
  gap: var(--space-sm);
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--trans-base);
}
.footer-socials a:hover {
  border-color: var(--ap-red);
  background: var(--ap-red);
}
.footer-socials svg {
  width: 14px;
  height: 14px;
  fill: rgba(255, 255, 255, 0.55);
}
.footer-socials a:hover svg {
  fill: var(--white);
}

@media (max-width: 767px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ----------------------------------------------------------------
   REVEAL ANIMATIONS
   ---------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}
.reveal-delay-4 {
  transition-delay: 0.32s;
}
.reveal-delay-5 {
  transition-delay: 0.4s;
}

/* Horizontal reveal */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.9s var(--ease-out-expo);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.9s var(--ease-out-expo);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.9s var(--ease-out-expo);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------------------------------
   INTERACTIVE WINDOWS SECTION
   ---------------------------------------------------------------- */
.windows-section {
  padding: var(--space-xl) 0;
  overflow: visible;
  background-color: var(--ap-light-grey);
  display: flex;
  align-items: center;
}
.windows-section .container {
  display: flex;
  flex-direction: column;
}

.windows-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-lg);
}

/* Each window unit */
.window-unit {
  position: relative;
  cursor: pointer;
  border-radius: 0;
  aspect-ratio: 3 / 4;
  overflow: visible;
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 400px;
}

/* The frame — the visible outer window border */
.window-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(145deg, #e0e0e0 0%, #c7c7c6 40%, #b5b5b4 100%);
  padding: 10px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

body[data-theme='dark'] .window-frame,
body[data-theme='charcoal'] .window-frame {
  background: linear-gradient(145deg, #555 0%, #444 40%, #3a3a3a 100%);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Inner opening area */
.window-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}

/* Content revealed behind windows */
.window-content {
  position: absolute;
  inset: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(210, 10, 17, 0.03) 0%, rgba(201, 169, 110, 0.06) 100%);
  z-index: 1;
}

body[data-theme='dark'] .window-content,
body[data-theme='charcoal'] .window-content {
  background: linear-gradient(135deg, rgba(210, 10, 17, 0.08) 0%, rgba(201, 169, 110, 0.1) 100%);
}

.window-content-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: var(--ap-red);
  color: white;
  flex-shrink: 0;
}
.window-content-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.window-content h3 {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  color: var(--ap-dark-grey);
}

body[data-theme='dark'] .window-content h3,
body[data-theme='charcoal'] .window-content h3 {
  color: var(--white);
}

.window-content p {
  font-size: 0.88rem;
  line-height: 1.55;
  opacity: 0.8;
  max-width: 260px;
}

body[data-theme='dark'] .window-content p,
body[data-theme='charcoal'] .window-content p {
  color: rgba(255, 255, 255, 0.75);
}

/* Glass panes — these are the "window" panels that open */
.window-pane {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 5;
  transition: transform 0.85s var(--ease-out-expo);
  backface-visibility: hidden;
}

.window-pane-left {
  left: 0;
  transform-origin: left center;
}
.window-pane-right {
  right: 0;
  transform-origin: right center;
}

/* Glass surface */
.window-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(200, 220, 240, 0.45) 0%,
    rgba(180, 210, 235, 0.2) 35%,
    rgba(220, 230, 240, 0.5) 60%,
    rgba(190, 215, 235, 0.25) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.15);
  border-radius: 0;
}

/* Glass reflection effect */
.window-pane::after {
  content: '';
  position: absolute;
  top: 8%;
  width: 50%;
  height: 55%;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 0;
  pointer-events: none;
}
.window-pane-left::after {
  left: 12%;
}
.window-pane-right::after {
  right: 12%;
}

/* Centre mullion (dividing bar) */
.window-mullion {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #d0d0d0 0%, #b5b5b4 50%, #c0c0c0 100%);
  z-index: 6;
  border-radius: 0;
  box-shadow:
    1px 0 3px rgba(0, 0, 0, 0.08),
    -1px 0 3px rgba(0, 0, 0, 0.08);
  transition: opacity 0.4s ease;
}

body[data-theme='dark'] .window-mullion,
body[data-theme='charcoal'] .window-mullion {
  background: linear-gradient(180deg, #666 0%, #555 50%, #5a5a5a 100%);
}

/* Handle knobs */
.window-handle {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 32px;
  border-radius: 0;
  background: linear-gradient(180deg, #c9a96e 0%, #a88a50 100%);
  z-index: 7;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
}
.window-handle-left {
  right: 4px;
}
.window-handle-right {
  left: 4px;
}

/* OPEN STATE — panes swing outward */
.window-unit.is-open .window-pane-left {
  transform: rotateY(-110deg);
}
.window-unit.is-open .window-pane-right {
  transform: rotateY(110deg);
}
.window-unit.is-open .window-mullion {
  opacity: 0;
}
.window-unit.is-open .window-handle {
  transform: translateY(-50%) scale(0.8);
}

/* Open label */
.window-action-label {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.window-unit.is-open .window-action-label .wl-open {
  display: none;
}
.window-unit:not(.is-open) .window-action-label .wl-close {
  display: none;
}

/* Hover lift */
.window-unit:hover .window-frame {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.4s ease;
}

/* Responsive */
@media (max-width: 1024px) {
  .windows-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .windows-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .window-unit {
    aspect-ratio: 4 / 5;
  }
}

/* ================================================================
   CREATED FOR — Target Audience Carousel Section
   ================================================================ */
/* ================================================================
   CREATED FOR — Bento Grid
   ================================================================ */
.created-for-section {
  background: #0e1013;
  padding-block: clamp(5rem, 10vh, 8rem);
  overflow: hidden;
  position: relative;
}

/* Subtle noise texture overlay */
.created-for-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Red top border */
.created-for-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ap-red) 30%,
    var(--ap-red) 70%,
    transparent 100%
  );
}

/* Container */
.cf-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.cf-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vh, 4rem);
}

.cf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 1.5rem;
}

.cf-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  margin: 0;
}

.cf-title em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
}

.cf-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 0.5rem;
}

.cf-desc {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.5);
  max-width: 42ch;
  margin: 0;
}

/* ── Bento Grid ── */
/* Hover hint above bento grid */
.cf-hover-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: cf-hint-pulse 3s ease-in-out infinite;
}

.cf-hover-hint svg {
  flex-shrink: 0;
  animation: cf-hint-bounce 3s ease-in-out infinite;
}

@keyframes cf-hint-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes cf-hint-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-1px);
  }
}

.cf-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 420px 300px 420px;
  gap: 1rem;
}

/* Grid placement */
.cf-card--1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
} /* wide landscape */
.cf-card--2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
} /* tall portrait */
.cf-card--3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
} /* square */
.cf-card--4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
} /* square */
.cf-card--5 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
} /* wide landscape */
.cf-card--6 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
} /* square */

/* ── Base Card ── */
.cf-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #1a1d21;
  border-radius: 2rem;
}

/* Photo background */
.cf-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cf-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
  filter: saturate(1.15) brightness(1);
}

.cf-card:hover .cf-card__bg img {
  transform: scale(1.07);
  filter: saturate(0.5) brightness(0.28);
}

/* Dark gradient overlay */
.cf-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(14, 16, 19, 0.15);
  transition: background 0.5s ease;
}

.cf-card:hover .cf-card__overlay {
  background: rgba(14, 16, 19, 0.72);
}

/* Card body — content */
.cf-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Index number */
.cf-card__number {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ap-red);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.3rem 0.625rem;
  border: 1px solid rgba(178, 0, 29, 0.5);
  background: rgba(178, 0, 29, 0.18);
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
}

.cf-card__number svg {
  flex-shrink: 0;
}

/* Bottom text group */
.cf-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.cf-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-card__desc {
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 32ch;
  transform: translateY(10px);
  opacity: 0;
  transition:
    opacity 0.45s ease 0.07s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.07s;
}

.cf-card:hover .cf-card__desc {
  opacity: 1;
  transform: translateY(0);
}

/* Stat chip (for wide cards) */
.cf-card__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--ap-red);
  align-self: flex-start;
  border-radius: 0.375rem;
  transform: translateY(6px);
  opacity: 0;
  transition:
    opacity 0.45s ease 0.1s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.cf-card:hover .cf-card__stat {
  opacity: 1;
  transform: translateY(0);
}

.cf-card__stat-val {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.cf-card__stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* Red accent line — sweeps in on hover */
.cf-card__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ap-red);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 0 0 2rem 2rem;
}

.cf-card:hover .cf-card__accent {
  transform: scaleX(1);
}

/* Wide card — slightly taller title */
.cf-card--1 .cf-card__title,
.cf-card--5 .cf-card__title {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
}

/* Tall card (card 2) — adjust layout */
.cf-card--2 .cf-card__body {
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}

.cf-card--2 .cf-card__title {
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
}

/* Responsive */
@media (max-width: 1024px) {
  .cf-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 380px 280px 280px 380px;
    gap: 0.75rem;
  }
  .cf-card--1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .cf-card--2 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }
  .cf-card--3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .cf-card--4 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .cf-card--5 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  .cf-card--6 {
    display: none;
  }
}

@media (max-width: 768px) {
  .cf-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .cf-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px 200px 200px 280px;
    gap: 0.75rem;
  }
  .cf-card--2 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }
  .cf-card--3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .cf-card--4 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
}

@media (max-width: 540px) {
  .cf-bento {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 280px);
    gap: 0.5rem;
  }
  .cf-card--1,
  .cf-card--2,
  .cf-card--3,
  .cf-card--4,
  .cf-card--5 {
    grid-column: 1;
    grid-row: auto;
  }
  .cf-card--6 {
    display: none;
  }
  .cf-card__desc {
    opacity: 1;
    transform: none;
  }
  .cf-card__stat {
    opacity: 1;
    transform: none;
  }
}

/* Card entrance animation */
.cf-card {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ================================================================
   PRODUCT SHOWCASE PANEL — Glassmorphism Feature Strip
   ================================================================ */
.product-showcase-panel {
  display: none;
}

.showcase-panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.showcase-panel-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.55) saturate(0.85);
}
.showcase-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    145deg,
    rgba(26, 29, 33, 0.65) 0%,
    rgba(26, 29, 33, 0.45) 50%,
    rgba(48, 77, 90, 0.4) 100%
  );
}

.showcase-panel-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.showcase-panel-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.showcase-panel-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--ap-red-light);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.showcase-panel-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.showcase-panel-title span {
  color: rgba(255, 255, 255, 0.5);
}
.showcase-panel-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.showcase-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* ---- Glass Card ---- */
.showcase-card__glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.5rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: center;
  transition:
    transform 0.38s var(--ease-out-expo),
    box-shadow 0.38s var(--ease-out-expo);
}
.showcase-card__glass:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

/* Glazing side-by-side compare layout for IDEAL 4000 */
.showcase-card__glazing-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.showcase-card__glazing-compare .showcase-card__img {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(0.5rem, 1.5vw, 1rem);
}
.showcase-card__glazing-compare .showcase-card__img:last-child {
  border-right: none;
}
.showcase-card__glaze-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}
.showcase-card__glaze-label--tri {
  color: var(--ap-red);
}

.showcase-card__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.75rem);
  background: rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
}
.showcase-card__img img {
  width: 100%;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.5));
  transition: transform 0.38s var(--ease-out-expo);
}
.showcase-card__glass:hover .showcase-card__img img {
  transform: scale(1.04) translateY(-3px);
}

.showcase-card__body {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.showcase-card__label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-red-light);
  margin-bottom: 0.2rem;
}
.showcase-card--4000 .showcase-card__label {
  color: var(--secondary-light);
}

.showcase-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.showcase-card__depth {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.showcase-card__stats {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.showcase-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.showcase-stat__val {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}
.showcase-stat__key {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.showcase-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  background: rgba(178, 0, 29, 0.35);
  width: fit-content;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.showcase-card__cta:hover {
  background: var(--ap-red);
  border-color: var(--ap-red);
}
.showcase-card--4000 .showcase-card__cta {
  background: rgba(48, 77, 90, 0.4);
}
.showcase-card--4000 .showcase-card__cta:hover {
  background: var(--secondary);
  border-color: var(--secondary);
}

/* ---- Wooden Windows Showcase Card ---- */
.showcase-card--wooden .showcase-card__glass {
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.12) 0%, rgba(10, 10, 10, 0.95) 100%);
  border-color: rgba(139, 90, 43, 0.25);
}
.showcase-card--wooden .showcase-card__glass:hover {
  border-color: rgba(178, 0, 29, 0.5);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(178, 0, 29, 0.15);
}
.showcase-card--wooden .showcase-card__img {
  background: linear-gradient(180deg, rgba(139, 90, 43, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.showcase-card--wooden .showcase-card__label {
  color: #c9a96e;
}
.showcase-card--wooden .showcase-card__cta {
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.4) 0%, rgba(178, 0, 29, 0.3) 100%);
  border-color: rgba(139, 90, 43, 0.35);
}
.showcase-card--wooden .showcase-card__cta:hover {
  background: linear-gradient(135deg, var(--ap-red) 0%, #8f0018 100%);
  border-color: var(--ap-red);
}

/* ---- ENERGETO NEO Featured Card ---- */
.showcase-card--energeto {
  grid-column: 1 / -1;
}
.showcase-card--energeto .showcase-card__glass {
  grid-template-columns: 1.8fr 1fr;
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.92) 0%, rgba(10, 10, 10, 0.97) 100%);
  border-color: rgba(178, 0, 29, 0.25);
  box-shadow:
    0 0 0 1px rgba(178, 0, 29, 0.1),
    0 24px 64px rgba(0, 0, 0, 0.35);
}
.showcase-card--energeto .showcase-card__glass:hover {
  border-color: rgba(178, 0, 29, 0.6);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(178, 0, 29, 0.2);
}
.showcase-card--energeto .showcase-card__img {
  padding: 0;
  min-height: 220px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.showcase-card--energeto .showcase-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.showcase-card--energeto .showcase-card__label {
  color: #c8a8ff;
}
.showcase-card--energeto .showcase-card__cta {
  background: linear-gradient(135deg, rgba(90, 40, 140, 0.35) 0%, rgba(178, 0, 29, 0.3) 100%);
  border-color: rgba(178, 0, 29, 0.35);
}
.showcase-card--energeto .showcase-card__cta:hover {
  background: linear-gradient(135deg, var(--ap-red) 0%, #8f0018 100%);
  border-color: var(--ap-red);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .showcase-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .showcase-panel-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .showcase-card__glass {
    grid-template-columns: 1fr;
  }
  .showcase-card__img {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: auto;
  }
}

/* ----------------------------------------------------------------
   REDUCED MOTION — Global
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-line span {
    transform: none !important;
    transition: none !important;
  }
  .scroll-line {
    animation: none;
  }
  .hero-bg img {
    animation: none;
  }
  .scroll-chevron {
    animation: none;
  }
  .window-pane {
    transition: none !important;
  }
  .window-mullion {
    transition: none !important;
  }

  /* Loading screen — no animations */
  .ls-rect,
  .ls-cross-h,
  .ls-cross-v,
  .ls-dot,
  .ls-ef-mark,
  .loading-logo,
  .loading-tagline,
  .loading-progress-wrap,
  .loading-frame,
  .loading-bar-shine {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .loading-screen.exiting .loading-inner {
    animation: none !important;
  }

  /* Counter elements — show final value immediately */
  .sn-val,
  .gp-stat-val,
  .global-stat__value {
    transition: none !important;
  }
}

/* ----------------------------------------------------------------
   GSAP WILL-CHANGE HINTS — improve compositor performance
   ---------------------------------------------------------------- */
.showcase-card,
.cf-card,
.sn-item,
.region-card,
.global-stat,
.gp-content,
.gp-panel {
  will-change: transform, opacity;
}
/* Remove after animation completes (GSAP clears will-change) */

/* ============================================================
   MZA PARALLAX CAROUSEL — Embedded Section
   ============================================================ */

/* Wrapper section — gives the carousel a fixed height context */
.mza-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  box-sizing: border-box;
  padding-block: 24px;
  background: var(--surface-container-low, #f5f7f9);
  overflow: hidden;
  margin-top: 0;
}

/* ── Carousel shell ────────────────────────────────────────── */
:root {
  --mzaC-slideW: min(960px, 92vw);
  --mzaC-peek: 0.08;
  --mzaPagH: 48px;
  --mzaCardH: clamp(480px, 90vh, 1000px);
}

.mzaCarousel {
  position: relative;
  height: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 18px;
  overflow: hidden;
  contain: layout paint;
  touch-action: none;
}
.mzaCarousel-viewport {
  position: relative;
  outline: none;
  overflow: hidden;
  height: 100%;
}
.mzaCarousel-track {
  position: relative;
  height: calc(100% - var(--mzaPagH) - 2px);
  transform-style: preserve-3d;
  perspective: 1200px;
  overflow: hidden;
}

.mzaCarousel-slide {
  position: absolute;
  top: calc(50% + 5px);
  left: calc(50% - var(--mzaC-slideW) / 2);
  width: var(--mzaC-slideW);
  height: min(var(--mzaCardH), calc(100% - 4px));
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  border-radius: 2rem;
  overflow: hidden;
  will-change: transform, filter, opacity;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mzaCarousel.is-hovering .mzaCarousel-slide:not([data-state='active']) {
  opacity: 0.5;
}
.mzaCarousel.is-hovering .mzaCarousel-slide[data-state='active'] {
  opacity: 1;
}

.mzaCard {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--surface, #ffffff);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateZ(0);
  cursor: grab;
  transition:
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.mzaCarousel-slide[data-state='active'] .mzaCard {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.14),
    0 0 0 1px var(--outline-variant, rgba(74, 81, 88, 0.1));
}
.mzaCarousel.is-hovering .mzaCarousel-slide[data-state='active'] .mzaCard {
  transform: translateZ(0) scale(1.015);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.16),
    0 0 0 1px var(--outline-variant, rgba(74, 81, 88, 0.1)),
    0 0 48px -16px rgba(178, 0, 29, 0.1);
}

.mzaCard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--mzaCard-bg);
  background-size: cover;
  background-position: center;
  filter: contrast(1.01) saturate(1.03);
  transform: translate3d(var(--mzaParBgX, 0px), var(--mzaParBgY, 0px), 0) scale(1.08);
  transition:
    transform 1s cubic-bezier(0.25, 1, 0.5, 1),
    filter 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.mzaCarousel-slide[data-state='active'] .mzaCard::before {
  filter: contrast(1.04) saturate(1.07) brightness(1.01);
}
.mzaCarousel-slide[data-state='active'] .mzaCard:hover::before {
  filter: contrast(1.05) saturate(1.1) brightness(1.02);
  transform: translate3d(var(--mzaParBgX, 0px), var(--mzaParBgY, 0px), 0) scale(1.11);
}

/* Glass morphism panel — hidden by default, slides up on active */
.mzaCard-glass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  background: rgba(10, 10, 10, 0.58);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -20px 60px rgba(0, 0, 0, 0.35);
  padding: 18px 22px;
  margin: 0 12px 12px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzaCarousel-slide[data-state='active'] .mzaCard-glass {
  transform: translateY(0);
}
.mzaCard-glass-content {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.6s ease 0.4s,
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.35s;
}
.mzaCarousel-slide[data-state='active'] .mzaCard-glass-content {
  opacity: 1;
  transform: translateY(0);
}

.mzaCard-head {
  margin-bottom: 10px;
}
.mzaCard-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(16px, 2.2vw, 22px);
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  line-height: 1.25;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.mzaCard-kicker {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: clamp(11px, 1.5vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
}
.mzaCard-text {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.6;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* Controls */
.mzaCarousel-controls {
  position: absolute;
  top: 0;
  bottom: var(--mzaPagH);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--mzaC-slideW) + 112px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.mzaCarousel-prev,
.mzaCarousel-next {
  pointer-events: auto;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  color: #ffffff;
  font-size: 20px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mzaCarousel-prev {
  margin-left: 0;
}
.mzaCarousel-next {
  margin-right: 0;
}
.mzaCarousel-prev:hover,
.mzaCarousel-next:hover {
  background: rgba(178, 0, 29, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 16px 4px rgba(178, 0, 29, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.mzaCarousel-prev:active,
.mzaCarousel-next:active {
  transform: scale(0.93);
}

/* Pagination */
.mzaCarousel-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  z-index: 1500;
}
.mzaCarousel-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 999px;
  background: var(--surface-container-highest, #d0d8dd);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    box-shadow 0.35s ease;
}
.mzaCarousel-dot[aria-selected='true'] {
  width: 28px;
  background: var(--ap-red, #b2001d);
  box-shadow:
    0 0 8px 2px rgba(178, 0, 29, 0.6),
    0 0 18px 4px rgba(178, 0, 29, 0.25);
  transform: none;
  border-radius: 999px;
}
.mzaCarousel-dot:hover:not([aria-selected='true']) {
  background: var(--on-surface-variant, #4a5158);
}

/* Progress bar */
.mzaCarousel-progress {
  display: none;
}

/* Per-card progress bar — sits at the top of each card image */
.mzaCard-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
  z-index: 10;
}
.mzaCard-progressBar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2rem 2rem 0 0;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
  background: linear-gradient(90deg, var(--ap-red, #b2001d) 0%, #e8003a 60%, #ff6080 100%);
  box-shadow:
    0 0 6px 1px rgba(178, 0, 29, 0.9),
    0 0 16px 4px rgba(232, 0, 58, 0.55),
    0 0 32px 8px rgba(255, 96, 128, 0.25);
}

/* CTA */
.mzaCarousel-cta {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1600;
}
.mzaBtn-cta--card {
  display: inline-flex;
  margin-top: 12px;
  align-self: flex-start;
}
.mzaBtn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--ap-red, #b2001d);
  color: #ffffff;
  border: 2px solid var(--ap-red, #b2001d);
  padding: 0.6rem 1.4rem;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 28px rgba(178, 0, 29, 0.22);
  transition:
    box-shadow var(--trans-base, 0.4s cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--trans-fast, 0.25s cubic-bezier(0.16, 1, 0.3, 1));
}
/* Slide-fill wipe on hover */
.mzaBtn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ap-red-hover, #8f0018);
  transform: translateX(-101%);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.mzaBtn-cta:hover::before {
  transform: translateX(0);
}
/* Corner accent mark — engineering marker */
.mzaBtn-cta::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transition: all 0.25s ease;
}
.mzaBtn-cta:hover {
  box-shadow: 0 12px 44px rgba(178, 0, 29, 0.38);
  transform: translateY(-2px);
}
.mzaBtn-cta:hover::after {
  width: 16px;
  height: 16px;
  top: 5px;
  left: 5px;
}
.mzaBtn-cta:active {
  transform: translateY(0);
}
.mzaBtn-cta svg {
  width: 16px;
  height: 16px;
}

/* Parallax layers */
.mzaPar-1,
.mzaPar-2,
.mzaPar-3 {
  will-change: transform;
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0, 1);
}
.mzaPar-1 {
  transform: translate3d(calc(var(--mzaParX, 0px) * 0.35), calc(var(--mzaParY, 0px) * 0.35), 0);
}
.mzaPar-2 {
  transform: translate3d(calc(var(--mzaParX, 0px) * 0.25), calc(var(--mzaParY, 0px) * 0.25), 0);
}
.mzaPar-3 {
  transform: translate3d(calc(var(--mzaParX, 0px) * 0.18), calc(var(--mzaParY, 0px) * 0.18), 0);
}

/* Responsive */
@media (max-width: 1000px) {
  :root {
    --mzaC-slideW: min(88vw, 520px);
  }
  .mzaCard-glass {
    padding: 16px 18px;
  }
  .mzaCard-title {
    font-size: clamp(15px, 4vw, 20px);
  }
}
@media (max-width: 768px) {
  :root {
    --mzaC-slideW: min(90vw, 460px);
  }
  .mzaCard-glass {
    padding: 12px 14px;
  }
}
@media (max-width: 560px) {
  :root {
    --mzaC-slideW: min(94vw, 400px);
  }
}
@media (max-height: 500px) {
  .mzaCard-text {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }
}
@media (max-height: 400px) {
  .mzaCard-text {
    display: none;
  }
}
@media (hover: none) {
  .mzaCarousel-slide[data-state='active'] .mzaCard-glass {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ----------------------------------------------------------------
   SCROLL SECTION INDICATOR
   ---------------------------------------------------------------- */
.c-scroll-indicator {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 500;
  pointer-events: auto;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.06);
}

.c-scroll-indicator .bar {
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: rgba(26, 29, 33, 0.18);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease;
}

.c-scroll-indicator .bar .indicator {
  position: absolute;
  inset: 0;
  background: var(--ap-red, #b2001d);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-scroll-indicator .bar:hover {
  width: 4px;
  background: rgba(178, 0, 29, 0.25);
}

.c-scroll-indicator .bar.active {
  width: 4px;
  height: 32px;
  background: rgba(178, 0, 29, 0.15);
}

.c-scroll-indicator .bar.active .indicator {
  transform: scaleY(1);
}

/* Hide on small screens where it crowds the edge */
@media (max-width: 768px) {
  .c-scroll-indicator {
    display: none;
  }
}

/* ============================================================
   CF-CARD — Footer / Read More button
   ============================================================ */

.cf-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s ease 0.05s,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.cf-card:hover .cf-card__footer {
  opacity: 1;
  transform: translateY(0);
}

/* Keep existing stat styling working inside footer */
.cf-card__footer .cf-card__stat {
  opacity: 1;
  transform: none;
  transition: none;
}

.cf-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(178, 0, 29, 0.55);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 0 0.25rem 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.cf-card__read-more svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-card__read-more:hover {
  color: #ffffff;
  border-color: var(--ap-red);
}

.cf-card__read-more:hover svg {
  transform: translateX(4px);
}

/* ============================================================
   INFO POPUP MODAL
   ============================================================ */

.ip-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: rgba(10, 14, 20, 0.35);
  backdrop-filter: blur(4px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-overlay.ip-open {
  opacity: 1;
  pointer-events: auto;
}

/* Glass panel — slides in from right, doesn't block full view */
.ip-panel {
  position: relative;
  width: min(520px, 48vw);
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.08);
  border: none;
  border-left: 1px solid rgba(178, 0, 29, 0.12);
  border-radius: 0;
  box-shadow:
    -12px 0 60px rgba(0, 0, 0, 0.18),
    -2px 0 8px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(178, 0, 29, 0.4) transparent;
}

/* Webkit scrollbar */
.ip-panel::-webkit-scrollbar {
  width: 6px;
}

.ip-panel::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 99px;
}

.ip-panel::-webkit-scrollbar-thumb {
  background: rgba(178, 0, 29, 0.35);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ip-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(178, 0, 29, 0.6);
  background-clip: padding-box;
}

.ip-overlay.ip-open .ip-panel {
  transform: translateX(0);
}

/* — Multi-panel content switching — */
.ip-content {
  display: none;
}
.ip-content.ip-content--active {
  display: block;
}
/* Extra top padding for panels without an image strip */
.ip-header--no-img {
  padding-top: clamp(2.75rem, 6vw, 4rem);
}

/* — Image strip — */
.ip-imgstrip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 220px;
  border-radius: 2rem 2rem 0 0;
  overflow: hidden;
}

.ip-imgstrip__img {
  overflow: hidden;
  position: relative;
}

.ip-imgstrip__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-imgstrip__img:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.55);
}

.ip-panel:hover .ip-imgstrip__img img {
  transform: scale(1.03);
}

/* — Header — */
.ip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem) 0;
}

.ip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 0.75rem;
}

.ip-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #1a1d21;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

.ip-title em {
  font-style: normal;
  color: var(--ap-red);
}

.ip-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 29, 33, 0.12);
  border: 1.5px solid rgba(26, 29, 33, 0.35);
  border-radius: 0.5rem;
  color: rgba(26, 29, 33, 0.85);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  margin-top: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ip-close:hover {
  background: rgba(178, 0, 29, 0.15);
  border-color: rgba(178, 0, 29, 0.55);
  color: var(--ap-red);
  box-shadow: 0 4px 16px rgba(178, 0, 29, 0.2);
}

/* — Callout banner — */
.ip-callout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin: clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
  padding: 1.25rem 1.5rem;
  background: rgba(178, 0, 29, 0.1);
  border: 1px solid rgba(178, 0, 29, 0.22);
  border-left: none;
  border-radius: 0.5rem;
}

.ip-callout__bar {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  background: var(--ap-red);
  min-height: 3rem;
  border-radius: 2px;
}

.ip-callout__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(26, 29, 33, 0.88);
}

.ip-callout__text strong {
  color: #1a1d21;
  font-weight: 700;
}

/* — Stats row — */
.ip-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  background: rgba(26, 29, 33, 0.1);
  border: 1px solid rgba(26, 29, 33, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}

.ip-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.25s;
}

.ip-stat:hover {
  background: rgba(255, 255, 255, 0.5);
}

.ip-stat__val {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #1a1d21;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ip-stat__unit {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ap-red);
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.ip-stat__label {
  font-size: 0.72rem;
  color: rgba(26, 29, 33, 0.7);
  line-height: 1.35;
  margin-top: 0.35rem;
}

/* — Body — */
.ip-body {
  padding: 0 clamp(1.75rem, 4vw, 2.5rem) clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* — Section block — */
.ip-section {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-left: 3px solid rgba(26, 29, 33, 0.18);
  border-radius: 0.75rem;
  transition:
    border-left-color 0.25s,
    background 0.25s;
}

.ip-section:hover {
  border-left-color: var(--ap-red);
  background: rgba(255, 255, 255, 0.48);
}

.ip-section__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(178, 0, 29, 0.08);
  border: 1px solid rgba(178, 0, 29, 0.2);
  border-radius: 0.4rem;
  color: var(--ap-red);
  margin-top: 0.1rem;
}

.ip-section__full {
  width: 100%;
}

.ip-section__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #1a1d21;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.ip-section__text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(26, 29, 33, 0.82);
}

/* — Comparison cards — */
.ip-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ip-comparison__card {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0.5rem;
}

.ip-comparison__card--highlight {
  background: rgba(178, 0, 29, 0.1);
  border-color: rgba(178, 0, 29, 0.25);
}

.ip-comparison__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 29, 33, 0.65);
  margin-bottom: 0.5rem;
}

.ip-comparison__card--highlight .ip-comparison__tag {
  color: var(--ap-red);
}

.ip-comparison__spec {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(26, 29, 33, 0.6);
  margin-bottom: 0.875rem;
}

.ip-comparison__rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ip-comparison__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(26, 29, 33, 0.75);
  border-bottom: 1px solid rgba(26, 29, 33, 0.1);
  padding-bottom: 0.5rem;
}

.ip-comparison__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ip-comparison__row strong {
  color: var(--ap-dark-grey, #1a1d21);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* — CTA row — */
.ip-cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.ip-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--ap-red);
  color: #ffffff;
  border: 2px solid var(--ap-red);
  padding: 0.9rem 2rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ip-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ap-red-hover);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.ip-cta-btn:hover::before {
  transform: translateX(0);
}

.ip-cta-btn:hover {
  box-shadow: 0 12px 40px rgba(178, 0, 29, 0.35);
  transform: translateY(-2px);
}

.ip-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: rgba(26, 29, 33, 0.65);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 29, 33, 0.3);
  padding-bottom: 0.2rem;
  transition:
    color 0.25s,
    border-color 0.25s;
}

.ip-link-btn:hover {
  color: #1a1d21;
  border-color: rgba(26, 29, 33, 0.6);
}

/* — Responsive — */
@media (max-width: 680px) {
  .ip-overlay {
    align-items: flex-end;
  }
  .ip-panel {
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-radius: 1.5rem 1.5rem 0 0;
    border-left: none;
    border-top: 1px solid rgba(178, 0, 29, 0.12);
    transform: translateY(100%);
  }
  .ip-overlay.ip-open .ip-panel {
    transform: translateY(0);
  }
  .ip-imgstrip {
    height: 160px;
    border-radius: 1.5rem 1.5rem 0 0;
  }
  .ip-stats {
    grid-template-columns: 1fr;
  }
  .ip-comparison {
    grid-template-columns: 1fr;
  }
  .ip-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ip-cta-btn {
    justify-content: center;
  }
}

/* ============================================================
   STAT BAR — Icon Tiles → Frosted Glass Cards
   ============================================================ */
/* ================================================================
   STATS SECTION — Advanced Bento with Independent Drawers
   ================================================================ */

.sn-section {
  background: #ffffff;
  padding-block-start: clamp(4.5rem, 9vh, 7rem);
  padding-block-end: 20rem; /* room for drawers to drop below grid */
  position: relative;
  overflow-x: hidden; /* allow drawers to extend below without horizontal scroll */
}

/* ── Noise texture overlay ── */
.sn-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 120% at 15% 50%, rgba(178, 0, 29, 0.055) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 85% 50%, rgba(48, 77, 90, 0.045) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 50% 100%, rgba(178, 0, 29, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Subtle grid lines ── */
.sn-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.sn-container {
  max-width: var(--max-width, 1440px);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

/* ── Bento grid: drawers escape via overflow:visible ── */
.sn-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 1.75rem;
  overflow: visible;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 64px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
}

/* Manual corner rounding — required when overflow:visible can't clip */
.sn-item:first-child {
  border-top-left-radius: calc(1.75rem - 1px);
  border-bottom-left-radius: calc(1.75rem - 1px);
}
.sn-item:nth-child(6) {
  border-top-right-radius: calc(1.75rem - 1px);
  border-bottom-right-radius: calc(1.75rem - 1px);
}

/* ── Individual tile ── */
.sn-item {
  background: #ffffff;
  padding: 2rem 1.75rem 1.75rem;
  cursor: default;
  position: relative;
  overflow: visible;
  min-height: 134px;
  transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sn-item:first-child {
  background: linear-gradient(145deg, #fff8f8 0%, #ffffff 60%);
}

.sn-item:first-child:hover {
  background: linear-gradient(145deg, #fff4f4 0%, #fafafa 60%);
}

.sn-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 80% at 0% 100%,
    rgba(178, 0, 29, 0.04) 0%,
    transparent 55%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
}

.sn-item:hover::before {
  opacity: 1;
}

/* Accent line at top on hover */
.sn-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ap-red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sn-grid > .sn-item:first-child::after {
  left: calc(1.75rem - 2px);
}
.sn-grid > .sn-item:nth-child(6)::after {
  right: calc(1.75rem - 2px);
}

.sn-item:hover::after {
  transform: scaleX(1);
}

.sn-item:hover {
  background: #fafafa;
  z-index: 5;
}

/* ── Icon badge ── */
.sn-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.75rem;
  background: rgba(178, 0, 29, 0.06);
  border: 1px solid rgba(178, 0, 29, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ap-red);
  flex-shrink: 0;
  margin-bottom: 1.1rem;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sn-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.sn-item:hover .sn-icon {
  background: rgba(178, 0, 29, 0.1);
  border-color: rgba(178, 0, 29, 0.25);
  transform: scale(1.1) rotate(-5deg);
}

/* ── Face layout ── */
.sn-face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.sn-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sn-val {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--ap-red) 0%, #d42940 50%, #8f0018 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sn-lbl {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-mid-grey);
  margin-top: 0.3rem;
}

/* ═══════════════════════════════════════════════════
   DRAWER — drops below each tile independently
   ═══════════════════════════════════════════════════ */
.sn-body-wrap {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 50;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-top: none;
  border-radius: 0 0 1.25rem 1.25rem;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Closed state */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.38s ease,
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.52s;
}
.sn-grid > .sn-item:first-child > .sn-body-wrap {
  left: 0;
  border-bottom-left-radius: calc(1.75rem - 1px);
}
.sn-grid > .sn-item:nth-child(6) > .sn-body-wrap {
  right: 0;
  border-bottom-right-radius: calc(1.75rem - 1px);
}

/* Open state */
.sn-item:hover .sn-body-wrap,
.sn-item.is-preview .sn-body-wrap {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.38s ease,
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

/* Seamless: flatten the tile's bottom edge while its drawer is open,
   so the card looks like it is expanding straight downwards */
.sn-grid > .sn-item:first-child:hover,
.sn-grid > .sn-item.is-preview:first-child {
  border-bottom-left-radius: 0;
}
.sn-grid > .sn-item:nth-child(6):hover {
  border-bottom-right-radius: 0;
}
.sn-grid:has(.sn-item:hover) .sn-item.is-preview:first-child:not(:hover) {
  border-bottom-left-radius: calc(1.75rem - 1px);
}

.sn-body-inner {
  padding: 1.2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sn-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ap-dark-grey);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s ease 0.06s,
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}

.sn-desc {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--ap-mid-grey);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s ease 0.12s,
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.sn-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ap-red);
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.3s ease 0.18s,
    transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}

.sn-sub::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--ap-red);
  opacity: 0.6;
}

.sn-item:hover .sn-title,
.sn-item:hover .sn-desc,
.sn-item:hover .sn-sub,
.sn-item.is-preview .sn-title,
.sn-item.is-preview .sn-desc,
.sn-item.is-preview .sn-sub {
  opacity: 1;
  transform: translateY(0);
}

/* Hide preview when another card is hovered */
.sn-grid:has(.sn-item:hover) .sn-item.is-preview:not(:hover) .sn-body-wrap {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
}
.sn-grid:has(.sn-item:hover) .sn-item.is-preview:not(:hover) .sn-title,
.sn-grid:has(.sn-item:hover) .sn-item.is-preview:not(:hover) .sn-desc,
.sn-grid:has(.sn-item:hover) .sn-item.is-preview:not(:hover) .sn-sub {
  opacity: 0;
  transform: translateY(6px);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sn-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Reset desktop corners, reset specific cells */
  .sn-item:first-child {
    border-radius: calc(1.25rem - 1px) 0 0 0;
  }
  .sn-item:nth-child(3) {
    border-top-right-radius: calc(1.25rem - 1px);
  }
  .sn-item:nth-child(4) {
    border-bottom-left-radius: calc(1.25rem - 1px);
  }
  .sn-item:nth-child(6) {
    border-radius: 0 0 calc(1.25rem - 1px) 0;
  }
  /* Accent line corners */
  .sn-grid > .sn-item:nth-child(6)::after {
    right: 0;
  }
  .sn-grid > .sn-item:nth-child(3)::after {
    right: calc(1.25rem - 2px);
  }
  /* Dropdown corners — square top so it reads as the card expanding down */
  .sn-grid > .sn-item:first-child > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
  }
  .sn-grid > .sn-item:nth-child(4) > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
    left: 0;
  }
  .sn-grid > .sn-item:nth-child(6) > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
    right: 0;
  }
}

@media (max-width: 768px) {
  .sn-grid {
    grid-template-columns: repeat(2, 1fr);
    border-radius: 1.25rem;
  }
  .sn-item:first-child {
    border-radius: calc(1.25rem - 1px) 0 0 0;
  }
  .sn-item:nth-child(2) {
    border-top-right-radius: calc(1.25rem - 1px);
  }
  .sn-item:nth-child(3),
  .sn-item:nth-child(4) {
    border-radius: 0;
  }
  .sn-item:nth-child(5) {
    border-bottom-left-radius: calc(1.25rem - 1px);
  }
  .sn-item:nth-child(6) {
    border-radius: 0 0 calc(1.25rem - 1px) 0;
  }
  .sn-val {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }
  /* Accent line corners */
  .sn-grid > .sn-item:nth-child(2)::after {
    right: calc(1.25rem - 2px);
  }
  .sn-grid > .sn-item:nth-child(3)::after,
  .sn-grid > .sn-item:nth-child(6)::after {
    right: 0;
  }
  /* Dropdown corners */
  .sn-grid > .sn-item:first-child > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
  }
  .sn-grid > .sn-item:nth-child(5) > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
    left: 0;
  }
  .sn-grid > .sn-item:nth-child(6) > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
    right: 0;
  }
}

@media (max-width: 420px) {
  .sn-grid {
    grid-template-columns: 1fr;
  }
  .sn-item:first-child {
    border-radius: calc(1.25rem - 1px) calc(1.25rem - 1px) 0 0;
  }
  .sn-item:nth-child(2),
  .sn-item:nth-child(3),
  .sn-item:nth-child(4),
  .sn-item:nth-child(5) {
    border-radius: 0;
  }
  .sn-item:nth-child(6) {
    border-radius: 0 0 calc(1.25rem - 1px) calc(1.25rem - 1px);
  }
  /* Single column: accent line full width */
  .sn-grid > .sn-item::after {
    left: 0;
    right: 0;
  }
  .sn-grid > .sn-item:first-child::after {
    left: calc(1.25rem - 2px);
    right: calc(1.25rem - 2px);
  }
  /* Dropdown corners — all have rounded bottom corners */
  .sn-grid > .sn-item > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
    left: 0;
    right: 0;
  }
  .sn-grid > .sn-item:first-child > .sn-body-wrap {
    border-radius: 0 0 1.25rem 1.25rem;
  }
}

/* ================================================================
   ACCREDITATIONS & CERTIFICATIONS — Premium Light Theme
   ================================================================ */

.cert-section {
  background: #ffffff;
  padding-block: clamp(4rem, 8vh, 6rem);
  position: relative;
  overflow: hidden;
}

/* Subtle decorative gradients */
.cert-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 120% at 0% 50%, rgba(178, 0, 29, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse 70% 120% at 100% 50%, rgba(201, 169, 110, 0.04) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Grid pattern overlay */
.cert-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.5;
  pointer-events: none;
}

/* ── Header ── */
.cert-container {
  max-width: var(--max-width, 1440px);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

.cert-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
  padding-bottom: clamp(2rem, 4vh, 2.5rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.cert-header__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Premium badge style */
.cert-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.07) 0%, rgba(178, 0, 29, 0.02) 100%);
  border: 1px solid rgba(178, 0, 29, 0.14);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ap-red);
  position: relative;
  overflow: hidden;
}
.cert-eyebrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(178, 0, 29, 0.08), transparent);
  animation: cert-badge-shine 5s ease-in-out infinite;
}
@keyframes cert-badge-shine {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

/* Title */
.cert-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ap-dark-grey);
  margin: 0;
}

.cert-sub {
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  color: var(--on-surface-variant);
  line-height: 1.75;
  font-weight: 400;
  max-width: 44ch;
  align-self: end;
  padding-bottom: 0.1rem;
}
.cert-sub sup {
  font-size: 0.65em;
  color: var(--ap-red);
}

/* ── Ribbon wrapper ── */
.cert-ribbon {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Left + right fade-out edges */
.cert-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 8vw, 140px);
  z-index: 2;
  pointer-events: none;
}
.cert-fade--left {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}
.cert-fade--right {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

/* ── Scrolling track — driven by JS (initCertBand) ── */
.cert-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
  padding-block: 0.6rem;
  will-change: transform;
}

/* ── Individual card ── */
.cert-card {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 249, 251, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1rem;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 1rem 1.2rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-shrink: 0;
  min-width: 126px;
  cursor: default;
  transition: all 0.45s var(--ease-out-expo);
  position: relative;
}

.cert-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(178, 0, 29, 0.25) 0%,
    transparent 45%,
    rgba(201, 169, 110, 0.2) 75%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

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

.cert-card:hover {
  border-color: rgba(178, 0, 29, 0.1);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 12px 36px rgba(178, 0, 29, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transform: translateY(-5px) scale(1.02);
}

/* ── Logo image ── */
.cert-logo-wrap {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-logo-wrap img,
.cert-logo-wrap svg {
  max-width: 82px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.55) brightness(0.92) contrast(0.88);
  transition: all 0.45s var(--ease-out-expo);
}

.cert-card:hover .cert-logo-wrap img,
.cert-card:hover .cert-logo-wrap svg {
  filter: grayscale(0) brightness(1) contrast(1);
  transform: scale(1.05);
}

/* Text-badge cert cards (AAAMSA, SABS) */
.cert-logo-wrap--text {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-text-badge {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ap-red);
  background: rgba(178, 0, 29, 0.07);
  border: 2px solid rgba(178, 0, 29, 0.25);
  border-radius: 6px;
  padding: 0.2rem 0.7rem;
  transition: all 0.3s ease;
}
.cert-text-badge--dim {
  color: var(--on-surface-variant);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
.cert-card--coming {
  opacity: 0.6;
}
.cert-card--coming em {
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.75;
}

/* ── Logo label ── */
.cert-name {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  opacity: 0.55;
  text-align: center;
  line-height: 1.3;
  transition: all 0.35s ease;
}

.cert-card:hover .cert-name {
  opacity: 1;
  color: var(--ap-red);
}

/* ── Responsive ── */
@media (max-width: 840px) {
  .cert-header {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .cert-sub {
    max-width: 100%;
    padding-bottom: 0;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .cert-eyebrow::before {
    animation: none;
  }
}

/* ================================================================
   WOODEN WINDOWS SECTION — Premium Collection
   ================================================================ */

/* ── Section Container ── */
.wooden-windows-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vh, 6rem);
  background: #ffffff;
}

/* ── Atmospheric Background ── */
.ww-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ww-bg__gradient {
  position: absolute;
  inset: 0;
  background: none;
}

.ww-bg__texture {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.ww-bg__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Container ── */
.ww-container {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

/* ── Section Header ── */
.ww-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.ww-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-mid-grey);
  margin-bottom: 1.5rem;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.ww-header__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ap-red);
  flex-shrink: 0;
  box-shadow:
    0 0 8px rgba(178, 0, 29, 0.9),
    0 0 20px rgba(178, 0, 29, 0.4);
  animation: gp-badge-pulse 2s ease-in-out infinite;
}

.ww-header__badge:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.ww-header__badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--ap-red);
  display: none;
}

.ww-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-surface);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.ww-header__line {
  display: block;
}

.ww-header__line em {
  color: var(--ap-red);
  font-style: normal;
}

.ww-header__sub {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--on-surface-variant);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}
.ww-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ap-red);
  font-weight: 600;
  font-size: 0.9em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.ww-header__link:hover {
  border-bottom-color: var(--ap-red);
}

/* 3-column grid for the 3 wood species */
.ww-wood-species__grid--3col {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Style Selector Tabs — Products-style Light Theme ── */
.ww-style-selector {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.125rem;
  width: fit-content;
  margin: 0 auto clamp(2rem, 4vh, 3rem);
  position: relative;
}

.ww-style-tab {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-radius: 0.125rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: all 0.4s ease;
  white-space: nowrap;
}

.ww-style-tab:hover {
  color: var(--on-surface);
}

.ww-style-tab.active {
  background: var(--ap-red);
  color: #fff;
  box-shadow: 0 4px 16px rgba(178, 0, 29, 0.2);
}

.ww-style-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.ww-style-tab__icon svg {
  width: 14px;
  height: 14px;
}

.ww-style-tab:hover .ww-style-tab__icon {
  opacity: 1;
}

.ww-style-tab.active .ww-style-tab__icon {
  opacity: 1;
}

.ww-style-tab.active .ww-style-tab__icon svg {
  stroke: #fff;
}

.ww-style-tab__text {
  position: relative;
}

.ww-style-tab__desc {
  display: none;
}

/* ── Carousel Container ── */
.ww-carousel-container {
  position: relative;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.ww-carousel {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s var(--ease-out-expo);
}

.ww-carousel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.ww-carousel__track {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .ww-carousel__track {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ── Product Card — Products Panel Layout (Light Theme) ── */
.ww-product-card {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  transition: all 0.5s var(--ease-out-expo);
  height: 100%;
}

.ww-product-card__glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    135deg,
    rgba(178, 0, 29, 0.15) 0%,
    transparent 50%,
    rgba(48, 77, 90, 0.1) 100%
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.ww-product-card:hover .ww-product-card__glow {
  opacity: 1;
}

.ww-product-card:hover {
  border-color: rgba(178, 0, 29, 0.2);
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

.ww-product-card--featured {
  background: #ffffff;
  border-color: rgba(178, 0, 29, 0.12);
}

.ww-product-card__inner {
  display: flex;
  align-items: stretch;
  min-height: 380px;
  height: 100%;
}

@media (max-width: 900px) {
  .ww-product-card__inner {
    flex-direction: column;
    min-height: auto;
  }
}

.ww-product-card__media {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  order: unset;
}

@media (max-width: 900px) {
  .ww-product-card__media {
    width: 100%;
    height: 220px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
}

.ww-product-card__img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ww-product-card:hover .ww-product-card__img-wrapper {
  transform: scale(1.03);
}

.ww-product-card__img-wrapper img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.1));
}

.ww-product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ap-dark-grey);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ww-product-card__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ap-red);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(178, 0, 29, 0.9);
  animation: gp-badge-pulse 2s ease-in-out infinite;
}

.ww-product-card__content {
  position: relative;
  z-index: 10;
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.ww-product-card__header {
  margin-bottom: 1rem;
}

.ww-product-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 0.75rem;
}

.ww-product-card__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--ap-red);
  border-radius: 0;
}

.ww-product-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.ww-product-card__name span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ap-red);
  margin-top: 0.15rem;
}

.ww-product-card__tagline {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  line-height: 1.4;
}

/* ── Specs Grid — Products Style ── */
.ww-product-card__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
}

.ww-spec {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0;
  transition: all 0.3s ease;
}

.ww-spec:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(178, 0, 29, 0.15);
}

.ww-spec__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ww-spec__unit {
  font-size: 0.6rem;
  font-weight: 400;
  opacity: 0.5;
  margin-left: 0.1rem;
}

.ww-spec__label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-top: 0.25rem;
}

/* ── Features List — Products Style ── */
.ww-product-card__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.ww-product-card__features li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  line-height: 1.4;
  padding: 0.35rem 0.5rem;
  padding-left: 1.5rem;
  background: rgba(0, 0, 0, 0.015);
  border-radius: 0;
  transition: all 0.3s ease;
}

.ww-product-card__features li:hover {
  background: rgba(0, 0, 0, 0.03);
  transform: translateX(3px);
}

.ww-product-card__features li::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--ap-red);
  border-radius: 0;
}

.ww-product-card__features li svg {
  display: none;
}

/* ── Card Actions ── */
.ww-product-card__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

/* ── Buttons ── */
.ww-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.8em;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  text-decoration: none;
  border: none;
}

.ww-btn--primary {
  background: var(--ap-red);
  color: #fff;
  border: 2px solid var(--ap-red);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 24px rgba(178, 0, 29, 0.25);
}

.ww-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 36px rgba(178, 0, 29, 0.35);
}

.ww-btn--ghost {
  background: transparent;
  color: var(--on-surface-variant);
  border: 2px solid var(--outline-variant);
}

.ww-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--on-surface-variant);
  color: var(--on-surface);
  transform: translateY(-2px);
}

.ww-btn--outline {
  background: transparent;
  color: var(--ap-red);
  border: 2px solid var(--ap-red);
}

.ww-btn--outline:hover {
  background: var(--ap-red);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── Carousel Navigation (hidden — grid layout shows all cards at once) ── */
.ww-carousel-nav {
  display: none;
}

.ww-carousel-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ww-carousel-nav__btn:hover {
  background: rgba(178, 0, 29, 0.15);
  border-color: rgba(178, 0, 29, 0.4);
  color: var(--ap-red);
}

.ww-carousel-nav__dots {
  display: flex;
  gap: 0.5rem;
}

/* ── Wood Species Section ── */
.ww-wood-species {
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.ww-wood-species__header {
  text-align: center;
  margin-bottom: 2rem;
}

.ww-wood-species__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.ww-wood-species__sub {
  font-size: 0.9rem;
  color: var(--on-surface-variant);
}

.ww-wood-species__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.ww-wood-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.35s var(--ease-out-expo);
  min-width: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ww-wood-chip:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.ww-wood-chip--exotic {
  border-color: rgba(178, 0, 29, 0.15);
}

.ww-wood-chip--exotic:hover {
  border-color: rgba(178, 0, 29, 0.35);
  box-shadow: 0 8px 25px rgba(178, 0, 29, 0.1);
}

.ww-wood-chip__swatch {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ww-wood-chip__name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
}

.ww-wood-chip__count {
  font-size: 0.65rem;
  color: var(--on-surface-variant);
}

.ww-wood-chip__tag {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ap-red);
  padding: 0.2rem 0.5rem;
  background: rgba(178, 0, 29, 0.15);
  border-radius: 4px;
}

/* ── Technology Highlights Strip ── */
.ww-tech-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.ww-tech-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
}

.ww-tech-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(178, 0, 29, 0.08);
  border-radius: 0;
  flex-shrink: 0;
}

.ww-tech-item__icon svg {
  stroke: var(--ap-red);
}

.ww-tech-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ww-tech-item__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.ww-tech-item__value {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--on-surface);
}

/* ── CTA Banner ── */
.ww-cta-banner {
  position: relative;
  padding: 3rem;
  border-radius: 0;
  overflow: hidden;
}

.ww-cta-banner__bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.ww-cta-banner__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.ww-cta-banner__text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.ww-cta-banner__text p {
  font-size: 0.95rem;
  color: var(--on-surface-variant);
}

.ww-cta-banner__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Responsive Adjustments ── */
@media (max-width: 768px) {
  .ww-style-selector {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
  }

  .ww-style-tab {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.6rem;
    gap: 0.4rem;
  }

  .ww-style-tab__icon svg {
    width: 12px;
    height: 12px;
  }

  .ww-product-card__specs {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .ww-product-card__actions {
    flex-direction: column;
  }

  .ww-cta-banner__content {
    flex-direction: column;
    text-align: center;
  }

  .ww-cta-banner__actions {
    justify-content: center;
  }

  .ww-tech-strip {
    padding: 1.5rem 1rem;
  }
}

/* ── Animation Classes ── */
.ww-product-card {
  opacity: 0;
  transform: translateY(40px);
  animation: wwFadeUp 0.8s var(--ease-out-expo) forwards;
}

.ww-product-card:nth-child(1) {
  animation-delay: 0.1s;
}
.ww-product-card:nth-child(2) {
  animation-delay: 0.2s;
}
.ww-product-card:nth-child(3) {
  animation-delay: 0.3s;
}
.ww-product-card:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes wwFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Reveal Animation for Section Elements ── */
.wooden-windows-section .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

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

/* ================================================================
   COMPREHENSIVE RESPONSIVE ENHANCEMENTS
   Organized by breakpoint for consistency
   ================================================================ */

/* ── DESKTOP/LARGE TABLETS (max-width: 1200px) ── */
@media (max-width: 1200px) {
  :root {
    --nav-height: 52px;
  }

  .container {
    padding-inline: clamp(1.5rem, 4vw, 3rem);
  }

  /* Global Presence */
  .gp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Trust section */
  .trust-card--featured {
    grid-template-columns: 1.2fr 0.8fr;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 2rem;
  }
}

/* ── TABLETS LANDSCAPE (max-width: 1024px) ── */
@media (max-width: 1024px) {
  /* Navigation */
  .nav-links {
    display: none;
  }
  .hamburger {
    display: flex;
  }

  /* Hero section */
  .hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }

  .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem);
  }

  /* Section padding adjustment */
  .section-padding {
    padding-block: clamp(4rem, 10vh, 8rem);
  }

  /* Specific section adjustments */
  .trust-section,
  .cert-section,
  .wooden-windows-section,
  .created-for-section,
  .contact-section,
  .gp-section {
    padding-block: clamp(4rem, 8vh, 6rem);
  }

  .sn-section {
    padding-block-start: clamp(3rem, 6vh, 4.5rem);
  }

  /* Global Presence */
  .gp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .gp-globe-cell {
    grid-column: span 2;
    order: -1;
    height: 300px;
  }

  /* Product cards */
  .ww-product-card__inner {
    grid-template-columns: 1fr;
  }

  .ww-product-card__media {
    height: 280px;
  }
}

/* ── TABLETS PORTRAIT (max-width: 900px) ── */
@media (max-width: 900px) {
  /* Typography scaling */
  html {
    font-size: 15px;
  }

  /* Trust section */
  .trust-bento {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .trust-card--featured {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .trust-card__image {
    height: 300px;
    order: -1;
  }

  .trust-stats-card {
    padding: 2.5rem 2rem;
  }

  .trust-stats-card__inner {
    flex-direction: column;
    gap: 2.5rem;
  }

  .trust-stats-card__divider {
    width: 80px;
    height: 1px;
  }

  /* Global Presence */
  .gp-panel__content {
    flex-direction: column;
    gap: 2rem;
  }

  .gp-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .gp-globe-cell {
    grid-column: span 1;
    height: 280px;
  }

  /* Contact section */
  .contact-section .container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-cta {
    text-align: center;
  }

  .contact-cta p {
    margin-inline: auto;
  }

  .contact-cta-buttons {
    justify-content: center;
  }

  .contact-cta__trust {
    justify-content: center;
  }
}

/* ── LARGE MOBILE (max-width: 768px) ── */
@media (max-width: 768px) {
  /* Base adjustments */
  html {
    font-size: 14.5px;
  }

  /* Headers */
  h1,
  .h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    letter-spacing: -0.02em;
  }

  h2,
  .h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  /* Navigation */
  .nav {
    padding-inline: 1rem;
  }

  /* Hero */
  .hero {
    min-height: 90vh;
  }

  .hero-cta-wrap {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .hero-cta-wrap .btn {
    width: 100%;
    justify-content: center;
  }

  /* Buttons - touch friendly */
  .btn {
    padding: 1.1em 2em;
    font-size: 0.75rem;
    min-height: 48px;
  }

  /* Footer grid */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 1rem;
  }

  .footer-brand p {
    max-width: 100%;
    margin-inline: auto;
  }

  /* Trust indicators */
  .trust-indicators {
    gap: 1rem;
  }

  .trust-indicator {
    padding: 0.7rem 1.2rem;
  }

  /* Cards padding reduction */
  .trust-card__content {
    padding: 2rem;
  }

  /* Global Presence */
  .gp-stat-item__value {
    font-size: clamp(2rem, 6vw, 2.5rem);
  }

  /* Wooden windows */
  .ww-style-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .ww-style-tab {
    flex-direction: row;
    gap: 1rem;
    min-width: auto;
    padding: 1rem 1.5rem;
  }

  /* Certifications */
  .cert-card {
    min-width: 150px;
    padding: 1.5rem 1.5rem 1rem;
  }

  /* Marquees */
  .trust-marquee::before,
  .trust-marquee::after {
    width: 100px;
  }
}

/* ── MOBILE (max-width: 600px) ── */
@media (max-width: 600px) {
  /* Typography */
  html {
    font-size: 14px;
  }

  h1,
  .h1 {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
    line-height: 1.15;
  }

  h2,
  .h2 {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }

  /* Sections */
  .section-padding {
    padding-block: clamp(3rem, 8vh, 5rem);
  }

  /* Specific section adjustments */
  .trust-section,
  .cert-section,
  .wooden-windows-section,
  .created-for-section,
  .contact-section,
  .gp-section {
    padding-block: clamp(3rem, 6vh, 4.5rem);
  }

  .sn-section {
    padding-block-start: clamp(2.5rem, 5vh, 3.5rem);
  }

  /* Container */
  .container {
    padding-inline: 1.25rem;
  }

  /* Section containers - consistent mobile padding */
  .gp-container,
  .trust-container,
  .cf-container,
  .ww-container,
  .cert-container,
  .sn-container {
    padding-inline: 1.25rem;
  }

  /* Hero */
  .hero {
    min-height: 85vh;
    padding-top: calc(var(--nav-height) + 2rem);
  }

  .hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .hero-subtitle {
    font-size: 0.95rem;
    max-width: 100%;
  }

  /* Trust section */
  .trust-header__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .trust-card__quote {
    font-size: 0.95rem;
  }

  .trust-stats-card {
    padding: 2rem 1.5rem;
  }

  .trust-stats-card__value {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  /* Global Presence */
  .gp-section-header h2 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .gp-stat-item {
    padding: 1rem;
  }

  .gp-globe-cell {
    height: 250px;
  }

  /* Contact */
  .contact-cta h2 {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
  }

  .contact-form {
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
  }

  .form-field input,
  .form-field textarea {
    padding: 1rem 0.875rem 0.7rem;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 12px;
  }

  .contact-cta__trust {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .footer-col {
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-socials {
    justify-content: center;
  }

  /* Certifications */
  .cert-header {
    margin-bottom: 2rem;
  }

  .cert-fade {
    width: 60px;
  }

  .cert-card {
    min-width: 140px;
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 1rem;
  }

  .cert-logo-wrap {
    height: 56px;
  }

  /* Buttons stack */
  .contact-cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .contact-cta-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hide complex background effects */
  .trust-grid-overlay {
    display: none;
  }

  .contact-section::before,
  .contact-section::after {
    opacity: 0.3;
  }
}

/* ── SMALL MOBILE (max-width: 480px) ── */
@media (max-width: 480px) {
  /* Ultra-compact */
  html {
    font-size: 13.5px;
  }

  /* Section spacing - very compact */
  .section-padding {
    padding-block: clamp(2.5rem, 6vh, 4rem);
  }

  .trust-section,
  .cert-section,
  .wooden-windows-section,
  .created-for-section,
  .contact-section,
  .gp-section {
    padding-block: clamp(2.5rem, 5vh, 3.5rem);
  }

  .sn-section {
    padding-block-start: clamp(2rem, 4vh, 3rem);
  }

  /* Container - ultra compact */
  .container,
  .gp-container,
  .trust-container,
  .cf-container,
  .ww-container,
  .cert-container,
  .sn-container {
    padding-inline: 1rem;
  }

  /* Navigation */
  .nav {
    padding-inline: 0.75rem;
  }

  .logo {
    font-size: 1.2rem;
  }

  /* Hero compact */
  .hero {
    min-height: 80vh;
  }

  .hero h1 {
    font-size: clamp(1.6rem, 10vw, 2.2rem);
  }

  /* Section headers */
  .section-header {
    margin-bottom: clamp(2rem, 4vh, 3rem);
  }

  .trust-header,
  .cert-header,
  .ww-header,
  .cf-header {
    margin-bottom: clamp(2rem, 4vh, 3rem);
  }

  .trust-header__badge {
    padding: 0.4rem 1rem;
  }

  .trust-header__badge-text {
    font-size: 0.65rem;
  }

  /* Cards - minimal padding */
  .trust-card__content {
    padding: 1.5rem;
  }

  .trust-card__quote-mark {
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
  }

  .trust-card__author {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .trust-card__avatar {
    width: 48px;
    height: 48px;
  }

  /* Stats compact */
  .trust-stats-card {
    padding: 1.5rem 1rem;
  }

  .trust-stats-card__value {
    font-size: clamp(2rem, 10vw, 2.5rem);
  }

  .trust-stats-card__label {
    font-size: 0.65rem;
  }

  /* Global Presence */
  .gp-stat-item__value {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
  }

  .gp-globe-cell {
    height: 220px;
  }

  /* Contact */
  .contact-form {
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }

  .contact-form__header {
    text-align: center;
  }

  .contact-cta__trust-item {
    font-size: 0.72rem;
  }

  .contact-cta__trust-icon {
    width: 28px;
    height: 28px;
  }

  /* Footer ultra-compact */
  .footer-brand .footer-logo {
    font-size: 1.5rem;
  }

  .footer-col h4 {
    font-size: 0.62rem;
  }

  .footer-col a {
    font-size: 0.82rem;
    padding-block: 0.4em;
  }
}

/* ── TOUCH DEVICE OPTIMIZATIONS ── */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 48px;
    min-width: 48px;
  }

  /* Remove hover effects that don't work on touch */
  .trust-card:hover {
    transform: none;
  }

  .cert-card:hover {
    transform: none;
  }

  /* Ensure inputs are touch-friendly */
  .form-field input,
  .form-field textarea {
    font-size: 16px; /* Prevents iOS zoom */
  }

  /* Footer links - more tap space */
  .footer-col a {
    padding-block: 0.5em;
  }

  /* Trust indicators - larger tap */
  .trust-indicator {
    padding: 0.9rem 1.4rem;
  }

  /* Nav links larger */
  .mobile-menu a {
    padding: 0.75rem 0;
  }
}

/* ── LANDSCAPE MOBILE ORIENTATION ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
    padding-block: 3rem;
  }

  .hero h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .hero-subtitle {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .section-padding {
    padding-block: 3rem;
  }
}

/* ── HIGH DPI / RETINA DISPLAYS ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  .trust-card,
  .contact-form,
  .cert-card {
    border-width: 0.5px;
  }
}

/* ── PRINT STYLES ── */
@media print {
  body::after {
    display: none;
  }

  .nav,
  .hamburger,
  .mobile-menu,
  .hero video,
  .trust-marquee,
  .cert-ribbon,
  .footer-socials {
    display: none !important;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  * {
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .btn {
    border: 1px solid #000 !important;
  }
}

/* ================================================================
   SECTION THEME TOGGLE SWITCH
   ================================================================ */

/* Toggle switch container */
.section-theme-toggle {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.5rem, 4vw, 4rem);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Light sections toggle container */
[data-bg-theme='light'] .section-theme-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

/* When light section is toggled to dark */
[data-bg-theme='light'].theme-dark .section-theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

/* When dark section is toggled to light */
[data-bg-theme='dark'].theme-light .section-theme-toggle {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.section-theme-toggle__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.8;
}

/* The switch track */
.section-theme-toggle__switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: rgba(128, 128, 128, 0.25);
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
}

.section-theme-toggle__switch:hover {
  border-color: var(--ap-red);
  transform: scale(1.05);
}

/* The toggle knob */
.section-theme-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--ap-red);
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out-expo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(178, 0, 29, 0.4);
}

/* Sun icon (light mode) */
.section-theme-toggle__knob::before {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Toggle active state (dark mode) */
.section-theme-toggle__switch.active .section-theme-toggle__knob {
  transform: translateX(22px);
}

/* Moon icon (dark mode) */
.section-theme-toggle__switch.active .section-theme-toggle__knob::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

/* ================================================================
   SECTION THEME VARIANTS
   ================================================================ */

/* Ensure sections have position relative for toggle positioning */
section[data-bg-theme] {
  position: relative;
}

/* Light theme (default for sections with data-bg-theme="light") */
[data-bg-theme='light'] {
  --section-bg: var(--white);
  --section-text: var(--ap-dark-grey);
  --section-text-muted: var(--ap-mid-grey);
  --section-border: rgba(0, 0, 0, 0.1);
  --section-card-bg: var(--surface-container-low);
  --section-highlight: var(--ap-red);
}

/* Dark theme (default for sections with data-bg-theme="dark") */
[data-bg-theme='dark'] {
  --section-bg: var(--ap-dark-grey);
  --section-text: var(--white);
  --section-text-muted: rgba(255, 255, 255, 0.7);
  --section-border: rgba(255, 255, 255, 0.1);
  --section-card-bg: rgba(255, 255, 255, 0.05);
  --section-highlight: var(--ap-red);
}

/* Toggle switch color adjustments for dark sections */
[data-bg-theme='dark'] .section-theme-toggle__switch {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

[data-bg-theme='light'] .section-theme-toggle__switch {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.18);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .section-theme-toggle {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.35rem 0.5rem;
    gap: 0.5rem;
  }

  .section-theme-toggle__label {
    display: none;
  }

  .section-theme-toggle__switch {
    width: 40px;
    height: 22px;
  }

  .section-theme-toggle__knob {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
  }

  .section-theme-toggle__knob::before {
    width: 8px;
    height: 8px;
  }

  .section-theme-toggle__switch.active .section-theme-toggle__knob {
    transform: translateX(18px);
  }
}

/* ================================================================
   COMPREHENSIVE SECTION THEME OVERRIDES
   ================================================================ */

/* ── LIGHT SECTIONS SWITCHED TO DARK ── */
[data-bg-theme='light'].theme-dark {
  background: linear-gradient(135deg, #1a1d21 0%, #0f1012 100%) !important;
  color: var(--white) !important;
}

/* Dim light-mode pseudo-element overlays */
[data-bg-theme='light'].theme-dark::before,
[data-bg-theme='light'].theme-dark::after {
  opacity: 0.3;
}

/* Typography — headings */
[data-bg-theme='light'].theme-dark h1,
[data-bg-theme='light'].theme-dark h2,
[data-bg-theme='light'].theme-dark h3,
[data-bg-theme='light'].theme-dark h4,
[data-bg-theme='light'].theme-dark h5,
[data-bg-theme='light'].theme-dark h6 {
  color: var(--white) !important;
}

[data-bg-theme='light'].theme-dark p,
[data-bg-theme='light'].theme-dark span:not(.section-theme-toggle__label),
[data-bg-theme='light'].theme-dark li,
[data-bg-theme='light'].theme-dark label {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-bg-theme='light'].theme-dark a:not(.btn) {
  color: var(--ap-red-light) !important;
}

/* ── Wooden Windows Section — Dark Mode ── */
.wooden-windows-section.theme-dark .ww-bg__gradient {
  background: linear-gradient(180deg, #1a1d21 0%, #0f1012 100%) !important;
}

.wooden-windows-section.theme-dark .ww-header__badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75) !important;
}

.wooden-windows-section.theme-dark .ww-header__title,
.wooden-windows-section.theme-dark .ww-header__line {
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-header__sub {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Style selector tabs — correct class: ww-style-tab */
.wooden-windows-section.theme-dark .ww-style-tab {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7) !important;
}

.wooden-windows-section.theme-dark .ww-style-tab.active {
  background: var(--ap-red);
  border-color: var(--ap-red);
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-style-tab__text,
.wooden-windows-section.theme-dark .ww-style-tab__desc {
  color: inherit !important;
}

/* Product cards */
.wooden-windows-section.theme-dark .ww-product-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.wooden-windows-section.theme-dark .ww-product-card__content {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-product-card--featured .ww-product-card__content {
  background: rgba(255, 255, 255, 0.05) !important;
}

.wooden-windows-section.theme-dark .ww-product-card__tag {
  color: var(--ap-red-light) !important;
}

/* Correct class: ww-product-card__name */
.wooden-windows-section.theme-dark .ww-product-card__name,
.wooden-windows-section.theme-dark .ww-product-card__name span {
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-product-card__tagline {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Correct class: ww-spec__value, ww-spec__label */
.wooden-windows-section.theme-dark .ww-spec__value {
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-spec__unit {
  color: var(--ap-red-light) !important;
}

.wooden-windows-section.theme-dark .ww-spec__label {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Correct class: ww-product-card__specs */
.wooden-windows-section.theme-dark .ww-product-card__specs {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Correct class: ww-product-card__features */
.wooden-windows-section.theme-dark .ww-product-card__features {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

.wooden-windows-section.theme-dark .ww-product-card__features li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.wooden-windows-section.theme-dark .ww-product-card__badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9) !important;
}

.wooden-windows-section.theme-dark .ww-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Wood species chips */
.wooden-windows-section.theme-dark .ww-wood-species__title {
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-wood-species__sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

.wooden-windows-section.theme-dark .ww-wood-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.wooden-windows-section.theme-dark .ww-wood-chip__name {
  color: rgba(255, 255, 255, 0.9) !important;
}

.wooden-windows-section.theme-dark .ww-wood-chip__count,
.wooden-windows-section.theme-dark .ww-wood-chip__tag {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Tech strip */
.wooden-windows-section.theme-dark .ww-tech-strip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.wooden-windows-section.theme-dark .ww-tech-item__label {
  color: rgba(255, 255, 255, 0.6) !important;
}

.wooden-windows-section.theme-dark .ww-tech-item__value {
  color: var(--white) !important;
}

/* CTA Banner */
.wooden-windows-section.theme-dark .ww-cta-banner {
  background: linear-gradient(135deg, rgba(178, 0, 29, 0.15) 0%, rgba(178, 0, 29, 0.08) 100%);
  border-color: rgba(178, 0, 29, 0.3);
}

.wooden-windows-section.theme-dark .ww-cta-banner__text h3 {
  color: var(--white) !important;
}

.wooden-windows-section.theme-dark .ww-cta-banner__text p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Stats Section - Dark Mode */
.sn-section.theme-dark {
  background: #0f1012 !important;
}

.sn-section.theme-dark::before {
  background:
    radial-gradient(ellipse 70% 120% at 15% 50%, rgba(178, 0, 29, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 85% 50%, rgba(48, 77, 90, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 50% 100%, rgba(178, 0, 29, 0.08) 0%, transparent 60%) !important;
}

.sn-section.theme-dark::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
}

.sn-section.theme-dark .sn-grid {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4) !important;
}

.sn-section.theme-dark .sn-item {
  background: #16191d !important;
}

.sn-section.theme-dark .sn-item:first-child {
  background: #1a1d21 !important;
}

.sn-section.theme-dark .sn-item:hover {
  background: #1e2227 !important;
}

.sn-section.theme-dark .sn-item::before {
  background: radial-gradient(
    ellipse 120% 80% at 0% 100%,
    rgba(178, 0, 29, 0.08) 0%,
    transparent 55%
  ) !important;
}

.sn-section.theme-dark .sn-icon {
  background: rgba(178, 0, 29, 0.12) !important;
  border-color: rgba(178, 0, 29, 0.22) !important;
}

.sn-section.theme-dark .sn-val {
  background: linear-gradient(135deg, #ff4d6b 0%, var(--ap-red) 50%, #c9a96e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.sn-section.theme-dark .sn-lbl {
  color: rgba(255, 255, 255, 0.45) !important;
}

.sn-section.theme-dark .sn-title {
  color: var(--white) !important;
}

.sn-section.theme-dark .sn-desc {
  color: rgba(255, 255, 255, 0.6) !important;
}

.sn-section.theme-dark .sn-sub {
  color: var(--ap-red-light) !important;
}

.sn-section.theme-dark .sn-sub::before {
  background: var(--ap-red-light) !important;
}

.sn-section.theme-dark .sn-icon svg {
  stroke: var(--ap-red);
}

.sn-section.theme-dark .sn-body-wrap {
  background: #16191d !important;
  border-color: rgba(178, 0, 29, 0.28) !important;
  border-top-color: var(--ap-red) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Certifications Section - Dark Mode */
.cert-section.theme-dark {
  background: linear-gradient(135deg, #1a1d21 0%, #0f1012 100%) !important;
}

.cert-section.theme-dark .cert-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.cert-section.theme-dark .cert-eyebrow {
  color: rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.cert-section.theme-dark .cert-title {
  color: #ffffff !important;
}

.cert-section.theme-dark .cert-sub {
  color: rgba(255, 255, 255, 0.55) !important;
}

.cert-section.theme-dark .cert-card {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.cert-section.theme-dark .cert-card:hover {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.11) 0%,
    rgba(255, 255, 255, 0.05) 100%
  ) !important;
  border-color: rgba(178, 0, 29, 0.3) !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 12px 36px rgba(178, 0, 29, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.cert-section.theme-dark .cert-logo-wrap img,
.cert-section.theme-dark .cert-logo-wrap svg {
  filter: grayscale(0.3) brightness(1.1) contrast(0.85) invert(0) !important;
}

.cert-section.theme-dark .cert-name {
  color: rgba(255, 255, 255, 0.65) !important;
}

.cert-section.theme-dark .cert-card:hover .cert-name {
  color: rgba(255, 160, 140, 0.95) !important;
}

.cert-section.theme-dark .cert-fade--left {
  background: linear-gradient(90deg, #1a1d21 0%, transparent 100%);
}

.cert-section.theme-dark .cert-fade--right {
  background: linear-gradient(270deg, #1a1d21 0%, transparent 100%);
}

/* Contact Section - Dark Mode */
.contact-section.theme-dark {
  background: linear-gradient(135deg, #1a1d21 0%, #0f1012 100%) !important;
}

.contact-section.theme-dark .contact-bg {
  opacity: 0.1;
}

.contact-section.theme-dark .contact-cta__badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

.contact-section.theme-dark .contact-cta__badge-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

.contact-section.theme-dark h2 {
  color: var(--white) !important;
}

.contact-section.theme-dark .contact-cta__title-accent {
  color: var(--ap-red) !important;
}

.contact-section.theme-dark .contact-cta__trust-item span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.contact-section.theme-dark .btn-outline-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white) !important;
}

.contact-section.theme-dark .btn-outline-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.contact-section.theme-dark .contact-form {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.contact-section.theme-dark .contact-form__title {
  color: var(--white) !important;
}

.contact-section.theme-dark .contact-form__subtitle {
  color: rgba(255, 255, 255, 0.65) !important;
}

.contact-section.theme-dark .contact-form__response {
  color: rgba(255, 255, 255, 0.55) !important;
}

.contact-section.theme-dark .form-field label {
  color: rgba(255, 255, 255, 0.65) !important;
}

.contact-section.theme-dark input,
.contact-section.theme-dark textarea,
.contact-section.theme-dark select {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--white) !important;
}

.contact-section.theme-dark input::placeholder,
.contact-section.theme-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

.contact-section.theme-dark .contact-cta__trust-item span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.contact-section.theme-dark p {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ── DARK SECTIONS SWITCHED TO LIGHT ── */
[data-bg-theme='dark'].theme-light {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7f9 100%) !important;
  color: var(--ap-dark-grey) !important;
}

/* Typography */
[data-bg-theme='dark'].theme-light h1,
[data-bg-theme='dark'].theme-light h2,
[data-bg-theme='dark'].theme-light h3,
[data-bg-theme='dark'].theme-light h4,
[data-bg-theme='dark'].theme-light h5,
[data-bg-theme='dark'].theme-light h6 {
  color: var(--ap-dark-grey) !important;
}

[data-bg-theme='dark'].theme-light p,
[data-bg-theme='dark'].theme-light span:not(.section-theme-toggle__label),
[data-bg-theme='dark'].theme-light li,
[data-bg-theme='dark'].theme-light label {
  color: var(--ap-mid-grey) !important;
}

/* Hero Section - Toggle Position */
.hero .section-theme-toggle {
  top: calc(var(--nav-height) + 1rem);
}

/* Hero Section - Light Mode */
.hero.theme-light {
  background: linear-gradient(135deg, #f5f7f9 0%, #ffffff 100%) !important;
}

.hero.theme-light .hero-gradient-1,
.hero.theme-light .hero-gradient-2,
.hero.theme-light .hero-gradient-3 {
  opacity: 0.5;
}

.hero.theme-light .hero-eyebrow {
  color: #555555 !important;
}

.hero.theme-light .hero-headline span,
.hero.theme-light .hero-line span {
  color: #1a1a1a !important;
}

.hero.theme-light .hero-sub {
  color: #3a3a3a !important;
}

.hero.theme-light .hero-bubble-text {
  color: var(--white) !important;
}

.hero.theme-light .hero-profile-label {
  color: var(--ap-dark-grey) !important;
}

.hero.theme-light .product-tab {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ap-dark-grey) !important;
}

.hero.theme-light .product-tab.active {
  background: var(--ap-red);
  color: var(--white) !important;
}

.hero.theme-light .btn-glass {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--ap-dark-grey) !important;
}

.hero.theme-light .btn-glass:hover {
  background: rgba(0, 0, 0, 0.1);
}

.hero.theme-light .scroll-label {
  color: var(--ap-mid-grey) !important;
}

.hero.theme-light .scroll-line {
  background: rgba(0, 0, 0, 0.25);
}

/* ── Global Presence Section — Light Mode ── */
.gp-section.theme-light {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7f9 100%) !important;
}

.gp-section.theme-light .gp-bg {
  opacity: 0.55;
}

.gp-section.theme-light .gp-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.88) 30%,
    rgba(255, 255, 255, 0.68) 55%,
    rgba(255, 255, 255, 0.48) 80%,
    rgba(255, 255, 255, 0.32) 100%
  ) !important;
}

.gp-section.theme-light .gp-badge {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ap-mid-grey) !important;
}

.gp-section.theme-light .gp-eyebrow {
  color: var(--ap-red) !important;
}

/* Correct class: gp-heading */
.gp-section.theme-light .gp-heading {
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-heading-em {
  color: var(--ap-red) !important;
}

/* Correct class: gp-body */
.gp-section.theme-light .gp-body {
  color: var(--ap-mid-grey) !important;
}

/* Correct classes: gp-stat-val, gp-stat-lbl, gp-stat-plus */
.gp-section.theme-light .gp-stat-val {
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-stat-lbl {
  color: var(--ap-mid-grey) !important;
}

.gp-section.theme-light .gp-stat-plus {
  color: var(--ap-red) !important;
}

.gp-section.theme-light .gp-btn--primary {
  background: var(--ap-red);
  color: var(--white) !important;
  border-color: var(--ap-red);
}

.gp-section.theme-light .gp-btn--ghost {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Right glass panel */
.gp-section.theme-light .gp-panel {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06) !important;
}

.gp-section.theme-light .gp-panel-title {
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-region {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.gp-section.theme-light .gp-region strong {
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-region small {
  color: var(--ap-mid-grey) !important;
}

.gp-section.theme-light .gp-region-dot {
  background: var(--ap-red) !important;
  box-shadow: 0 0 8px rgba(178, 0, 29, 0.3);
}

.gp-section.theme-light .gp-region-tag {
  background: rgba(178, 0, 29, 0.08);
  color: var(--ap-red) !important;
  border-color: rgba(178, 0, 29, 0.2);
}

.gp-section.theme-light .gp-panel-footer {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.gp-section.theme-light .gp-panel-stat-val {
  color: var(--ap-dark-grey) !important;
}

.gp-section.theme-light .gp-panel-stat-lbl {
  color: var(--ap-mid-grey) !important;
}

/* Spec panel — light mode overrides */
.gp-section.theme-light .gp-spec-eyebrow {
  color: var(--ap-red) !important;
}
.gp-section.theme-light .gp-spec-title {
  color: var(--ap-dark-grey) !important;
}
.gp-section.theme-light .gp-spec-icon {
  background: rgba(178, 0, 29, 0.07) !important;
  border-color: rgba(178, 0, 29, 0.2) !important;
  color: var(--ap-red) !important;
}
.gp-section.theme-light .gp-spec-text strong {
  color: var(--ap-dark-grey) !important;
}
.gp-section.theme-light .gp-spec-text small {
  color: var(--ap-mid-grey) !important;
}
.gp-section.theme-light .gp-spec-grade {
  color: var(--ap-red) !important;
  background: rgba(178, 0, 29, 0.07) !important;
  border-color: rgba(178, 0, 29, 0.2) !important;
}
.gp-section.theme-light .gp-exclusive {
  background: rgba(178, 0, 29, 0.05) !important;
  border-color: rgba(178, 0, 29, 0.2) !important;
}
.gp-section.theme-light .gp-exclusive-text strong {
  color: var(--ap-mid-grey) !important;
}
.gp-section.theme-light .gp-exclusive-text span {
  color: var(--ap-dark-grey) !important;
}

/* ── Trust Section — Light Mode ── */
.trust-section.theme-light {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7f9 100%) !important;
}

.trust-section.theme-light .trust-bg {
  opacity: 0.06;
}

.trust-section.theme-light .trust-gradient--1,
.trust-section.theme-light .trust-gradient--2 {
  opacity: 0.15;
}

.trust-section.theme-light .trust-grid-overlay {
  opacity: 0.4;
}

/* Marquee strip */
.trust-section.theme-light .trust-marquee {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.trust-section.theme-light .trust-marquee__item {
  color: var(--ap-mid-grey) !important;
}

.trust-section.theme-light .trust-marquee__icon {
  color: var(--ap-red) !important;
}

.trust-section.theme-light .trust-marquee__divider {
  background: rgba(0, 0, 0, 0.15) !important;
}

/* Header — correct classes */
.trust-section.theme-light .trust-header__badge {
  background: rgba(178, 0, 29, 0.06);
  border-color: rgba(178, 0, 29, 0.15);
}

.trust-section.theme-light .trust-header__badge-dot {
  background: var(--ap-red) !important;
}

.trust-section.theme-light .trust-header__badge-text {
  color: var(--ap-mid-grey) !important;
}

.trust-section.theme-light .trust-header__title {
  color: var(--ap-dark-grey) !important;
}

.trust-section.theme-light .trust-header__title-accent {
  color: var(--ap-red) !important;
}

.trust-section.theme-light .trust-header__subtitle {
  color: var(--ap-mid-grey) !important;
}

/* Testimonial cards */
.trust-section.theme-light .trust-card {
  background: rgba(0, 0, 0, 0.025) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.trust-section.theme-light .trust-card__glow {
  display: none;
}

.trust-section.theme-light .trust-card__quote-mark svg {
  fill: rgba(0, 0, 0, 0.12);
}

/* Correct class: trust-card__quote */
.trust-section.theme-light .trust-card__quote {
  color: var(--ap-dark-grey) !important;
}

.trust-section.theme-light .trust-card__author::before {
  background: rgba(0, 0, 0, 0.08) !important;
}

.trust-section.theme-light .trust-card__avatar {
  background: rgba(178, 0, 29, 0.08);
  border-color: rgba(178, 0, 29, 0.2) !important;
}

.trust-section.theme-light .trust-card__avatar svg {
  stroke: rgba(178, 0, 29, 0.3);
}

/* Correct class: trust-card__name */
.trust-section.theme-light .trust-card__name {
  color: var(--ap-dark-grey) !important;
}

.trust-section.theme-light .trust-card__role {
  color: var(--ap-mid-grey) !important;
}

.trust-section.theme-light .trust-card__company {
  color: var(--ap-mid-grey) !important;
}

.trust-section.theme-light .trust-card__rating span {
  color: #f5a623 !important;
}

.trust-section.theme-light .trust-card__image-overlay {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, transparent 60%) !important;
}

/* Stats card — correct classes */
.trust-section.theme-light .trust-stats-card {
  background: rgba(0, 0, 0, 0.025) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.trust-section.theme-light .trust-stats-card__value {
  color: var(--ap-dark-grey) !important;
}

.trust-section.theme-light .trust-stats-card__value sup {
  color: var(--ap-red) !important;
}

.trust-section.theme-light .trust-stats-card__label {
  color: var(--ap-mid-grey) !important;
}

.trust-section.theme-light .trust-stats-card__divider {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Trust indicators strip */
.trust-section.theme-light .trust-indicators {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.trust-section.theme-light .trust-indicators::before {
  display: none;
}

.trust-section.theme-light .trust-indicator {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.trust-section.theme-light .trust-indicator__icon {
  background: rgba(178, 0, 29, 0.06) !important;
  border-color: rgba(178, 0, 29, 0.12) !important;
}

.trust-section.theme-light .trust-indicator__icon svg {
  stroke: var(--ap-red);
}

.trust-section.theme-light .trust-indicator__text {
  color: var(--ap-mid-grey) !important;
}

/* ================================================================
   PRODUCTS DUAL SHOWCASE — Light Mode Overrides
   ================================================================ */

/* Section background */
.products-dual-showcase.theme-light {
  background: #f5f7f9 !important;
  color: var(--ap-dark-grey) !important;
}

.products-dual-showcase.theme-light .products-bg__gradient {
  background: linear-gradient(135deg, #e8ecef 0%, #f0f2f4 50%, #e8ecef 100%) !important;
}

.products-dual-showcase.theme-light .products-bg__grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
}

.products-dual-showcase.theme-light .products-bg__glow--1 {
  background: radial-gradient(circle, rgba(178, 0, 29, 0.12) 0%, transparent 70%) !important;
}

.products-dual-showcase.theme-light .products-bg__glow--2 {
  background: radial-gradient(circle, rgba(48, 77, 90, 0.1) 0%, transparent 70%) !important;
}

/* Tab bar */
.products-dual-showcase.theme-light .products-tabs-premium {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.products-dual-showcase.theme-light .products-tab {
  color: rgba(26, 29, 33, 0.5) !important;
}

.products-dual-showcase.theme-light .products-tab:hover {
  color: var(--ap-dark-grey) !important;
}

.products-dual-showcase.theme-light .products-tab.active {
  color: #ffffff !important;
}

/* Pane inner glass panel */
.products-dual-showcase.theme-light .product-pane__inner {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

.products-dual-showcase.theme-light .product-pane__image {
  background: rgba(0, 0, 0, 0.02) !important;
  border-left-color: rgba(0, 0, 0, 0.08) !important;
}

/* Header text */
.products-dual-showcase.theme-light .title-line {
  color: var(--ap-dark-grey) !important;
}

.products-dual-showcase.theme-light .product-pane__subtitle {
  color: var(--ap-mid-grey) !important;
}

.products-dual-showcase.theme-light .subtitle-num {
  color: var(--ap-dark-grey) !important;
}

/* Spec items */
.products-dual-showcase.theme-light .spec-item-minimal {
  background: rgba(0, 0, 0, 0.025) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.products-dual-showcase.theme-light .spec-item-minimal:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(178, 0, 29, 0.3) !important;
}

.products-dual-showcase.theme-light .spec-item-minimal__label {
  color: rgba(26, 29, 33, 0.5) !important;
}

.products-dual-showcase.theme-light .spec-item-minimal__value {
  color: var(--ap-dark-grey) !important;
}

/* Features list */
.products-dual-showcase.theme-light .features-list-minimal li {
  color: var(--ap-dark-grey) !important;
  background: rgba(0, 0, 0, 0.025) !important;
}

.products-dual-showcase.theme-light .features-list-minimal li:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Technical list */
.products-dual-showcase.theme-light .technical-item {
  background: rgba(0, 0, 0, 0.025) !important;
}

.products-dual-showcase.theme-light .technical-item p {
  color: var(--ap-dark-grey) !important;
}

/* Feature pills */
.products-dual-showcase.theme-light .feature-pill {
  background: rgba(178, 0, 29, 0.08) !important;
  border-color: rgba(178, 0, 29, 0.2) !important;
  color: var(--ap-dark-grey) !important;
}

.products-dual-showcase.theme-light .feature-pill:hover {
  background: rgba(178, 0, 29, 0.15) !important;
}

.products-dual-showcase.theme-light .feature-pills--under-specs {
  border-top-color: rgba(178, 0, 29, 0.12);
}

/* Smooth transitions for theme changes */
section[data-bg-theme] {
  transition:
    background 0.5s var(--ease-out-expo),
    color 0.5s var(--ease-out-expo);
}

section[data-bg-theme] *:not(img):not(svg):not(video) {
  transition:
    color 0.3s var(--ease-out-expo),
    background 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo),
    opacity 0.3s var(--ease-out-expo);
}

/* ================================================================
   GLOBAL LIGHT THEME LOCK
   All sections forced to light — only created-for-section stays dark
   ================================================================ */

/* Hide all section theme toggles */
.section-theme-toggle {
  display: none !important;
}

/* Sections that had dark defaults — force their light variants */
.gp-section {
  background: linear-gradient(135deg, #ffffff 0%, #f5f7f9 100%) !important;
}
.gp-section .gp-bg {
  opacity: 0.12;
}
.gp-section .gp-overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(245, 247, 249, 0.88) 100%
  ) !important;
}
.gp-section .gp-heading,
.gp-section .gp-body,
.gp-section .gp-eyebrow {
  color: var(--on-surface) !important;
}
.gp-section .gp-heading em {
  color: var(--ap-red) !important;
}
.gp-section .gp-badge {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ap-mid-grey) !important;
}
.gp-section .gp-spec-panel {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
.gp-section .gp-spec-panel * {
  color: var(--on-surface) !important;
}
.gp-section .gp-spec-list li {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.global-section {
  background: #f5f7f9 !important;
}
.global-section .global-mesh {
  opacity: 0.04;
}
.global-section .global-glow {
  opacity: 0.06;
}
.global-section .global-title,
.global-section .global-subtitle {
  color: var(--on-surface) !important;
}
.global-section .global-badge {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}
.global-section .global-badge__text {
  color: var(--on-surface) !important;
}
.global-section .global-stat__value,
.global-section .global-stat__label {
  color: var(--on-surface) !important;
}
.global-section .global-stat__ring-bg {
  stroke: rgba(0, 0, 0, 0.1) !important;
}
.global-section .region-card__bg {
  background: rgba(0, 0, 0, 0.03) !important;
}
.global-section .region-card__title,
.global-section .region-card__desc,
.global-section .region-card__stats {
  color: var(--on-surface) !important;
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #25d366;
  color: #fff;
  border-radius: 3rem;
  padding: 0.75rem 1.1rem 0.75rem 0.85rem;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
  color: #fff;
}
.wa-float svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
@media (max-width: 480px) {
  .wa-float {
    bottom: 1.25rem;
    right: 1.25rem;
    padding: 0.7rem;
    border-radius: 50%;
  }
  .wa-float .wa-float__label {
    display: none;
  }
}

/* ============================================================
   HERO SECURITY PILL
   ============================================================ */
.hero-brand-pill--security {
  border-color: rgba(178, 0, 29, 0.4);
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================
   CONTACT DIRECT LINE
   ============================================================ */
.contact-cta__direct {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0.5rem;
  flex-wrap: wrap;
}
.contact-cta__phone,
.contact-cta__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.contact-cta__phone {
  color: var(--on-surface, #fff);
}
.contact-cta__phone:hover {
  opacity: 0.75;
}
.contact-cta__wa {
  color: #25d366;
  font-size: 0.95rem;
  font-weight: 600;
}
.contact-cta__wa:hover {
  opacity: 0.8;
}

/* ================================================================
   VIDEO HERO — contained rounded video "stage" on a white page
   ================================================================ */
.hero--video {
  --hero-gutter: clamp(1.5rem, 4.5vw, 5rem);
  --hero-stage-top: calc(var(--nav-height) + 3.25rem);
  --hero-stage-bottom: clamp(5rem, 8vh, 6.5rem);
  --hero-stage-radius: 1.75rem;
  background: #ffffff;
}

/* Scroll cue sits in the white band below the video card so the line
   reads clearly against white instead of over the footage */
.hero--video .scroll-indicator {
  bottom: 1rem;
  gap: 0.5rem;
}
.hero--video .scroll-line {
  height: 28px;
}

/* Inset + round every full-bleed hero layer so the video reads as a
   contained stage with white space around it (brand band stays full width) */
.hero--video .hero-bg,
.hero--video .hero-gradient-layer,
.hero--video .hero-mesh,
.hero--video .hero-particles,
.hero--video .hero-noise,
.hero--video .hero-shapes,
.hero--video .hero-cursor-glow {
  top: var(--hero-stage-top);
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  bottom: var(--hero-stage-bottom);
  border-radius: var(--hero-stage-radius);
  overflow: hidden;
}

.hero--video .hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: none;
}

/* Left wash gives the transparent text card legibility while the
   footage still reads clearly on the right */
.hero--video .hero-gradient-1 {
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.55) 26%,
    rgba(255, 255, 255, 0.18) 44%,
    transparent 60%
  );
}
.hero--video .hero-gradient-2 {
  background: linear-gradient(
    to top,
    rgba(15, 18, 22, 0.34) 0%,
    rgba(15, 18, 22, 0.08) 16%,
    transparent 36%
  );
}
.hero--video .hero-gradient-3 {
  background: radial-gradient(
    ellipse 70% 90% at 78% 45%,
    rgba(15, 18, 22, 0.1) 0%,
    transparent 60%
  );
}

/* Card hugs the left; video stays visible on the right.
   Transparent text box — no white/opaque panel. */
.hero--video .hero-split {
  grid-template-columns: 1fr;
  max-width: min(560px, 92vw);
  margin-left: clamp(1.25rem, 5vw, 5rem);
  margin-right: auto;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero--video .hero-split::before,
.hero--video .hero-split::after {
  display: none;
}

/* Both red lines of the new headline */
.hero--video .hero-split .hero-line4 span {
  background: linear-gradient(135deg, var(--ap-red) 0%, #d42940 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Tablet / mobile — center the card over the video */
@media (max-width: 1024px) {
  .hero--video .hero-split {
    margin-left: auto;
    margin-right: auto;
    max-width: min(620px, 94vw);
  }
}

/* Honor reduced-motion: don't autoplay-animate the bg video scale */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero-bg video {
    transform: none;
  }
}

/* ================================================================
   INTERVIEW SECTION — Gerd Weideman
   ================================================================ */
.interview-section {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--surface, #f5f5f5);
}
.interview-container {
  max-width: 980px;
  margin-inline: auto;
}
.interview-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.interview-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 0.85rem;
}
.interview-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #1a1a1a;
  margin: 0 0 0.9rem;
}
.interview-title .logo-red {
  color: var(--ap-red);
}
.interview-sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: #4a4a4a;
  line-height: 1.6;
  max-width: 620px;
  margin-inline: auto;
}
.interview-player {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0e1014;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.22),
    0 10px 30px rgba(0, 0, 0, 0.12);
}
.interview-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

/* Scrim over the poster for contrast — fades out once playing */
.interview-player::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.42) 100%);
  transition: opacity 0.45s ease;
}
.interview-player.is-playing::after {
  opacity: 0;
}

/* Big custom play button */
.interview-play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: clamp(72px, 9vw, 104px);
  height: clamp(72px, 9vw, 104px);
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(178, 0, 29, 0.94);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    opacity 0.35s ease,
    visibility 0.35s ease;
}
.interview-play svg {
  width: 34%;
  height: 34%;
  position: relative;
  z-index: 1;
  transform: translateX(6%);
}
.interview-play:hover {
  transform: scale(1.08);
  background: var(--ap-red);
}
.interview-play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Pulsing ring */
.interview-play__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: interviewPulse 2.4s ease-out infinite;
}
@keyframes interviewPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Hide the button (and stop the pulse) once the video is playing */
.interview-player.is-playing .interview-play {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .interview-play__ring {
    animation: none;
  }
}

@media (max-width: 600px) {
  .interview-player {
    border-radius: 0.9rem;
  }
}

/* ================================================================
   FOOTER CONTACT — email address
   ================================================================ */
.footer-contact {
  margin-top: 1.1rem;
}
.footer-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.25s ease;
}
.footer-contact__item:hover {
  color: #fff;
}
.footer-contact__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ap-red);
}

/* Brand credits in the footer (aluplast + Urzędowski) */
.footer-credits {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.footer-aluplast {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
}
.footer-credits .footer-aluplast {
  margin-top: 0;
}
.footer-aluplast__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.footer-aluplast__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff;
  transition: color 0.25s ease;
}
.footer-aluplast__mark sup {
  font-size: 0.45em;
  font-weight: 600;
  vertical-align: super;
}
.footer-aluplast:hover .footer-aluplast__mark,
.footer-aluplast:focus-visible .footer-aluplast__mark {
  color: var(--ap-red);
}

/* Inline aluplast text links — keep surrounding styling, underline on hover */
.aluplast-link {
  color: inherit;
  text-decoration: none;
}
.aluplast-link:hover,
.aluplast-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Hero video — remove decorative shapes & floating particles */
.hero--video .hero-shapes,
.hero--video .hero-particles {
  display: none !important;
}

/* Social links removed from the footer */
.footer-socials {
  display: none !important;
}

/* ================================================================
   OUR STORY — homepage teaser
   ================================================================ */
.story-teaser {
  background: #ffffff;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.story-teaser__inner {
  max-width: 780px;
  margin-inline: auto;
}
.story-teaser__eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ap-red);
  margin-bottom: 0.9rem;
}
.story-teaser__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 1.1rem;
}
.story-teaser__text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 640px;
  margin: 0 auto 1.7rem;
}
.story-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ap-red);
  text-decoration: none;
}
.story-teaser__link svg {
  transition: transform 0.25s ease;
}
.story-teaser__link:hover svg {
  transform: translateX(4px);
}