/* ============================================================
   AutoValley – Premium Floating Glass Header + Cinematic Hero
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   1. CSS Variables & Color Tokens
   ────────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --red: #b90504;
  --bg-dark: #050609;
  --brand-red: #b90504;
  --brand-red-soft: rgba(185, 5, 4, 0.7);
  --brand-red-border: rgba(185, 5, 4, 0.45);
  --av-red: #b90504;
  --av-dark-start: #050505;
  --av-dark-end: #0a0a0f;
  --av-dark-gray: #333333;
  --av-light-100: #f9f9f9;
  --av-light-200: #f6f6f6;
  --av-light-300: #f2f2f2;
  --av-text-dark: #333333;
  --av-text-light: #ffffff;
  --av-muted-dark: rgba(255, 255, 255, 0.75);
  --av-muted-light: #666666;
  --brand-red-glow: rgba(185, 5, 4, 0.65);
  --glass-bg-light: rgba(10, 10, 15, 0.40);
  --glass-bg-strong: rgba(8, 8, 12, 0.78);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text-white: #ffffff;
  --text-gray: #a0a0a0;
  --glass-surface: rgba(255, 255, 255, 0.03);
  --bg: #111111;
  --white: #ffffff;
  --ink: #111111;
  --inkInv: #fafafa;

  /* Glass morphism */
  --glassLight: rgba(255, 255, 255, 0.55);
  --glassDark: rgba(20, 20, 20, 0.55);
  --borderLight: rgba(255, 255, 255, 0.25);
  --borderDark: rgba(255, 255, 255, 0.15);

  /* Shadows & effects */
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  --rimRed: 0 0 0 1px rgba(185, 5, 4, 0.22);

  /* Default (dark) theme vars */
  --glass: var(--glassDark);
  --border: var(--borderDark);
  --text: var(--inkInv);
  --textInv: var(--ink);

  --header-bg: rgba(12, 10, 12, 0.9);
  --header-gradient: linear-gradient(
    120deg,
    rgba(185, 5, 4, 0.18) 0%,
    rgba(18, 8, 12, 0.6) 60%,
    rgba(185, 5, 4, 0.16) 100%
  );
  --header-border: rgba(185, 5, 4, 0.34);
  --header-shadow: 0 0 20px rgba(185, 5, 4, 0.18),
                   0 8px 32px rgba(0, 0, 0, 0.28),
                   inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --header-streak: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 0, 0, 0.3) 45%,
    rgba(255, 77, 77, 0.25) 50%,
    rgba(255, 0, 0, 0.3) 55%,
    transparent 100%
  );
  --logo-text: #ffffff;
  --nav-text: #e6e6e6;
  --nav-hover: #ffffff;
  --nav-hover-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  --icon-color: #ffffff;

  /* Typography scale */
  --font-size-hero: 2.6rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.05rem;
  --font-size-body: 0.97rem;
  --font-size-small: 0.85rem;

  --cta-text: #ffffff;
  --cta-border: rgba(255, 0, 0, 0.8);
  --cta-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  --cta-fill: linear-gradient(90deg, #ff0000, #ff4d4d);
  --cta-hover-border: transparent;
  --cta-hover-shadow: 0 0 25px rgba(255, 0, 0, 0.7),
                      inset 0 0 20px rgba(255, 100, 100, 0.3);
  --cta-focus-outline: #ffffff;

  --ghost-text: #ff5050;
  --ghost-border: rgba(255, 80, 80, 0.65);
  --ghost-hover-text: #ffffff;
  --ghost-hover-bg: linear-gradient(90deg, rgba(185, 5, 4, 0.85), rgba(255, 80, 80, 0.95));
  --ghost-hover-border: transparent;
  --ghost-hover-shadow: 0 12px 34px rgba(185, 5, 4, 0.35),
                         inset 0 1px 0 rgba(255, 120, 120, 0.35);
  --ghost-focus-outline: rgba(255, 80, 80, 0.85);

  --card-bg-normal: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 60%),
    rgba(10, 7, 15, 0.96);
  --card-bg-strong: radial-gradient(circle at top left, rgba(255, 255, 255, 0.10), transparent 55%),
    rgba(12, 8, 18, 0.98);
  --card-border-color: rgba(255, 255, 255, 0.06);
  --card-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.50);
  --card-shadow-strong: 0 22px 50px rgba(0, 0, 0, 0.7);

  --bg-hero: radial-gradient(circle at top left, rgba(185, 5, 4, 0.9), rgba(5, 2, 8, 1));
  --bg-section-strong: radial-gradient(circle at top, rgba(185, 5, 4, 0.55), rgba(5, 2, 8, 1));
  --bg-section-soft: radial-gradient(circle at top, rgba(185, 5, 4, 0.25), rgba(5, 2, 8, 1));

  --heroOverlay: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(0, 0, 0, 0.68) 100%
    ),
    linear-gradient(
      135deg,
      rgba(185, 5, 4, 0.14) 0%,
      rgba(0, 0, 0, 0.45) 50%,
      rgba(17, 17, 17, 0.78) 100%
    );
  --hero-surface: rgba(255, 255, 255, 0.82);
  --hero-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 237, 237, 0.88) 40%,
    rgba(255, 223, 223, 0.8) 70%,
    rgba(255, 215, 215, 0.35) 100%
  );
  --hero-border: rgba(255, 255, 255, 0.16);
  --hero-border-top: rgba(255, 255, 255, 0.26);
  --hero-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),
                 0 16px 40px rgba(0, 0, 0, 0.32),
                 0 0 0 1px rgba(185, 5, 4, 0.12),
                 inset 0 1px 1px rgba(255, 255, 255, 0.32),
                 inset 0 0 60px rgba(185, 5, 4, 0.05);
  --hero-before: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 100, 100, 0.08) 40%,
    rgba(185, 5, 4, 0.25) 50%,
    rgba(255, 100, 100, 0.08) 60%,
    transparent 100%
  );
  --hero-after: linear-gradient(
    125deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(185, 5, 4, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 65%,
    transparent 100%
  );
  --hero-before-opacity: 0.9;
  --hero-heading: #ffffff;
  --hero-heading-shadow: 0 4px 24px rgba(0, 0, 0, 0.7),
                         0 2px 8px rgba(0, 0, 0, 0.5);
  --hero-subtext: rgba(255, 255, 255, 0.92);
  --hero-subtext-shadow: 0 2px 12px rgba(0, 0, 0, 0.6),
                         0 1px 4px rgba(0, 0, 0, 0.4);
  --hero-eyebrow-color: #b90504;
  --hero-eyebrow-shadow: 0 0 20px rgba(185, 5, 4, 0.9),
                         0 0 40px rgba(185, 5, 4, 0.5),
                         0 2px 4px rgba(0, 0, 0, 0.5);

  /* Services section tokens */
  --bg-main: #0b0e11;
  --bg-gradient-top: #3d4148;
  --bg-gradient-bottom: #050608;
  --card-bg: rgba(15, 17, 21, 0.94);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-main: #f5f5f5;
  --text-muted: #c4c7cc;
  --accent: #ff2738;
  --accent-soft: rgba(255, 39, 56, 0.35);
  --shadow-soft: 0 26px 60px rgba(0, 0, 0, 0.8);
  --radius-xl: 26px;
  --transition-fast: 0.22s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 768px) {
  :root {
    --font-size-hero: 2.1rem;
    --font-size-h2: 1.7rem;
    --font-size-h3: 1.15rem;
    --font-size-body: 0.95rem;
  }
}

/* ──────────────────────────────────────────────────────────
   2. Reset & Base Styles
   ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text-white);
  background-color: var(--bg-dark);
  background:
    radial-gradient(circle at top center, #181a1f 0%, #050608 55%, #020204 100%);
  transition: color 250ms ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
.hero-title {
  font-size: var(--font-size-hero);
  line-height: 1.15;
  letter-spacing: 0;
}

h2,
.section-title {
  font-size: var(--font-size-h2);
  line-height: 1.2;
  margin-bottom: 10px;
}

h3,
.card-title,
.why-title,
.client-card-title,
.tech-card-title,
.blog-card-title,
.noustrouver-info-title {
  font-size: var(--font-size-h3);
  line-height: 1.25;
}

h4 {
  font-size: var(--font-size-h4);
  line-height: 1.3;
}

body,
.body-text,
.section-subtitle,
.card-text,
.card-subtitle,
.why-text,
.tech-description,
.client-card-tagline,
.blog-card-excerpt,
.noustrouver-info-text {
  font-size: var(--font-size-body);
  line-height: 1.6;
}

.muted-text {
  color: rgba(255, 255, 255, 0.72);
}

/* ──────────────────────────────────────────────────────────
   Section Spacing System
   ────────────────────────────────────────────────────────── */
.section {
  padding: 80px 0;
}

.section--tight {
  padding-top: 56px;
  padding-bottom: 56px;
}

.section--tall {
  padding-top: 96px;
  padding-bottom: 96px;
}

@media (max-width: 1024px) {
  .section {
    padding: 64px 0;
  }

  .section--tight {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .section--tall {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 48px 0;
  }

  .section--tight {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .section--tall {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.av-section {
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.av-section--dark {
  color: var(--av-text-light);
  background:
    radial-gradient(circle at 10% 0%, rgba(185, 5, 4, 0.32), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(0, 0, 0, 0.95), var(--av-dark-start) 70%);
}

.av-section--light {
  color: var(--av-text-dark);
  background: linear-gradient(180deg, #ffffff 0%, var(--av-light-200) 60%, var(--av-light-300) 100%);
}

.av-section--light::before,
.av-section--light::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.av-section--light::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(185, 5, 4, 0.08), transparent 46%),
    radial-gradient(circle at 82% 12%, rgba(0, 0, 0, 0.04), transparent 42%);
  opacity: 0.8;
}

.av-section--light::after {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(300deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 26%);
  mix-blend-mode: screen;
  opacity: 0.65;
}

.av-section--light .section-kicker,
.av-section--light .section-title,
.av-section--light .section-subtitle,
.av-section--light .subtitle,
.av-section--light .eyebrow {
  color: var(--av-text-dark);
}

.av-section--light .section-subtitle,
.av-section--light .subtitle {
  color: var(--av-muted-light);
}

.hero-section {
  padding: 0;
}

.hero-section .hero-lg__inner {
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
}

.section-header {
  margin-bottom: 32px;
}

.section-header-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.section-kicker {
  margin-bottom: 8px;
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.section-subtitle {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}

.section-body {
  margin-top: 24px;
}

@media (min-width: 1024px) {
  .section-body {
    margin-top: 28px;
  }
}

.section-why-autovalley .section-header,
.section-experience-clients .section-header,
.section-testimonials .section-header {
  margin-bottom: 36px;
}

/* ──────────────────────────────────────────────────────────
   Card Surface System
   ────────────────────────────────────────────────────────── */

.card-base {
  border-radius: 24px;
  border: 1px solid var(--card-border-color);
  background: var(--card-bg-normal);
  box-shadow: var(--card-shadow-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 22px 20px 24px;
  box-sizing: border-box;
}

.card-base--strong {
  background: var(--card-bg-strong);
  box-shadow: var(--card-shadow-strong);
}

@media (min-width: 1024px) {
  .card-base {
    padding: 24px 22px 26px;
  }
}

.card-tall {
  padding-top: 26px;
  padding-bottom: 28px;
}

.card-accent-red {
  background:
    radial-gradient(circle at top right, rgba(185, 5, 4, 0.55), transparent 55%),
    var(--card-bg-normal);
}

.card-accent-red-strong {
  background:
    radial-gradient(circle at top right, rgba(185, 5, 4, 0.78), transparent 55%),
    var(--card-bg-strong);
}

.card-accent-red-soft {
  background:
    radial-gradient(circle at top right, rgba(185, 5, 4, 0.45), transparent 55%),
    var(--card-bg-normal);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--red);
  color: var(--cta-text);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-weight: 600;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* ──────────────────────────────────────────────────────────
   3. Floating Liquid Capsule Header
   ────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 12px;
  left: 0;
  width: 100%;
  height: 88px;
  z-index: 1200;
  display: flex;
  justify-content: center;
  transition: top 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-glass-container {
  position: relative;
  width: 96%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 0 36px;

  background: var(--glass-bg-light);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: 999px;
  border: 1px solid var(--glass-border);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    inset 0 0 12px rgba(255, 255, 255, 0.04);

  overflow: hidden;
  transition:
    background 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    border-color 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    padding 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-glass-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.14'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.35;
  pointer-events: none;
}

.site-header.scrolled {
  top: 16px;
  height: 72px;
}

.site-header.scrolled .header-glass-container {
  width: 92%;
  padding: 0 28px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(0, 0, 0, 0.8);
}

.logo-wrapper a {
  display: block;
  line-height: 0;
}

.logo-img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.6));
  transition: height 0.3s ease, transform 0.3s ease;
}

.site-header.scrolled .logo-img {
  height: 32px;
  transform: translateY(-1px);
}

.desktop-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  position: relative;
  text-decoration: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.70);
  transition: color 0.25s ease, text-shadow 0.25s ease;
  padding-bottom: 3px;
}

.nav-link:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.nav-link--active {
  color: #ffffff;
}

.nav-link--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 8px var(--brand-red-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.16), transparent 60%);
  color: #ffffff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  opacity: 0.9;
  transition: border-color 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  background-clip: padding-box;
}

.lang-switch svg {
  width: 14px;
  height: 14px;
}

.lang-switch:hover {
  opacity: 1;
  border-color: var(--brand-red-border);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.6);
  transform: translateY(-1px);
}

.btn-header-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.24), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(20, 20, 24, 0.9));
  color: #ffffff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(185, 5, 4, 0.0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.btn-header-magnetic span {
  position: relative;
  z-index: 2;
}

.btn-shimmer {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 10%,
    var(--brand-red) 18%,
    transparent 28%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: btn-spin 3s linear infinite;
  mix-blend-mode: screen;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.btn-header-magnetic:hover {
  border-color: var(--brand-red-border);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.9),
    0 0 38px rgba(185, 5, 4, 0.75);
  transform: translateY(-1px) scale(1.03);
  background:
    radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(185, 5, 4, 0.85), rgba(50, 6, 5, 0.95));
}

.btn-header-magnetic:hover .btn-shimmer {
  opacity: 0.7;
}

.menu-trigger {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.hamburger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  width: 22px;
  height: 2px;
  border-radius: 20px;
  background: #ffffff;
  transition: transform 0.25s ease;
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 1100;

  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-overlay.active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.mobile-nav-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80px;
}

.mobile-nav-content ul {
  list-style: none;
  padding: 0;
  text-align: center;
  margin: 0;
}

.mobile-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  margin-bottom: 25px;
  transform: translateY(30px);
  opacity: 0;
  transition: 0.4s ease;
}

.mobile-nav-overlay.active .mobile-link {
  transform: translateY(0);
  opacity: 1;
  transition-delay: var(--delay);
}

.mobile-link:hover {
  color: var(--brand-red);
  transform: scale(1.05);
}

.mobile-cta {
  margin-top: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.4s ease;
}

.mobile-nav-overlay.active .mobile-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay);
}

.btn-mobile {
  background: var(--brand-red);
  color: white;
  padding: 16px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(185, 5, 4, 0.4);
}

.menu-trigger.is-open .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-trigger.is-open .hamburger span:nth-child(2) {
  transform: rotate(-45deg) translate(5px, -5px);
  width: 22px;
}

@media (max-width: 1100px) {
  .nav-links {
    gap: 26px;
    font-size: 0.8rem;
  }
}

@media (max-width: 960px) {
  .desktop-nav {
    display: none;
  }

  .menu-trigger {
    display: inline-flex;
  }

  .header-glass-container {
    padding: 0 18px;
  }
}

@media (max-width: 600px) {
  .site-header {
    top: 0;
  }

  .header-glass-container {
    width: 100%;
    border-radius: 0;
  }

  .site-header.scrolled .header-glass-container {
    width: 100%;
    border-radius: 0;
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(0, 0, 0, 0.8);
  }

  .logo-img {
    height: 34px;
  }
}
/* ──────────────────────────────────────────────────────────
   4. Cinematic Hero Section
   ────────────────────────────────────────────────────────── */
.hero {
  --heroOverlay: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(0, 0, 0, 0.24) 55%,
      rgba(0, 0, 0, 0.48) 100%
    ),
    linear-gradient(
      135deg,
      rgba(185, 5, 4, 0.12) 0%,
      rgba(17, 17, 17, 0.32) 55%,
      rgba(17, 17, 17, 0.55) 100%
    );
  background: var(--bg-hero);
  --hero-surface: rgba(255, 255, 255, 0.9);
  --hero-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 237, 237, 0.9) 40%,
    rgba(255, 220, 220, 0.8) 70%,
    rgba(255, 214, 214, 0.3) 100%
  );
  --hero-border: rgba(185, 5, 4, 0.16);
  --hero-border-top: rgba(255, 255, 255, 0.72);
  --hero-shadow: 0 24px 60px rgba(17, 17, 17, 0.16),
                 0 16px 32px rgba(185, 5, 4, 0.12),
                 0 0 0 1px rgba(185, 5, 4, 0.1),
                 inset 0 1px 0 rgba(255, 255, 255, 0.42),
                 inset 0 0 38px rgba(185, 5, 4, 0.08);
  --hero-before: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 38%,
    rgba(185, 5, 4, 0.18) 50%,
    rgba(255, 255, 255, 0.26) 62%,
    transparent 100%
  );
  --hero-after: linear-gradient(
    125deg,
    transparent 0%,
    transparent 32%,
    rgba(255, 255, 255, 0.3) 44%,
    rgba(185, 5, 4, 0.18) 54%,
    rgba(255, 255, 255, 0.32) 64%,
    transparent 74%,
    transparent 100%
  );
  --hero-before-opacity: 0.7;
  --hero-heading: #111111;
  --hero-heading-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --hero-subtext: rgba(34, 34, 34, 0.82);
  --hero-subtext-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --hero-eyebrow-color: #b90504;
  --hero-eyebrow-shadow: 0 0 12px rgba(185, 5, 4, 0.45),
                         0 2px 4px rgba(0, 0, 0, 0.08);

  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 60px 80px 60px;
  overflow: hidden;
  z-index: 1;
}

/* Hero background - Cinematic Parallax */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 112%;
  height: 112%;
  left: -6%;
  top: -6%;
  background-image: url('https://images.pexels.com/photos/3972755/pexels-photo-3972755.jpeg?auto=compress&cs=tinysrgb&w=1920');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transition: transform 100ms linear;

  /* Micro cinematic zoom - 1% subtle movement */
  animation: microCinematicZoom 25s ease-in-out infinite alternate;
}

@keyframes microCinematicZoom {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.01) translate(-0.5%, -0.3%);
  }
}

/* Cinematic vignette overlay */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--heroOverlay);
}

/* Hero content wrapper */
.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hero glass card - Liquid Glass Effect */
.hero-glass-card {
  position: relative;
  max-width: 900px;
  padding: 60px;

  /* TRUE FLOATING LIQUID GLASS PANEL */
  background: var(--hero-surface);
  background-image: var(--hero-gradient);

  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);

  border-radius: 30px;
  border: 1px solid var(--hero-border);
  border-top: 1px solid var(--hero-border-top);

  /* Light refraction edges - no heavy borders */
  box-shadow: var(--hero-shadow);

  /* Subtle animation on load */
  animation: glassReveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Liquid glass light streak effect */
.hero-glass-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 200%;
  background: var(--hero-before);
  opacity: var(--hero-before-opacity);
  pointer-events: none;
  transform: rotate(-25deg);
  animation: glassStreak 8s ease-in-out infinite;
  filter: blur(2px);
  border-radius: 30px;
}

@keyframes glassStreak {
  0%, 100% {
    opacity: 0.6;
    right: -10%;
  }
  50% {
    opacity: 0.9;
    right: 10%;
  }
}

/* Red reflection sweep - living interface effect */
.hero-glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-after);
  opacity: 0;
  pointer-events: none;
  border-radius: 30px;
  animation: redReflectionSweep 8s ease-in-out 2.5s infinite;
  z-index: 3;
}

@keyframes redReflectionSweep {
  0% {
    opacity: 0;
    transform: translate(-150%, -50%) rotate(-45deg) scale(1.5);
  }
  25% {
    opacity: 0.6;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translate(150%, 50%) rotate(-45deg) scale(1.5);
  }
}


.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--hero-eyebrow-color);
  margin-bottom: 24px;
  text-shadow: var(--hero-eyebrow-shadow);
  position: relative;
  z-index: 2;
  display: inline-block;
}

/* Glowing underline animation */
.eyebrow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #b90504 50%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(185, 5, 4, 0.8),
              0 0 16px rgba(185, 5, 4, 0.4);
  opacity: 0;
  animation: glowUnderline 3s ease-in-out 0.5s forwards;
}

@keyframes glowUnderline {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    transform: scaleX(1);
  }
}

.hero-glass-card h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(var(--font-size-hero), 5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--hero-heading);
  margin-bottom: 24px;
  text-shadow: var(--hero-heading-shadow);
  position: relative;
  z-index: 2;
}

.hero-glass-card .sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--hero-subtext);
  margin-bottom: 40px;
  text-shadow: var(--hero-subtext-shadow);
  max-width: 100%;
  position: relative;
  z-index: 2;
}

/* CTA buttons */
.hero-glass-card .cta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 2;
}

.btn-ghost {
  display: inline-block;
  padding: 16px 36px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--ghost-text);
  background: transparent;
  border: 2px solid var(--ghost-border);
  border-radius: 50px;
  text-decoration: none;
  transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ghost:hover {
  color: var(--ghost-hover-text);
  background: var(--ghost-hover-bg);
  border-color: var(--ghost-hover-border);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--ghost-hover-shadow);
}

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

.btn-ghost:active {
  transform: translateY(-1px) scale(1);
  transition: all 150ms ease;
}

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

/* Scroll indicator - Enhanced with animation */
.hero-scroll-cue {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0.9;
  z-index: 10;
}

.hero-scroll-label {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-scroll-icon {
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.7;
  animation: heroScrollPulse 1.6s ease-in-out infinite;
}

@keyframes heroScrollPulse {
  0%   { transform: translateY(0); opacity: 0.55; }
  50%  { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.55; }
}

/* ──────────────────────────────────────────────────────────
   5. Responsive Design
   ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .av-nav {
    gap: 1.5rem;
  }

  .av-nav a {
    font-size: 0.9rem;
  }

  .hero-panel h1 {
    font-size: 2.75rem;
  }

  .hero-panel .sub {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
  }

  .hero-panel {
    margin: 0 5%;
    padding: 2.5rem 2rem;
    max-width: 90%;
  }

  .hero-panel h1 {
    font-size: 2.375rem;
    line-height: 1.15;
  }

  .hero-panel .sub {
    font-size: 1.125rem;
  }

  .cta {
    flex-direction: column;
    gap: 1rem;
  }

  .cta a {
    text-align: center;
  }

  .scroll-cue {
    bottom: 30px;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .hero-panel h1 {
    font-size: 2rem;
  }

  .hero-panel .sub {
    font-size: 1rem;
  }

  .eyebrow {
    font-size: 0.75rem;
  }
}

/* ──────────────────────────────────────────────────────────
   6. Accessibility & Motion
   ────────────────────────────────────────────────────────── */

/* Prefers reduced motion */
/* ──────────────────────────────────────────────────────────
   Blog Preview – L'Académie AutoValley
   ────────────────────────────────────────────────────────── */

.blog-section {
  position: relative;
  background: var(--bg-section-strong);
  overflow: hidden;
  isolation: isolate;
}

.blog-section::before,
.blog-section::after {
  content: '';
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 5, 4, 0.4) 0%, rgba(185, 5, 4, 0.08) 55%, transparent 100%);
  filter: blur(42px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.blog-section::before {
  top: -360px;
  left: -180px;
}

.blog-section::after {
  bottom: -420px;
  right: -140px;
  background: radial-gradient(circle, rgba(255, 80, 80, 0.35) 0%, rgba(185, 5, 4, 0.12) 60%, transparent 100%);
}

.blog-background {
  position: absolute;
  inset: -14% -20%;
  background:
    radial-gradient(68% 82% at 18% 18%, rgba(185, 5, 4, 0.55), transparent 72%),
    radial-gradient(62% 72% at 80% 22%, rgba(118, 16, 22, 0.5), transparent 70%),
    linear-gradient(196deg, rgba(12, 12, 20, 0.92) 0%, rgba(3, 3, 8, 0.97) 60%, rgba(2, 2, 6, 0.98) 100%);
  filter: blur(68px);
  opacity: 0.82;
  transform: translateZ(0);
  pointer-events: none;
  z-index: 0;
}

.blog-inner {
  position: relative;
  max-width: 1200px;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 52px);
  box-sizing: border-box;
  z-index: 1;
}

.blog-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
  color: var(--av-text-main, #ffffff);
}

.blog-kicker {
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0;
}

.blog-title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  text-shadow: 0 24px 48px rgba(0, 0, 0, 0.65);
}

.blog-subtitle {
  font-family: var(--font-body, 'Montserrat', system-ui, sans-serif);
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
}

.blog-laser {
  width: 120px;
  height: 2px;
  border-radius: 999px;
  margin: clamp(24px, 4vw, 36px) auto 0;
  background: radial-gradient(circle, #ff4a4a 0%, #d30808 40%, transparent 78%);
  box-shadow:
    0 0 24px rgba(255, 36, 36, 0.7),
    0 0 52px rgba(185, 5, 4, 0.45);
}

.blog-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 32px);
  padding: clamp(28px, 4vw, 42px);
  border-radius: 34px;
  margin-top: clamp(44px, 6vw, 62px);
  isolation: isolate;
  background: linear-gradient(162deg, rgba(16, 16, 26, 0.92) 0%, rgba(6, 6, 14, 0.97) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 54px 110px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
}

.blog-grid::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(140% 120% at 24% 4%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(120% 100% at 88% 18%, rgba(185, 5, 4, 0.32) 0%, rgba(185, 5, 4, 0) 70%),
    linear-gradient(160deg, rgba(18, 18, 30, 0.74) 0%, rgba(12, 12, 24, 0.82) 55%, rgba(8, 8, 18, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  z-index: 0;
}

.blog-grid::after {
  content: '';
  position: absolute;
  top: clamp(18px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 46%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  opacity: 0.48;
  pointer-events: none;
  z-index: 0;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
  z-index: 1;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(110% 90% at 85% 0%, rgba(255, 76, 76, 0.24) 0%, rgba(255, 76, 76, 0) 70%);
  opacity: 0.26;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: -1;
}

.blog-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 22% -10%, rgba(255, 68, 68, 0.3), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: -1;
}

.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-10px);
  border-color: rgba(185, 5, 4, 0.92);
  box-shadow:
    0 36px 68px rgba(0, 0, 0, 0.78),
    0 0 40px rgba(185, 5, 4, 0.45);
}

.blog-card:hover::before,
.blog-card:focus-within::before {
  opacity: 0.4;
}

.blog-card:hover::after,
.blog-card:focus-within::after {
  opacity: 1;
}

.blog-card-top {
  padding-bottom: 20px;
}

.blog-card-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(185, 5, 4, 0.14);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 14px;
}

.blog-card-category::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6363 0%, #b90504 70%);
  box-shadow: 0 0 10px rgba(255, 70, 70, 0.8);
}

.blog-card-title {
  font-family: var(--font-serif, 'Lora', 'Montserrat', system-ui, sans-serif);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.blog-card-excerpt {
  color: rgba(255, 255, 255, 0.82);
}

.blog-card-bottom {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blog-card-meta {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: radial-gradient(circle at 20% 20%, #ff5050 0%, #c40707 60%, #710202 100%);
  box-shadow:
    0 0 16px rgba(185, 5, 4, 0.7),
    0 22px 34px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    color 180ms ease;
}

.blog-card-cta::after {
  content: '↗';
  font-size: 0.9rem;
  transition: transform 180ms ease;
}

.blog-card-cta:hover,
.blog-card-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(255, 40, 40, 0.9),
    0 26px 40px rgba(0, 0, 0, 0.65);
  filter: brightness(1.05);
}

.blog-card-cta:hover::after,
.blog-card-cta:focus-visible::after {
  transform: translateX(4px);
}

.blog-card-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

.blog-footer-cta {
  text-align: center;
  margin-top: clamp(40px, 5vw, 52px);
}

.blog-all-articles-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

.blog-all-articles-cta::after {
  content: '⟶';
  font-size: 1rem;
  transition: transform 200ms ease;
}

.blog-all-articles-cta:hover,
.blog-all-articles-cta:focus-visible {
  border-color: transparent;
  color: #ffffff;
  background: radial-gradient(circle at 20% 20%, #ff4a4a 0%, #b90504 60%, #6a0202 100%);
  box-shadow:
    0 0 24px rgba(255, 40, 40, 0.9),
    0 22px 36px rgba(0, 0, 0, 0.55);
}

.blog-all-articles-cta:hover::after,
.blog-all-articles-cta:focus-visible::after {
  transform: translateX(6px);
}

.blog-all-articles-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}


@media (max-width: 1180px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .blog-grid {
    border-radius: 28px;
  }
}

@media (max-width: 860px) {
  .blog-section {
    padding: 0;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    padding: clamp(24px, 6vw, 36px);
  }

  .blog-grid::after {
    width: 70%;
  }
}

@media (max-width: 640px) {
  .blog-grid {
    border-radius: 24px;
  }

  .blog-grid::before {
    background:
      linear-gradient(150deg, rgba(12, 12, 20, 0.82) 0%, rgba(12, 12, 20, 0.74) 60%),
      rgba(8, 8, 14, 0.82);
    box-shadow:
      0 28px 56px rgba(0, 0, 0, 0.6),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

}

@media (max-width: 520px) {
  .blog-card {
    padding: 20px;
  }

  .blog-card-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-card-cta {
    width: 100%;
    justify-content: center;
  }

  .blog-all-articles-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────────
   Nous Trouver – Location & Contact Section
   ────────────────────────────────────────────────────────── */

.section-noustrouver {
  position: relative;
  background: var(--bg-section-soft);
  overflow: hidden;
  isolation: isolate;
}

.section-noustrouver::before,
.section-noustrouver::after {
  content: '';
  position: absolute;
  width: clamp(380px, 48vw, 540px);
  height: clamp(380px, 48vw, 540px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 56, 56, 0.28) 0%, rgba(255, 56, 56, 0.06) 60%, transparent 100%);
  filter: blur(42px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.section-noustrouver::before {
  top: -220px;
  left: -140px;
}

.section-noustrouver::after {
  bottom: -260px;
  right: -160px;
}

.section-noustrouver-inner {
  position: relative;
  max-width: 1200px;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  box-sizing: border-box;
  z-index: 1;
}

.section-noustrouver .section-header {
  text-align: center;
  margin-bottom: clamp(44px, 6vw, 58px);
}

.section-noustrouver .section-eyebrow {
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 0;
}

.section-noustrouver .section-title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
}

.section-noustrouver .section-subtitle {
  font-family: 'Lora', serif;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0 auto;
}

.noustrouver-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 36px);
  align-items: stretch;
}

.noustrouver-map-wrapper,
.noustrouver-info-wrapper {
  display: flex;
}

.noustrouver-map-card,
.noustrouver-info-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  overflow: hidden;
}

.noustrouver-map-card {
  position: relative;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.8));
}

.noustrouver-map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255, 76, 76, 0.3), transparent 65%);
  opacity: 0.7;
  pointer-events: none;
}

.noustrouver-map {
  display: block;
  width: 100%;
  min-height: clamp(300px, 32vw, 360px);
  border: 0;
  position: relative;
  z-index: 1;
}

.noustrouver-info-card {
  position: relative;
  padding: clamp(26px, 3.8vw, 34px);
  background: linear-gradient(150deg, rgba(20, 10, 12, 0.95), rgba(5, 5, 10, 0.92));
}

.noustrouver-info-card::before {
  content: '';
  position: absolute;
  top: clamp(26px, 3.6vw, 32px);
  left: clamp(26px, 3.6vw, 32px);
  width: 74px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 80, 80, 0.9), rgba(185, 5, 4, 0.6));
}

.noustrouver-info-title {
  font-weight: 600;
  color: #ffffff;
  margin: clamp(12px, 1.8vw, 16px) 0 clamp(12px, 1.8vw, 18px);
  padding-top: clamp(12px, 1.8vw, 18px);
}

.noustrouver-info-text {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: clamp(18px, 3vw, 24px);
}

.noustrouver-details {
  display: grid;
  gap: clamp(12px, 2.4vw, 16px);
  padding: 0;
  margin: 0 0 clamp(22px, 4vw, 28px);
  list-style: none;
}

.noustrouver-details li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.noustrouver-detail-label {
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.68);
}

.noustrouver-detail-value,
.noustrouver-detail-link {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
}

.noustrouver-detail-link {
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.32);
  transition: color 180ms ease, border-color 180ms ease;
}

.noustrouver-detail-link:hover,
.noustrouver-detail-link:focus-visible {
  color: #ffffff;
  border-bottom-color: #ff3b3b;
}

.noustrouver-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(14px, 2.8vw, 20px);
}

.btn-noustrouver-main,
.btn-noustrouver-secondary {
  flex: 0 0 auto;
}

.noustrouver-microcopy {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

@media (max-width: 1024px) {
  .noustrouver-layout {
    grid-template-columns: 1fr;
  }

  .noustrouver-map {
    min-height: clamp(260px, 52vw, 320px);
  }
}

@media (max-width: 640px) {
  .section-noustrouver {
    padding: 0;
  }

  .noustrouver-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-noustrouver-main,
  .btn-noustrouver-secondary {
    width: 100%;
  }

  .noustrouver-info-card::before {
    left: clamp(20px, 5vw, 24px);
  }
}

@media (min-width: 900px) {
  .noustrouver-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ──────────────────────────────────────────────────────────
   Footer Architecture
   ────────────────────────────────────────────────────────── */

.footer-cta-section {
  position: relative;
  padding: 0;
  background:
    radial-gradient(circle at top center, rgba(185, 5, 4, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #050509 0%, #050509 100%);
  overflow: hidden;
}

.footer-cta-section::before,
.footer-cta-section::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 5, 4, 0.36) 0%, rgba(185, 5, 4, 0.08) 60%, transparent 100%);
  filter: blur(36px);
  opacity: 0.6;
  pointer-events: none;
}

.footer-cta-section::before {
  top: -260px;
  left: -160px;
}

.footer-cta-section::after {
  bottom: -280px;
  right: -140px;
}

.footer-cta-inner {
  position: relative;
  max-width: 1000px;
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  z-index: 1;
}

.footer-cta-content {
  text-align: center;
  border-radius: 24px;
}

.footer-cta-kicker {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
}

.footer-cta-title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0;
}

.footer-cta-subtitle {
  font-family: var(--font-body, 'Montserrat', system-ui, sans-serif);
  color: rgba(255, 255, 255, 0.78);
  max-width: 650px;
  margin: 0 auto 22px;
}

.footer-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.btn-footer-primary,
.btn-footer-secondary {
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  transition:
    transform 150ms ease-out,
    box-shadow 150ms ease-out,
    background 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out;
}

.btn-footer-primary {
  color: #ffffff;
  background: radial-gradient(circle at top left, #ff4a4a 0%, #b90504 60%, #7a0202 100%);
  box-shadow:
    0 0 14px rgba(185, 5, 4, 0.8),
    0 18px 36px rgba(0, 0, 0, 0.75);
}

.btn-footer-primary:hover,
.btn-footer-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(255, 0, 0, 0.95),
    0 22px 40px rgba(0, 0, 0, 0.85);
}

.btn-footer-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-footer-secondary:hover,
.btn-footer-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.12),
    0 14px 28px rgba(0, 0, 0, 0.65);
}

.btn-footer-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
}

.footer-cta-note {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer {
  position: relative;
  padding: clamp(50px, 6vw, 70px) clamp(24px, 5vw, 42px) clamp(32px, 4vw, 44px);
  background: #050309;
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.site-footer p,
.site-footer li {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer::before,
.site-footer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 5, 4, 0.32) 0%, rgba(185, 5, 4, 0.08) 62%, transparent 100%);
  filter: blur(42px);
  opacity: 0.6;
  pointer-events: none;
}

.site-footer::before {
  top: -320px;
  left: -200px;
  width: 620px;
  height: 620px;
}

.site-footer::after {
  bottom: -340px;
  right: -180px;
  width: 680px;
  height: 680px;
}

.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 2.1fr 1.2fr 1.2fr 1.5fr 1.2fr;
  gap: clamp(24px, 2.8vw, 34px);
  max-width: 1200px;
  width: min(1200px, 100%);
  margin: 0 auto;
  z-index: 1;
}

.footer-column-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.footer-brand-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 320px;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.footer-logo img {
  width: 160px;
  height: auto;
  filter: brightness(1.1);
}

.footer-google-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 70%),
    rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.75);
}

.footer-google-stars {
  color: #ffc947;
  font-size: 0.9rem;
}

.footer-google-text span {
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
}

.footer-google-link {
  margin-top: 2px;
  font-size: 0.75rem;
  background: none;
  border: 0;
  color: #ffb4b4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-google-link:hover,
.footer-google-link:focus-visible {
  color: #ffffff;
}

.footer-badges-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li {
  margin-top: 6px;
}

.footer-links a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition:
    color 160ms ease-out,
    text-shadow 160ms ease-out;
}

.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #ff4a4a 0%, #b90504 100%);
  box-shadow: 0 0 10px rgba(185, 5, 4, 0.9);
  transition: width 160ms ease-out;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  width: 100%;
}

.footer-links a:focus-visible {
  outline: none;
}

.footer-contact-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.footer-contact-list li + li {
  margin-top: 8px;
}

.footer-contact-label {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact-link {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-hours-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
  line-height: 1.5;
}

.footer-legal-title {
  margin-top: 24px;
}

.footer-bottom-bar {
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at top center, rgba(185, 5, 4, 0.32) 0%, #020205 60%);
  padding: 10px 0;
  position: relative;
  z-index: 1;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1200px;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 42px);
  box-sizing: border-box;
  font-size: 0.78rem;
}

.footer-bottom-text {
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-text.small {
  opacity: 0.7;
}

.footer-socials {
  display: flex;
  gap: 8px;
}

.footer-social-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 60%),
    rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.78rem;
  transition:
    transform 150ms ease-out,
    box-shadow 150ms ease-out,
    border-color 150ms ease-out;
}

.footer-social-icon:hover,
.footer-social-icon:focus-visible {
  transform: translateY(-1px);
  border-color: #ff4a4a;
  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.9),
    0 12px 26px rgba(0, 0, 0, 0.8);
}

.footer-social-icon:focus-visible {
  outline: none;
}

.footer-lang-switch {
  display: flex;
  align-items: center;
  margin-left: 10px;
  gap: 4px;
}

.footer-lang {
  border: 0;
  background: transparent;
  font-size: 0.78rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 4px;
  transition: color 150ms ease-out;
}

.footer-lang:hover,
.footer-lang:focus-visible {
  color: #ffffff;
}

.footer-lang.is-active {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-lang:focus-visible {
  outline: none;
}

.footer-lang-sep {
  color: rgba(255, 255, 255, 0.4);
}






























.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

  .footer-bottom-inner {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .footer-cta-actions {
    flex-direction: column;
  }

  .btn-footer-primary,
  .btn-footer-secondary {
    width: 100%;
    max-width: 320px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .footer-lang-switch {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .footer-bottom-right {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-socials {
    order: 2;
  }

  .footer-lang-switch {
    order: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-bg {
    will-change: auto;
  }

  .btn-primary::before {
    display: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .av-row {
    border-width: 2px;
  }

  .btn-primary {
    border: 2px solid white;
  }
}

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

/* Section container */
.services-section {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 28px 56px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top center,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(7, 7, 9, 0.96) 55%,
      rgba(0, 0, 0, 1) 100%
    );
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

/* soft vignette */
.services-section::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 50% -40%, rgba(255, 255, 255, 0.07) 0, transparent 65%),
    radial-gradient(circle at 10% 120%, rgba(255, 39, 56, 0.20) 0, transparent 65%);
  opacity: 0.75;
  pointer-events: none;
  mix-blend-mode: screen;
}

.services-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.18) 0, transparent 55%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.12) 0, transparent 55%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.14) 0, transparent 55%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.10) 0, transparent 55%),
    radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,0.16) 0, transparent 55%);
}

.services-inner {
  position: relative;
  z-index: 1;
}

/* Header */
.services-section .section-kicker {
  text-align: center;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--av-red);
  margin-bottom: 10px;
}

.services-section .section-title {
  text-align: center;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--av-text-dark);
  margin-bottom: 16px;
}

.services-section .section-subtitle {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--av-muted-light);
}

.services-section .title-underline {
  width: 120px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(185, 5, 4, 0.55), transparent);
  filter: blur(0.1px);
  position: relative;
}

.services-section .title-underline::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, transparent 0, rgba(185, 5, 4, 0.22) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Grid */
.services-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #0d1017 0%, #151b26 62%, #0d0f16 100%);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  isolation: isolate;
  height: 270px; /* fixed height so shutter animation is stable */
  opacity: 0;

  /* GPU hint + initial animation state */
  transform: translate3d(0, 18px, 0);
  transform-origin: center;
  will-change: transform, opacity;

  transition:
    opacity 0.35s ease-out,
    transform 0.35s ease-out,
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.86) 0, transparent 65%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.service-image {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter var(--transition-fast);
  filter: saturate(1.2) contrast(1.08);
}

.service-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, rgba(0, 0, 0, 0.6) 85%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Liquid glass overlay */
.service-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 80%),
    linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.10)),
    rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    height 0.38s cubic-bezier(0.25, 0.8, 0.25, 1),
    background 0.35s ease-out,
    backdrop-filter 0.35s ease-out;
  z-index: 2;
}

/* glossy upper line */
.service-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}

/* micro-particles / noise for liquid glass */
.service-overlay::after {
  content: "";
  position: absolute;
  inset: -20px;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.45) 0, transparent 55%),
    radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.3) 0, transparent 55%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.35) 0, transparent 55%),
    radial-gradient(1px 1px at 80% 80%, rgba(255,255,255,0.25) 0, transparent 55%),
    radial-gradient(1px 1px at 50% 40%, rgba(255,255,255,0.4) 0, transparent 60%);
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

/* moving light streak inside glass */
.glass-streak {
  position: absolute;
  top: -30%;
  left: -40%;
  width: 55%;
  height: 220%;
  background: radial-gradient(circle at center,
              rgba(255, 255, 255, 0.35),
              rgba(255, 255, 255, 0.05),
              transparent 65%);
  opacity: 0.4;
  mix-blend-mode: screen;
  filter: blur(14px);
  pointer-events: none;
  z-index: 2;
  animation: glass-streak-move 14s linear infinite;
  transform: translate3d(0, 0, 0) rotate(12deg);
}

.service-card:hover .glass-streak {
  opacity: 0.65;
  animation-duration: 10s;
}

@keyframes glass-streak-move {
  0%   { transform: translate3d(-40%, 0, 0) rotate(12deg); }
  50%  { transform: translate3d(35%, 4%, 0) rotate(12deg); }
  100% { transform: translate3d(120%, 0, 0) rotate(12deg); }
}

.overlay-header {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  gap: 12px;
  position: relative;
  z-index: 3;
}

.service-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.service-arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.16) 0, rgba(0, 0, 0, 0.92) 76%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8);
  transform: rotate(0deg);
  transition:
    transform 0.4s ease,
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast);
  position: relative;
  z-index: 3;
}

.overlay-content {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s ease 0.08s, transform 0.4s ease 0.08s;
  padding-top: 16px;
  position: relative;
  z-index: 3;
}

.overlay-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.overlay-content li {
  font-size: 13px;
  color: #d0d2d7;
  margin-bottom: 8px;
  position: relative;
  padding-left: 14px;
}

.overlay-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 39, 56, 0.7);
}

/* Hover states with shutter effect */
.service-card:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 42px 80px rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(8, 8, 11, 1));
}

.service-card:hover .service-image img {
  transform: scale(1.1);
  filter: saturate(1.35) contrast(1.12);
}

.service-card:hover .service-overlay {
  height: 210px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 80%),
    linear-gradient(to top, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.05)),
    rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
}

.service-card:hover .overlay-content {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover .service-arrow {
  transform: translateX(4px) rotate(-90deg);
  background: radial-gradient(circle at 25% 0, rgba(255, 255, 255, 0.18) 0, var(--accent-soft) 50%, rgba(0, 0, 0, 0.96) 90%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 14px 30px rgba(255, 39, 56, 0.55);
}

/* red glow under each card */
.service-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 70%;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 39, 56, 0.55) 0, transparent 70%);
  opacity: 0.5;
  filter: blur(8px);
  pointer-events: none;
  transition: opacity var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
  z-index: 0;
}

.service-card:hover::after {
  opacity: 0.8;
  filter: blur(11px);
  transform: translateX(-50%) translateY(-2px);
}

/* CTA BLOCK */
.services-cta {
  margin-top: 48px;
  text-align: center;
}

.services-cta .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.04);
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition:
    background 0.35s ease,
    transform 0.25s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.services-cta .cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0,
    rgba(255, 255, 255, 0.55) 40%,
    transparent 100%
  );
  opacity: 0.0;
  transform: skewX(-20deg);
  transition: opacity 0.4s ease, left 0.4s ease;
}

.services-cta .cta-button span.cta-arrow {
  font-size: 14px;
  transform: translateX(0);
  transition: transform 0.25s ease;
}

.services-cta .cta-button:hover {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.2), transparent 65%),
    linear-gradient(120deg, var(--accent), #b90504);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(255, 39, 56, 0.55);
}

.services-cta .cta-button:hover::before {
  left: 120%;
  opacity: 0.9;
}

.services-cta .cta-button:hover span.cta-arrow {
  transform: translateX(4px);
}

/* section fade-in */
.services-section.loaded .service-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.services-section.loaded .service-card:nth-child(1) { transition-delay: 0.05s; }
.services-section.loaded .service-card:nth-child(2) { transition-delay: 0.1s; }
.services-section.loaded .service-card:nth-child(3) { transition-delay: 0.15s; }
.services-section.loaded .service-card:nth-child(4) { transition-delay: 0.2s; }
.services-section.loaded .service-card:nth-child(5) { transition-delay: 0.25s; }
.services-section.loaded .service-card:nth-child(6) { transition-delay: 0.3s; }

/* Responsive tweaks */
@media (max-width: 992px) {
  .services-section {
    padding: 32px 18px 36px;
  }

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

  .service-card {
    height: 260px;
  }
}

@media (max-width: 640px) {
  .services-section {
    border-radius: 22px;
    padding: 26px 16px 28px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card {
    height: 260px;
  }

  .section-title {
    font-size: 28px;
  }

  .section-subtitle {
    font-size: 14px;
  }

  .services-cta {
    margin-top: 36px;
  }
}

/* ══════════════════════════════════════════════════════════════
   NOTRE APPROCHE SECTION
   Cinematic glass timeline — transition from luxury to trust
   ══════════════════════════════════════════════════════════════ */

.approche-section {
  position: relative;
  background: #0a0a0a;
  padding: 0;
  overflow: hidden;
}

/* Atmospheric Red Glow - Top */
.approche-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    rgba(185, 5, 4, 0.15) 0%,
    rgba(185, 5, 4, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}


/* Bottom Atmospheric Glow */
.approche-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 500px;
  background: radial-gradient(
    ellipse 90% 100% at 50% 100%,
    rgba(185, 5, 4, 0.08) 0%,
    rgba(185, 5, 4, 0.02) 50%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1;
}

/* Visual Bridge - Horizontal Divider with Red Light Sweep */
.approche-gradient-transition {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--approche-icon-size) + var(--approche-icon-offset) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
}

/* Horizontal Divider Line with Animated Red Glow */
.approche-gradient-transition::before {
  content: '';
  position: absolute;
  top: calc(var(--approche-icon-offset) + var(--approche-icon-size) / 2);
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(185, 5, 4, 0.4) 50%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(185, 5, 4, 0.5),
              0 0 40px rgba(185, 5, 4, 0.2);
  animation: dividerGlow 3s ease-in-out infinite;
  transform: translateY(-50%);
}

@keyframes dividerGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(0.9);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Red Light Sweep Along Divider */
.approche-gradient-transition::after {
  content: '';
  position: absolute;
  top: calc(var(--approche-icon-offset) + var(--approche-icon-size) / 2);
  left: -20%;
  width: 30%;
  height: 40px;
  transform: translateY(-50%);
  background: radial-gradient(
    ellipse 100% 50%,
    rgba(185, 5, 4, 0.6) 0%,
    rgba(185, 5, 4, 0.3) 30%,
    transparent 60%
  );
  filter: blur(15px);
  animation: sweepDivider 6s ease-in-out infinite;
}

@keyframes sweepDivider {
  0% { left: -20%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}

/* Transition Icon - Chevron Down with Glow */
.transition-icon-wrapper {
  position: relative;
  width: var(--approche-icon-size);
  height: var(--approche-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(185, 5, 4, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(185, 5, 4, 0.4),
              0 8px 24px rgba(0, 0, 0, 0.6);
  animation: iconPulse 3s ease-in-out infinite;
  z-index: 5;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1) rotate(90deg);
    box-shadow: 0 0 30px rgba(185, 5, 4, 0.4),
                0 8px 24px rgba(0, 0, 0, 0.6);
  }
  50% {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 50px rgba(185, 5, 4, 0.7),
                0 12px 32px rgba(0, 0, 0, 0.7);
  }
}

.transition-icon {
  width: 28px;
  height: 28px;
  stroke: #b90504;
  filter: drop-shadow(0 0 8px rgba(185, 5, 4, 0.8));
  animation: chevronBounce 2s ease-in-out infinite;
}

@keyframes chevronBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.approche-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  z-index: 2;
  --approche-icon-size: 60px;
  --approche-icon-offset: 8px;
}

/* ──────────────────────────────────────────────────────────
   Section Header
   ────────────────────────────────────────────────────────── */

.approche-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0;
  padding: 56px 0;
  opacity: 0;
  transform: translateY(30px);
}

.approche-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px auto 26px;
  position: relative;
  flex-shrink: 0;
  z-index: 6;
}

.approche-header.is-visible {
  animation: approcheFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.no-js .approche-header {
  opacity: 1;
  transform: none;
}

.no-js .approche-header::before,
.no-js .approche-header::after {
  width: min(1000px, 90vw);
  opacity: 1;
}

/* Top Horizontal Laser Beam */
.approche-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.3) 10%,
    rgba(255, 0, 0, 1) 50%,
    rgba(185, 5, 4, 0.3) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.8),
    0 0 40px rgba(255, 0, 0, 0.5),
    0 0 60px rgba(255, 0, 0, 0.3);
  z-index: -1;
}

.approche-header.is-visible::before {
  animation: laserExpand 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

/* Bottom Horizontal Laser Beam */
.approche-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.3) 10%,
    rgba(255, 0, 0, 1) 50%,
    rgba(185, 5, 4, 0.3) 90%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.8),
    0 0 40px rgba(255, 0, 0, 0.5),
    0 0 60px rgba(255, 0, 0, 0.3);
  z-index: -1;
}

.approche-header.is-visible::after {
  animation: laserExpand 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}

@keyframes laserExpand {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: min(1000px, 90vw);
    opacity: 1;
  }
}

@keyframes approcheFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.approche-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ff0000;
  margin-bottom: 0;
  text-shadow:
    0 0 10px rgba(255, 0, 0, 0.8),
    0 0 20px rgba(255, 0, 0, 0.4);
  animation: eyebrowPulse 3s ease-in-out infinite;
}

@keyframes eyebrowPulse {
  0%, 100% {
    opacity: 0.9;
    text-shadow:
      0 0 10px rgba(255, 0, 0, 0.8),
      0 0 20px rgba(255, 0, 0, 0.4);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 15px rgba(255, 0, 0, 1),
      0 0 30px rgba(255, 0, 0, 0.6),
      0 0 45px rgba(255, 0, 0, 0.3);
  }
}

.approche-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 0;
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.01em;
  position: relative;
}

/* Red Light Streak Behind Title */
.approche-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.2) 50%,
    transparent 100%
  );
  opacity: 0;
  animation: titleStreak 10s ease-in-out infinite;
  z-index: -1;
}

@keyframes titleStreak {
  0%, 100% { opacity: 0; transform: translateX(-50px); }
  50% { opacity: 1; transform: translateX(50px); }
}

/* Remove underline - replaced by laser beams */
.approche-underline {
  display: none;
}

.approche-subtitle {
  font-family: 'Lora', serif;
  font-style: normal;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  max-width: 700px;
  margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Remove em-dash */
.approche-subtitle::before {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   Timeline Wrapper & Connector
   ────────────────────────────────────────────────────────── */

.timeline-wrapper {
  position: relative;
  margin-bottom: 80px;
}

/* Human Touch - Transparent Silhouette Background */
.timeline-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(185, 5, 4, 0.05) 0%,
    rgba(185, 5, 4, 0.02) 40%,
    transparent 70%
  );
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
  animation: silhouettePulse 8s ease-in-out infinite;
}

@keyframes silhouettePulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

/* Diagonal Light Flares */
.timeline-wrapper::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 48%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 52%,
    transparent 100%
  );
  background-size: 400% 400%;
  animation: diagonalFlare 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

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

/* Red Line Connector (Desktop: horizontal, Mobile: vertical) */
.timeline-connector {
  position: absolute;
  top: 80px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.3) 10%,
    rgba(185, 5, 4, 0.6) 50%,
    rgba(185, 5, 4, 0.3) 90%,
    transparent 100%
  );
  z-index: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-connector.is-visible {
  transform: scaleX(1);
}

.no-js .timeline-connector {
  transform: scaleX(1);
}

/* Animated Light Beam Moving Along Connector */
.timeline-beam {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(185, 5, 4, 0.9) 50%,
    transparent 60%,
    transparent 100%
  );
  filter: blur(3px);
  animation: moveBeam 12s linear infinite;
}

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

/* ──────────────────────────────────────────────────────────
   Timeline Grid (4 Cards)
   ────────────────────────────────────────────────────────── */

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   Timeline Card — Glass Capsule Design
   ────────────────────────────────────────────────────────── */

.timeline-card {
  --card-delay: 0s;
  --card-parallax: 0px;
  position: relative;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(185, 5, 4, 0.3);
  border-radius: 20px;
  padding: 48px 32px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(calc(40px + var(--card-parallax)));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(185, 5, 4, 0.2) inset;
  will-change: transform, opacity;
  transition:
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1) var(--card-delay),
    box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 500ms ease,
    backdrop-filter 500ms ease,
    -webkit-backdrop-filter 500ms ease,
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) var(--card-delay);
}

.timeline-card.in-view {
  opacity: 1;
  transform: translateY(var(--card-parallax));
}

.timeline-card.touch-active {
  transform: translateY(calc(var(--card-parallax) - 4px)) scale(0.99);
}

.no-js .timeline-card {
  opacity: 1;
  transform: none;
}

/* Red Bottom Glow (Mockup Style) */
.timeline-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 0, 0, 0.3) 20%,
    rgba(255, 0, 0, 0.8) 50%,
    rgba(255, 0, 0, 0.3) 80%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6),
              0 0 40px rgba(255, 0, 0, 0.3);
  animation: bottomGlowPulse 3s ease-in-out infinite;
}

@keyframes bottomGlowPulse {
  0%, 100% {
    opacity: 0.7;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6),
                0 0 40px rgba(255, 0, 0, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.9),
                0 0 60px rgba(255, 0, 0, 0.5);
  }
}

.timeline-card[data-step="1"] {
  --card-delay: 0.3s;
}

.timeline-card[data-step="2"] {
  --card-delay: 0.45s;
}

.timeline-card[data-step="3"] {
  --card-delay: 0.6s;
}

.timeline-card[data-step="4"] {
  --card-delay: 0.75s;
}

.timeline-card[data-step="3"].in-view {
  animation: subtlePulse 4s ease-in-out 2s infinite;
}

/* Hover Effect — Lift, Scale & Intense Red Glow */
.timeline-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: rgba(15, 15, 15, 0.9);
  border-color: rgba(255, 0, 0, 0.7);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
              0 0 80px rgba(255, 0, 0, 0.4),
              0 0 0 1px rgba(255, 0, 0, 0.5) inset;
}

.timeline-card:hover::before {
  height: 6px;
  opacity: 1;
}

/* Step Number Badge */
.card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 900;
  color: rgba(185, 5, 4, 0.15);
  line-height: 1;
  pointer-events: none;
  transition: color 500ms ease;
}

.timeline-card:hover .card-number {
  color: rgba(255, 0, 0, 0.3);
}

/* Icon Wrapper with Glow Pulse */
.card-icon-wrapper {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(185, 5, 4, 0.05);
  border: 1px solid rgba(185, 5, 4, 0.3);
  border-radius: 16px;
  margin-bottom: 32px;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 600ms ease,
              background 600ms ease;
  box-shadow: 0 4px 16px rgba(185, 5, 4, 0.2);
  animation: iconGlowPulse 6s ease-in-out infinite;
}

.card-icon-wrapper.in-view {
  box-shadow: 0 8px 32px rgba(185, 5, 4, 0.4),
              0 0 40px rgba(185, 5, 4, 0.25);
}

@keyframes iconGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(185, 5, 4, 0.1);
  }
  50% {
    box-shadow: 0 6px 24px rgba(185, 5, 4, 0.25),
                0 0 30px rgba(185, 5, 4, 0.15);
  }
}

.timeline-card:hover .card-icon-wrapper {
  transform: rotate(360deg) scale(1.1);
  box-shadow: 0 8px 32px rgba(185, 5, 4, 0.4),
              0 0 40px rgba(185, 5, 4, 0.25);
  animation: none;
}

.timeline-icon {
  width: 40px;
  height: 40px;
  stroke: #b90504;
  stroke-width: 2;
  transition: stroke 500ms ease, filter 500ms ease;
}

.timeline-card:hover .timeline-icon {
  stroke: #ff0000;
  filter: drop-shadow(0 0 12px rgba(185, 5, 4, 0.7));
}

/* Timeline Title */
.timeline-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 12px;
  transition: color 400ms ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.timeline-card:hover .timeline-title {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
               0 0 20px rgba(255, 0, 0, 0.4);
}

/* Red Accent Line */
.timeline-accent {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #b90504, transparent);
  margin: 0 auto 20px;
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-card:hover .timeline-accent {
  width: 80px;
}

/* Timeline Description */
.timeline-description {
  font-family: 'Lora', serif;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-top: auto;
}

/* Subtle Pulse Animation for Step 3 */
.timeline-card[data-step="3"].in-view {
  animation: subtlePulse 4s ease-in-out 2s infinite;
}

@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05); }
  50% { box-shadow: 0 8px 32px rgba(185, 5, 4, 0.2), 0 4px 12px rgba(185, 5, 4, 0.1); }
}

/* ──────────────────────────────────────────────────────────
   Glass-Red CTA Card at Bottom
   ────────────────────────────────────────────────────────── */

.approche-cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  opacity: 0;
  transform: translateY(30px);
}

.approche-cta-wrapper.is-visible {
  animation: approcheFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 1.4s forwards;
}

.no-js .approche-cta-wrapper {
  opacity: 1;
  transform: none;
}

.approche-cta-card {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(185, 5, 4, 0.4);
  border-radius: 24px;
  padding: 48px 60px;
  max-width: 800px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6),
              0 0 60px rgba(185, 5, 4, 0.2);
  transition: transform 500ms ease,
              box-shadow 500ms ease,
              border-color 500ms ease;
  position: relative;
  overflow: hidden;
}

/* Scroll-tied gradient shift */
.approche-cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(185, 5, 4, 0.03) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
  z-index: 0;
}

.approche-cta-card.scrolled::before {
  opacity: 1;
}

.approche-cta-card > * {
  position: relative;
  z-index: 1;
}

.approche-cta-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 0, 0.7);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7),
              0 0 100px rgba(255, 0, 0, 0.3);
}

.cta-message {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* CTA Button — Breathing Red Capsule */
.btn-approche {
  display: inline-block;
  padding: 18px 48px;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background: linear-gradient(135deg, #b90504 0%, #8a0403 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(185, 5, 4, 0.4),
              0 4px 16px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 400ms ease;
  animation: ctaBreathing 4s ease-in-out infinite;
}

/* Breathing Glow Pulse */
@keyframes ctaBreathing {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(185, 5, 4, 0.4),
                0 4px 16px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 48px rgba(185, 5, 4, 0.65),
                0 6px 24px rgba(0, 0, 0, 0.4),
                0 0 70px rgba(185, 5, 4, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.015);
  }
}


.btn-approche::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-approche:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 64px rgba(185, 5, 4, 0.75),
              0 6px 32px rgba(0, 0, 0, 0.5),
              0 0 90px rgba(185, 5, 4, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: none;
}

.btn-approche:hover::before {
  transform: translateX(100%);
}

.btn-approche:active {
  transform: translateY(-1px) scale(1);
  transition: all 150ms ease;
}

/* ──────────────────────────────────────────────────────────
   Responsive Design
   ────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .timeline-connector {
    display: none;
  }
}

@media (max-width: 768px) {
  .approche-container {
    padding: 0 24px;
    --approche-icon-size: 50px;
    --approche-icon-offset: 6px;
  }

  .approche-header {
    margin-bottom: 0;
    padding: 48px 0;
    gap: 10px;
  }

  .approche-icon {
    margin: 6px auto 20px;
    transform: scale(0.9);
  }

  .approche-gradient-transition {
    height: calc(var(--approche-icon-size) + var(--approche-icon-offset) * 2);
  }

  .transition-icon {
    width: 24px;
    height: 24px;
  }

  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .timeline-connector {
    display: block;
    top: 0;
    left: 30px;
    right: auto;
    width: 2px;
    height: 100%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(185, 5, 4, 0.3) 10%,
      rgba(185, 5, 4, 0.6) 50%,
      rgba(185, 5, 4, 0.3) 90%,
      transparent 100%
    );
  }

  .timeline-beam {
    top: 0;
    left: -2px;
    width: 6px;
    height: 100%;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(185, 5, 4, 0.9) 50%,
      transparent 60%,
      transparent 100%
    );
    animation: moveBeamVertical 12s linear infinite;
  }

  @keyframes moveBeamVertical {
    from { transform: translateY(-100%); }
    to { transform: translateY(200%); }
  }

  .timeline-card {
    margin-left: 70px;
    min-height: 300px;
  }

  .approche-cta-card {
    padding: 36px 32px;
  }

  .btn-approche {
    padding: 16px 40px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .approche-container {
    padding: 0 20px;
    --approche-icon-size: 44px;
    --approche-icon-offset: 5px;
  }

  .approche-header {
    padding: 40px 0;
  }

  .approche-gradient-transition {
    height: calc(var(--approche-icon-size) + var(--approche-icon-offset) * 2);
  }

  .transition-icon {
    width: 20px;
    height: 20px;
  }

  .timeline-card {
    margin-left: 60px;
    padding: 32px 24px;
    min-height: 280px;
  }

  .card-number {
    font-size: 36px;
    top: 16px;
    right: 16px;
  }

  .card-icon-wrapper {
    width: 70px;
    height: 70px;
  }

  .timeline-icon {
    width: 35px;
    height: 35px;
  }

  .timeline-title {
    font-size: 18px;
  }

  .timeline-description {
    font-size: 14px;
  }

  .approche-cta-card {
    padding: 28px 24px;
  }

  .cta-message {
    font-size: 17px;
    margin-bottom: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY - REDUCE MOTION MODE
   Respectful animation control for users with motion preferences
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TECHNOLOGIE ET ÉQUIPEMENTS SECTION
   Dark cinematic showcase of precision tools
   ══════════════════════════════════════════════════════════ */

/* Transition divider between the process and technology blocks */
.tech-transition {
  position: relative;
  height: 120px;
  background: #050505;
  overflow: hidden;
}

.tech-transition-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(185, 5, 4, 0.25), transparent 65%);
  opacity: 0.6;
  animation: transitionParallax 6s ease-in-out infinite alternate;
  z-index: 1;
}

.tech-transition-divider {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.9), transparent);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.6), 0 0 40px rgba(255, 0, 0, 0.3);
  transform: translateY(-50%);
  animation: techDividerPulse 4s ease-in-out infinite;
  z-index: 2;
}

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

@keyframes techDividerPulse {
  0%,
  100% {
    opacity: 0.5;
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    filter: blur(0);
  }
}

.tech-section {
  position: relative;
  background: var(--bg-section-strong);
  overflow: hidden;
}

/* Cinematic red glow descending from the top of the section */
.tech-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(
    180deg,
    rgba(185, 5, 4, 0.35) 0%,
    rgba(185, 5, 4, 0.18) 20%,
    transparent 100%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
}

/* Floating Bokeh Particles */
.tech-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(185, 5, 4, 0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(3px 3px at 80% 10%, rgba(185, 5, 4, 0.2), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(2px 2px at 90% 50%, rgba(185, 5, 4, 0.25), transparent);
  background-size: 200% 200%;
  animation: floatingBokeh 30s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Horizontal diagnostic laser scan */
.tech-laser-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  z-index: 2;
}

.tech-laser-overlay::before {
  content: '';
  position: absolute;
  top: 20%;
  left: -20%;
  width: 140%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.8), rgba(255, 255, 255, 0.85), rgba(255, 0, 0, 0.8), transparent);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.7);
  animation: techLaserSweep 9s linear infinite;
}

@keyframes techLaserSweep {
  0% {
    transform: translateX(-10%) translateY(-40px);
    opacity: 0;
  }
  25%,
  75% {
    opacity: 1;
  }
  100% {
    transform: translateX(10%) translateY(200px);
    opacity: 0;
  }
}

@keyframes floatingBokeh {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 30% 70%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 20% 80%, 50% 50%, 70% 30%;
  }
}

.tech-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────
   Section Header
   ────────────────────────────────────────────────────────── */

.tech-header {
  position: relative;
  text-align: center;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: techFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

/* Red Light Sweep Animation */
.tech-header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 0, 0, 0.8) 50%,
    transparent 70%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
  opacity: 0;
  animation: laserScanHorizontal 3s ease-in-out 0.5s forwards;
  z-index: -1;
}

@keyframes laserScanHorizontal {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes techFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tech-eyebrow {
  font-family: 'Montserrat', sans-serif;
  color: rgba(185, 5, 4, 0.9);
  margin-bottom: 0;
  text-shadow:
    0 0 10px rgba(185, 5, 4, 0.6),
    0 0 20px rgba(185, 5, 4, 0.3);
}

.tech-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(185, 5, 4, 0.15);
  letter-spacing: -0.02em;
}

.tech-underline {
  width: 100px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.4) 20%,
    rgba(255, 0, 0, 0.9) 50%,
    rgba(185, 5, 4, 0.4) 80%,
    transparent 100%
  );
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  animation: underlineGlow 3s ease-in-out infinite;
}

@keyframes underlineGlow {
  0%, 100% {
    opacity: 0.7;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.1);
  }
}

/* ──────────────────────────────────────────────────────────
   Technology Grid (3 Columns)
   ────────────────────────────────────────────────────────── */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────
   Technology Card - Glass Design
   ────────────────────────────────────────────────────────── */

.tech-card {
  position: relative;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 500ms ease;
  opacity: 0;
  transform: translateY(40px);
  animation: techCardSlideIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  isolation: isolate;
}

.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 25% 0%, rgba(255, 0, 0, 0.25), transparent 60%);
  opacity: 0.35;
  transition: opacity 0.6s ease, filter 0.6s ease;
  z-index: 0;
  pointer-events: none;
}

.tech-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(255, 0, 0, 0.8), rgba(255, 255, 255, 0.05));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.tech-card:hover,
.tech-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(255, 0, 0, 0.45);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(255, 0, 0, 0.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.tech-card:hover::before,
.tech-card:focus-within::before {
  opacity: 0.7;
  filter: blur(6px);
}

.tech-card:hover::after,
.tech-card:focus-within::after {
  opacity: 1;
  transform: scale(1);
  animation: borderSweep 2.4s linear infinite;
}

.tech-card[data-tech="1"] {
  animation-delay: 0.3s;
}

.tech-card[data-tech="2"] {
  animation-delay: 0.5s;
}

.tech-card[data-tech="3"] {
  animation-delay: 0.7s;
}

@keyframes techCardSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Image Wrapper */
.tech-image-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(15, 15, 15, 0.9) 0%,
    rgba(20, 20, 20, 0.95) 100%
  );
}

.tech-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.tech-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), filter 800ms ease;
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.85) saturate(1.05);
  z-index: 2;
}

/* Optional motion version: replace the background-image with short looping video tags */

/* Placeholder Icons for Images */
.tech-placeholder-icon {
  width: 100px;
  height: 100px;
  stroke: rgba(255, 255, 255, 0.15);
  transition: all 600ms ease;
}

.tech-card:hover .tech-placeholder-icon,
.tech-card:focus-within .tech-placeholder-icon {
  stroke: rgba(185, 5, 4, 0.6);
  transform: scale(1.1);
  filter: drop-shadow(0 0 20px rgba(185, 5, 4, 0.5));
}

/* Ambient Movement on Image */
.tech-card:hover .tech-image,
.tech-card:focus-within .tech-image {
  transform: scale(1.01);
  filter: brightness(1.05) saturate(1.1);
}

.diagnostic-image {
  background-image: url('https://images.pexels.com/photos/3806248/pexels-photo-3806248.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

.cabin-image {
  background-image: url('https://images.pexels.com/photos/3621225/pexels-photo-3621225.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

.calibration-image {
  background-image: url('https://images.pexels.com/photos/4480456/pexels-photo-4480456.jpeg?auto=compress&cs=tinysrgb&w=1600');
}

/* =========================================
   BRANDS SECTION – Pour tous les conducteurs
   ========================================= */

.brands-universe {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) clamp(1.75rem, 6vw, 4.75rem) clamp(3.5rem, 7vw, 5rem);
  background:
      radial-gradient(circle at 15% 0%, rgba(185, 5, 4, 0.3), transparent 55%),
      radial-gradient(circle at 85% 100%, rgba(0, 0, 0, 0.9), var(--av-bg) 70%);
  color: var(--av-text);
  overflow: hidden;
}

.brands-universe__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* HEADER */

.brands-universe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.25rem;
}

.brands-universe__eyebrow-line {
  width: 60px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--av-red), transparent);
  box-shadow: 0 0 16px rgba(185, 5, 4, 0.7);
}

.brands-universe__title {
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 1.25rem;
}

.brands-universe__title-accent {
  color: var(--av-red);
  text-shadow:
      0 0 30px rgba(185, 5, 4, 0.75),
      0 0 70px rgba(185, 5, 4, 0.5);
}

.brands-universe__subtitle {
  max-width: 900px;
  margin: 0 auto clamp(2.5rem, 5vw, 3rem);
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--av-muted);
}

/* LOGO RAIL / PILL */

.brands-universe__rail {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

.brands-universe__pill {
  position: relative;
  width: 100%;
  max-width: 1220px;
  padding: 1.4rem clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 999px;
  background:
      radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
      linear-gradient(120deg, rgba(10, 10, 16, 0.96), rgba(20, 6, 6, 0.96));
  box-shadow:
      0 32px 80px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

/* edge fades */
.brands-universe__pill::before,
.brands-universe__pill::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.brands-universe__pill::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), transparent);
}

.brands-universe__pill::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9), transparent);
}

/* MOVING TRACK */

.brands-universe__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(3rem, 4vw, 4rem);
  width: max-content;
  animation: brands-universe-marquee 40s linear infinite;
  will-change: transform;
}

/* pause animation on hover over the pill */
.brands-universe__pill:hover .brands-universe__track {
  animation-play-state: paused;
}

@keyframes brands-universe-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* LOGO BUTTONS */

.brands-universe__logo {
  position: relative;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.25rem 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  isolation: isolate;
  z-index: 0;
}

/* shine layer controlled by CSS vars */
.brands-universe__logo::before {
  content: "";
  position: absolute;
  inset: -45%;
  background:
      radial-gradient(
          circle at var(--shine-x, 50%) var(--shine-y, 50%),
          rgba(255, 255, 255, 0.32),
          transparent 60%
      );
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* LOGO IMAGE */

.brands-universe__logo img {
  max-height: 46px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) grayscale(1) opacity(0.55);
  transform: scale(1);
  transition:
      transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
      filter 0.32s ease,
      opacity 0.32s ease;
}

/* HOVER – ONLY logo + shine, no pill background */
.brands-universe__logo:hover::before {
  opacity: 1;
}

/* HOVER – shine + zoom + remove grayscale */
.brands-universe__logo:hover img {
  transform: scale(1.18);
  opacity: 1;
  filter: brightness(1.8) invert(1) grayscale(0) contrast(1.35);
}

/* FOOTNOTE */

.brands-universe__note {
  margin: 0;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

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

@media (max-width: 1024px) {
  .brands-universe {
    padding-inline: clamp(1.5rem, 5vw, 3rem);
  }

  .brands-universe__pill {
    padding-inline: 2rem;
  }
}

@media (max-width: 768px) {
  .brands-universe {
    padding-block: 3.25rem 3.75rem;
  }

  .brands-universe__title {
    font-size: clamp(2rem, 6vw, 2.4rem);
  }

  .brands-universe__subtitle {
    font-size: 0.95rem;
  }

  .brands-universe__pill {
    border-radius: 28px;
    padding-block: 1.2rem;
  }

  .brands-universe__pill::before,
  .brands-universe__pill::after {
    width: 60px;
  }

  .brands-universe__logo img {
    max-height: 34px;
  }
}

@media (max-width: 480px) {
  .brands-universe {
    padding-inline: 1.25rem;
  }

  .brands-universe__pill {
    padding-inline: 1.25rem;
  }
}


/* ──────────────────────────────────────────────────────────
   Nos Clients – Segmentations
   ────────────────────────────────────────────────────────── */

.clients-section {
  position: relative;
  background:
    radial-gradient(circle at top center, rgba(185, 5, 4, 0.35) 0, transparent 50%),
    linear-gradient(180deg, var(--av-bg-dark, #050509) 0%, #050509 52%, var(--av-bg-darker, #020206) 100%);
  overflow: hidden;
}

.clients-section::before,
.clients-section::after {
  content: '';
  position: absolute;
  inset: auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 5, 4, 0.28) 0%, rgba(185, 5, 4, 0.05) 65%, transparent 100%);
  filter: blur(12px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.clients-section::before {
  top: -240px;
  left: -120px;
}

.clients-section::after {
  bottom: -260px;
  right: -160px;
  background: radial-gradient(circle, rgba(80, 17, 17, 0.6) 0%, rgba(185, 5, 4, 0.22) 45%, transparent 100%);
}

.clients-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  z-index: 1;
  isolation: isolate;
}

.clients-atmosphere {
  position: absolute;
  inset: -28% -18% -34%;
  background:
    radial-gradient(60% 60% at 16% 18%, rgba(185, 5, 4, 0.45), transparent 70%),
    radial-gradient(80% 60% at 82% 12%, rgba(255, 72, 72, 0.18), transparent 68%),
    radial-gradient(110% 90% at 50% 75%, rgba(12, 12, 18, 0.92), rgba(5, 5, 10, 0.8));
  filter: blur(62px);
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
}

.clients-header {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.clients-kicker {
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 0;
}

.clients-title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-weight: 800;
  color: var(--av-text-main, #ffffff);
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.6);
  margin-bottom: 0;
}

.clients-subtitle {
  font-family: var(--font-body, 'Montserrat', system-ui, sans-serif);
  color: rgba(255, 255, 255, 0.78);
}

.clients-laser {
  width: 108px;
  height: 2px;
  margin: clamp(22px, 3.4vw, 32px) auto 0;
  border-radius: 999px;
  background: radial-gradient(circle, #ff2d2d 0%, rgba(185, 5, 4, 0.95) 50%, transparent 78%);
  box-shadow:
    0 0 28px rgba(255, 0, 0, 0.65),
    0 0 60px rgba(255, 0, 0, 0.4);
  position: relative;
}

.clients-laser::after {
  content: '';
  position: absolute;
  inset: auto;
  top: -14px;
  left: 50%;
  width: 2px;
  height: 26px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 80%);
  opacity: 0.8;
}

.clients-grid {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 32px);
  align-items: stretch;
}

.client-experience-grid {
  max-width: 1120px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  grid-auto-rows: 1fr;
}

.clients-grid::before {
  content: '';
  position: absolute;
  inset: -32px -48px -36px;
  border-radius: 34px;
  background:
    radial-gradient(120% 140% at 18% -10%, rgba(255, 255, 255, 0.08), transparent 65%),
    radial-gradient(160% 140% at 82% 110%, rgba(255, 0, 0, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(12, 12, 18, 0.92) 0%, rgba(5, 5, 10, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  pointer-events: none;
  z-index: -1;
}

.client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.8vw, 18px);
  border-radius: 24px;
  overflow: hidden;
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

.client-type-card {
  min-height: 260px;
  opacity: 1;
  transform: none;
  transition:
    opacity 450ms ease-out,
    transform 450ms ease-out,
    box-shadow 180ms ease-out,
    background 180ms ease-out,
    border-color 180ms ease-out;
  transition-delay: var(--card-delay, 0ms);
  will-change: opacity, transform;
  transform-origin: center;
}

.client-type-card.is-reveal-init {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
}

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

.client-card::before {
  content: '';
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 5, 4, 0.32) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms ease, transform 320ms ease;
  transform: translateY(10%);
  pointer-events: none;
}

.client-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

.client-card:hover,
.client-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(185, 5, 4, 0.88);
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.75),
    0 0 32px rgba(185, 5, 4, 0.45);
}

.client-type-card:hover,
.client-type-card:focus-within {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.85),
    0 0 32px rgba(185, 5, 4, 0.9);
  border-color: rgba(255, 255, 255, 0.22);
}

.client-card:hover::before,
.client-card:focus-within::before {
  opacity: 1;
  transform: translateY(0);
}

.client-card-header {
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.client-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 90, 90, 0.85), rgba(185, 5, 4, 0.98));
  box-shadow:
    0 12px 26px rgba(185, 5, 4, 0.48),
    0 0 20px rgba(255, 40, 40, 0.6);
  position: relative;
  isolation: isolate;
}

.client-icon::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  opacity: 0.6;
  z-index: -1;
}

.client-icon::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  opacity: 0.95;
  mask: var(--client-icon-mask, none);
  -webkit-mask: var(--client-icon-mask, none);
}

.client-card-title {
  margin-top: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.client-card-tagline {
  color: rgba(255, 255, 255, 0.76);
  margin-top: 6px;
}

.client-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  flex-grow: 1;
}

.client-card-list li {
  position: relative;
  padding-left: 20px;
}

.client-card-list li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 64, 64, 0.95), rgba(185, 5, 4, 0.65));
  box-shadow: 0 0 12px rgba(185, 5, 4, 0.5);
}

.client-card-promise {
  font-style: italic;
  color: rgba(255, 255, 255, 0.86);
  margin-top: auto;
  margin-bottom: 6px;
}

.client-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at top left, #ff3a3a 0%, #b90504 60%, #6c0202 100%);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  box-shadow:
    0 0 18px rgba(185, 5, 4, 0.75),
    0 16px 30px rgba(0, 0, 0, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.client-card-cta::after {
  content: '›';
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-0.5px);
}

.client-card-cta:hover,
.client-card-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 0 24px rgba(255, 38, 38, 0.85),
    0 20px 34px rgba(0, 0, 0, 0.62);
}

.client-card-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

@keyframes clientCardFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@media (min-width: 1024px) {
  @media (prefers-reduced-motion: no-preference) {
    .client-type-card.is-visible {
      animation: clientCardFloat 9s ease-in-out infinite;
    }

    .client-type-card:hover,
    .client-type-card:focus-within {
      animation: none;
    }
  }
}

.client-card--particuliers {
  --client-icon-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-3.31 0-6 1.79-6 4v1h12v-1c0-2.21-2.69-4-6-4Z"/></svg>');
}

.client-card--entreprises {
  --client-icon-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 4h18v2H3Zm2 4h14v2H5Zm-2 4h18v2H3Zm2 4h14v2H5Z"/></svg>');
}

.client-card--loueurs {
  --client-icon-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 11h14l3 5v5h-2.2a2.8 2.8 0 1 1-5.6 0H9.8a2.8 2.8 0 1 1-5.6 0H2v-5l1-5Zm4.4 0 1.4-4h6.4l1.4 4H7.4Z"/></svg>');
}

.client-card--assureurs {
  --client-icon-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 3 4 7v6c0 4.97 3.03 9.57 8 11 4.97-1.43 8-6.03 8-11V7l-8-4Zm0 6.5 6-3v5.32c0 3.45-1.95 6.77-5 8.3-3.05-1.53-5-4.85-5-8.3V6.5l4 2Z"/></svg>');
}

.clients-refs-title {
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

.clients-refs-subtitle {
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
  margin: 0 auto 20px;
}

.clients-refs-strip {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 12px 0;
}

.clients-refs-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 12, 0.85) 0%, transparent 20%, transparent 80%, rgba(5, 5, 12, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.clients-refs-track {
  position: relative;
  display: inline-flex;
  gap: clamp(18px, 3vw, 28px);
  padding: 12px clamp(24px, 4vw, 42px);
  border-radius: 999px;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    rgba(12, 12, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.clients-refs-track::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(255, 255, 255, 0.08) 100%);
  opacity: 0.35;
  pointer-events: none;
}

.clients-ref-logo {
  min-width: 90px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
}

.clients-ref-logo img {
  max-width: 96px;
  max-height: 26px;
  filter: grayscale(1) brightness(1.8);
  opacity: 0.82;
  transition: filter 220ms ease, opacity 220ms ease;
}

.clients-ref-logo:hover img,
.clients-ref-logo:focus-within img {
  filter: grayscale(0) brightness(1.05);
  opacity: 1;
}
























.clients-refs-track:hover .clients-ref-logo img,
.clients-refs-track:focus-within .clients-ref-logo img {
  filter: grayscale(0) brightness(1.05);
  opacity: 1;
}

@media (max-width: 1180px) {
  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .client-experience-grid {
    gap: 24px;
  }
}

@media (max-width: 840px) {
  .client-experience-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}

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

  .client-card {
    padding: clamp(20px, 6vw, 26px);
  }

  .client-type-card {
    min-height: auto;
  }

  .clients-grid::before {
    inset: -20px -18px -26px;
    border-radius: 28px;
  }

  .client-experience-grid {
    max-width: 640px;
  }

  .clients-refs-track {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .clients-ref-logo {
    min-width: 80px;
    padding: 8px 14px;
  }

  .clients-ref-logo img {
    max-width: 80px;
    max-height: 22px;
  }
}

@media (max-width: 767px) {
  .brand-item {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .brand-item img {
    max-width: 76px;
    max-height: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-type-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.no-js .client-type-card {
  opacity: 1;
  transform: none;
}

/* Red Beam Sweep Effect */
.tech-beam-sweep {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    transparent 48%,
    rgba(255, 0, 0, 0.3) 50%,
    transparent 52%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  z-index: 3;
}

.tech-card:hover .tech-beam-sweep {
  opacity: 1;
  animation: diagonalSweep 1.5s ease-in-out;
}

@keyframes diagonalSweep {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  100% {
    transform: translate(50%, 50%) rotate(45deg);
  }
}

/* Card Content */
.tech-content {
  padding: 36px 28px 40px;
  position: relative;
  z-index: 2;
}

/* Icon Badge */
.tech-icon-badge {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(185, 5, 4, 0.08);
  border: 1px solid rgba(185, 5, 4, 0.3);
  border-radius: 14px;
  margin-bottom: 24px;
  transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(185, 5, 4, 0.15);
}

.tech-icon-badge svg {
  width: 28px;
  height: 28px;
  stroke: rgba(185, 5, 4, 0.9);
  transition: all 600ms ease;
}

.tech-card:hover .tech-icon-badge,
.tech-card:focus-within .tech-icon-badge {
  background: rgba(185, 5, 4, 0.18);
  border-color: rgba(255, 0, 0, 0.6);
  box-shadow: 0 8px 24px rgba(185, 5, 4, 0.35);
  transform: translateY(-4px);
}

.tech-card:hover .tech-icon-badge svg,
.tech-card:focus-within .tech-icon-badge svg {
  stroke: rgba(255, 255, 255, 0.95);
}

/* Card Title */
.tech-card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #f2f2f2;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  transition: color 400ms ease;
}

.tech-card:hover .tech-card-title {
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(255, 0, 0, 0.3);
}

/* Red Accent Line */
.tech-accent {
  width: 40px;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(185, 5, 4, 0.8) 0%,
    rgba(255, 0, 0, 0.9) 50%,
    rgba(185, 5, 4, 0.8) 100%
  );
  margin-bottom: 16px;
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.tech-card:hover .tech-accent {
  width: 80px;
}

/* Card Description */
.tech-description {
  font-family: 'Lora', serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Hover Effect - Lift & Red Glow */
.tech-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(185, 5, 4, 0.5);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 80px rgba(185, 5, 4, 0.3),
    0 0 0 1px rgba(255, 0, 0, 0.3) inset;
}

/* Soft Reflection Under Card */
.tech-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 10%;
  width: 80%;
  height: 60%;
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    rgba(185, 5, 4, 0.15),
    transparent
  );
  opacity: 0;
  filter: blur(20px);
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: -1;
}

.tech-card:hover::after {
  opacity: 0.6;
}

/* ──────────────────────────────────────────────────────────
   Bottom Laser Separator
   ────────────────────────────────────────────────────────── */

.tech-separator {
  position: relative;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tech-laser-line {
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 5, 4, 0.3) 20%,
    rgba(255, 0, 0, 1) 50%,
    rgba(185, 5, 4, 0.3) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.8),
    0 0 40px rgba(255, 0, 0, 0.5);
  animation: laserLineExpand 2s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}

@keyframes laserLineExpand {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: min(1200px, 85vw);
    opacity: 1;
  }
}

/* ──────────────────────────────────────────────────────────
   Responsive Design
   ────────────────────────────────────────────────────────── */

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

  .tech-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 600px;
    margin: 0 auto;
  }

  .tech-container {
    padding: 0 32px;
  }
}

@media (max-width: 768px) {
  .tech-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tech-card:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }

  .tech-container {
    padding: 0 24px;
  }

  .tech-header {
    margin-bottom: 0;
  }

  .tech-image-wrapper {
    height: 220px;
  }

  .tech-content {
    padding: 28px 24px 32px;
  }

  .tech-card::before {
    opacity: 0.65;
  }

  .tech-card:nth-child(odd)::before {
    background: radial-gradient(circle at 50% -20%, rgba(255, 0, 0, 0.45), transparent 70%);
  }

  .tech-card:nth-child(even)::before {
    background: linear-gradient(120deg, rgba(255, 0, 0, 0.35), transparent 55%);
  }
}

@media (max-width: 480px) {
  .tech-container {
    padding: 0 20px;
  }

  .tech-image-wrapper {
    height: 200px;
  }

  .tech-placeholder-icon {
    width: 80px;
    height: 80px;
  }

  .tech-content {
    padding: 24px 20px 28px;
  }

  .tech-icon-badge {
    width: 52px;
    height: 52px;
  }

  .tech-icon-badge svg {
    width: 24px;
    height: 24px;
  }
}

@media (hover: none) {
  .tech-card:active {
    transform: translateY(-5px);
    border-color: rgba(255, 0, 0, 0.45);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.65),
      0 0 30px rgba(255, 0, 0, 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .tech-card:active::before {
    opacity: 0.7;
    filter: blur(6px);
  }

  .tech-card:active::after {
    opacity: 1;
    transform: scale(1);
  }

  .tech-card:active .tech-image {
    transform: scale(1.01);
    filter: brightness(1.05) saturate(1.1);
  }
}

/* ──────────────────────────────────────────────────────────
   Témoignages Section
   ────────────────────────────────────────────────────────── */

.test-sec {
  position: relative;
  overflow: hidden;
  padding-inline: clamp(24px, 8vw, 120px);
  color: #f7f7f7;
  background: var(--bg-section-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  opacity: 0.12;
  transform: translateY(80px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.no-js .test-sec {
  opacity: 1;
  transform: none;
}

.test-sec.is-visible {
  opacity: 1;
  transform: none;
}

.test-bg {
  position: absolute;
  inset: -20% -40% -30% -40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(185, 5, 4, 0.35), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(185, 5, 4, 0.22), transparent 65%),
    radial-gradient(circle at 50% 90%, rgba(185, 5, 4, 0.18), transparent 70%);
  filter: blur(60px);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

.test-head {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.test-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 5vw, 54px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: #ffffff;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 20px rgba(185, 5, 4, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

.google-badge span {
  color: var(--red);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(185, 5, 4, 0.8);
}

.google-badge a {
  color: #f7f7f7;
  text-decoration: none;
  border-bottom: 1px dotted rgba(247, 247, 247, 0.4);
  transition: color 250ms ease, border-color 250ms ease;
}

.google-badge a:hover,
.google-badge a:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}

.test-carousel-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(48px, 8vw, 70px);
}

.test-carousel {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  overflow-x: auto;
  padding: 1.5rem 0 1.75rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.test-carousel::-webkit-scrollbar {
  display: none;
}

.test-card {
  position: relative;
  flex: 0 0 clamp(280px, 28vw, 360px);
  scroll-snap-align: center;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 450ms ease;
  outline: none;
}

.test-card[data-active="true"] {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(185, 5, 4, 0.24);
}

.test-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(185, 5, 4, 0.35), transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 600ms ease, opacity 300ms ease;
  pointer-events: none;
}

.test-card:hover,
.test-card:focus-visible {
  transform: translateY(-14px) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(185, 5, 4, 0.35);
}

.test-card:hover::after,
.test-card:focus-visible::after {
  transform: translateX(120%);
  opacity: 1;
}

.test-card:focus-visible {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(255, 255, 255, 0.8);
}

.quote {
  font-family: 'Lora', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.stars {
  display: inline-flex;
  gap: 0.3rem;
  font-size: 1rem;
  color: var(--red);
  filter: drop-shadow(0 0 12px rgba(185, 5, 4, 0.75));
}

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

.profile img {
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(185, 5, 4, 0.6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.1rem;
}

.context {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

.google-link {
  align-self: flex-start;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: color 250ms ease, border-color 250ms ease;
}

.google-link:hover,
.google-link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
}

.prev,
.next {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 15, 15, 0.65);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease;
}

.prev:hover,
.next:hover,
.prev:focus-visible,
.next:focus-visible {
  transform: translateY(-4px);
  background: rgba(185, 5, 4, 0.65);
  box-shadow: 0 12px 30px rgba(185, 5, 4, 0.45);
}

.cta-row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(185, 5, 4, 0.95), rgba(120, 0, 0, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 40px rgba(185, 5, 4, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px rgba(185, 5, 4, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .test-card {
    flex: 0 0 clamp(280px, 40vw, 340px);
  }
}

@media (max-width: 900px) {
  .test-carousel-wrap {
    align-items: stretch;
  }

  .prev,
  .next {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .test-sec {
    padding-inline: 24px;
  }

  .test-carousel {
    gap: 1.5rem;
  }

  .test-card {
    flex: 0 0 78%;
  }

  .test-head h2 {
    letter-spacing: 0.05em;
  }
}

@media (max-width: 560px) {
  .test-carousel-wrap {
    gap: 1rem;
  }

  .prev,
  .next {
    display: none;
  }

  .test-card {
    flex: 0 0 90%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Keep essential fades but remove movement */
  .approche-header,
  .timeline-card,
  .approche-cta-wrapper,
  .tech-header,
  .tech-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .test-sec {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .test-card,
  .test-card::after,
  .google-badge,
  .btn {
    transition: none !important;
  }

  .test-card:hover,
  .test-card:focus-visible {
    transform: none !important;
  }

  .test-carousel {
    scroll-behavior: auto !important;
  }

  /* Disable ambient effects */
  .approche-section::before,
  .approche-section::after,
  .timeline-beam,
  .approche-title::before,
  .tech-section::before,
  .tech-section::after,
  .tech-beam-sweep,
  .tech-laser-overlay,
  .tech-transition-overlay,
  .tech-transition-divider {
    display: none;
  }

  /* Keep hover states but remove transforms */
  .timeline-card:hover {
    transform: none;
  }

  .timeline-card:hover .card-icon-wrapper {
    transform: none;
  }

  .btn-approche:hover {
    transform: none;
  }
}

/* Premium Pourquoi choisir AutoValley */
.why-section {
  position: relative;
  padding: 100px 20px 120px;
  overflow: hidden;
  background:
    radial-gradient(circle at top center, #2b0808 0, #050609 55%, #000000 100%);
}

.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  animation: float 20s infinite linear;
  z-index: 0;
}

.b1 {
  width: 420px;
  height: 420px;
  top: -10%;
  left: -12%;
  background: radial-gradient(circle at 30% 0, rgba(185, 5, 4, 0.55), transparent 70%);
  opacity: 0.25;
}

.b2 {
  width: 320px;
  height: 320px;
  bottom: 4%;
  right: -10%;
  background: radial-gradient(circle at 30% 0, rgba(255, 102, 72, 0.55), transparent 70%);
  opacity: 0.18;
}

.b3 {
  width: 200px;
  height: 200px;
  top: 20%;
  right: 20%;
  background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.5), transparent 70%);
  opacity: 0.08;
}

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

.container {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  z-index: 1;
}

.header-center {
  text-align: center;
  margin-bottom: 70px;
}

.eyebrow {
  color: var(--brand-red);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
}

.why-section h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(2.2rem, 3.6vw, 3.5rem);
  margin: 0 0 20px 0;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.text-gradient {
  background: linear-gradient(
      90deg,
      #ffffff 0%,
      #f7c5c5 40%,
      var(--brand-red) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  color: var(--text-gray);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 300;
  font-size: 0.96rem;
}

.title-underline {
  width: 110px;
  height: 3px;
  margin: 25px auto 0;
  background: linear-gradient(90deg, transparent, var(--brand-red), transparent);
  border-radius: 999px;
  box-shadow: 0 0 18px var(--brand-red-glow);
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  position: relative;
  margin-top: 10px;
}

.grid-cards::before {
  content: "";
  position: absolute;
  inset: 40% 6% -30%;
  background: radial-gradient(circle at 50% 100%, rgba(185, 5, 4, 0.75), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.glass-card {
  background: linear-gradient(140deg, #ffffff 0%, #f7f7f7 55%, #f1f1f1 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 40px 30px;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
      box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
      border-color 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
      background 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.9),
      0 0 0 1px rgba(185, 5, 4, 0.4);
  background: radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.07), rgba(5, 5, 7, 0.95));
}

.icon-orbit {
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 70%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.8),
      0 12px 25px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.icon-orbit::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(255, 255, 255, 0.7) 10%,
      var(--brand-red) 25%,
      transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  animation: spin 4s linear infinite;
}

.glass-card:hover .icon-orbit::before {
  opacity: 0.65;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.icon-core {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0, #ffd8d0, var(--brand-red));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
      0 5px 15px rgba(185, 5, 4, 0.5),
      0 0 18px rgba(185, 5, 4, 0.7);
  position: relative;
  z-index: 2;
}

.icon-core svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  stroke-width: 2.3;
}

.why-section h3 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 1.35rem;
  margin: 0 0 14px 0;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.desc {
  color: var(--text-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e1e1e1;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-red);
  box-shadow: 0 0 10px var(--brand-red);
  position: relative;
}

.dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--brand-red);
  opacity: 0;
  animation: pulse 2s infinite;
}

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

@media (max-width: 1100px) {
  .why-section {
    padding: 92px 18px 110px;
  }

  .subtitle {
    max-width: 680px;
  }

  .grid-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
  }

  .glass-card {
    padding: 36px 28px;
  }

  .icon-orbit {
    width: 68px;
    height: 68px;
    margin-bottom: 24px;
  }

  .icon-core {
    width: 40px;
    height: 40px;
  }

  .grid-cards::before {
    inset: 42% 6% -28%;
  }
}

@media (max-width: 768px) {
  .why-section {
    padding: 84px 16px 92px;
  }

  .header-center {
    margin-bottom: 48px;
  }

  .glass-card {
    padding: 32px 22px;
    background: linear-gradient(
      160deg,
      rgba(185, 5, 4, 0.22) 0%,
      rgba(20, 12, 12, 0.9) 46%,
      rgba(5, 5, 7, 0.96) 100%
    );
    box-shadow:
      0 20px 42px rgba(0, 0, 0, 0.75),
      0 0 0 1px rgba(185, 5, 4, 0.35);
  }

  .grid-cards::before {
    inset: 46% 5% -32%;
  }
}

@media (max-width: 600px) {
  .why-section {
    padding: 72px 14px 86px;
  }

  .header-center {
    margin-bottom: 42px;
  }

  .header-center h2 {
    font-size: 1.95rem;
    line-height: 1.2;
  }

  .subtitle {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .grid-cards {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .grid-cards::before {
    inset: 52% 6% -40%;
    opacity: 0.75;
  }

  .glass-card {
    padding: 28px 20px;
    background: linear-gradient(
      160deg,
      rgba(185, 5, 4, 0.28) 0%,
      rgba(18, 10, 10, 0.92) 48%,
      rgba(2, 2, 3, 0.98) 100%
    );
    box-shadow:
      0 18px 36px rgba(0, 0, 0, 0.78),
      0 0 0 1px rgba(185, 5, 4, 0.4);
  }

  .icon-orbit {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .icon-core {
    width: 34px;
    height: 34px;
  }

  .b1 {
    width: 320px;
    height: 320px;
    left: -18%;
  }

  .b2 {
    width: 240px;
    height: 240px;
    right: -20%;
  }

  .b3 {
    width: 140px;
    height: 140px;
    right: 8%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.section-partners {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--bg-section-soft);
}

.section-partners-divider {
  height: 1px;
  margin: 14px auto 18px;
  max-width: 420px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0)
  );
}

.trust-liquid-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.trust-pill {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  width: 100%;
  height: 150px;
  border-radius: 999px;
  padding: 0;
  overflow: visible;
  box-shadow:
    0 0 50px rgba(185, 5, 4, 0.55),
    0 25px 60px rgba(0, 0, 0, 0.75);
}

.trust-pill-glass {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 15% 20%, #4d1515 0, #1b0606 55%, #050000 100%);
  isolation: isolate;
}

.trust-pill-glass::before,
.trust-pill-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.trust-pill-glass::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.25) 18%,
    transparent 55%
  );
  mix-blend-mode: screen;
  opacity: 0.8;
}

.trust-pill-glass::after {
  background: radial-gradient(circle at 50% 120%, rgba(0, 0, 0, 0.85) 0, transparent 60%);
  opacity: 0.9;
}

.trust-pill-glow {
  position: absolute;
  inset: 10% 6% 12%;
  border-radius: inherit;
  pointer-events: none;
  filter: blur(20px);
  mix-blend-mode: screen;
  opacity: 0.3;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 190, 190, 0.4), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(185, 5, 4, 0.55), transparent 60%),
    radial-gradient(circle at 42% 120%, rgba(120, 10, 12, 0.4), transparent 70%);
  background-size: 160% 140%;
  background-position: 0% 40%;
  animation: trust-glow-shift 26s ease-in-out infinite;
  z-index: 1;
}

.trust-pill:hover .trust-pill-glow {
  animation-play-state: paused;
}

.trust-pill-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
}

.trust-logos-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.trust-track {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: trust-marquee 28s linear infinite;
  will-change: transform;
}

.trust-pill:hover .trust-track {
  animation-play-state: paused;
}

.trust-logo {
  height: 50px;
  width: auto;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7)) brightness(1.15);
  opacity: 0.96;
}

@media (max-width: 1023px) {
  .trust-pill {
    height: 140px;
  }

  .trust-pill-inner {
    padding: 0 36px;
  }

  .trust-pill-glow {
    opacity: 0.26;
    animation-duration: 30s;
  }

  .trust-logo {
    height: 44px;
  }

  .trust-track {
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .trust-pill {
    max-width: 100%;
    height: 130px;
  }

  .trust-pill-inner {
    padding: 0 24px;
  }

  .trust-pill-glow {
    opacity: 0.22;
    animation-duration: 34s;
  }

  .trust-logo {
    height: 36px;
  }
}

@keyframes trust-glow-shift {
  0% {
    background-position: -10% 35%;
    background-size: 160% 140%;
  }
  40% {
    background-position: 45% 55%;
    background-size: 165% 145%;
  }
  70% {
    background-position: 90% 40%;
    background-size: 155% 138%;
  }
  100% {
    background-position: 50% 80%;
    background-size: 160% 142%;
  }
}

@keyframes trust-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ========== ROOT / BASE ========== */
:root {
    --av-bg: #050505;
    --av-red: #b90504;
    --av-red-soft: rgba(185, 5, 4, 0.8);
    --av-text: #ffffff;
    --av-muted: rgba(255, 255, 255, 0.8);
    --hero-padding-x: clamp(1.5rem, 6vw, 4.5rem);
}

body {
    background-color: var(--av-bg);
    color: var(--av-text);
}

/* ========== HERO LAYOUT ========== */

.hero-lg {
    position: relative;
    min-height: min(100vh, 900px);
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
    color: var(--av-text);
}

/* Background video */
.hero-lg__video-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-lg__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.1) contrast(1.05) brightness(0.9);
    transform: scale(1.02);
}

/* Liquid glass canvas layer */
.hero-lg__liquid-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Dark overlay */
.hero-lg__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(circle at 20% 15%, rgba(0, 0, 0, 0.15), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.95) 65%);
}

/* Content wrapper */
.hero-lg__inner {
    position: relative;
    z-index: 3;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 7rem var(--hero-padding-x) 3.5rem;
}

.hero-lg__content {
    max-width: 640px;
}

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

.hero-lg__eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.75rem;
    position: relative;
}

.hero-lg__eyebrow::before {
    content: "";
    width: 32px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--av-red), transparent);
    margin-right: 0.75rem;
    box-shadow: 0 0 12px rgba(185, 5, 4, 0.7);
}

.hero-lg__title {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 4.8vw, 3.9rem);
    line-height: 1.05;
    margin: 0 0 1.75rem;
    letter-spacing: 0.01em;
}

.hero-lg__title--accent {
    color: var(--av-red);
    text-shadow:
        0 0 30px rgba(185, 5, 4, 0.8),
        0 0 60px rgba(185, 5, 4, 0.5);
}

.hero-lg__subtitle {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--av-muted);
    max-width: 560px;
    margin: 0 0 2.5rem;
}

/* ========== CTAS ========== */

.hero-lg__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.75rem;
}

.btn-lg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.6rem;
    border-radius: 999px;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease,
        background 0.22s ease, color 0.22s ease;
}

.btn-lg--primary {
    color: #ffffff;
    background:
        radial-gradient(circle at 20% 0, rgba(255, 255, 255, 0.26), transparent 58%),
        linear-gradient(135deg, rgba(185, 5, 4, 0.95), rgba(70, 8, 6, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.65),
        0 16px 32px rgba(0, 0, 0, 0.85),
        0 0 32px rgba(185, 5, 4, 0.7);
    overflow: hidden;
}

.btn-lg--primary:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 20px 40px rgba(0, 0, 0, 0.95),
        0 0 40px rgba(185, 5, 4, 0.9);
}

.btn-lg__ring {
    position: absolute;
    inset: -60%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(255, 255, 255, 0.75) 8%,
        var(--av-red-soft) 14%,
        transparent 24%,
        transparent 100%
    );
    opacity: 0;
    mix-blend-mode: screen;
    animation: hero-btn-spin 3.2s linear infinite;
    pointer-events: none;
}

.btn-lg--primary:hover .btn-lg__ring {
    opacity: 0.8;
}

@keyframes hero-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-lg--ghost {
    color: var(--av-text);
    background: rgba(8, 8, 12, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
}

.btn-lg--ghost:hover {
    background: rgba(18, 18, 24, 0.9);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

/* ========== TRUST BAR ========== */

.hero-lg__trust {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    background: rgba(8, 8, 12, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    gap: 1.5rem;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(0, 0, 0, 0.7);
}

.hero-lg__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.hero-lg__trust-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-lg__trust-orb {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: radial-gradient(circle at 25% 20%, #ffe0d5, var(--av-red));
    box-shadow: 0 0 12px rgba(185, 5, 4, 0.8);
}

.hero-lg__trust-orb--star {
    background: radial-gradient(circle at 30% 20%, #fff7c9, #ffcc3a);
    box-shadow: 0 0 14px rgba(255, 220, 120, 0.9);
}

/* ========== SCROLL HINT ========== */

.hero-lg__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0.8;
}

.hero-lg__mouse {
    width: 26px;
    height: 40px;
    border-radius: 999px;
    border: 1.8px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
}

.hero-lg__wheel {
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    animation: hero-wheel 2.2s ease-in-out infinite;
}

@keyframes hero-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

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

.lg-fade-up {
    opacity: 0;
    transform: translateY(22px);
    animation: lgFadeUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

.lg-fade-up[data-delay] {
    animation-delay: calc(attr(data-delay number, 0.1) * 1s);
}

@keyframes lgFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 1024px) {
    .hero-lg__inner {
        padding-top: 6.25rem;
    }

    .hero-lg__content {
        max-width: 540px;
    }

    .hero-lg__trust {
        flex-wrap: wrap;
        border-radius: 24px;
        justify-content: flex-start;
    }

    .hero-lg__trust-item {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .hero-lg {
        min-height: 100vh;
    }

    .hero-lg__inner {
        padding: 5.5rem var(--hero-padding-x) 2.5rem;
    }

    .hero-lg__title {
        font-size: clamp(2.1rem, 7vw, 2.7rem);
        margin-bottom: 1.25rem;
    }

    .hero-lg__subtitle {
        margin-bottom: 2rem;
    }

    .hero-lg__ctas {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 2.2rem;
    }

    .btn-lg {
        width: 100%;
        max-width: 22rem;
        margin-inline: auto;
    }

    /* Trust bar as stacked mini-pills */
    .hero-lg__trust {
        width: 100%;
        max-width: 24rem;
        margin-top: 0.5rem;
        border-radius: 18px;
        padding: 0.85rem 0.75rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.7),
            0 0 0 1px rgba(0, 0, 0, 0.7);
    }

    .hero-lg__trust-item {
        width: 100%;
        padding: 0.55rem 0.75rem;
        border-radius: 999px;
        background: rgba(10, 10, 16, 0.96);
        justify-content: flex-start;
        font-size: 0.82rem;
    }

    .hero-lg__trust-divider {
        display: none;
    }

    .hero-lg__scroll {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --hero-padding-x: 1.25rem;
    }

    .hero-lg__inner {
        padding: 5.25rem var(--hero-padding-x) 2.25rem;
    }

    .hero-lg__subtitle {
        font-size: 0.95rem;
    }

    .hero-lg__trust {
        max-width: 100%;
        padding-inline: 0.6rem;
    }

    .hero-lg__trust-item {
        font-size: 0.8rem;
    }
}

/* =========================================
   PRECISION SECTION – C'est notre standard.
   Scoped under .precision-std
   ========================================= */

:root {
    /* Fallbacks – your global vars already define these in the real project */
    --av-bg: #050505;
    --av-red: #b90504;
    --av-text: #ffffff;
    --av-muted: rgba(255, 255, 255, 0.78);
    --precision-radius-xl: 32px;
}

/* Section wrapper */
.precision-std {
    position: relative;
    padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4.5rem);
    background:
        radial-gradient(circle at 10% 0%, rgba(185, 5, 4, 0.3), transparent 55%),
        radial-gradient(circle at 90% 110%, rgba(0, 0, 0, 0.9), var(--av-bg) 70%);
    color: var(--av-text);
    overflow: hidden;
}

/* Tech grid background */
.precision-std__bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

/* Inner container */
.precision-std__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.precision-std__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* When section is revealed */
.precision-std--revealed .precision-std__header {
    opacity: 1;
    transform: translateY(0);
}

.precision-std__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 1.25rem;
}

.precision-std__eyebrow-line {
    width: 54px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--av-red), transparent);
    box-shadow: 0 0 16px rgba(185, 5, 4, 0.7);
}

.precision-std__title {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 1.08;
    margin: 0 0 1.5rem;
}

.precision-std__title-accent {
    color: var(--av-red);
    text-shadow:
        0 0 30px rgba(185, 5, 4, 0.75),
        0 0 70px rgba(185, 5, 4, 0.5);
}

.precision-std__subtitle {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--av-muted);
}

/* Cards grid */
.precision-std__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}

/* Card layout & appearance */
.precision-std__card {
    --tilt-rotate-x: 0deg;
    --tilt-rotate-y: 0deg;
    --tilt-translate-y: 0px;
    position: relative;
    border-radius: var(--precision-radius-xl);
    overflow: hidden;
    background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.06), transparent 50%),
                rgba(10, 10, 14, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.85),
        0 0 0 1px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease-out,
        box-shadow 0.25s ease-out,
        border-color 0.25s ease-out,
        background 0.25s ease-out;
    will-change: transform, box-shadow;
    transform-origin: center center;
    opacity: 0;
    transform:
        translateY(26px)
        perspective(900px)
        rotateX(var(--tilt-rotate-x))
        rotateY(var(--tilt-rotate-y))
        translateY(var(--tilt-translate-y));
    transition-delay: calc(var(--stagger, 0) * 0.07s);
}

/* revealed state for cards */
.precision-std--revealed .precision-std__card {
    opacity: 1;
    transform:
        translateY(0)
        perspective(900px)
        rotateX(var(--tilt-rotate-x))
        rotateY(var(--tilt-rotate-y))
        translateY(var(--tilt-translate-y));
}

/* card hover */
.precision-std__card:hover {
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 42px rgba(185, 5, 4, 0.7);
    border-color: rgba(255, 255, 255, 0.24);
}

/* scan line */
.precision-std__scan-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    top: 18%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
    mix-blend-mode: screen;
}

.precision-std__card:hover .precision-std__scan-line {
    opacity: 0.85;
    animation: precisionScan 1.5s ease-out forwards;
}

@keyframes precisionScan {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    15% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(80px);
        opacity: 0;
    }
}

/* Image / media area */
.precision-std__media {
    position: relative;
    height: 200px;
    background-image: var(--card-image);
    background-size: cover;
    background-position: center;
    isolation: isolate;
    overflow: hidden;
}

/* zoomable image layer */
.precision-std__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -1;
}

/* zoom on hover */
.precision-std__card:hover .precision-std__media::before {
    transform: scale(1.12);
}

.precision-std__media-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.85)),
        radial-gradient(circle at 10% 0, rgba(185, 5, 4, 0.75), transparent 55%);
    mix-blend-mode: multiply;
}

/* category pill */
.precision-std__pill {
    position: absolute;
    left: 1.5rem;
    bottom: 1.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-family: "Montserrat", system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.92);
    background: rgba(8, 8, 12, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}

.precision-std__sys-id {
    position: absolute;
    right: 1.5rem;
    top: 1.3rem;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
}

/* Body */
.precision-std__body {
    padding: 1.6rem 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.precision-std__card-title {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
}

.precision-std__card-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(230, 230, 230, 0.9);
}

/* Metrics row */
.precision-std__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0;
}

.precision-std__metric dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.25rem;
}

.precision-std__metric dd {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
}

/* Responsive behavior */
@media (max-width: 1024px) {
    .precision-std {
        padding-inline: clamp(1.5rem, 5vw, 3rem);
    }

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

    .precision-std__media {
        height: 190px;
    }
}

@media (max-width: 768px) {
    .precision-std {
        padding-block: 3.25rem 3.75rem;
    }

    .precision-std__header {
        max-width: 100%;
        margin-bottom: 2.5rem;
    }

    .precision-std__title {
        font-size: clamp(2rem, 6vw, 2.4rem);
    }

    .precision-std__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .precision-std__card {
        border-radius: 24px;
    }
}

@media (max-width: 480px) {
    .precision-std {
        padding-inline: 1.25rem;
    }

    .precision-std__body {
        padding-inline: 1.35rem;
    }

    .precision-std__metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .precision-std__media {
        height: 180px;
    }

    .precision-std__pill {
        left: 1.1rem;
        bottom: 1.1rem;
    }

    .precision-std__sys-id {
        right: 1.1rem;
        top: 1.1rem;
    }
}

/* ──────────────────────────────────────────────────────────
   Alternating dark/light homepage layout
   ────────────────────────────────────────────────────────── */

.av-section--light p,
.av-section--light li {
  color: var(--av-text-dark);
}

.av-section--light .section-subtitle,
.av-section--light .subtitle,
.av-section--light .timeline-description,
.av-section--light .brands-universe__subtitle,
.av-section--light .blog-card-excerpt,
.av-section--light .noustrouver-info-text {
  color: var(--av-muted-light);
}

.av-section--light .title-underline::after {
  background: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.av-section--light .title-underline {
  background: radial-gradient(circle at center, var(--av-red) 0, rgba(185, 5, 4, 0.14) 70%);
}

.av-section--light .section-kicker,
.av-section--light .eyebrow {
  color: var(--av-red);
}

.av-section--light .section-title,
.av-section--light .subtitle,
.av-section--light .section-subtitle {
  text-shadow: none;
}

/* Premium light section shells */
.av-section--light .section-header,
.av-section--light .header-center,
.av-section--light .brands-universe__header {
  position: relative;
  z-index: 1;
}

.av-section--light .bokeh { opacity: 0.35; filter: blur(90px); }
.av-section--light .grid-cards::before { opacity: 0.35; }

/* Services light shell with dark cards */
.av-section--light.services-section {
  background: none;
}

.services-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 28px;
  background: linear-gradient(150deg, #ffffff 0%, #f8f8f8 42%, #f2f2f2 100%);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.12), 0 2px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(6px);
}

.services-section::before {
  background:
    radial-gradient(circle at 50% -40%, rgba(185, 5, 4, 0.12) 0, transparent 65%),
    radial-gradient(circle at 10% 120%, rgba(185, 5, 4, 0.10) 0, transparent 65%);
  opacity: 0.45;
}

.services-section::after {
  opacity: 0.12;
}

.services-section .section-kicker { color: var(--av-red); }
.services-section .section-title { color: var(--av-text-dark); }
.services-section .section-subtitle { color: var(--av-muted-light); }
.services-section .overlay-header h3 { color: #ffffff; }

/* Experience AutoValley on dark */
.experience-section {
  color: var(--av-text-light);
}

/* Why section as light precision blocks */
.why-section {
  padding: 0;
}

.av-section--light.why-section {
  background: none;
}

.why-section h2,
.why-section h3,
.why-section .subtitle {
  color: var(--av-text-dark);
}

.why-section .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.2rem, 4vw, 2.4rem);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.68));
  border-radius: 26px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8);
  position: relative;
}

.why-section .subtitle,
.why-section .desc {
  color: var(--av-muted-light);
}

.why-section .glass-card {
  background: linear-gradient(150deg, #ffffff 0%, #f6f6f6 100%);
  border: 1px solid #e6e6e6;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.why-section .glass-card:hover {
  border-color: #dcdcdc;
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.12);
  background: linear-gradient(150deg, #ffffff 0%, #ededed 100%);
}

.why-section .icon-orbit {
  background: radial-gradient(circle at 50% 0%, rgba(185, 5, 4, 0.08), #ffffff);
  border: 1px solid #e5e5e5;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.why-section .bokeh {
  filter: blur(70px);
  opacity: 0.18;
}

/* Precision wrapper spacing */
.precision-std-wrapper {
  padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}

/* Brands universe on light */
.brands-universe {
  color: var(--av-text-dark);
  background: none;
}

.brands-universe__subtitle {
  color: var(--av-muted-light);
}

.av-section--light.brands-universe {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 60%, #f2f2f2 100%);
}

.av-section--light .brands-universe__inner {
  max-width: 1220px;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.4rem, 4vw, 2.5rem);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.85);
}

.av-section--light .brands-universe__eyebrow {
  color: var(--av-text-dark);
  letter-spacing: 0.28em;
}

.av-section--light .brands-universe__title { color: var(--av-text-dark); }
.av-section--light .brands-universe__title-accent { color: var(--av-red); text-shadow: none; }
.av-section--light .brands-universe__subtitle { color: var(--av-muted-light); }

.av-section--light .brands-universe__pill {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.92));
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.av-section--light .brands-universe__pill::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.85), transparent);
}

.av-section--light .brands-universe__pill::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.85), transparent);
}

.av-section--light .brands-universe__logo img {
  filter: grayscale(1) brightness(0.25) contrast(1.4) opacity(0.78);
}

.av-section--light .brands-universe__logo:hover img {
  filter: grayscale(0) brightness(0.5) contrast(1.6);
}

.av-section--light .brands-universe__note {
  color: var(--av-muted-light);
}

/* Personas / clients remain dark but keep separation */
.personas-section {
  color: var(--av-text-light);
}

/* Trust references on light */
.trust-section {
  background: none;
  color: var(--av-text-dark);
}

.trust-section .section-title,
.trust-section .section-subtitle,
.trust-section .section-kicker {
  color: var(--av-text-dark);
}

.trust-section .section-subtitle {
  color: var(--av-muted-light);
}

.trust-section .section-partners-divider {
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}

.trust-section .trust-pill {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
}

.trust-section .trust-pill-glass {
  background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%);
  border: 1px solid #e9e9e9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.trust-section .trust-pill-glass::before {
  background: radial-gradient(circle at 20% 15%, rgba(185, 5, 4, 0.08), transparent 60%);
  opacity: 0.6;
}

.av-section--light .trust-pill {
  height: 160px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 248, 248, 0.94));
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.av-section--light .trust-pill-inner { padding: 0 48px; }

.av-section--light .trust-logo {
  filter: grayscale(1) brightness(0.35) contrast(1.25);
  opacity: 0.9;
}

.av-section--light .trust-logo:hover { filter: grayscale(0) brightness(0.45) contrast(1.45); }

/* Testimonials keep cinematic dark */
.testimonials-section {
  background:
    radial-gradient(circle at 15% 10%, rgba(185, 5, 4, 0.24), transparent 55%),
    linear-gradient(180deg, #09090f 0%, #050505 100%);
}

/* Blog / expertise on light */
.blog-section {
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 55%, #f0f0f0 100%);
}

.blog-section::before,
.blog-section::after,
.blog-background {
  display: none;
}

.blog-inner {
  color: var(--av-text-dark);
}

.blog-title,
.blog-subtitle,
.blog-kicker {
  color: var(--av-text-dark);
}

.blog-subtitle {
  color: var(--av-muted-light);
}

.blog-card {
  background: linear-gradient(145deg, #ffffff 0%, #f7f7f7 100%);
  border: 1px solid #e6e6e6;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  color: var(--av-text-dark);
}

.blog-card-excerpt,
.blog-card-category {
  color: var(--av-muted-light);
}

/* Nous trouver on light */
.section-noustrouver {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 60%, #f2f2f2 100%);
  color: var(--av-text-dark);
}

.section-noustrouver .section-subtitle {
  color: var(--av-muted-light);
}

/* Final CTA on dark */
.footer-cta-section {
  background:
    radial-gradient(circle at 10% -10%, rgba(185, 5, 4, 0.4), transparent 45%),
    radial-gradient(circle at 90% 120%, rgba(0, 0, 0, 0.65), #050505 70%);
  color: var(--av-text-light);
}

.footer-cta-section .footer-cta-content {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.footer-cta-section .footer-cta-kicker,
.footer-cta-section .footer-cta-title,
.footer-cta-section .footer-cta-subtitle,
.footer-cta-section .footer-cta-note {
  color: var(--av-text-light);
}