:root {
    --cream: #F7F4ED;
    --cream-light: #FDFBF7;
    --cream-dark: #EDE8DC;
    --ink: #0F0F0F;
    --ink-soft: #1A1A1A;
    --gray: #6B6B6B;
    --gray-light: #9B9B9B;
    --border: #E5E0D7;
    --red: #C8102E;
    --red-dark: #A60E13;
    --red-soft: #FBE9EC;
    --serif: 'Inter', -apple-system, sans-serif; /* un seul font sur tout le site — décision client */
    --sans: 'Inter', -apple-system, sans-serif;
  }

  /* Red pill tags retired — do not reintroduce */
  .card-tag,
  .bubble-tag {
    display: none !important;
  }

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

  html {
    scroll-behavior: smooth;
    /* Scroll natural — fara snap, ca pe un site normal. */
    scroll-padding-top: 88px;
  }
  /* Sectiunile pastreaza min-height 100vh ca sa aiba respiratie vizuala
     dar NU mai sunt anchorate scroll-snap. */
  .hero,
  .stats-section,
  .system-section,
  .bundle-section,
  .pentru-section,
  .reach-section,
  .sistem-section,
  .montaj-section,
  .testimonial-section,
  .proces-section,
  .why-section,
  .comparison-section,
  footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Trust-bar is too short to be its own page — let it flow with the previous one */
  .trust-bar { scroll-snap-align: none; }

  /* === SUPERPOWERS — cele 3 carduri PLUTESC peste partea de jos a caruselului === */
  .superpowers {
    scroll-snap-align: none;
    min-height: 0;
    display: block;
    padding: 0 0 28px;
    margin-top: -86px;          /* jumătate peste fotografie */
    position: relative;
    z-index: 5;
    background: transparent;    /* fotografia se vede în spatele cardurilor */
    border: none;
  }
  /* Umbră fină ca să se desprindă de fotografie (aspectul cardului neschimbat) */
  .superpowers .superpower {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  }
  .superpowers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .superpower {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }
  .superpower:hover {
    border-color: var(--red);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(200, 16, 46, 0.10);
  }
  .superpower-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red-soft);
    color: var(--red);
    border-radius: 12px;
  }
  .superpower-icon svg { width: 22px; height: 22px; }
  .superpower-text { flex: 1; min-width: 0; }
  .superpower-text strong {
    display: block;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .superpower-text span {
    display: block;
    font-size: 12.5px;
    color: var(--gray);
    line-height: 1.4;
  }
  .superpower-arrow {
    flex-shrink: 0;
    color: var(--red);
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .superpower:hover .superpower-arrow { opacity: 1; transform: translateX(3px); }
  @media (max-width: 968px) {
    .superpowers-grid { grid-template-columns: 1fr; }
  }
  /* Footer can be shorter than a full page */
  footer { min-height: auto; padding: 80px 0 40px; }
  /* On small viewports, drop snap completely + free-flow like a newspaper */
  @media (max-width: 768px) {
    html {
      scroll-snap-type: none;
      scroll-padding-top: 0;
      scroll-behavior: auto;
      /* clip (nu hidden) — hidden strică position:sticky pe iOS Safari */
      overflow-x: clip;
    }
    .hero:not(.hero--photo), .stats-section, .system-section, .bundle-section, .pentru-section,
    .reach-section, .sistem-section, .montaj-section, .testimonial-section,
    .proces-section, .why-section, .comparison-section, .cta-section {
      min-height: auto;
      display: block;
      scroll-snap-align: none;
      scroll-snap-stop: normal;
    }
  }

  body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    overflow-x: clip;
  }

  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* === NAVIGATION === */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(247, 244, 237, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
  }
  nav.scrolled { border-bottom-color: transparent; }

  /* === NAV: mereu transparent cu fum negru sub text (ca pe hero), pe toata aplicatia === */
  nav { transition: border-color 0.3s ease; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom-color: transparent !important; }
  nav::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200%;
    background: linear-gradient(180deg, rgba(8,7,6,0.72) 0%, rgba(8,7,6,0.42) 38%, rgba(8,7,6,0.14) 70%, rgba(8,7,6,0) 100%);
    pointer-events: none; z-index: -1;
  }
  nav:not(.scrolled) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  nav:not(.scrolled) .logo-img {
    /* logo ROȘU brand (#C8102E) peste video */
    filter: brightness(0) saturate(100%) invert(13%) sepia(96%) saturate(5630%)
            hue-rotate(347deg) brightness(84%) contrast(98%)
            drop-shadow(0 1px 10px rgba(0, 0, 0, 0.30));
  }
  nav:not(.scrolled) .nav-menu-link {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 2px 18px rgba(0, 0, 0, 0.55);
  }
  nav:not(.scrolled) .nav-menu-link:hover { color: rgba(255, 255, 255, 0.85); }
  nav:not(.scrolled) .country-switcher-trigger {
    color: #FFFFFF;
    background: transparent;
    border: none;
  }
  nav:not(.scrolled) .nav-cta .btn-ghost {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.10);
  }
  nav:not(.scrolled) .nav-cta .btn-primary {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.38);
  }
  nav:not(.scrolled) .nav-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.60);
    color: #FFFFFF;
  }
  nav:not(.scrolled) .nav-burger span { background: #FFFFFF; }
  nav:not(.scrolled) .nav-burger {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.10);
  }
  .nav-inner {
    max-width: none;
    margin: 0;
    padding: 18px clamp(16px, 3vw, 56px); /* ~15mm de la margine, full-width comme ZURU */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-shrink: 0;
    margin-right: auto;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 19px;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
  }
  .logo-mark {
    width: 32px; height: 32px;
    background: var(--red);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
  }
  .logo-mark svg { width: 22px; height: 22px; }
  .logo-img {
    height: 30px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  @media (max-width: 640px) {
    .logo-img { height: 26px; }
  }
  @media (max-width: 768px) {
    .nav-inner {
      padding: 12px 12px;
      gap: 10px;
    }
    .logo-img {
      height: 26px;
      width: auto;
      object-fit: contain;
      object-position: left center;
    }
    .nav-cta {
      flex: 0 0 auto;
      gap: 6px;
      flex-wrap: nowrap;
      align-items: center;
    }
    .nav-cta .btn-primary.nav-cta-devis {
      padding: 0 14px;
      font-size: 12px;
      white-space: nowrap;
      line-height: 1.2;
    }
    .country-switcher-trigger {
      padding: 0 10px;
    }
    .nav-burger {
      flex-shrink: 0;
    }
    .country-switcher-caret { display: none; }
  }
  @media (max-width: 380px) {
    .nav-inner { padding: 10px; gap: 6px; }
    .logo-img { height: 24px; }
    .nav-cta { gap: 5px; }
    .nav-cta .btn-primary.nav-cta-devis { padding: 0 12px; font-size: 11.5px; }
    .country-switcher-trigger { padding: 0 8px; }
  }
  .nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--red); }

  /* === SECTION NAV — outlined pill buttons on right edge === */
  .section-nav {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .section-nav-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(60, 200, 255, 0.45);
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .section-nav-dot:hover {
    border-color: rgba(120, 230, 255, 0.95);
    background: rgba(60, 200, 255, 0.08);
    box-shadow: 0 0 14px rgba(60, 200, 255, 0.35);
    transform: translateX(-2px);
  }
  .section-nav-dot.is-active {
    border-color: rgba(60, 200, 255, 1);
    background: rgba(60, 200, 255, 0.14);
    box-shadow: 0 0 18px rgba(60, 200, 255, 0.55), 0 0 36px rgba(60, 200, 255, 0.25);
    /* premium = calm: no infinite pulse */
  }
  @keyframes navPulse {
    0%, 100% {
      box-shadow: 0 0 18px rgba(60, 200, 255, 0.55), 0 0 36px rgba(60, 200, 255, 0.25);
    }
    50% {
      box-shadow: 0 0 26px rgba(60, 200, 255, 0.85), 0 0 52px rgba(60, 200, 255, 0.4);
    }
  }
  .section-nav-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: color 0.3s ease;
  }
  .section-nav-dot:hover .section-nav-label {
    color: var(--ink);
  }
  .section-nav-dot.is-active .section-nav-label {
    color: rgba(15, 90, 130, 1);
  }
  @media (max-width: 968px) {
    .section-nav { display: none; }
  }
  .nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .btn.nav-cta-devis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 36px;
    background: transparent;
    color: #0F0F0F;
    border: none;
    border-radius: 0;
    padding: 0 8px;
    font-weight: 600;
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: currentColor;
    transition: opacity .15s ease, color .15s ease;
  }
  .btn.nav-cta-devis:hover {
    background: transparent;
    border: none;
    opacity: 0.72;
    transform: none;
    box-shadow: none;
    text-decoration: underline;
  }
  nav:not(.scrolled) .nav-cta-devis,
  nav:not(.scrolled) .nav-cta .btn-primary.nav-cta-devis {
    background: transparent;
    border: none;
    color: #FFFFFF;
  }
  nav:not(.scrolled) .nav-cta-devis:hover,
  nav:not(.scrolled) .nav-cta .btn-primary.nav-cta-devis:hover {
    background: transparent;
    border: none;
    color: #FFFFFF;
    opacity: 0.72;
  }

  /* === MENU (added in nav between logo and CTA) === */
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 36px;
    flex: 1;
  }
  .nav-menu-item { position: relative; }
  .nav-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    letter-spacing: 0.01em;
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
  }
  .nav-menu-link:hover { background: rgba(15, 15, 15, 0.05); color: var(--ink); }
  .nav-menu-caret { font-size: 10px; opacity: 0.6; }
  .nav-menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.10);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .nav-menu-dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background 0.15s ease;
  }
  .nav-menu-dropdown a:hover { background: var(--cream); color: var(--ink); }
  .nav-menu-item:hover .nav-menu-dropdown,
  .nav-menu-item:focus-within .nav-menu-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  @media (max-width: 1100px) {
    .nav-menu { display: none; }
  }

  /* === HAMBURGER + MOBILE DRAWER (≤1100px) === */
  .nav-burger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .nav-burger:hover { background: var(--cream); border-color: var(--ink-soft); }
  .nav-burger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 86vw);
    height: 100vh;
    background: var(--cream-light);
    border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0,0,0,0.15);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    padding: 64px 24px 24px;
    visibility: hidden;
  }
  .nav-drawer-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
    padding: 0;
  }
  .nav-drawer-close:hover { background: var(--red-soft); color: var(--red); }
  .nav-drawer-close svg { width: 16px; height: 16px; }
  .nav-drawer.open { transform: translateX(0); visibility: visible; }
  .nav-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,15,15,0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .nav-drawer-overlay.open { opacity: 1; visibility: visible; }
  .nav-drawer-group { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .nav-drawer-group:last-child { border-bottom: none; }
  .nav-drawer-group > .nav-drawer-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
  }
  .nav-drawer a {
    display: block;
    padding: 9px 4px;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.15s ease;
  }
  /* padding-left: 8px era o glisare spre DREAPTA pe vechiul sertar, unde baza
     era 4 px. Panoul de azi are 24 px, deci linkul sărea 16 px la STÂNGA la
     trecerea cu mouse-ul. Scos, împreună cu animaţia lui de mai sus. */
  .nav-drawer a:hover, .nav-drawer a:focus {
    color: var(--red);
  }
  .nav-drawer a.partner-link { color: var(--red); font-weight: 600; }
  .nav-drawer-cta {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nav-drawer-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 11px 18px !important;
    font-size: 13.5px !important;
  }
  .nav-drawer-cta .btn-ghost {
    background: white;
    color: var(--ink) !important;
    border: 1px solid var(--border);
  }
  .nav-drawer-cta .btn-ghost:hover { background: var(--cream); border-color: var(--ink-soft); }
  .nav-drawer-cta .btn-primary {
    background: var(--red) !important;
    color: white !important;
  }
  .nav-drawer-cta .btn-primary:hover { background: var(--red-dark) !important; }
  /* body.nav-open { overflow: hidden } — scos 13.08.2026. Blocarea derulării
     e din vremea sertarului pe tot ecranul. Panoul de azi e un dropdown de
     224 px, aşa că pe calculator îngheţa toată pagina degeaba (şi pe Windows
     făcea conţinutul să sară lateral, odată cu bara de derulare). */

  @media (max-width: 1100px) {
    .nav-burger { display: inline-flex; }
  }
  @media (max-width: 640px) {
    /* Ascunde butonul Contact din nav-cta — ramane doar Cere oferta + hamburger */
    .nav-cta .btn-ghost { display: none; }
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: var(--sans);
  }
  .btn-ghost {
    color: var(--ink-soft);
    background: transparent;
  }
  .btn-ghost:hover { background: var(--cream-dark); }
  .btn-primary {
    background: var(--ink);
    color: var(--cream);
  }
  .btn-primary:hover { background: var(--red); transform: translateY(-1px); }
  .btn-red {
    background: var(--red);
    color: white;
  }
  .btn-red:hover { background: var(--red-dark); transform: translateY(-1px); }
  .btn-large { padding: 14px 24px; font-size: 15px; }

  /* === HERO === */
  .hero {
    padding: 110px 0 40px;
    position: relative;
    overflow: hidden;
  }
  /* Hero: 2-column layout — text LEFT, robot image RIGHT. Stacks on mobile. */
  .hero .container {
    margin: 0 auto;
    max-width: 1480px;
    padding: 0 clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }
  .hero .container > .hero-text-col {
    max-width: 640px;
  }
  .hero .hero-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero .hero-image-col .mobile-product {
    max-width: 520px;
    margin: 0;
  }
  @media (max-width: 968px) {
    .hero .container { grid-template-columns: 1fr; gap: 24px; }
    .hero .container > .hero-text-col { max-width: 100%; }
    .hero .hero-image-col .mobile-product { max-width: 340px; }
  }
  .hero h1 { max-width: 680px; }
  .hero .hero-eyebrow { max-width: max-content; }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--red-soft);
    color: var(--red);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 32px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .hero h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--ink);
    max-width: 1000px;
    margin-bottom: 28px;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--red);
    font-weight: 300;
  }
  .hero-sub {
    font-size: 20px;
    color: var(--gray);
    max-width: 580px;
    margin-bottom: 40px;
    line-height: 1.5;
  }
  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
  .hero-visual {
    position: relative;
    margin-top: 60px;
    height: clamp(640px, 95vh, 1200px);
    overflow: visible;
  }
  .hero-visual::before { display: none; }
  /* === REAL WALL VISUAL — full-screen, scroll-scrubbed video === */
  .wall-visual {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    overflow: hidden;
    background: transparent;
  }
  .wall-visual video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }
  .wall-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 15, 0.78);
    color: var(--cream);
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.4s ease;
  }
  .wall-hint::before {
    content: '↕';
    margin-right: 6px;
    display: inline-block;
  }
  @keyframes hintBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }
  .wall-visual.scrolled .wall-hint { opacity: 0; }
  .stat-floating {
    position: absolute;
    background: white;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--gray);
  }
  .stat-floating strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    font-family: var(--serif);
    font-weight: 500;
    margin-bottom: 2px;
  }
  .stat-floating.s1 { top: 30px; left: 60px; }
  .stat-floating.s2 { bottom: 40px; right: 60px; }
  .stat-floating.s3 { top: 50%; right: 30px; }
  @keyframes floatStat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }

  /* === TRUST BAR === */
  .trust-bar {
    padding: 60px 0;
    margin-top: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--cream-light);
  }
  .trust-label {
    text-align: center;
    font-size: 13px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 32px;
    font-weight: 500;
  }
  .trust-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
  }
  .trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--gray);
    font-size: 14px;
    font-weight: 500;
    opacity: 0.85;
    transition: opacity 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  @media (max-width: 1080px) {
    .trust-items {
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px 32px;
    }
  }
  .trust-item:hover { opacity: 1; color: var(--ink); }
  .trust-icon {
    width: 28px; height: 28px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif);
    font-size: 11px;
    font-weight: 600;
  }

  /* === STATS SECTION === */
  /* Stats section — compressed to fit in a single 100vh page */
  .stats-section {
    padding: 30px 0;
    justify-content: flex-start; /* prevents centered overflow */
  }
  /* Stats section uses full container width (floating product removed) */
  .stats-section .container {
    margin: 0 auto;
    max-width: 1480px;
    padding-left: clamp(32px, 5vw, 64px);
    padding-right: clamp(32px, 5vw, 64px);
  }
  .stats-section .section-eyebrow { margin-bottom: 6px; font-size: 12px; }
  .stats-section .section-title { font-size: clamp(24px, 3vw, 40px); line-height: 1.05; margin-bottom: 10px; }
  .stats-section .section-sub { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; max-width: 560px; }
  /* Passive showcase — very compact */
  .stats-section .passive-showcase {
    margin: 0 0 14px;
    padding: 18px 24px;
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 18px;
  }
  .stats-section .energy-scale { display: flex; flex-direction: row; gap: 3px; align-items: center; }
  .stats-section .energy-bar { width: auto; padding: 4px 10px; font-size: 11px; border-radius: 100px; box-shadow: none; }
  .stats-section .energy-bar.active { width: auto; font-size: 15px; padding: 5px 12px; box-shadow: 0 0 14px rgba(0,166,81,0.4); }
  .stats-section .energy-bar.active .arrow { display: none; }
  .stats-section .energy-bar.dim { font-size: 10.5px; padding: 4px 10px; opacity: 0.4; }
  .stats-section .passive-tag { padding: 3px 9px; font-size: 9.5px; margin-bottom: 6px; }
  .stats-section .passive-info h3 { font-size: 19px; line-height: 1.15; margin-bottom: 6px; }
  .stats-section .passive-info p { font-size: 12.5px; line-height: 1.45; margin-bottom: 10px; }
  .stats-section .passive-bullets { gap: 5px; }
  .stats-section .passive-bullet { font-size: 12px; gap: 10px; line-height: 1.4; }
  .stats-section .passive-bullet-icon { width: 24px; height: 24px; border-radius: 6px; }
  .stats-section .passive-bullet-icon svg { width: 13px; height: 13px; }
  /* Stats grid — small but readable */
  .stats-section .stats-grid { grid-template-columns: repeat(4, 1fr); border-radius: 12px; }
  .stats-section .stat-card { padding: 14px 14px; }
  .stats-section .stat-icon { width: 28px; height: 28px; margin-bottom: 8px; border-radius: 6px; }
  .stats-section .stat-icon svg { width: 14px; height: 14px; }
  .stats-section .stat-num { font-size: 24px; line-height: 1; margin-bottom: 2px; }
  .stats-section .stat-num span[style*="32px"] { font-size: 16px !important; }
  .stats-section .stat-label { font-size: 11.5px; line-height: 1.35; }
  @media (max-width: 968px) {
    .stats-section .container { padding-left: 32px; padding-right: 32px; }
    .stats-section .stats-grid { grid-template-columns: 1fr 1fr; }
  }
  .section-eyebrow {
    font-size: 13px;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
  }
  .section-title {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    color: var(--ink);
    max-width: 720px;
  }
  .section-sub {
    font-size: 18px;
    color: var(--gray);
    max-width: 560px;
    margin-bottom: 64px;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }
  .stat-card {
    padding: 40px 32px;
    background: var(--cream-light);
    transition: background 0.2s;
  }
  .stat-card:hover { background: white; }
  .stat-num {
    font-family: var(--serif);
    font-size: 56px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
  }
  .stat-num span { color: var(--red); }
  .stat-label {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.5;
  }
  .stat-icon {
    width: 56px; height: 56px;
    background: transparent;
    color: var(--red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .stat-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .stat-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* === STATS SECTION watermark wrapper (matches other pages) === */
  .stats-stage-wrap {
    position: relative;
    margin: 70px auto 0;
    max-width: 1480px;
  }
  .stats-watermark {
    position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    pointer-events: none; user-select: none; transform: translateY(-38%);
    height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-size: clamp(64px, 11vw, 180px);
    font-weight: 500; letter-spacing: -0.06em; z-index: 2;
  }
  .stats-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .stats-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.4px rgba(15,15,15,0.30); clip-path: inset(0 0 62% 0); }
  .stats-watermark .wm-bottom { color: var(--cream-dark); opacity: 0.65; clip-path: inset(38% 0 0 0); }
  .stats-stage {
    position: relative;
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 56px 48px 48px;
  }
  .stats-intro {
    max-width: 760px; margin: 0 auto 40px; text-align: center;
  }
  .stats-intro .bubble-tag {
    display: inline-block; background: var(--red-soft); color: var(--red);
    padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
  }
  .stats-intro h2 {
    font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); font-weight: 500;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 12px;
  }
  .stats-intro h2 em { font-style: italic; color: var(--red); font-weight: 400; }
  .stats-intro p { font-size: 15px; color: var(--gray); line-height: 1.6; margin: 0; }

  /* Two cards INSIDE stage: photo LEFT + showcase RIGHT, 50/50, equal taller height */
  .passive-showcase-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 32px;
    min-height: 500px; /* both cards equal height */
  }
  .passive-showcase-wrap > .passive-photo-card,
  .passive-showcase-wrap > .passive-showcase {
    height: 100%;
    min-height: 500px;
  }

  @media (max-width: 1100px) {
    .passive-showcase-wrap { grid-template-columns: 1fr; gap: 20px; min-height: 0; }
    .passive-showcase-wrap > .passive-photo-card { min-height: 340px; }
    .passive-showcase-wrap > .passive-showcase { min-height: 0; }
    .stats-stage { padding: 44px 28px 32px; }
  }

  /* LEFT: photo card with alternating images (construction ↔ finished, 1s each) */
  .passive-photo-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background: var(--ink);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .passive-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
  }
  /* Static premium: o singură fotografie, fără ciclu (pozele 1-3 sunt 404) */
  .passive-photo-img:nth-child(1),
  .passive-photo-img:nth-child(2),
  .passive-photo-img:nth-child(3) { display: none; }
  .passive-photo-img:nth-child(4) { opacity: 1; }
  .passive-photo-label {
    position: absolute;
    bottom: 18px; left: 18px;
    background: rgba(15,15,15,0.88);
    color: var(--cream);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    z-index: 2;
  }

  /* RIGHT: original passive-showcase (back to its old 2-col internal layout) */
  .passive-showcase {
    margin: 0;
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    gap: 56px;
    align-items: center;
    background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 48px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
  }

  @media (max-width: 1100px) {
    .passive-showcase-wrap { grid-template-columns: 1fr; gap: 20px; }
  }
  @media (max-width: 968px) {
    .passive-showcase { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  }
  .passive-showcase::before {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(200,16,46,0.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .passive-showcase::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0,166,81,0.05) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Energy class scale (EU-style) */
  .energy-scale {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .energy-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 0 100px 100px 0;
    padding: 7px 18px 7px 22px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  }
  .energy-bar.active {
    font-size: 36px;
    padding: 16px 32px 16px 32px;
    background: linear-gradient(90deg, #00a651 0%, #00d957 100%);
    box-shadow: 0 0 40px rgba(0,166,81,0.45), 0 8px 24px rgba(0,0,0,0.25);
    width: 78%;
    position: relative;
  }
  .energy-bar.active .arrow {
    font-size: 14px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: 0.05em;
    opacity: 0.95;
    margin-left: 16px;
    white-space: nowrap;
  }
  @keyframes glowPass {
    0%, 100% { box-shadow: 0 0 40px rgba(0,166,81,0.45), 0 8px 24px rgba(0,0,0,0.25); }
    50%      { box-shadow: 0 0 60px rgba(0,166,81,0.7),  0 8px 24px rgba(0,0,0,0.25); }
  }
  .energy-bar.dim {
    font-size: 16px;
    padding: 7px 22px;
    opacity: 0.32;
  }
  .energy-bar.b { width: 70%; background: #50b748; }
  .energy-bar.c { width: 64%; background: #c5d028; color: #1a1a1a; }
  .energy-bar.d { width: 58%; background: #fff200; color: #1a1a1a; }
  .energy-bar.e { width: 52%; background: #fbb040; }
  .energy-bar.f { width: 46%; background: #f15a29; }
  .energy-bar.g { width: 40%; background: #ed1c24; }

  /* Passive info block */
  .passive-info {
    position: relative;
    z-index: 1;
  }
  .passive-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red-soft);
    color: var(--red);
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .passive-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
  }
  .passive-info h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .passive-info h3 em {
    font-style: italic;
    color: var(--red);
    font-weight: 300;
  }
  .passive-info p {
    color: var(--gray);
    line-height: 1.6;
    font-size: 16px;
    margin-bottom: 24px;
  }
  .passive-bullets {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .passive-bullet {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    color: var(--ink-soft);
  }
  .passive-bullet-icon {
    width: 36px; height: 36px;
    background: var(--red-soft);
    border: 1px solid rgba(200,16,46,0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--red);
  }
  .passive-bullet-icon svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }

  @media (max-width: 968px) {
    .passive-showcase {
      grid-template-columns: 1fr;
      padding: 40px 28px;
      gap: 32px;
    }
    .energy-bar.active { font-size: 26px; padding: 14px 24px; width: 95%; }
    .energy-bar.active .arrow { display: none; }
  }

  /* === STRUCTURAL ADVANTAGES === */
  .structural-showcase {
    margin: 0 0 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .structural-card {
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 30px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }
  .structural-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.06);
  }
  .structural-card .only-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: var(--red);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .structural-card .only-badge::before {
    content: '★';
    color: var(--red);
  }
  .structural-card .icon-wrap {
    width: 52px; height: 52px;
    background: var(--ink);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
  }
  .structural-card .icon-wrap svg {
    width: 26px; height: 26px;
    stroke: var(--red); fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .structural-card h4 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.18;
  }
  .structural-card p {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.6;
  }
  .structural-card p strong {
    color: var(--ink);
    font-weight: 600;
  }

  /* Trust line under stats */
  .stats-trust-line {
    margin-top: 36px;
    text-align: center;
  }
  .stats-trust-intro {
    font-size: 13px;
    color: var(--gray-light);
    line-height: 1.5;
    max-width: 760px;
    margin: 0 auto 22px;
  }
  .stats-trust-intro strong { color: var(--gray); font-weight: 500; }
  .stats-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
  }
  .stats-trust-cell {
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 4px;
    align-items: baseline;
  }
  .stats-trust-label {
    grid-column: 1;
    grid-row: 1 / 3;
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    align-self: center;
    padding-right: 18px;
    border-right: 1px solid var(--border);
    letter-spacing: -0.01em;
  }
  .stats-trust-values {
    grid-column: 2;
    grid-row: 1;
    font-size: 13.5px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
  }
  .stats-trust-values strong { color: var(--red); font-weight: 600; }
  .stats-trust-note {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.01em;
  }
  @media (max-width: 968px) {
    .stats-trust-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 968px) {
    .structural-showcase { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .structural-showcase { grid-template-columns: 1fr; }
  }

  /* === SISTEMUL — 4 PAȘI (dark card hugs the content; section page is cream) === */
  .system-section {
    padding: 36px 0;
    background: transparent;
    color: var(--ink);
    border-radius: 0;
    margin: 0;
    justify-content: center; /* center the dark card vertically */
  }
  /* Container becomes the dark card itself — only as tall as its content */
  .system-section .container {
    margin: 0;
    margin-left: clamp(32px, 6vw, 96px);
    max-width: clamp(420px, 56vw, 780px);
    padding: 36px 40px 32px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 28px;
  }
  .system-section .section-eyebrow { margin-bottom: 6px; font-size: 12px; }
  .system-section .section-title { font-size: clamp(28px, 3.4vw, 48px); margin-bottom: 8px; }
  .system-section .reveal:first-child .section-sub { margin-bottom: 18px; font-size: 13.5px; }
  .system-section .steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }
  .system-section .step-card { padding: 16px 16px; }
  .system-section .step-num { margin-bottom: 8px; font-size: 11px; }
  .system-section .step-title { font-size: 17px; margin-bottom: 4px; line-height: 1.15; }
  .system-section .step-desc { font-size: 12.5px; line-height: 1.45; }
  @media (max-width: 968px) {
    .system-section .container { padding-left: 32px; padding-right: 32px; }
    .system-section .steps-grid { grid-template-columns: 1fr 1fr; }
  }
  .system-section .section-eyebrow { color: var(--red); }
  .system-section .section-title { color: var(--cream); }
  .system-section .section-sub { color: var(--gray-light); }
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
  }
  .step-card {
    padding: 32px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
  }
  .step-card:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-4px);
  }
  .step-num {
    font-family: var(--serif);
    font-size: 14px;
    color: var(--red);
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .step-num::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--red);
  }
  .step-title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .step-desc {
    font-size: 15px;
    color: var(--gray-light);
    line-height: 1.6;
  }

  /* === REACH — Production hubs + market presence === */
  .reach-section {
    padding: 32px 0;
    background: var(--cream-light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: flex-start;
  }
  .reach-section .container { max-width: 1480px; }
  .reach-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 14px;
  }
  .reach-header .section-eyebrow { margin-bottom: 4px; font-size: 11px; }
  .reach-header .section-title {
    font-size: clamp(24px, 3vw, 40px);
    margin-bottom: 6px;
    line-height: 1.05;
  }
  .reach-header .section-sub {
    font-size: 13.5px;
    margin: 0 auto;
    max-width: 620px;
    color: var(--gray);
  }
  .reach-header .section-sub strong {
    color: var(--ink);
    font-weight: 600;
  }

  /* Cardul (cream rounded) ocupă cea mai mare parte a paginii */
  .fabrici-stage-wrap {
    position: relative;
    margin: 60px auto 0;
    max-width: 1480px;
  }
  /* PRÉSENCE: cardul hărții este centrat și NU se mișcă niciodată.
     Reveal-ul lui e doar opacity (fade) — zero transform, în orice stare. */
  .fabrici-stage-wrap.reveal,
  .fabrici-stage-wrap.reveal.visible,
  .fabrici-stage-wrap,
  .fabrici-stage-wrap:hover {
    transform: none !important;
  }
  .fabrici-stage {
    /* Override produse-stage translateX(-30mm) — keep card centered, no shift */
    transform: none !important;
    padding: 56px 56px 48px;
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  .fabrici-stage:hover {
    transform: none !important;
  }
  .fabrici-watermark {
    /* Inherits produse-watermark base, but tighter font for shorter word */
    font-size: clamp(64px, 11vw, 180px);
  }

  /* 2-column layout INSIDE the card: text-left + map-right */
  .fabrici-content {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    gap: 48px;
    width: 100%;
    align-items: center;
  }
  .fabrici-text {
    max-width: 460px;
  }
  .fabrici-text .bubble-tag {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .fabrici-text h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 2.8vw, 38px);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .fabrici-text h3 em {
    font-style: italic;
    color: var(--red);
    font-weight: 400;
  }
  .fabrici-text p {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
  .fabrici-text p strong {
    color: var(--ink);
    font-weight: 600;
  }
  .fabrici-text .fabrici-detail {
    font-size: 13.5px;
    color: var(--gray);
    margin-bottom: 22px;
  }

  /* Two-stat row beneath the CTA: 2 🏭 Usines · 9 🌍 Pays de présence */
  .fabrici-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--gray);
  }
  .fabrici-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .fabrici-stat strong {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .fabrici-stat-emoji {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
  }

  .reach-map {
    position: relative;
    width: 100%;
  }
  .reach-svg {
    width: 100%;
    height: auto;
    max-height: 60vh;
    display: block;
    color: var(--ink);
  }

  @media (max-width: 968px) {
    .fabrici-stage { padding: 40px 24px; min-height: auto; }
    .fabrici-content {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .fabrici-text { max-width: 100%; }
  }

  /* STATIC map paths */
  .europe-countries path {
    fill: rgba(15, 15, 15, 0.06);
    stroke: rgba(15, 15, 15, 0.30);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }
  .europe-countries path.eu-active {
    fill: rgba(200, 16, 46, 0.16);
    stroke: rgba(200, 16, 46, 0.65);
    stroke-width: 1.4;
  }
  .m-dot {
    fill: var(--ink);
    opacity: 0.85;
    pointer-events: none;
  }
  .m-label {
    fill: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    text-anchor: middle;
    letter-spacing: 0.02em;
    paint-order: stroke;
    stroke: var(--cream-light);
    stroke-width: 4;
  }
  .m-label--tiny {
    font-size: 11px;
    font-weight: 600;
  }
  .m-dot--solo {
    fill: var(--ink);
    opacity: 0.85;
    stroke: var(--cream-light);
    stroke-width: 2;
  }

  /* Factory markers */
  .f-dot {
    fill: var(--red);
    filter: drop-shadow(0 3px 6px rgba(200,16,46,0.45));
  }
  .f-pulse {
    /* Harta rămâne perfect nemișcată — fără pulse pe markerii de fabrică */
    display: none;
  }
  .f-pulse--delay { display: none; }
  @keyframes factoryPulse {
    0%   { transform: scale(0.3); opacity: 0.55; }
    80%  { opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  .f-label {
    fill: var(--red);
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 800;
    text-anchor: middle;
    letter-spacing: 0.10em;
    paint-order: stroke;
    stroke: var(--cream-light);
    stroke-width: 5;
  }
  .f-sub {
    fill: var(--gray);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    text-anchor: middle;
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: var(--cream-light);
    stroke-width: 4;
  }

  /* Legend below map */
  .reach-legend {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 14px;
    font-size: 12px;
    color: var(--gray);
    letter-spacing: 0.04em;
  }
  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .legend-dot--factory { background: #fff; box-shadow: 0 0 0 2px #111; }
  .legend-dot--country { background: var(--red); opacity: 1; }

  @media (max-width: 968px) {
    .reach-section { padding: 24px 16px; }
    .m-label { font-size: 14px; }
    .f-label { font-size: 14px; }
    .f-sub { font-size: 11px; }
  }

  /* === PRODUSE — One product per scroll-snap page === */
  .product-page {
    padding: 60px 0 30px;
    position: relative;
  }
  /* Push content to the LEFT so the floating product sits on the right half */
  .product-page .container {
    margin: 0;
    max-width: 100%;
    padding-left: clamp(32px, 6vw, 96px);
    padding-right: clamp(32px, 44vw, 720px);
  }
  .produse-stage-wrap {
    position: relative;
  }
  .produse-stage {
    position: relative;
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 80px 80px 56px;
    overflow: visible;
    min-height: 360px;
    display: flex;
    align-items: center;
    transform: translateX(-30mm);
  }
  /* Watermark — half above the stage (outline on cream bg),
     half below (filled on cream-light bg).
     Spans full viewport width so longer words like ACOPERIȘ aren't clipped
     by the narrow container, while staying vertically anchored to the stage. */
  .produse-watermark {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    pointer-events: none;
    user-select: none;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(80px, 13vw, 220px);
    font-weight: 500;
    letter-spacing: -0.06em;
    z-index: 2;
  }
  .produse-watermark .wm-half {
    position: absolute;
    inset: 0;
    width: 100%;
    display: block;
  }
  .produse-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(15, 15, 15, 0.40);
    text-stroke: 1.4px rgba(15, 15, 15, 0.30);
    clip-path: inset(0 0 62% 0);
  }
  .produse-watermark .wm-bottom {
    color: var(--cream-dark);
    opacity: 0.65;
    clip-path: inset(38% 0 0 0);
  }

  .product-bubble {
    position: relative;
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 36px 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    width: 100%;
    max-width: 540px;
  }
  .product-bubble h3 {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .product-bubble .bubble-tag {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .product-bubble p {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 20px;
  }
  .product-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap 0.2s ease;
  }
  .product-cta:hover { gap: 14px; }
  .product-cta::after {
    content: '→';
    font-size: 16px;
    transition: transform 0.2s ease;
  }
  .product-cta:hover::after { transform: translateX(2px); }

  @media (max-width: 968px) {
    .product-page .container {
      padding-left: 24px;
      padding-right: 24px;
    }
    /* Override the -30mm left shift — center the card on narrow screens */
    .produse-stage { padding: 50px 24px 36px; transform: none !important; }
    .product-bubble { max-width: 100%; }
  }
  .product-visual {
    height: 260px;
    background: linear-gradient(180deg, #0a0a0a 0%, #1f1f1f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .product-visual::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(200,16,46,0.16) 0%, transparent 55%);
    top: -50%; left: -50%;
    pointer-events: none;
  }
  .product-image {
    width: 88%;
    height: 88%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5));
  }
  .product-card:hover .product-image {
    transform: scale(1.06) rotate(-1.5deg);
  }
  .product-content { padding: 32px; }
  .product-tag {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .product-name {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .product-desc {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
  }
  .product-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .spec-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .spec-label {
    font-size: 11px;
    color: var(--gray-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .spec-value {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
    font-weight: 500;
  }

  /* === DE CE — minimalist single-column premium layout === */
  .why-section { padding: 70px 0; justify-content: flex-start; }
  .why-section .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 220px);
  }
  .why-page-top { width: 100%; }
  .why-section .section-eyebrow { margin-bottom: 14px; }
  .why-section .section-title {
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    max-width: 100%;
    margin: 0 auto;
  }
  .why-section .section-title em {
    font-style: italic;
    color: var(--red);
    font-weight: 300;
  }
  /* Keywords strip — minimalist, serif, separated by red middots */
  .why-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 22px;
    font-family: var(--serif);
    font-size: clamp(15px, 1.6vw, 22px);
    color: var(--ink-soft);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
    width: 100%;
    margin-top: 0;
  }
  .why-keywords .kw {
    white-space: nowrap;
  }
  .why-keywords .kw em {
    color: var(--red);
    font-style: italic;
    font-weight: 400;
  }
  .why-keywords .kw-sep {
    color: var(--red);
    opacity: 0.6;
    font-size: 1.4em;
    line-height: 1;
    user-select: none;
  }
  /* Hide the legacy 6-card grid on this layout */
  .why-section .why-grid { display: none; }
  @media (max-width: 968px) {
    .why-keywords { font-size: 15px; gap: 10px 18px; }
  }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
  }
  .why-card {
    padding: 36px 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--cream-light);
    transition: all 0.3s ease;
  }
  .why-card:hover {
    border-color: var(--ink);
    transform: translateY(-4px);
  }
  .why-icon {
    width: 48px; height: 48px;
    background: var(--ink);
    color: var(--red);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
  }
  .why-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .why-desc {
    color: var(--gray);
    font-size: 15px;
    line-height: 1.6;
  }

  /* === COMPARISON — 4 systems, materials + teams + time === */
  .comparison-section {
    padding: 24px 0;
    background: var(--cream);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: flex-start;
  }
  .comparison-section .container {
    max-width: 1640px;
  }
  /* INSIDE the card: text on left + 3-column comparison on right */
  .compare-inner-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 36px;
    align-items: center;
  }
  .compare-side-text {
    text-align: left;
    padding-right: 8px;
  }
  .compare-side-text .section-eyebrow { margin-bottom: 8px; font-size: 12px; }
  .compare-side-text .section-title {
    font-size: clamp(26px, 2.4vw, 36px);
    margin-bottom: 14px;
    line-height: 1.05;
  }
  .compare-side-text .section-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gray);
    margin-bottom: 10px;
  }
  .compare-side-text .section-sub strong {
    color: var(--ink);
    font-weight: 600;
  }
  .compare-side-text .compare-punch-inline {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    line-height: 1.35;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .compare-side-text .compare-punch-inline strong {
    color: var(--red);
    font-weight: 500;
  }
  .compare-side-text .compare-mission {
    font-style: italic;
    color: var(--ink);
    font-size: 13px;
    margin-top: 6px;
  }
  @media (max-width: 1100px) {
    .compare-inner-grid { grid-template-columns: 1fr; gap: 24px; }
    .compare-side-text { text-align: center; max-width: 720px; margin: 0 auto; }
  }

  /* Card wrap — same pattern as Usines */
  .compare-stage-wrap {
    position: relative;
    margin: 60px 0 0;
    max-width: none;
  }
  .compare-stage {
    transform: none;
    padding: 36px 36px 28px;
    min-height: auto;
    display: block;
  }
  .compare-watermark {
    font-size: clamp(64px, 12vw, 200px);
  }

  /* Header inside the card */
  .compare-stage .compare-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 16px;
  }
  .compare-stage .section-eyebrow { margin-bottom: 4px; font-size: 11px; }
  .compare-stage .section-title { font-size: clamp(24px, 2.8vw, 36px); margin-bottom: 6px; line-height: 1.05; }
  .compare-stage .section-sub { font-size: 13.5px; margin: 0 auto; max-width: 640px; line-height: 1.5; }

  /* Punchline — the dramatic takeaway */
  .compare-punchline {
    margin-top: 18px;
    background: linear-gradient(135deg, #2A2520 0%, #393229 100%);
    color: var(--cream);
    border-radius: 18px;
    padding: 22px 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.10);
  }
  .punchline-big {
    flex-shrink: 0;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.15);
    padding-right: 32px;
  }
  .punchline-big strong {
    font-family: var(--serif);
    font-size: clamp(48px, 6vw, 84px);
    font-weight: 500;
    color: var(--red);
    line-height: 1;
    letter-spacing: -0.04em;
    display: block;
  }
  .punchline-big strong small {
    font-size: 0.5em;
    color: rgba(255,255,255,0.6);
    margin-left: 2px;
    font-weight: 400;
  }
  .punchline-big span {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cream);
    opacity: 0.7;
    font-weight: 600;
  }
  .punchline-text { flex: 1; }
  .punchline-text h3 {
    font-family: var(--serif);
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .punchline-text h3 em {
    font-style: italic;
    color: var(--red);
    font-weight: 400;
  }
  .punchline-text p {
    font-size: 14px;
    color: var(--cream);
    opacity: 0.85;
    line-height: 1.5;
    margin-bottom: 4px;
  }
  .punchline-text .cc-foot {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--cream);
    opacity: 0.55;
    letter-spacing: 0.02em;
  }
  @media (max-width: 768px) {
    .compare-punchline { flex-direction: column; gap: 16px; padding: 24px; text-align: center; }
    .punchline-big { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-right: 0; padding-bottom: 16px; }
  }

  /* === COMPARISON: reference (left) vs 2 passive options (right) === */
  .compare-layout {
    display: grid;
    grid-template-columns: 1fr 2.1fr;
    gap: 24px;
    margin-top: 4px;
    align-items: stretch;
  }
  .ct-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .ct-group > .ct-col { flex: 1; }
  .ct-group--passive {
    border-left: 1px dashed var(--border);
    padding-left: 24px;
  }
  .ct-group-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--gray);
    font-weight: 700;
    text-align: center;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .ct-group-label--passive {
    color: var(--red);
  }
  .ct-passive-cols {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .ct-col--ref {
    border-style: dashed;
    background: transparent;
  }
  @media (max-width: 968px) {
    .compare-layout {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .ct-group--passive {
      border-left: none;
      border-top: 1px dashed var(--border);
      padding-left: 0;
      padding-top: 16px;
    }
    .ct-passive-cols { grid-template-columns: 1fr; }
  }
  .ct-col {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .ct-col--winner {
    border-color: var(--red);
    box-shadow: 0 22px 50px rgba(200,16,46,0.10);
  }

  /* HEAD: badge + name + class */
  .ct-top {
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .ct-badge {
    display: inline-block;
    background: var(--red);
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 6px;
  }
  .ct-badge--neutral {
    background: transparent;
    color: var(--gray);
    border: 1px solid var(--border);
  }
  .ct-badge--alt {
    background: rgba(0,0,0,0.06);
    color: var(--ink-soft);
  }
  .ct-name {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 2px 0 4px;
    line-height: 1.05;
  }
  .ct-class {
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 0.02em;
  }
  .ct-class em {
    font-style: normal;
    color: var(--red);
    font-weight: 600;
  }
  .ct-class--bad em {
    color: var(--gray);
    text-decoration: line-through;
    text-decoration-color: rgba(150,150,150,0.5);
  }

  /* MATERIALS list — visual length is the message */
  .ct-mats {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
  }
  .mat {
    background: var(--cream-light);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 500;
    text-align: center;
    color: var(--ink-soft);
    line-height: 1.25;
  }
  .mat--insul {
    background: var(--red-soft);
    border-color: rgba(200,16,46,0.20);
    color: var(--red-dark);
  }
  .mat--extra {
    background: rgba(200,16,46,0.10);
    border-color: rgba(200,16,46,0.30);
    color: var(--red-dark);
    font-weight: 600;
  }

  /* STATS row — compact metrics under materials */
  .ct-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .ct-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 2px;
  }
  .ct-label {
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray);
    font-weight: 600;
  }
  .ct-stat strong {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    margin-top: 2px;
  }
  .ct-col--winner .ct-stat strong { color: var(--red); }
  .ct-sub {
    font-size: 8.5px;
    color: var(--gray);
    letter-spacing: 0.02em;
  }

  /* PRICE — the punchline of each card */
  .ct-price {
    margin-top: auto;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--cream-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .ct-price-label {
    font-size: 10px;
    color: var(--gray);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: left;
    flex: 1;
  }
  .ct-price-value {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .ct-price-value small {
    font-size: 0.55em;
    color: var(--gray);
    margin-left: 1px;
  }
  .ct-price--good .ct-price-value { color: #1a7d3a; }
  .ct-price--bad .ct-price-value { color: var(--red); }
  .ct-price-value--ref {
    color: var(--gray) !important;
    font-style: italic;
  }

  /* Final positioning statement */
  .compare-conclusion {
    margin: 14px auto 0;
    max-width: 920px;
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(15px, 1.6vw, 21px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .compare-conclusion em {
    font-style: italic;
    color: var(--red);
    font-weight: 500;
  }
  .cc-foot {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 11px;
    color: var(--gray);
    letter-spacing: 0.02em;
  }

  /* === CTA SECTION === */
  .cta-section {
    position: relative;
    z-index: 11;   /* au-dessus de conf-wrap (z10) pour que la moitié haute du watermark CONTACT soit visible */
    padding: clamp(150px, 17vh, 220px) 0 60px;
    background: #0F0E0C;
  }
  .cta-info { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .cta-info li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.82); }
  .cta-info .cti-ic { width: 20px; text-align: center; opacity: 0.9; }
  .cta-social { display: flex; gap: 12px; margin-top: 24px; }
  .cta-social a { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
  .cta-social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
  .cta-social a[href=""] { display: none; }
  .cta-social svg { width: 18px; height: 18px; fill: currentColor; }
  .cta-watermark {
    position: absolute;
    top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    transform: translateY(-38%);
    height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-size: clamp(72px, 13vw, 240px);
    font-weight: 500; letter-spacing: -0.06em; z-index: 1;
    pointer-events: none; user-select: none; white-space: nowrap;
  }
  .cta-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .cta-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.5px rgba(15,15,15,0.25); clip-path: inset(0 0 62% 0); }
  .cta-watermark .wm-bottom { color: rgba(255,255,255,0.15); clip-path: inset(38% 0 0 0); }
  /* 2-column layout — CTA box LEFT, robot image RIGHT. Stacks on ≤968px. */
  .cta-section .container {
    margin: 0 auto;
    max-width: 1480px;
    padding: 0 clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .cta-section .cta-box {
    max-width: 100%;
    padding: 60px 56px;
    text-align: left;
  }
  .cta-section .cta-box p { margin: 0 0 28px; }
  .cta-section .cta-actions { justify-content: flex-start; }
  .cta-section .cta-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cta-section .cta-image-col .mobile-product {
    max-width: 520px;
    margin: 0;
  }
  @media (max-width: 968px) {
    .cta-section .container { grid-template-columns: 1fr; gap: 24px; padding: 0 32px; }
    .cta-section .cta-box { text-align: center; padding: 48px 36px; }
    .cta-section .cta-actions { justify-content: center; }
    .cta-section .cta-image-col .mobile-product { max-width: 340px; }
  }
  .cta-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    color: var(--cream);
    border-radius: 32px;
    padding: 80px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(200,16,46,0.25) 0%, transparent 60%);
    opacity: 0.65;
  }
  .cta-box-eyebrow {
    color: var(--red);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 24px;
    position: relative;
  }
  .cta-box h2 {
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    position: relative;
  }
  .cta-box h2 em {
    font-style: italic;
    color: var(--red);
  }
  .cta-box p {
    font-size: 18px;
    color: var(--gray-light);
    max-width: 560px;
    margin: 0 auto 40px;
    position: relative;
  }
  .cta-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
  }
  .btn-on-dark {
    background: var(--cream);
    color: var(--ink);
  }
  .btn-on-dark:hover { background: white; transform: translateY(-1px); }
  .btn-on-dark-ghost {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(255,255,255,0.2);
  }
  .btn-on-dark-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); }

  /* === FOOTER === */
  footer {
    background: #0A0A09;
    padding: 50px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
  }
  /* Certifications strip — compact, sits above the footer grid */
  .footer-certs {
    padding-bottom: 28px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
  }
  .footer-certs-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
  .footer-certs-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
  }
  .footer-certs .trust-item {
    color: rgba(255, 255, 255, 0.65);
  }
  .footer-certs .trust-item:hover {
    color: #FFFFFF;
  }
  .footer-certs .trust-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 60px;
  }
  .footer-brand .logo { margin-bottom: 16px; }
  .footer-tagline {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
  }
  .footer-col h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--red); }
  .footer-bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 16px;
  }

  /* ===========================================================
     PREMIUM REVEALS — discret, elegant, o singură dată.
     Reguli de aur (învățate pe pielea noastră):
     - NICIODATĂ scale pe secțiuni (a cauzat "2 poziții" la hartă)
     - NICIODATĂ animații infinite (au cauzat pâlpâieli)
     - NICIODATĂ will-change permanent (layere GPU = flicker)
     - distanță mică (22px), easing luxos, reveal-once
     =========================================================== */
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* Hero entrance — intrare eșalonată la încărcare (robot → titlu → CTA) */
  .hero .hero-robot.reveal  { transition-delay: 0s; }
  .hero h1.reveal           { transition-delay: 0.14s; }
  .hero .hero-actions.reveal{ transition-delay: 0.28s; }

  /* Stagger pe carduri în interiorul secțiunilor — DOAR opacity
     (fără transform pe copii → zero conflict cu hover-urile lor) */
  .stats-grid.reveal .stat-card,
  .pentru-stage-wrap.reveal .pentru-card,
  .sistem-stage-wrap.reveal .sistem-card,
  .montaj-stage-wrap.reveal .montaj-card,
  .proces-stage-wrap.reveal .proces-step {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stats-grid.reveal.visible .stat-card,
  .pentru-stage-wrap.reveal.visible .pentru-card,
  .sistem-stage-wrap.reveal.visible .sistem-card,
  .montaj-stage-wrap.reveal.visible .montaj-card,
  .proces-stage-wrap.reveal.visible .proces-step {
    opacity: 1;
  }
  .stats-grid.reveal.visible .stat-card:nth-child(2),
  .pentru-stage-wrap.reveal.visible .pentru-card:nth-child(2),
  .sistem-stage-wrap.reveal.visible .sistem-card:nth-child(2),
  .montaj-stage-wrap.reveal.visible .montaj-card:nth-child(2),
  .proces-stage-wrap.reveal.visible .proces-step:nth-child(2) { transition-delay: 0.10s; }
  .stats-grid.reveal.visible .stat-card:nth-child(3),
  .pentru-stage-wrap.reveal.visible .pentru-card:nth-child(3),
  .sistem-stage-wrap.reveal.visible .sistem-card:nth-child(3),
  .montaj-stage-wrap.reveal.visible .montaj-card:nth-child(3),
  .proces-stage-wrap.reveal.visible .proces-step:nth-child(3) { transition-delay: 0.20s; }
  .stats-grid.reveal.visible .stat-card:nth-child(4),
  .pentru-stage-wrap.reveal.visible .pentru-card:nth-child(4),
  .montaj-stage-wrap.reveal.visible .montaj-card:nth-child(4),
  .proces-stage-wrap.reveal.visible .proces-step:nth-child(4) { transition-delay: 0.30s; }

  /* Cardurile cu reveal individual prin JS (stagger i*90ms) — doar fade */
  .steps-grid .step-card,
  .products-grid .product-card,
  .why-grid .why-card {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease, border-color 0.3s ease, background 0.3s ease;
  }
  .steps-grid .step-card.visible,
  .products-grid .product-card.visible,
  .why-grid .why-card.visible {
    opacity: 1;
  }

  /* Accesibilitate: utilizatorii care preferă fără mișcare primesc totul static */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.visible,
    .stats-grid.reveal .stat-card,
    .pentru-stage-wrap.reveal .pentru-card,
    .sistem-stage-wrap.reveal .sistem-card,
    .montaj-stage-wrap.reveal .montaj-card,
    .proces-stage-wrap.reveal .proces-step,
    .steps-grid .step-card,
    .products-grid .product-card,
    .why-grid .why-card {
      transition: none !important;
      animation: none !important;
      transform: none !important;
      opacity: 1 !important;
    }
  }

  /* === FLOATING PRODUCT — persistent showcase that moves with scroll ===
     Fixed-positioned at viewport center; JS swaps the transform between
     section anchors (center → right → left → right …) so the same product
     stays on screen as the user scrolls through the page, like a beauty-jar
     site or an Apple product page. */
  .floating-product {
    position: fixed;
    top: 50%;
    left: 50%;
    width: clamp(220px, 28vw, 380px);
    z-index: 50;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, -50%) perspective(1400px) rotateY(-10deg) rotateZ(-2deg) scale(1);
    /* JS now drives transform/opacity directly via per-frame lerp — no CSS transition */
    opacity: 1;
  }
  .product-img-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
  }
  .floating-product .pi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.28))
            drop-shadow(0 14px 24px rgba(0, 0, 0, 0.10));
  }
  .floating-product .pi.is-active { opacity: 1; }
  /* When the page hits CTA, swap in the construction-stage loop */
  .floating-product .pi-build { opacity: 0; }
  .floating-product.shows-build .pi:not(.pi-build) { opacity: 0; }
  .floating-product.shows-build .pi-build { opacity: 1; }
  /* Build-stage loop — 4 PNGs (product → 3 construction stages) crossfading every 4 s */
  .pi-build .build-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    /* match the same drop-shadow other floating images use */
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.28))
            drop-shadow(0 14px 24px rgba(0, 0, 0, 0.10));
  }
  .pi-build .build-stage:nth-child(1) { animation-delay: 0s; }
  .pi-build .build-stage:nth-child(2) { animation-delay: 1s; }
  .pi-build .build-stage:nth-child(3) { animation-delay: 2s; }
  .pi-build .build-stage:nth-child(4) { animation-delay: 3s; }
  @keyframes stageLoop {
    0%   { opacity: 0; }
     6%  { opacity: 1; }   /* fade in over 0.24 s */
    20%  { opacity: 1; }   /* stays visible until 0.80 s */
    30%  { opacity: 0; }   /* faded out by 1.20 s */
    100% { opacity: 0; }
  }
  @keyframes productBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
  .floating-product.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  /* Inline product image — appears INSIDE each section, contextual to content.
     Scrolls naturally with the page. */
  .mobile-product {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    margin: 32px auto 16px;
    object-fit: contain;
    filter: drop-shadow(0 22px 36px rgba(0,0,0,0.18));
  }
  @media (max-width: 768px) {
    .mobile-product { max-width: 340px; margin: 28px auto 8px; }
  }
  @media (max-width: 480px) {
    .mobile-product { max-width: 260px; margin: 20px auto 0; }
  }

  /* === RESPONSIVE === */
  @media (max-width: 968px) {
    .nav-links { display: none; }
    .stats-grid, .steps-grid, .products-grid, .why-grid, .footer-grid {
      grid-template-columns: 1fr 1fr;
    }
    .hero:not(.hero--photo) { padding: 120px 0 60px; }
    .hero-visual { height: clamp(360px, 65vh, 600px); }
    .stat-floating.s1 { top: 16px; left: 24px; }
    .stat-floating.s2 { bottom: 16px; right: 24px; }
    .stat-floating.s3 { top: 50%; right: 16px; }
    .compare-row { grid-template-columns: 1fr 1fr; }
    .compare-row > div:nth-child(3),
    .compare-row > div:nth-child(4) { display: none; }
    .cta-box { padding: 60px 24px; }
    .system-section { border-radius: 20px; }
  }
  @media (max-width: 640px) {
    .container { padding: 0 20px; }
    .stats-grid, .steps-grid, .products-grid, .why-grid, .footer-grid {
      grid-template-columns: 1fr;
    }
    .stat-floating { display: none; }
    .nav-cta .btn-ghost { display: none; }
  }

  /* === MOBILE TEXT SCALE-DOWN (~45%) ===
     Override per-element font sizes to fit content better on phones.
     Only applies to ≤768px — desktop unaffected. */
  @media (max-width: 768px) {
    .hero:not(.hero--photo) h1,
    .hero-full-content h1 { font-size: clamp(22px, 5.5vw, 34px); line-height: 1.08; }
    .hero-sub { font-size: 12.5px; line-height: 1.5; }
    .hero-eyebrow { font-size: 9.5px; }
    .hero-actions .btn { font-size: 12px; padding: 10px 16px; }

    .section-title { font-size: clamp(19px, 4.5vw, 28px); line-height: 1.1; }
    .section-eyebrow { font-size: 9px; letter-spacing: 0.12em; }
    .section-sub { font-size: 12px; line-height: 1.5; }

    .stat-num { font-size: 17px; }
    .stat-num span { font-size: inherit; }
    .stat-label { font-size: 10px; line-height: 1.4; }
    .stat-icon { width: 36px; height: 36px; margin-bottom: 10px; }

    .superpower-text strong { font-size: 11.5px; }
    .superpower-text span { font-size: 10px; }

    .passive-info h3 { font-size: 18px; line-height: 1.15; margin-bottom: 10px; }
    .passive-info p { font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
    .passive-bullet { font-size: 11px; }
    .passive-tag { font-size: 9px; padding: 4px 8px; }

    .product-bubble h3, .produse-stage h3 { font-size: 18px; line-height: 1.15; }
    .product-bubble p, .produse-stage p { font-size: 11.5px; line-height: 1.55; }
    .bubble-tag { font-size: 9px; letter-spacing: 0.06em; }
    .product-cta { font-size: 11.5px; padding: 9px 16px; }

    .fabrici-text h3 { font-size: 18px; line-height: 1.15; }
    .fabrici-text p { font-size: 11.5px; line-height: 1.5; }
    .fabrici-stat { font-size: 10.5px; }
    .fabrici-stat strong { font-size: 14px; }

    .montaj-intro h2 { font-size: 18px; line-height: 1.15; }
    .montaj-intro p { font-size: 11.5px; line-height: 1.5; }
    .montaj-card h3 { font-size: 13px; }
    .montaj-card p { font-size: 10.5px; line-height: 1.45; }
    .montaj-cta p { font-size: 11.5px; line-height: 1.4; }
    .montaj-num { width: 22px; height: 22px; font-size: 10px; top: 8px; left: 8px; }

    .cta-box h2 { font-size: clamp(20px, 5vw, 30px); line-height: 1.1; }
    .cta-box p { font-size: 12px; line-height: 1.5; }
    .cta-box-eyebrow { font-size: 9px; }
    .cta-actions .btn { font-size: 12px; padding: 10px 16px; }

    .footer-certs-label { font-size: 9px; margin-bottom: 18px; }
    .footer-certs .trust-item { font-size: 9px; gap: 4px; opacity: 0.9; }
    .footer-certs .trust-icon { width: 18px; height: 18px; font-size: 7.5px; }
    .footer-certs-items { gap: 8px 12px; }

    h2 { font-size: 18px; line-height: 1.15; }
    h3 { font-size: 14px; }
    h4 { font-size: 13px; }
    p { font-size: 12px; line-height: 1.55; }
    .btn, .btn-large { font-size: 12px; padding: 10px 16px; }

    /* Watermark mai mic ca sa nu se rupa pe ecrane inguste */
    .produse-watermark, .fabrici-watermark, .compare-watermark, .montaj-watermark {
      font-size: clamp(56px, 16vw, 110px);
    }

    /* SVG harta Europei sa fie clar constranjat in viewport */
    .reach-map { max-width: 100%; overflow: hidden; }
    .reach-svg { width: 100%; max-height: 320px; }

    /* Inline mobile-product image — nu trebuie sa depaseasca latimea sectiunii */
    .mobile-product { max-width: 100%; }

    /* Reveal pe mobil: mai scurt și mai rapid (ține pasul cu scroll-ul) */
    .reveal {
      transform: translateY(14px);
      transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    }
    .reveal.visible { transform: none; }
  }

  /* ===================================================
     COUNTRY SWITCHER — identic cu shared/css/site.css
     =================================================== */
  .country-switcher {
    position: relative;
    display: inline-block;
    margin-right: 8px;
  }
  .country-switcher-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: auto;
    min-height: 36px;
    background: transparent;
    border: none;
    color: #0F0F0F;
    padding: 0 8px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
    font-family: inherit;
  }
  .country-switcher-trigger:hover {
    background: transparent;
    border: none;
    opacity: 0.72;
  }
  .country-switcher-trigger[aria-expanded="true"] {
    background: transparent;
    border: none;
    opacity: 1;
  }
  .country-switcher-flag { font-size: 16px; line-height: 1; }
  .country-switcher-code { letter-spacing: 0.04em; }
  .country-switcher-caret {
    transition: transform .2s ease;
    opacity: 0.7;
  }
  .country-switcher-trigger[aria-expanded="true"] .country-switcher-caret {
    transform: rotate(180deg);
  }
  .country-switcher-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 204px;
    background: rgba(255, 255, 255, 0.20);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1000;
  }
  .country-switcher-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .country-switcher-header {
    color: #6B6B6B;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    padding: 8px 12px 6px;
  }
  .country-switcher-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #0F0F0F;
    font-size: 14px;
    transition: background .15s ease;
  }
  .country-switcher-item:hover {
    background: rgba(255, 255, 255, 0.45);
  }
  .country-switcher-item.active {
    background: rgba(200, 16, 46, 0.08);
    color: #C8102E;
  }
  .country-switcher-item.active .domain { color: rgba(200, 16, 46, 0.85); }
  .country-switcher-item .flag { font-size: 20px; line-height: 1; }
  .country-switcher-item .name { font-weight: 600; }
  .country-switcher-item .domain { display: none; }
  /* ===================================================
     COUNTRY BANNER — auto-detection suggestion
     =================================================== */
  .country-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: linear-gradient(180deg, rgba(196,0,31,0.97) 0%, rgba(160,0,25,0.97) 100%);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 12px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(-100%);
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .country-banner.show {
    transform: translateY(0);
  }
  .country-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .country-banner-flag { font-size: 28px; line-height: 1; flex-shrink: 0; }
  .country-banner-text { flex: 1; font-size: 14.5px; min-width: 240px; }
  .country-banner-text strong { font-weight: 700; }
  .country-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .country-banner-btn {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
    font-family: inherit;
  }
  .country-banner-btn.primary {
    background: #fff;
    color: var(--red, #c4001f);
  }
  .country-banner-btn.primary:hover { background: rgba(255,255,255,0.92); }
  .country-banner-btn.ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }
  .country-banner-btn.ghost:hover { background: rgba(255,255,255,0.12); }

  /* Push the nav down when banner is visible */
  body.has-country-banner #nav { top: 60px; }
  body.has-country-banner { padding-top: 0; }

  /* Mobile */
  @media (max-width: 768px) {
    .country-switcher-trigger { padding: 6px 10px; font-size: 12px; }
    .country-switcher-code { display: none; }
    .country-switcher-panel { min-width: 260px; right: -8px; }
    .country-banner { padding: 10px 16px; }
    .country-banner-text { font-size: 13px; }
    .country-banner-actions { width: 100%; justify-content: flex-end; }
    body.has-country-banner #nav { top: 92px; }
  }

/* --- section --- */

/* ===========================================================
   PREMIUM POLISH — rafinament final, prioritate maximă.
   Mișcarea e permisă DOAR acolo unde e elegantă și sigură:
   - reveal-uri discrete (definite mai sus)
   - hover fin pe carduri mici (definit în CSS-ul de bază)
   Mai jos: garanții anti-regresie + finisaje vizuale.
   =========================================================== */

/* GARANȚIE 1: stage-urile mari nu au NICIO regulă de hover — transformul
   lor de bază (ex. produse-stage -30mm) rămâne identic în orice stare,
   deci nu pot "sări". Nu adăugăm reguli aici tocmai ca să nu creăm conflict. */

/* GARANȚIE 2: harta PRÉSENCE rămâne pixel-perfect nemișcată, mereu.
   (.produse-stage are translateX(-30mm) prin design pentru secțiunea
   produse — fabrici o anulează; aici blindăm tot lanțul hărții.) */
.reach-section .fabrici-stage,
.reach-section .fabrici-stage:hover,
.reach-section .fabrici-stage-wrap,
.reach-section .fabrici-stage-wrap:hover,
.reach-section .reach-map,
.reach-section .reach-svg {
  transform: none !important;
}
.reach-section .fabrici-stage-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* GARANȚIE 3: niciun layer GPU permanent (sursa pâlpâielilor de demult) */
section, .reveal, .stat-card, .pentru-card, .sistem-card,
.montaj-card, .step-card, .product-card, .why-card {
  will-change: auto;
}

/* FINISAJ: tranziții catifelate pe butoane și linkuri (culoare + umbră) */
.btn, .btn-primary, .btn-red, .btn-ghost, .btn-on-dark, .btn-on-dark-ghost, .product-cta {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease,
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-red:hover, .btn-primary:hover {
  box-shadow: 0 10px 28px rgba(200, 16, 46, 0.22);
}

/* FINISAJ: cardurile mici răspund elegant — umbră stratificată la hover */
.pentru-card, .sistem-card, .montaj-card, .superpower,
.structural-card, .step-card, .why-card, .product-card, .stat-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease, border-color 0.3s ease, background 0.3s ease;
}

/* FINISAJ: selecție de text în culoarea brandului */
::selection { background: rgba(200, 16, 46, 0.14); color: var(--ink); }

/* FINISAJ: navigația devine mai prezentă la scroll (umbră fină) */
nav.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(15, 15, 15, 0.05); }

/* --- section --- */

/* ZURU-style: poster instant, video fade-in when playing */
  .media-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .media-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .morph-media { position: relative; }
  /* FIX stivuire: posterul .media-poster e absolut (z-index 0) și picta PESTE
     video-ul nepoziționat — video-ul rula perfect, dar ASCUNS SUB poster.
     Îi dăm videoului propriul strat (relative, z-index 1) + fade-in la
     evenimentul « playing » (posterul rămâne vizibil până pornesc cadrele). */
  .morph-media .morph-video { position: relative; z-index: 1; opacity: 0; transition: opacity 0.45s ease; }
  .morph-media .morph-video.is-playing { opacity: 1; }
  .presence-section { position: relative; }
  .presence-poster { z-index: 0; }
  /* Video visible via native poster; slight fade-in when frames play */
  .presence-bg.is-playing { opacity: 1; }
  /* cinq: mix-blend on video element — no opacity trap */

/* --- section --- */

.nav-menu { display: none !important; }       /* on cache le menu horizontal — tout passe dans le ☰ */
  .nav-burger { display: flex !important; }      /* ☰ visible sur toutes les tailles */
  .nav-cta > .btn-ghost { display: none; }       /* Contact -> dans le panneau */

  /* Panneau déroulant (style ZURU) — descend depuis le coin haut-droit */
  .nav-drawer {
    top: 72px; right: 16px; left: auto; bottom: auto;
    width: min(calc(209px + 4mm), calc(100vw - 24px));
    height: auto; max-height: calc(100vh - 96px);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 18px;
    box-shadow: 0 26px 64px rgba(15,14,12,0.28);
    transform: translateY(-10px) scale(0.98);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    padding: 12px;
  }
  .nav-drawer.open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-drawer-overlay { background: rgba(15,14,12,0.18); }
  .nav-drawer-close { display: none; } /* X redondant — le ☰ de la barre devient déjà un X */

  /* Accordéon : section -> sous-menu */
  .nav-drawer-group { margin: 0; padding: 0 0 0 0; border-bottom: 1px solid var(--border); }
  .nav-drawer-group:last-of-type { border-bottom: none; margin-bottom: 4px; }
  #navDrawer .nav-drawer-title {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: 15px; font-weight: 700; color: #000000;
    letter-spacing: 0; text-transform: none; padding: 13px 12px; border-radius: 10px;
    margin-bottom: 0; transition: background .15s ease;
  }
  #navDrawer .nav-drawer-title:hover { background: rgba(255,255,255,0.45); }
  .nd-caret { font-size: 11px; opacity: .5; transition: transform .25s ease; }
  .nav-drawer-group.open .nd-caret { transform: rotate(180deg); }
  .nav-acc { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .nav-drawer-group.open .nav-acc { max-height: 440px; }
  .nav-acc a {
    display: block; padding: 9px 12px 9px 24px; font-size: 14px;
    color: #111111; text-decoration: none; border-radius: 8px;
  }
  .nav-acc a:hover { background: var(--cream); color: var(--ink); }
  .nav-acc a.partner-link { color: var(--red); font-weight: 600; }
  .nav-drawer-cta { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }

/* --- section --- */

/* === HERO PHOTO — fundal full-bleed cu case, crossfade lent === */
  .hero--photo {
    background: #14120F; /* sub imagini — niciodată crem între fade-uri */
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }
  .hero-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-bg-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-bg-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .hero-bg video.hero-bg-video {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: #14120F;
  }
  .hero-bg video.hero-bg-video.is-playing {
    opacity: 1;
  }
  .hero-bg.is-video-playing .hero-bg-poster {
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  /* Scrim — întunecat progresiv la scroll (JS: --hero-progress 0→1) */
  .hero-bg-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(8, 7, 6, 0.38) 0%,
      rgba(8, 7, 6, 0.65) 45%,
      rgba(8, 7, 6, 0.92) 100%);
    opacity: var(--hero-progress, 0);
  }
  .hero--photo .container { position: relative; z-index: 2; }

  /* === ZURU-style scroll hero: video gol → scroll → mesaje + robot === */
  .hero-scroll-track {
    position: relative;
    /* Piste raccourcie : la bascule est instantanée, pas besoin d'un écran entier de scroll */
    height: 135vh;
    min-height: 135vh;
    height: 135dvh;
    min-height: 135dvh;
  }
  @media (max-width: 768px) {
    .hero-scroll-track {
      height: 180vh;
      min-height: 180vh;
      height: max(180dvh, calc(100dvh + 320px));
      min-height: max(180dvh, calc(100dvh + 320px));
    }
  }
  /* ZURU Tech hero type — Manrope 600, preset z2aqgr (măsurat de pe zuru.tech) */
  .hero-teaser.text-stilizat,
  .hero-teaser {
    position: absolute;
    bottom: 48px;
    left: 48px;
    z-index: 3;
    margin: 0;
    max-width: none;
    font-family: 'Manrope', 'Manrope Placeholder', sans-serif;
    font-size: 60px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.04em;
    /* Scris plin roşu, aceeaşi politică ca restul site-ului (decizie patron 12.08.2026;
       înainte primul rând era gol, doar cu contur) */
    color: var(--red);
    -webkit-text-stroke: 0;
    text-stroke: 0;
    text-align: left;
    text-shadow: none;
    opacity: calc(1 - min(var(--hero-progress, 0) * 2.2, 1));
    transform: translateY(calc(var(--hero-progress, 0) * -18px));
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }
  .hero-teaser-line {
    display: block;
    white-space: nowrap;
  }
  @media (min-width: 810px) and (max-width: 1199px) {
    .hero-teaser.text-stilizat,
    .hero-teaser {
      font-size: 48px;
      letter-spacing: -0.04em;
    }
  }
  @media (max-width: 809px) {
    .hero-teaser.text-stilizat,
    .hero-teaser {
      /* Se potriveşte singur pe lăţimea telefonului: rândul cel mai lung („Trei
         sisteme constructive") ieşea din ecran la 40 px. Testat 360–414 px. */
      font-size: clamp(24px, 7.4vw, 40px);
      letter-spacing: -0.03em;
      left: 26px;
      max-width: none;
    }
  }
  @media (max-width: 768px) {
    .hero-teaser.text-stilizat,
    .hero-teaser {
      /* Bara fixă „Sună / E-mail" (54 px + zona sigură) acoperea al doilea rând.
         Ridicăm textul deasupra ei. Pragul e 768, ca al barei — era 809, iar pe
         banda 769–809 px textul plutea cu 32 px mai sus peste o fâşie goală. */
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    /* Sertarul avea top: 72 px, înălţimea antetului de pe calculator. Pe telefon
       antetul are 61 px (57 sub 380 px), deci panoul plutea sub bară. */
    .nav-drawer { top: 63px; }
  }
  @media (max-width: 380px) {
    .nav-drawer { top: 59px; }
  }
  .hero-scroll-cue {
    position: absolute;
    right: clamp(20px, 4vw, 48px);
    bottom: 28px;
    z-index: 3;
    width: 22px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.62);
    border-radius: 11px;
    opacity: calc(1 - min(var(--hero-progress, 0) * 3, 1));
    pointer-events: none;
  }
  .hero-scroll-cue::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.88);
    animation: scrollCueBob 1.85s ease-in-out infinite;
  }
  @keyframes scrollCueBob {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50% { transform: translateY(7px); opacity: 1; }
  }
  .hero-full-content {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(72px, 11vh, 108px) clamp(16px, 4vw, 32px) clamp(28px, 5vh, 48px);
    opacity: 1;
    visibility: hidden;
    transform: translateY(36px);
    pointer-events: none;
    will-change: transform;
  }
  .hero-full-content .container {
    width: 100%;
    max-width: 100%;
    padding: 0 clamp(16px, 4vw, 32px);
    padding-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-full-content .hero-text-col {
    width: 100%;
    max-width: min(92vw, 820px);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hero-full-content picture,
  .hero-full-content .hero-robot-wrap {
    display: block;
    margin: 0 auto 18px;
  }
  .hero-full-content h1 {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-full-content .hero-sub {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hero-full-content .hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
  }
  .hero-full-content .hero-actions,
  .hero-full-content a { pointer-events: auto; }
  .hero.hero--photo:not(.hero-expanded) .hero-full-content {
    visibility: hidden;
    pointer-events: none;
  }
  .hero-full-content .hero-eyebrow { display: none !important; }
  .hero.hero--photo.hero-expanded .hero-teaser,
  .hero.hero--photo.hero-expanded .hero-scroll-cue {
    opacity: 0 !important;
    visibility: hidden;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-scroll-track { height: auto; }
    .hero-scroll-cue { display: none; }
    .hero-teaser { display: none; }
    .hero-full-content {
      position: relative;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto;
    }
    .hero-bg-scrim { opacity: 0.82 !important; }
  }

  /* Fascicul de "fum negru" sub meniu — gradient discret doar în partea
     de sus a hero-ului, pentru lizibilitatea textului alb din nav.
     Se citește ca o vinietă naturală, nu ca un filtru. */
  .hero--photo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: clamp(120px, 18vh, 190px);
    background: linear-gradient(180deg,
      rgba(8, 7, 6, 0.52) 0%,
      rgba(8, 7, 6, 0.30) 45%,
      rgba(8, 7, 6, 0.10) 78%,
      rgba(8, 7, 6, 0) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* Fum negru JOS — sub titlu + butoane, ca textul alb să iasă în evidență
     pe fotografia luminoasă a fabricii. Vinietă naturală care urcă din jos. */
  .hero--photo::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: clamp(360px, 58vh, 640px);
    background: linear-gradient(0deg,
      rgba(8, 7, 6, 0.84) 0%,
      rgba(8, 7, 6, 0.62) 30%,
      rgba(8, 7, 6, 0.38) 58%,
      rgba(8, 7, 6, 0.18) 82%,
      rgba(8, 7, 6, 0) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: var(--hero-progress, 0);
  }

  /* Sticky full-viewport — scroll-ul din .hero-scroll-track animează conținutul */
  section.hero.hero--photo {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    justify-content: flex-end;
    padding: 0;
    --hero-progress: 0;
    overflow: hidden;
  }
  .hero--photo .container {
    display: block;
    width: 100%;
    padding-bottom: calc(64px + 20mm);
  }
  .hero--photo .container > .hero-text-col {
    max-width: min(74%, 900px);
  }
  .hero-full-content h1 {
    color: #FFFFFF;
    /* titlu pe 3 rânduri: 2 albe + 1 roșu jos (ca secțiunea morph) */
    font-size: clamp(40px, 5vw, 72px);
    max-width: 1120px;
    margin-bottom: 26px;
    text-shadow: 0 2px 36px rgba(0, 0, 0, 0.55), 0 1px 6px rgba(0, 0, 0, 0.40);
  }
  .hero-full-content h1 em { color: #FFD9DE; } /* italic alb-rozat cald — accent subtil */
  /* Rândul 2 decalat — "Un système." începe sub "maison" */
  .hero-full-content h1 .h1-l2 {
    display: block;
    color: var(--red);
    font-style: italic;
  }
  .hero-full-content h1 .h1-l3 {
    display: inline-block;
    padding-left: 3.56em; /* a doua treaptă a cascadei */
  }
  .hero--photo .hero-actions { margin-bottom: 0; }
  .hero--photo .btn-ghost {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
  }
  .hero--photo .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #FFFFFF;
  }
  .hero-full-content .hero-robot-wrap {
    max-width: clamp(180px, 22vw, 280px);
  }
  .hero-full-content .hero-robot {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.45));
  }
  /* Reduced motion / fallback: doar prima imagine, fixă */
  /* Reduced motion: JS oprește videoul; posterul rămâne. */
  /* Eyebrow pe fundal foto — pastila translucidă, lizibilă peste video */
  .hero--photo .hero-eyebrow {
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.30);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    margin-bottom: 18px;
  }
  .hero--photo .hero-eyebrow::before { background: var(--red); }
  /* Subtitlu — explică „5 corps de métier en 1" */
  .hero--photo .hero-sub {
    color: rgba(255,255,255,0.95);
    max-width: 640px;
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.62;
    margin: 0 0 22px;
    text-shadow: 0 1px 14px rgba(0,0,0,0.55);
  }
  /* Rândul cu cele 3 cifre-cap */
  .hero-stats-row {
    list-style: none; margin: 0 0 28px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: baseline;
  }
  .hero-stats-row li {
    color: rgba(255,255,255,0.92);
    font-size: clamp(13px, 1.05vw, 15px);
    letter-spacing: .01em;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
    position: relative; padding-left: 18px;
  }
  .hero-stats-row li::before {
    content: ''; position: absolute; left: 0; top: 0.5em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  }
  .hero-stats-row li strong { color: #fff; font-weight: 800; font-size: 1.2em; margin-right: 5px; }
  @media (max-width: 968px) {
    .hero-full-content { padding-top: 68px; }
    .hero--photo .container { padding-bottom: 0; }
    .hero--photo .container > .hero-text-col { max-width: 100%; transform: none; }
    .hero-full-content h1 { font-size: clamp(22px, 6.8vw, 30px); }
    .hero--photo .hero-robot { max-width: clamp(120px, 34vw, 168px); margin-bottom: 12px; }
    .hero--photo .hero-sub { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
    .hero-stats-row { gap: 6px 18px; margin-bottom: 18px; }
    .hero-stats-row li { font-size: 12px; }
  }

/* --- section --- */

.morph-section {
    position: relative;
    background: #F7F4ED; /* exact culoarea de fundal a videoului — secțiune fără margini vizibile */
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding-top: 20mm; /* +20mm înălțime */
  }
  .morph-media {
    position: relative;
    max-width: 1760px;
    margin: 0 auto;
  }
  .morph-video {
    display: block;
    width: 100%;
    height: auto;
  }
  /* SCRIM — gradient crem peste partea de sus a videoului: textul suprapus
     rămâne lizibil chiar și când clădirea crește în zona lui. Aceeași
     culoare ca fundalul (#F7F4ED) → tranziția e invizibilă, clădirea pare
     că se retrage în lumină. */
  .morph-media::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 48%;
    background: linear-gradient(180deg,
      rgba(247, 244, 237, 0.97) 0%,
      rgba(247, 244, 237, 0.88) 34%,
      rgba(247, 244, 237, 0.45) 68%,
      rgba(247, 244, 237, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Aceeași gramatică ca hero/carusel: text JOS-STÂNGA, registrul deschis
     (ink pe cremul studioului), overline cu litere spațiate */
  /* Watermark "UN SEUL SYSTÈME" tăiat pe muchia hero→morph (inversul POUR) */
  .morph-watermark {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-38%);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(64px, 11vw, 180px); /* identic cu POUR */
    font-weight: 500;
    letter-spacing: -0.06em;          /* identic cu POUR */
    word-spacing: 0.16em;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .morph-watermark .mw-line1 { position: relative; height: 1em; }
  .morph-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .morph-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.6px rgba(255, 255, 255, 0.6);
    paint-order: stroke fill;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    clip-path: inset(0 0 62% 0);
  }
  .morph-watermark .wm-bottom {
    color: #463d30; /* warm dark — peste cremul secțiunii morph */
    -webkit-text-stroke: 0;
    clip-path: inset(38% 0 0 0);
  }
  .morph-watermark .mw-line2 {
    color: var(--red);
    -webkit-text-stroke: 0;
    line-height: 1;
    margin-top: calc(-0.55em - 2mm); /* urcat — trece puțin peste literele UN SEUL (+2mm la cerere) */
    position: relative;
    z-index: 1;
    font-size: 0.42em;
    letter-spacing: 0.30em;
    text-indent: 0.30em; /* compensează spațierea de după ultima literă (centrare) */
  }
  @media (max-width: 640px) {
    .morph-watermark { font-size: clamp(56px, 16vw, 110px); } /* identic cu POUR mobil */
  }
  .morph-overlay {
    position: absolute;
    left: 0;
    bottom: calc(6vw + clamp(150px, 19vh, 185px)); /* 150-185px de la marginea VIZIBILĂ a imaginii (fâșia suprapusă de carusel = 6vw) — identic cu caruselul */
    z-index: 2;
    text-align: left;
    padding: 0 clamp(32px, 5vw, 64px); /* identic cu .persona-content */
    max-width: min(96vw, 1280px);
    pointer-events: none; /* doar butonul primește click */
  }
  .morph-overlay .morph-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }
  .morph-overlay h2 {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 58px); /* identic cu titlul caruselului */
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 24px;
    max-width: none;
    white-space: nowrap;
  }
  .morph-overlay h2 em {
    font-style: italic;
    color: var(--red);
    font-weight: 400;
  }
  .morph-overlay .morph-sub {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0 0 20px;
  }
  .morph-overlay .morph-metric {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 24px;
  }
  .morph-overlay .morph-metric .sep { margin: 0 10px; opacity: 0.45; font-weight: 400; }
  .morph-overlay .morph-cta {
    pointer-events: auto;
  }
  @media (max-width: 1080px) {
    /* Full-bleed ca pe desktop: video cover pe tot, text ink suprapus jos pe scrim crem */
    .morph-section { min-height: calc(86svh + 30mm); padding-top: 0; }
    .morph-media { position: absolute; inset: 0; max-width: none; height: 100%; margin: 0; }
    .morph-video { width: 100%; height: 100%; object-fit: cover; }
    .morph-media::after { top: auto; bottom: 0; height: 60%;
      background: linear-gradient(0deg, rgba(247,244,237,0.95) 0%, rgba(247,244,237,0.62) 42%, rgba(247,244,237,0) 100%); }
    .morph-overlay { position: absolute; left: 0; right: 0; bottom: 0; max-width: 100%; padding: 0 22px 80px; }
    .morph-overlay h2 { font-size: clamp(30px, 8.5vw, 44px); white-space: normal; }
  }

/* --- section --- */

.differences-wrap {
    position: relative;
    z-index: 3;
    margin-top: clamp(-130px, -6vw, -40px);
  }
  .differences-watermark {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(64px, 11vw, 180px);
    font-weight: 500;
    letter-spacing: -0.06em;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .differences-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .differences-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(90, 80, 66, 0.62);
    clip-path: inset(0 0 62% 0);
  }
  .differences-watermark .wm-bottom {
    color: #FFFFFF;
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.40);
    clip-path: inset(38% 0 0 0);
  }
  @media (max-width: 640px) {
    .differences-watermark { font-size: clamp(56px, 16vw, 110px); }
  }

  .differences-section {
    position: relative;
    background:
      linear-gradient(rgba(13, 12, 10, 0.55), rgba(13, 12, 10, 0.65)),
      url('../../images/presence/presence-factory.jpg') center/cover no-repeat;
    color: #FFFFFF;
    padding: clamp(100px, 12vh, 150px) clamp(24px, 5vw, 64px) clamp(100px, 12vh, 150px);
    overflow: hidden;
  }
  /* diagrame „explodate" — spații între straturi */
  .differences-section .wall-diagram-container { background: transparent; border: 0; box-shadow: none; }
  .differences-section .wall-diagram-grid { gap: 5px; }
  .differences-section .wall-layer { border-radius: 6px; }
  /* listă produse + rezumat echipe */
  .diff-products { list-style: none; margin: 24px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .differences-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
      rgba(15, 14, 12, 0.75) 0%, 
      rgba(15, 14, 12, 0.45) 40%, 
      rgba(15, 14, 12, 0.75) 100%);
    z-index: 1;
    pointer-events: none;
  }
  .differences-container {
    position: relative;
    z-index: 2;
    max-width: 1480px;
    margin: 0 auto;
  }
  .differences-header {
    text-align: center;
    margin-bottom: clamp(40px, 6vh, 80px);
  }
  .differences-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FF1A3B;
    margin-bottom: 14px;
  }
  .differences-header h2 {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
  }
  .differences-header h2 em {
    font-style: italic;
    color: #FFFFFF;
    font-weight: 400;
  }
  .differences-sub {
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    max-width: 800px;
    margin: 0 auto;
  }

  .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
  .comparison-card {
    background: rgba(15, 14, 12, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: clamp(24px, 3.5vw, 48px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .comparison-card:hover {
    transform: translateY(-4px);
  }
  .comparison-card.card-polistibrick:hover {
    border-color: rgba(200, 16, 46, 0.45);
    box-shadow: 0 20px 48px rgba(200, 16, 46, 0.15);
  }
  .comparison-card.card-classic:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 48px rgba(255, 255, 255, 0.04);
  }

  .comparison-card h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 32px);
    font-weight: 500;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .card-stats {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .card-stats .sep {
    opacity: 0.3;
  }
  .card-badge {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
  }
  .card-polistibrick .card-badge {
    background: var(--red);
    color: #FFFFFF;
  }
  .card-classic .card-badge {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
  }

  /* Exploded Wall Diagram */
  .wall-exploded-view {
    position: relative;
    height: 220px;
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }
  .wall-layer {
    position: relative;
    height: 90%;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  }
  .wall-layer:hover {
    height: 100%;
    filter: brightness(1.25);
  }

  /* Polistibrick Exploded Layers (5 layers) */
  .wl-pb {
    width: 17%;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* Outer formwork 8mm */
  .wl-pb-ext {
    background: linear-gradient(135deg, #44403c, #1c1917);
  }
  /* Steel armature 1 */
  .wl-pb-steel1 {
    background: repeating-linear-gradient(45deg, #1c1917, #1c1917 6px, #ef4444 6px, #ef4444 8px, #1c1917 8px, #1c1917 14px);
    border-color: rgba(239, 68, 68, 0.3);
  }
  /* Concrete core */
  .wl-pb-concrete {
    background: linear-gradient(135deg, #6b7280, #374151);
  }
  /* Steel armature 2 */
  .wl-pb-steel2 {
    background: repeating-linear-gradient(45deg, #1c1917, #1c1917 6px, #ef4444 6px, #ef4444 8px, #1c1917 8px, #1c1917 14px);
    border-color: rgba(239, 68, 68, 0.3);
  }
  /* Inner formwork 12mm */
  .wl-pb-int {
    background: linear-gradient(135deg, #292524, #57534e);
  }

  /* Classic Exploded Layers (6 layers) */
  .wl-cl {
    width: 14%;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  /* Plâtre */
  .wl-cl-interior {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
  }
  /* Parpaing */
  .wl-cl-brick {
    background: linear-gradient(135deg, #4b5563, #1f2937);
  }
  /* Mortier colle */
  .wl-cl-mortar {
    background: linear-gradient(135deg, #4b5563, #374151);
  }
  /* Isolant classique */
  .wl-cl-insul {
    background: linear-gradient(135deg, #fef08a, #ca8a04);
  }
  /* Dowels (chevilles) */
  .wl-cl-dowel {
    background: repeating-linear-gradient(90deg, #9ca3af, #9ca3af 4px, #4b5563 4px, #4b5563 8px);
  }
  /* Crépi finition */
  .wl-cl-finish {
    background: linear-gradient(135deg, #f3f4f6, #d1d5db);
  }

  .layer-vertical-text {
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    opacity: 0.8;
    user-select: none;
  }
  .wall-layer:hover .layer-vertical-text {
    opacity: 1;
    scale: 1.05;
  }

  /* Active states for exploded view compilation */
  .wall-layer.active {
    filter: brightness(1.3) !important;
    box-shadow: 0 0 32px rgba(255,255,255,0.3) !important;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .wall-layer.active-pb {
    border-color: rgba(200, 16, 46, 0.6) !important;
    box-shadow: 0 0 32px rgba(200, 16, 46, 0.4) !important;
  }

  .legend-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .legend-title-group {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-top: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 6px;
  }
  .legend-item {
    display: flex;
    gap: 16px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.01);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .legend-item:hover {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
  }
  .card-polistibrick .legend-item:hover {
    border-color: rgba(200, 16, 46, 0.25);
    background: rgba(200, 16, 46, 0.02);
  }
  .card-classic .legend-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
  }

  .legend-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
  }
  .card-polistibrick .legend-item:hover .legend-badge {
    background: var(--red);
  }
  .card-classic .legend-item:hover .legend-badge {
    background: rgba(255, 255, 255, 0.3);
  }

  .legend-desc h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #FFFFFF;
    transition: color 0.3s ease;
  }
  .legend-desc p {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.55);
    margin: 0;
  }
  .legend-item:hover .legend-desc h4 {
    color: #FFFFFF;
  }
  .card-polistibrick .legend-item:hover .legend-desc h4 {
    color: #FFD9DE;
  }

  .legend-item.active {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.1) !important;
  }
  .card-polistibrick .legend-item.active {
    background: rgba(200, 16, 46, 0.04) !important;
    border-color: rgba(200, 16, 46, 0.3) !important;
  }
  .card-polistibrick .legend-item.active .legend-badge {
    background: var(--red);
  }

  @media (max-width: 1024px) {
    .comparison-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
  }

/* --- section --- */

/* Slider Widget Container */
    .slider-widget {
      position: relative;
      margin: 0 auto;
      max-width: 1480px;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.1);
      background: #000;
    }

    /* Slider Wrapper holding both states */
    .slider-wrapper {
      position: relative;
      width: 100%;
      height: calc(clamp(400px, 60vh, 650px) + 40mm);
      --value: 50%;
      user-select: none;
    }

    /* === MOBILE : section compacte + slider pleine largeur (bord à bord) === */
    @media (max-width: 768px) {
      .differences-section { padding: 44px 0 52px; }   /* moins d'espace haut/bas */
      .differences-container { max-width: 100%; }
      .differences-header { margin-bottom: 20px; padding: 0 20px; }  /* texte rouge près du slider */
      .slider-widget { max-width: 100%; border-radius: 0; box-shadow: none; }  /* pleine largeur écran */
    }

    /* Shared style for background panes */
    .slider-pane {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .pane-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
    }

    /* Overlay wrapping elements inside panes */
    .pane-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }

    /* Clipping for the two states */
    .pane-polistibrick {
      z-index: 10;
      clip-path: inset(0 calc(100% - var(--value)) 0 0);
      -webkit-clip-path: inset(0 calc(100% - var(--value)) 0 0);
    }
    .pane-classic {
      z-index: 8;
      clip-path: inset(0 0 0 var(--value));
      -webkit-clip-path: inset(0 0 0 var(--value));
    }

    /* Unified Info Cards */
    .info-card {
      position: absolute;
      bottom: clamp(8px, 3vw, 28px);
      background: transparent;
      border: 1.5px solid #FFFFFF;
      border-radius: 20px;
      padding: 1mm;
      width: clamp(280px, 28vw, 410px);
      max-width: 90%;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
      color: #fff;
      z-index: 20;
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
    }
    .info-card-inner {
      background: rgba(0, 0, 0, 0.30);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 16px;
      padding: clamp(16px, 2.5vw, 24px);
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
    }
    .info-pb {
      left: clamp(12px, 2vw, 20px);
    }
    .info-cl {
      right: clamp(12px, 2vw, 20px);
    }
    .info-card:hover {
      border-color: #FFFFFF;
      transform: translateY(-4px);
      box-shadow: 0 40px 100px rgba(255, 255, 255, 0.12);
    }
    .info-card h4, .info-card .h4-card-label {
      font-family: var(--serif);
      font-size: clamp(17px, 2vw, 22px);
      font-weight: 500;
      margin: 0;
    }
    .info-pb h4, .info-pb .h4-card-label {
      color: #FFFFFF;
    }
    .info-cl h4, .info-cl .h4-card-label {
      color: #FFFFFF;
    }
    .card-header-pb, .card-header-cl {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .card-icon {
      font-size: 20px;
    }
    .card-team, .card-materials {
      font-size: clamp(12px, 1.4vw, 13.5px);
      line-height: 1.5;
      margin: 0 0 8px;
      color: #FFFFFF;
    }
    .card-materials {
      margin-bottom: 0;
      color: #FFFFFF;
    }
    .card-materials strong {
      color: #FFFFFF;
    }

    /* Slider drag bar handle */
    .slider-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--value);
      width: 4px;
      background: #FFFFFF;
      z-index: 25;
      transform: translateX(-50%);
      cursor: ew-resize;
      box-shadow: 0 0 15px rgba(0,0,0,0.5);
    }
    .handle-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #FFFFFF;
      color: #FF1A3B;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      border: 3px solid #FF1A3B;
      transition: transform 0.2s;
    }
    .slider-handle:hover .handle-button,
    .slider-handle:active .handle-button {
      transform: translate(-50%, -50%) scale(1.08);
      background: #FF1A3B;
      color: #FFFFFF;
    }

    /* Text watermark indicators */
    .pane-tag {
      position: absolute;
      top: 10px;
      font-family: var(--serif);
      font-size: clamp(18px, 2.8vw, 32px);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      opacity: 0.98;
      pointer-events: none;
      z-index: 10;
      text-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(0, 0, 0, 0.85);
      background: radial-gradient(ellipse, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 80%);
      padding: 14px 30px;
      margin: -14px -30px;
    }
    .pane-polistibrick .pane-tag {
      left: 20px;
      color: #FFFFFF;
    }
    .pane-classic .pane-tag {
      right: 20px;
      color: #FFFFFF;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .info-card {
        bottom: 6px;
        padding: 1mm;
        border-radius: 16px;
        width: auto;
        max-width: calc(100% - 24px);
      }
      .info-card-inner {
        border-radius: 12px;
        padding: 12px 16px;
      }
      .info-pb { left: 12px; right: auto; }
      .info-cl { right: 12px; left: auto; }
      .card-header-pb, .card-header-cl { margin-bottom: 8px; gap: 8px; }
      .info-card h4, .info-card .h4-card-label { font-size: 15px; }
      .card-team, .card-materials { font-size: 11px; margin-bottom: 4px; }
      /* Fundalul etichetei se întinde cu margin negativ dincolo de text, deci
         la 10 px de margine „Clasic" ieşea 19 px din ecran şi se tăia.
         Marginea negativă scade la 16 px, iar eticheta se trage spre interior. */
      .pane-tag { top: 6px; padding: 10px 16px; margin: -10px -16px; }
      .pane-polistibrick .pane-tag { left: 22px; }
      .pane-classic .pane-tag { right: 22px; }
    }

/* --- section --- */

/* Spațiu crem deasupra (nu interferează cu video-ul morph) + watermark POUR
     tăiat jumătate-jumătate pe muchie — pattern-ul Présence/Comparaison */
  .personas-wrap {
    position: relative;
    z-index: 4;
    margin-top: clamp(-40px, -3vw, -20px);
  }
  .personas-watermark {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(64px, 11vw, 180px);
    font-weight: 500;
    letter-spacing: -0.06em;
    word-spacing: 0.16em;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .personas-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .personas-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.55);
    clip-path: inset(0 0 62% 0);
  }
  .personas-watermark .wm-bottom {
    color: #FFFFFF;
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.40);
    clip-path: inset(38% 0 0 0);
  }
  @media (max-width: 640px) {
    .personas-watermark { font-size: clamp(56px, 16vw, 110px); }
  }
  .personas-section {
    position: relative;
    height: calc(min(100vh, 1100px) + 20mm); /* +20mm înălțime */
    background: #14120F;
    overflow: hidden;
  }
  .persona-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
    pointer-events: none;
    z-index: 1;
  }
  .persona-slide.active {
    opacity: 1;
    pointer-events: auto;
  }
  .persona-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  /* Scrim discret jos-stânga pentru text — aceeași rețetă ca hero */
  .persona-scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(0deg, rgba(8, 7, 6, 0.52) 0%, rgba(8, 7, 6, 0.18) 30%, rgba(8, 7, 6, 0) 52%),
      linear-gradient(180deg, rgba(8, 7, 6, 0.42) 0%, rgba(8, 7, 6, 0.16) 14%, rgba(8, 7, 6, 0) 26%);
    pointer-events: none;
  }
  .persona-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 clamp(32px, 5vw, 64px) clamp(150px, 19vh, 185px);
    max-width: 1480px;
    margin: 0 auto;
    color: #fff;
    z-index: 3;
  }
  .persona-overline {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  }
  .persona-content h2 {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 58px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 14px;
    max-width: 760px;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.35);
  }
  .persona-content h2 em { font-style: italic; color: var(--red); }
  .persona-metric {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
  .persona-metric::before {
    content: '';
    display: inline-block;
    width: 26px; height: 2px;
    background: var(--red);
    vertical-align: middle;
    margin-right: 10px;
  }
  .persona-cta {
    display: inline-block;
    background: var(--red);
    color: #fff;
    padding: 13px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  .persona-cta:hover {
    background: var(--red-dark, #a50d26);
    box-shadow: 0 10px 28px rgba(200, 16, 46, 0.30);
  }

  /* Navigare: puncte jos-centru + săgeți jos-dreapta */
  /* Tab-uri cu numele rolurilor + bară de progres pe tab-ul activ */
  .persona-dots {
    position: absolute;
    top: clamp(120px, 16vh, 175px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(18px, 3vw, 44px);
    z-index: 3;
  }
  .persona-dot {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }
  .pd-label {
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: color 0.3s ease;
  }
  .persona-dot:hover .pd-label { color: #FFFFFF; }
  .persona-dot.active .pd-label { color: #FFFFFF; }
  .pd-bar {
    width: 100%;
    min-width: 64px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.38);
    overflow: hidden;
  }
  .pd-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--red);
  }
  .persona-dot.active .pd-fill { animation: pdFill 3s linear forwards; }
  @keyframes pdFill { from { width: 0; } to { width: 100%; } }
  @media (prefers-reduced-motion: reduce) {
    .persona-dot.active .pd-fill { animation: none; width: 100%; }
  }

  @media (max-width: 768px) {
    .personas-section { height: calc(min(92vh, 760px) + 20mm); }
    .persona-content { padding-bottom: 158px; }
    .persona-dots { top: clamp(96px, 13vh, 132px); gap: 14px; }
    .pd-label { font-size: 9.5px; letter-spacing: 0.08em; }
    .pd-bar { min-width: 44px; }
    .persona-content h2 { font-size: clamp(26px, 7.5vw, 38px); }
    .persona-scrim {
      background:
        linear-gradient(0deg, rgba(8, 7, 6, 0.62) 0%, rgba(8, 7, 6, 0.28) 42%, rgba(8, 7, 6, 0) 64%),
        linear-gradient(180deg, rgba(8, 7, 6, 0.45) 0%, rgba(8, 7, 6, 0.18) 14%, rgba(8, 7, 6, 0) 26%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .persona-slide { transition: none; }
  }

/* --- section --- */

.passif-wrap {
    position: relative;
    z-index: 5; /* peste personas-wrap (z4) — jumătatea de sus a PASSIF se vede peste carusel */
  }
  /* Watermark "PASSIF" tăiat pe muchia carusel→video (pagini lipite) — alb, tăietura POUR */
  .passif-watermark {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(64px, 11vw, 180px); /* identic cu POUR */
    font-weight: 500;
    letter-spacing: -0.06em;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .passif-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .passif-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.55);
    clip-path: inset(0 0 62% 0);
  }
  .passif-watermark .wm-bottom {
    color: #FFFFFF; /* alb peste video — identic cu POUR */
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.40);
    clip-path: inset(38% 0 0 0);
  }
  /* === Degrade GLOBAL pentru toate watermark-urile: jumătatea plină de jos
     pornește solid de jos și se estompează spre muchia dintre secțiuni (ca PASSIF). === */
  .wm-bottom {
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(26% - 2mm), rgba(0,0,0,0) calc(60% - 2mm));
            mask-image: linear-gradient(to top, #000 0%, #000 calc(26% - 2mm), rgba(0,0,0,0) calc(60% - 2mm));
  }
  @media (max-width: 640px) {
    .passif-watermark { font-size: clamp(56px, 16vw, 110px); } /* identic cu POUR mobil */
  }
  .passif-section {
    position: relative;
    background: #F7F4ED; /* crem doar ca fundal tehnic (mobil); pe desktop videoul e lipit de carusel */
    overflow: hidden;
  }
  .passif-media { position: relative; }
  .passif-video { display: block; width: 100%; height: auto; }
  /* Iarnă statică — fără slideshow, fără video */
  .passif-slides { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
  .passif-slides .passif-photo {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  /* Scrim — aceeași gramatică precum caruselul: gradient închis jos pentru lizibilitate */
  .passif-scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(0deg, rgba(8, 7, 6, 0.55) 0%, rgba(8, 7, 6, 0.26) 20%, rgba(8, 7, 6, 0.05) 40%, rgba(8, 7, 6, 0) 56%);
    pointer-events: none;
    z-index: 6; /* peste prim-planul fix, doar pentru lizibilitatea textului jos */
  }
  /* Aceeași poliță de text ca la carusel: jos-stânga, aceleași fonturi și înălțimi */
  .passif-content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 clamp(32px, 5vw, 64px) clamp(150px, 19vh, 185px); /* identic cu .persona-content */
    max-width: 1480px;
    margin: 0 auto;
    color: #fff;
    z-index: 7; /* deasupra scrim-ului (z6) — textul rămâne lizibil */
  }
  .passif-overline {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 14px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
  .passif-content h2 {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 58px); /* identic cu titlul caruselului */
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: 820px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  }
  .passif-content h2 em {
    font-style: italic;
    color: var(--red);
    font-weight: 400;
  }
  .passif-metric {
    font-size: clamp(14px, 1.4vw, 17px); /* identic cu .persona-metric */
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }
  .passif-metric .sep { margin: 0 10px; opacity: 0.45; font-weight: 400; }
  .passif-cta { pointer-events: auto; }
  @media (max-width: 1080px) {
    /* Mobil PASSIF: video dedicat mobil (fereastra cu anotimpurile + copilul în centru),
       full-bleed cover centrat. Text alb suprapus jos. */
    .passif-section { min-height: calc(78svh + 30mm); }
    .passif-media { position: absolute; inset: 0; height: 100%; }
    .passif-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .passif-slides { height: 100%; aspect-ratio: auto; }
    .passif-scrim { display: block; background: linear-gradient(0deg, rgba(8,7,6,0.92) 0%, rgba(8,7,6,0.70) 26%, rgba(8,7,6,0.42) 50%, rgba(8,7,6,0.14) 72%, rgba(8,7,6,0) 90%); }
    .passif-content { position: absolute; left: 0; right: 0; bottom: 0; max-width: 100%; padding: 0 22px 80px; color: #fff; }
    .passif-content h2 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); font-size: clamp(30px, 8.5vw, 44px); }
    .passif-overline { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
    .passif-metric { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
  }

/* --- section --- */

.cinq-wrap {
    position: relative;
    z-index: 6; /* peste passif-wrap (z5) — jumătatea de sus a 5-EN-1 se vede peste videoul pasiv */
  }
  /* Watermark "5-EN-1" tăiat pe muchia pasiv→cinq — registrul deschis (stroke + crem), ca STATS/BUNDLE */
  .cinq-watermark {
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(64px, 11vw, 180px); /* identic cu POUR / PASSIF */
    font-weight: 500;
    letter-spacing: -0.06em;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }
  .cinq-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .cinq-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.6);
    text-shadow: 0 3px 34px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.40);
    clip-path: inset(0 0 62% 0);
  }
  .cinq-watermark .wm-bottom {
    color: var(--ink); /* negru pe albul secțiunii */
    clip-path: inset(38% 0 0 0);
  }
  @media (max-width: 640px) {
    .cinq-watermark { font-size: clamp(56px, 16vw, 110px); }
  }
  .cinq-section {
    position: relative;
    background: 
      linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 65%, #FFFFFF 85%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.80) 30%, rgba(255, 255, 255, 0.90) 50%, #FFFFFF 100%),
      url('../../images/bundle/bundle-bg.png') -12% center/cover no-repeat;
    background-attachment: scroll, scroll, fixed;
    overflow: hidden;
  }
  .cinq-media {
    position: relative;
    max-width: 1760px;
    margin: 0 auto;
  }
  .cinq-video { display: block; width: 100%; height: auto; transform: translateX(45mm); mix-blend-mode: multiply; clip-path: inset(0 0 15% 35%); }

  /* Legenda tehnică a panoului — bandă de specificații sub video, pe crem */
  .cinq-legend {
    position: relative;
    z-index: 5; /* PESTE cinq-media::after (gradientul alb z:1 spala textul -> il ridicam) */
    max-width: 1560px;
    margin: 0 auto;
    padding: 26px 40px 44px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 24px;
    transform: translateY(-15mm); /* ridicat 15mm la cererea userului (desktop) */
  }
  .cinq-item {
    max-width: 250px;
    opacity: 1 !important;
    transform: none !important;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    background: transparent;
    transition: border-color 0.25s, background-color 0.25s;
  }
  .cinq-item:hover {
    border-color: var(--red);
    background-color: rgba(255, 26, 59, 0.02);
  }
  .cinq-item .ci-name {
    display: flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink); /* negru la cererea userului */
  }
  .cinq-item .ci-val {
    margin: 4px 0 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--gray);
    white-space: nowrap;
  }
  /* Aceeași poliță ca morph: text JOS-STÂNGA, registrul deschis */
  .cinq-overlay {
    position: absolute;
    left: 0;
    bottom: clamp(150px, 19vh, 185px); /* aceeași înălțime de la marginea vizibilă ca la carusel/morph */
    z-index: 2;
    text-align: left;
    padding: 0 clamp(32px, 5vw, 64px);
    max-width: 860px;
    pointer-events: none;
  }
  .cinq-overlay .cinq-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }
  .cinq-overlay h2 {
    font-family: var(--serif);
    font-size: clamp(30px, 4vw, 58px); /* identic cu titlul caruselului */
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: 760px;
  }
  .cinq-overlay h2 em {
    font-style: italic;
    color: var(--red);
    font-weight: 400;
  }
  .cinq-metric {
    font-size: clamp(14px, 1.4vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 24px;
    max-width: 680px;
  }
  .cinq-metric .sep { margin: 0 10px; opacity: 0.45; font-weight: 400; }
  .cinq-overlay .cinq-cta { pointer-events: auto; }
  @media (max-width: 1080px) {
    /* Full-bleed ca pe desktop: video cover pe tot, legendă sus-stânga, text suprapus jos */
    .cinq-section { min-height: 86svh; }
    .cinq-media { position: absolute; inset: 0; max-width: none; height: 100%; margin: 0; }
    .cinq-video { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(2.34) translate(-8%, 0%); transform-origin: center; }
    .cinq-legend { display: none; }   /* etichetele tehnice rămân doar pe desktop */
    .cinq-overlay { position: absolute; left: 0; right: 0; bottom: 0; max-width: 100%; padding: 0 22px 76px; }
    .cinq-overlay h2 { font-size: clamp(28px, 8vw, 42px); }
  }

/* --- section --- */

.presence-wrap { position: relative; z-index: 7; } /* peste cinq-wrap (z6) — jumatatea de sus a PRÉSENCE se vede peste sectiunea 5-EN-1 */
  .presence-watermark { position:absolute; top:0; left:0; right:0; transform:translateY(-38%); height:1em; line-height:1; text-align:center; text-transform:uppercase; font-family:var(--serif); font-size:clamp(64px,11vw,180px); font-weight:500; letter-spacing:-0.06em; z-index:4; pointer-events:none; user-select:none; white-space:nowrap; }
  .presence-watermark .wm-half { position:absolute; inset:0; width:100%; display:block; }
  .presence-watermark .wm-top { color:transparent; -webkit-text-stroke:1.5px rgba(90,80,66,0.62); clip-path:inset(0 0 62% 0); } /* crem închis cald — vizibil pe fundal alb */
  .presence-watermark .wm-bottom { color:#FFFFFF; text-shadow:0 3px 34px rgba(0,0,0,0.55),0 1px 8px rgba(0,0,0,0.40); clip-path:inset(38% 0 0 0); } /* alb peste foto */
  @media (max-width:640px){ .presence-watermark{ font-size:clamp(56px,16vw,110px);} }

  .reach-section.presence-section {
    position:relative; padding:0; border:0; background:#0F0E0C;
    min-height:clamp(620px,90vh,1000px); overflow:hidden; display:block;
  }
  .presence-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
  /* Ken Burns — montaj din mișcări de cameră pe ACEEAȘI poză (fără AI): large → tir/muncitori → stivuitor → retragere */
  .presence-kb { will-change: transform; transform-origin: 50% 56%; animation: kbPresence 30s ease-in-out infinite; }
  @keyframes kbPresence {
    0%, 12%   { transform: scale(1.06); transform-origin: 50% 56%; }   /* plan larg */
    30%, 44%  { transform: scale(1.9);  transform-origin: 47% 62%; }   /* zoom pe tir + muncitori */
    60%, 74%  { transform: scale(1.9);  transform-origin: 68% 60%; }   /* panoramare spre stivuitor */
    100%      { transform: scale(1.06); transform-origin: 50% 56%; }   /* retragere */
  }
  @media (prefers-reduced-motion: reduce) { .presence-kb { animation: none; transform: scale(1.04); } }
  .presence-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(0deg, rgba(8,7,6,0.66) 0%, rgba(8,7,6,0.18) 34%, rgba(8,7,6,0) 56%),
      linear-gradient(90deg, rgba(8,7,6,0.45) 0%, rgba(8,7,6,0) 44%); }
  .presence-content { position:absolute; left:0; bottom:clamp(48px,9vh,96px); z-index:3; padding:0 clamp(32px,5vw,64px); max-width:760px; color:#fff; }
  .presence-overline { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.85); margin-bottom:14px; text-shadow:0 1px 10px rgba(0,0,0,0.45); }
  .presence-content h2 { font-family:var(--serif); font-size:clamp(30px,4vw,58px); font-weight:500; color:#fff; letter-spacing:-0.02em; line-height:1.05; margin:0 0 18px; text-shadow:0 2px 24px rgba(0,0,0,0.45); }
  .presence-content h2 em { font-style:italic; color:var(--red); font-weight:400; }
  .presence-metric { font-size:clamp(14px,1.4vw,17px); font-weight:600; color:#fff; margin-bottom:24px; text-shadow:0 1px 10px rgba(0,0,0,0.45); }
  .presence-metric .sep { margin:0 10px; opacity:0.45; font-weight:400; }
  .presence-cta { pointer-events:auto; }
  .presence-mapcard { position:absolute; z-index:3; top:50%; right:-2cm; transform:translateY(-50%);
    width:clamp(414px,50.6vw,690px); background:transparent;
    border:1.5px solid #FFFFFF; border-right:0; border-radius:20px 0 0 20px; padding:5mm; box-shadow:0 30px 80px rgba(0,0,0,0.28); overflow:hidden; }
  .presence-mapcard .mapcard-inner { background:rgba(247,244,237,0.46); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:12px 0 0 12px; padding:14px 14px 10px; overflow:hidden; }
  .presence-mapcard .mapcard-tag { display:inline-block; background:var(--red-soft); color:var(--red); padding:3px 10px; border-radius:4px; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; }
  .presence-mapcard .reach-svg { max-height:50.6vh; transform:scale(1.1); transform-origin:center; }
  .presence-legend { display:flex; justify-content:center; gap:28px; margin-top:6px; font-size:12px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.6); letter-spacing:0.04em; }
  @media (max-width:1024px) {
    /* Full-bleed ca pe desktop: video cover pe tot, hartă suprapusă sus, text alb jos */
    .reach-section.presence-section { min-height: 100svh; }
    .presence-bg { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    .presence-scrim { display: block; }
    .presence-mapcard { position: absolute; top: clamp(76px, 11vh, 110px); left: 50%; right: auto; transform: translateX(-50%);
      width: min(92%, 470px); border: 1.5px solid #FFFFFF; border-radius: 16px; padding: 4mm; margin: 0; }
    .presence-mapcard .mapcard-inner { border-radius: 10px; }
    .presence-mapcard .reach-svg { max-height: 32vh; transform: scale(1.03); }
    .presence-content { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: 0 22px 72px; max-width: 100%; }
    .presence-content h2 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.45); font-size: clamp(28px, 8vw, 42px); }
    .presence-overline { color: rgba(255,255,255,0.85); text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
    .presence-metric { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
  }

/* --- section --- */

.pm-cc{fill:#d3ccbc;stroke:#a89e8b;stroke-width:0.5;vector-effect:non-scaling-stroke;pointer-events:none}.pm-cc.pm-on{fill:#c8102e;stroke:#8d0a20;stroke-width:0.6}.pm-lbl{fill:#1a1714;font-family:Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#f7f4ed;stroke-width:3;stroke-linejoin:round;pointer-events:none}.pm-fdot{fill:#ffffff;stroke:#111111;stroke-width:2}.pm-flbl{fill:#c8102e;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:#f7f4ed;stroke-width:3.2}.pm-fsub{fill:#6b6256;font-family:Helvetica,Arial,sans-serif;font-size:8.5px;text-anchor:middle;paint-order:stroke;stroke:#f7f4ed;stroke-width:2.4}

/* --- section --- */

.sistem-section {
    position: relative;
    background: 
      linear-gradient(180deg, #0F0E0C 0%, rgba(15, 14, 12, 0.68) 30%, rgba(15, 14, 12, 0.78) 75%, #0F0E0C 100%),
      url('../../images/systeme/systeme-bg.png') center/cover no-repeat;
    background-attachment: scroll, fixed;
    padding: 80px 0;
    overflow-x: clip;
  }
  .sistem-section > .container {
    max-width: 1480px;
    padding-left: clamp(20px, 2.5vw, 40px);
    padding-right: clamp(20px, 2.5vw, 40px);
  }
  .sistem-stage-wrap {
    position: relative;
    margin: 0 auto 0;
    max-width: 1480px;
  }
  .sistem-stage {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 6px 24px 40px;
    overflow: visible;
  }
  .sistem-wrap { position: relative; z-index: 8; }
  .sistem-watermark {
    position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    pointer-events: none; user-select: none; transform: translateY(-38%);
    height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-size: clamp(64px, 11vw, 180px);
    font-weight: 500; letter-spacing: -0.06em; z-index: 2;
  }
  .sistem-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .sistem-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.22); clip-path: inset(0 0 62% 0); }
  .sistem-watermark .wm-bottom { color: #FFFFFF; -webkit-text-stroke: 0; clip-path: inset(38% 0 0 0); }
  .sistem-intro {
    max-width: min(1100px, 100%); margin: 0 auto 48px; text-align: center;
  }
  .sistem-intro .bubble-tag {
    display: inline-block; background: var(--red-soft); color: var(--red);
    padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
  }
  .sistem-intro h2 {
    font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); font-weight: 500;
    color: #FFFFFF; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 14px;
  }
  .sistem-intro h2 em { font-style: italic; color: var(--red); font-weight: 400; }
  .sistem-intro p {
    font-size: 15px; color: rgba(255, 255, 255, 0.7); line-height: 1.45; margin: 0;
    white-space: nowrap;
  }
  @media (max-width: 1100px) {
    .sistem-intro p { white-space: normal; }
  }

  .sistem-grid--families {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
    max-width: min(1480px, calc(100vw - 48px));
    width: 100%;
    margin: 0 auto;
  }
  .sistem-card--family {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: clamp(32px, 3.2vw, 44px) clamp(28px, 2.8vw, 40px) clamp(28px, 2.8vw, 36px);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-decoration: none;
    color: #FFFFFF;
    min-height: 100%;
  }
  .sistem-eco {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
  }
  .sistem-eco svg {
    width: 18px;
    height: 18px;
    display: block;
    /* coadă ~ora 10, vârf în jos */
    transform: rotate(210deg);
  }
  .sistem-card--family:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.35);
    border-color: #3E9B5A;
    background-color: rgba(62, 155, 90, 0.10);
  }
  .sistem-card--family:hover .sistem-card-cta {
    color: #3E9B5A;
  }
  .sistem-card-label {
    display: inline-block;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-bottom: 14px;
  }
  .sistem-card--family h3 {
    font-family: var(--serif); font-size: clamp(30px, 2.8vw, 38px); font-weight: 500;
    color: #FFFFFF; margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.08;
  }
  .sistem-card--family h3 em { font-style: italic; color: var(--red); font-weight: 400; }
  .sistem-card--family p {
    font-size: clamp(15px, 1.15vw, 17px); color: rgba(255, 255, 255, 0.72); line-height: 1.5;
    margin: 0 0 26px; flex: 1;
  }
  .sistem-card--family p strong { color: #fff; font-weight: 600; }
  .sistem-card-cta {
    font-size: 13px; font-weight: 600; color: var(--red);
    letter-spacing: 0.02em;
  }
  .sistem-foot {
    text-align: center; margin: 28px 0 0;
    font-size: 14px;
  }
  .sistem-foot a {
    color: rgba(255,255,255,0.7); font-weight: 600; text-decoration: none;
  }
  .sistem-foot a:hover { color: var(--red); }

  @media (max-width: 900px) {
    .sistem-section { padding: 40px 0 48px; }
    .sistem-stage { padding: 10px 18px 16px; }
    .sistem-intro { margin: 0 auto 24px; }
    .sistem-intro h2 { font-size: 26px; margin-bottom: 9px; }
    .sistem-intro p { font-size: 13.5px; line-height: 1.5; }
    .sistem-grid--families { grid-template-columns: 1fr; gap: 12px; }
    .sistem-card--family { padding: 22px 20px 20px; }
    .sistem-card--family h3 { font-size: 24px; margin-bottom: 10px; }
    .sistem-card--family p { font-size: 14px; margin-bottom: 16px; }
    .sistem-foot { margin-top: 20px; }
  }

  /* Legacy layout (alte țări): carduri stânga + casă 3D */
  .sistem-layout { display: flex; gap: clamp(28px, 4vw, 56px); align-items: stretch; }
  .sistem-layout > .sistem-grid { flex: 0 0 clamp(420px, calc(48% + 38px), 640px); }
  .sistem-layout .sistem-grid {
    display: flex; flex-direction: column; gap: 16px;
  }
  .sistem-layout .sistem-card {
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    padding: 16px 18px;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease, border-color 0.3s ease, background-color 0.3s ease;
    display: flex; flex-direction: row; align-items: center; gap: 16px;
    text-decoration: none; color: #FFFFFF;
  }
  .sistem-layout .sistem-card-text { display: flex; flex-direction: column; min-width: 0; }
  .sistem-layout .sistem-card h3 { font-family: var(--serif); font-size: 17px; line-height: 1.15; margin: 0 0 4px; color: #FFFFFF; font-weight: 500; }
  .sistem-layout .sistem-card h3 em { font-style: italic; color: var(--red); font-weight: 400; }
  .sistem-layout .sistem-card p { font-size: 12.5px; line-height: 1.42; margin: 0 0 8px; color: rgba(255, 255, 255, 0.7); }
  .sistem-layout .sistem-card-spec { font-size: 11.5px; margin-bottom: 0; color: rgba(255, 255, 255, 0.85); padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); }
  .sistem-layout .sistem-card-spec strong { color: var(--red); font-family: var(--serif); font-size: 15px; }
  .sistem-layout .sistem-card:hover {
    transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,0.35);
    border-color: var(--red); background-color: rgba(255, 26, 59, 0.04);
  }
  .sistem-layout .sistem-card-img {
    flex: 0 0 92px; width: 92px; aspect-ratio: 1; margin-bottom: 0;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .sistem-layout .sistem-card-img img { max-width: 90%; max-height: 90%; object-fit: contain; display: block; }
  .sistem-hero {
    flex: 1; min-width: 0; margin: 0; position: relative;
    background: radial-gradient(circle at center, rgba(255, 26, 59, 0.08) 0%, rgba(15, 14, 12, 0) 70%), rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    padding: 24px 24px 48px; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; overflow: visible;
  }
  .sistem-hero img { display: inline-block; width: auto; max-width: 667px; height: auto; transform: translateX(-4mm); filter: drop-shadow(0 20px 32px rgba(0,0,0,0.35)); }
  .sistem-hero-inner { position: relative; width: 100%; max-width: 580px; display: block; }
  .sistem-hero .sh-layer {
    display: block; width: 100%; height: auto;
    transition: transform .4s cubic-bezier(.22,1,.36,1), filter .35s ease;
  }
  .sistem-hero .sh-sizer { position: relative; z-index: 1; top: 4mm; left: 1mm; }
  .sistem-hero .sh-layer[data-layer="plancher"] { position: absolute; top: 0; left: 0; z-index: 2; transform-origin: 50% 50%; }
  .sistem-hero .sh-layer[data-layer="toit"] { position: absolute; top: 0; left: 0; z-index: 3; transform-origin: 50% 22%; }
  .sistem-hero .sh-layer[data-layer="murs"] { transform-origin: 50% 80%; }
  .sistem-hero.hl-on .sh-layer { filter: brightness(.4) saturate(.75); }
  .sistem-hero.hl-toit .sh-layer[data-layer="toit"] { filter: none; transform: translateY(-25px) scale(1.06); z-index: 5; }
  .sistem-hero.hl-plancher .sh-layer[data-layer="plancher"] { filter: none; transform: scale(1.06); z-index: 5; }
  .sistem-hero.hl-murs .sh-layer[data-layer="murs"] { filter: none; transform: translateY(25px) scale(1.06); z-index: 5; }
  .sistem-layout .sistem-card.is-active { border-color: var(--red); }
  @media (max-width: 968px) {
    .sistem-layout { flex-direction: column; align-items: stretch; }
    .sistem-layout > .sistem-grid { flex: none; }
    .sistem-layout .sistem-grid { gap: 11px; }
    .sistem-layout .sistem-card { padding: 13px 15px; gap: 13px; }
    .sistem-layout .sistem-card-img { flex: 0 0 64px; width: 64px; }
    .sistem-layout .sistem-card h3 { font-size: 14px; }
    .sistem-layout .sistem-card p { font-size: 11px; }
    .sistem-hero { display: none; }
  }

/* --- section --- */

.montaj-section {
    position: relative;
    z-index: 9;
    background: #0F0E0C;
    padding: clamp(120px, 14vh, 170px) 0 clamp(72px, 9vh, 110px);
  }
  .montaj-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10,9,8,0.74) 0%, rgba(10,9,8,0.82) 50%, rgba(10,9,8,0.90) 100%);
  }
  .montaj-stage-wrap {
    position: relative;
    z-index: 3;
    margin: 0 auto;
    width: 100%;
  }
  .montaj-stage {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .montaj-watermark {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    pointer-events: none;
    user-select: none;
    transform: translateY(-38%);
    height: 1em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--serif);
    font-size: clamp(80px, 13vw, 220px);
    font-weight: 500;
    letter-spacing: -0.06em;
    z-index: 7;
  }
  .montaj-watermark .wm-half {
    position: absolute; inset: 0; width: 100%; display: block;
  }
  .montaj-watermark .wm-top {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.24); /* alb semi-transparent — vizibil pe fundal întunecat */
    clip-path: inset(0 0 62% 0);
  }
  .montaj-watermark .wm-bottom {
    color: #FFFFFF;
    opacity: 1;
    text-shadow: 0 2px 26px rgba(0,0,0,0.45);
    clip-path: inset(38% 0 0 0);
  }
  .montaj-intro {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .montaj-intro .bubble-tag {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .montaj-intro h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 10px;
  }
  .montaj-intro h2 em { font-style: italic; color: var(--red); font-weight: 400; }
  .montaj-intro p { font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; }

  .montaj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .montaj-card {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
    position: relative;
  }
  .montaj-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  }
  .montaj-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--cream);
  }
  .montaj-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
  }
  .montaj-card:hover .montaj-img img { transform: scale(1.04); }
  .montaj-num {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--red);
    color: #FFFFFF;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 14px;
    z-index: 2;
    letter-spacing: 0;
  }
  .montaj-card-body { padding: 16px 18px 18px; }
  .montaj-card h3 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  .montaj-card p {
    font-size: 12.5px;
    color: rgba(255,255,255,0.66);
    line-height: 1.5;
    margin: 0;
  }

  .montaj-cta {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #FFFFFF;
    border-radius: 14px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .montaj-cta p {
    font-family: var(--serif);
    font-size: clamp(15px, 1.3vw, 19px);
    line-height: 1.35;
    margin: 0;
    flex: 1;
  }
  .montaj-cta p strong { color: var(--red); font-weight: 500; }
  .montaj-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
  .montaj-cta--systems {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .montaj-cta--systems p {
    flex: none;
    font-size: clamp(16px, 1.4vw, 20px);
  }
  .montaj-cta--systems .montaj-cta-actions {
    justify-content: center;
  }

  @media (max-width: 1100px) {
    .montaj-grid { grid-template-columns: repeat(2, 1fr); }
    .montaj-stage { padding: 60px 32px 40px; }
  }
  @media (max-width: 700px) {
    /* Cele patru etape stau 2×2, nu într-un şir lung de derulat. */
    .montaj-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .montaj-stage { padding: 50px 20px 32px; }
    .montaj-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 28px; }
    /* Boutons : centrés + même largeur sur mobile */
    .montaj-cta-actions { flex-direction: column; align-items: center; width: 100%; gap: 12px; }
    .montaj-cta-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
  }

/* --- section --- */

.histoire-section {
    position: relative;
    background: var(--cream);
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(230px, 30vh, 340px) 0 clamp(80px, 10vh, 120px);
    overflow: hidden;
  }
  /* Bande sombre propre à HISTOIRES (indépendante du montage/vidéo au-dessus)
     — la moitié haute blanche du titre se pose dessus, la moitié basse sur le crème */
  .histoire-band {
    position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    font-size: clamp(72px, 13vw, 240px);
    height: 0.38em;
    background: #14110E;
    z-index: 0; pointer-events: none;
  }
  /* Titre coupé "HISTOIRES" — haut blanc (sur bande sombre), bas encre (sur crème) */
  .histoire-watermark {
    position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    transform: translateY(0);
    height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-size: clamp(72px, 13vw, 240px);
    font-weight: 500; letter-spacing: -0.06em; z-index: 8;
    pointer-events: none; user-select: none; white-space: nowrap;
  }
  .histoire-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .histoire-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.6); clip-path: inset(0 0 62% 0); }
  .histoire-watermark .wm-bottom { color: var(--ink); clip-path: inset(38% 0 0 0); }

  .histoire-wrap {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1400px; margin: 0 auto; width: 100%;
  }
  /* PHOTO à gauche */
  .histoire-photo {
    position: relative; margin: 0;
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(20,18,15,0.22);
    aspect-ratio: 4 / 4.47;
  }
  .histoire-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .histoire-photo-scrim { 
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(15,14,12,0.80) 100%);
  }
  .histoire-photo-badge {
    position: absolute; left: 24px; right: 24px; bottom: 24px;
    display: flex; align-items: center; gap: 14px; color: #fff;
  }
  .histoire-photo-badge > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.85); flex-shrink: 0; }
  .histoire-photo-badge strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
  .histoire-photo-badge .hp-loc { display: block; font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
  .histoire-verified { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #7BE0A3; text-transform: uppercase; }

  /* DÉTAILS à droite */
  .histoire-detail { max-width: 600px; }
  .histoire-detail .testimonial-tag { margin-bottom: 18px; background: var(--red-soft); color: var(--red); }
  .histoire-stars { color: var(--red); font-size: 18px; letter-spacing: 3px; margin-bottom: 16px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
  .histoire-date { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gray); text-transform: none; }
  .histoire-quote {
    font-family: var(--serif); font-size: clamp(18px, 1.8vw, 23px);
    line-height: 1.5; color: var(--ink); font-weight: 400; letter-spacing: -0.005em;
    margin-bottom: 22px;
  }
  .histoire-quote em { font-style: italic; color: var(--red); font-weight: 400; }
  /* Galerie de photos « ajoutées par le client » — look avis authentique */
  .histoire-gallery-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
  .histoire-gallery { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
  .histoire-gallery img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: transform .2s ease; }
  .histoire-gallery img:hover { transform: translateY(-2px); }
  .histoire-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
  .histoire-stat { text-align: center; padding: 16px 8px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
  .histoire-stat strong { display: block; font-family: var(--serif); font-size: 26px; color: var(--red); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
  .histoire-stat span { display: block; font-size: 10px; color: var(--gray); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; font-weight: 600; }
  .histoire-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .histoire-review-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--red); color: #fff; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: 16px; font-weight: 600;
    padding: 16px 32px; border-radius: 100px;
    box-shadow: 0 12px 30px rgba(200,16,46,0.30);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .histoire-review-btn:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(200,16,46,0.42); }
  .histoire-link { font-size: 13px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap .2s ease, color .2s ease; }
  .histoire-link:hover { gap: 12px; color: var(--red); }
  .histoire-cta-note { display: block; width: 100%; margin-top: 14px; font-size: 12px; color: var(--gray); }

  @media (max-width: 968px) {
    .histoire-wrap { grid-template-columns: 1fr; gap: 36px; }
    .histoire-photo { aspect-ratio: 4 / 3; }
    .histoire-watermark { font-size: clamp(56px, 16vw, 120px); }
  }
  @media (max-width: 560px) {
    .histoire-stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* Carusel testimoniale */
  .histoire-carousel { position: relative; }
  .histoire-slide { display: none; }
  .histoire-slide.is-active { display: grid; animation: histFade .5s ease both; }
  @keyframes histFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .histoire-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
  .histoire-arrow {
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  }
  .histoire-arrow:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
  .histoire-dots { display: flex; align-items: center; gap: 9px; }
  .histoire-dot {
    width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: var(--border); transition: width .25s ease, background .25s ease, border-radius .25s ease;
  }
  .histoire-dot.is-active { width: 26px; border-radius: 5px; background: var(--red); }
  .histoire-carousel .histoire-actions { justify-content: center; margin-top: 30px; }

  /* === Refonte CONFIANCE : photo plein écran + carte glass à droite (style Présence) === */
  .histoire-section { position: relative; padding: 0; border: 0; background: #0F0E0C; min-height: clamp(620px, 90vh, 1000px); overflow: hidden; display: block; }
  .histoire-band { display: none; }
  .histoire-watermark { top: 0; transform: translateY(0); z-index: 6; }
  .histoire-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.5); clip-path: inset(0 0 50% 0); }
  .histoire-watermark .wm-bottom { color: rgba(255,255,255,0.13); clip-path: inset(50% 0 0 0); }

  .histoire-carousel { position: static; }
  .histoire-track { position: absolute; inset: 0; z-index: 0; }
  .histoire-slide { position: absolute; inset: 0; display: none; }
  .histoire-slide.is-active { display: block; animation: histFade .6s ease both; }
  .histoire-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
  .histoire-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,7,6,0.10) 0%, rgba(8,7,6,0) 42%),
                linear-gradient(0deg, rgba(8,7,6,0.55) 0%, rgba(8,7,6,0) 46%); }

  .histoire-card { position: absolute; z-index: 3; top: 50%; right: clamp(20px, 4vw, 72px); transform: translateY(-50%);
    width: clamp(340px, 38vw, 540px); max-width: calc(100% - 40px);
    border: 1.5px solid #FFFFFF; border-radius: 18px; padding: 5mm;
    box-shadow: 0 30px 80px rgba(0,0,0,0.34); overflow: hidden; }
  .histoire-card-inner { background: rgba(247,244,237,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 12px; padding: 26px 26px 22px; }
  .histoire-card .testimonial-tag { display: inline-block; margin-bottom: 14px; background: var(--red-soft); color: var(--red); padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .histoire-card .histoire-stars { color: var(--red); font-size: 18px; letter-spacing: 3px; margin-bottom: 16px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
  .histoire-card .histoire-date { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gray); }
  .histoire-card .histoire-quote { font-family: var(--serif); font-size: clamp(19px, 1.85vw, 26px); line-height: 1.34; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 22px; }
  .histoire-card .histoire-quote em { font-style: italic; color: var(--red); font-weight: 400; }
  .histoire-author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(26,23,20,0.14); }
  .histoire-author > img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex-shrink: 0; }
  .histoire-author strong { display: block; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.2; }
  .histoire-author .hp-loc { display: block; font-size: 13px; color: var(--gray); margin-top: 2px; }
  .histoire-author .histoire-verified { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #2e9c5a; text-transform: uppercase; }

  .histoire-nav { position: absolute; z-index: 4; left: clamp(22px, 5vw, 64px); bottom: clamp(118px, 17vh, 152px); display: flex; align-items: center; gap: 18px; margin: 0; }
  .histoire-arrow { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .histoire-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .histoire-dot { background: rgba(255,255,255,0.45); }
  .histoire-dot.is-active { background: #fff; }
  .histoire-carousel .histoire-actions { position: absolute; z-index: 4; left: clamp(22px, 5vw, 64px); bottom: clamp(44px, 8vh, 78px); margin: 0; justify-content: flex-start; max-width: min(620px, 90%); }
  .histoire-carousel .histoire-link { color: #fff; }
  .histoire-carousel .histoire-link:hover { color: #fff; opacity: .85; }
  .histoire-carousel .histoire-cta-note { color: rgba(255,255,255,0.82); }

  @media (max-width: 968px) {
    .histoire-section { min-height: 100svh; }
    .histoire-card { top: auto; bottom: clamp(150px, 24vh, 220px); right: 50%; transform: translateX(50%); width: min(92%, 480px); }
    .histoire-card-inner { padding: 20px 20px 18px; }
    .histoire-nav { left: 50%; transform: translateX(-50%); bottom: clamp(96px, 16vh, 130px); }
    .histoire-carousel .histoire-actions { left: 50%; transform: translateX(-50%); bottom: clamp(28px, 6vh, 56px); justify-content: center; text-align: center; }
  }

/* --- section --- */

.conf-wrap { position: relative; z-index: 10; }   /* au-dessus de montaj-section (z9) pour que la moitié haute du watermark soit visible */
  .conf-section { position: relative; background: var(--cream); padding: clamp(88px,9vw,130px) 0 clamp(64px,7vw,96px); }
  .conf-watermark { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-38%); height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-weight: 500; font-size: clamp(64px,12vw,200px); letter-spacing: -0.05em; z-index: 4; pointer-events: none; user-select: none; white-space: nowrap; }
  .conf-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .conf-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.55); clip-path: inset(0 0 62% 0); }     /* sur la section sombre au-dessus */
  .conf-watermark .wm-bottom { color: transparent; -webkit-text-stroke: 1.5px rgba(26,23,20,0.12); clip-path: inset(38% 0 0 0); }  /* ghost encre sur le crème */
  .conf-inner { position: relative; z-index: 2; }
  .conf-head { text-align: center; margin-bottom: clamp(36px,5vw,60px); }
  .conf-overline { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
  .conf-sub { font-family: var(--serif); font-size: clamp(22px,2.4vw,34px); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; margin: 0; }
  .conf-sub em { font-style: italic; color: var(--red); font-weight: 400; }

  /* Vidéo en vedette */
  .conf-feature { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16/9; max-height: 620px; margin: 0 auto clamp(28px,3.5vw,44px); box-shadow: 0 30px 80px rgba(0,0,0,0.20); cursor: pointer; background:#0F0E0C; }
  .conf-feature video, .conf-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Vidéo verticale (téléphone) : affichée entière + fond flou de la même vidéo (style Reels) */
  .conf-feature.is-portrait > video:not(.conf-vbg), .conf-feature.is-portrait > img:not(.conf-vbg) { object-fit: contain; }
  .conf-feature .conf-vbg { object-fit: cover; filter: blur(26px) brightness(0.62); transform: scale(1.2); }
  .conf-feature-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,7,6,0.78) 0%, rgba(8,7,6,0.12) 46%, rgba(8,7,6,0) 70%); z-index: 1; }
  .conf-vbadge { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color:#fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .conf-vbadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,0.3); }
  .conf-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; width: clamp(64px,7vw,88px); height: clamp(64px,7vw,88px); border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--red); display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
  .conf-play svg { width: 38%; height: 38%; margin-left: 8%; }
  .conf-feature:hover .conf-play { transform: translate(-50%,-50%) scale(1.08); }
  .conf-fcaption { position: absolute; left: 0; bottom: 0; z-index: 3; padding: clamp(22px,3vw,40px); color: #fff; max-width: 760px; }
  .conf-fcaption .conf-stars { color: #ffd34d; font-size: 17px; letter-spacing: 3px; margin-bottom: 12px; }
  .conf-fcaption .conf-fquote { font-family: var(--serif); font-size: clamp(20px,2.3vw,32px); line-height: 1.28; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
  .conf-fcaption .conf-fquote em { font-style: italic; color: #fff; font-weight: 400; }
  .conf-author { display: flex; align-items: center; gap: 13px; }
  .conf-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.85); flex-shrink: 0; }
  .conf-author .ca-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
  .conf-author .ca-loc { display: block; font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
  .conf-author .ca-verif { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #7BE0A3; text-transform: uppercase; }

  /* Mur de cartes (scroll horizontal) */
  .conf-wall { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .conf-card { flex: 0 0 clamp(280px,30vw,360px); scroll-snap-align: start; border-radius: 18px; overflow: hidden; background: var(--cream-light); border: 1px solid var(--border); display: flex; flex-direction: column; }
  .conf-card--text { padding: 26px 24px; }
  .conf-card--text .conf-stars { color: var(--red); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; }
  .conf-card--text .conf-cquote { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); font-weight: 500; margin: 0 0 18px; flex: 1; }
  .conf-card--text .conf-cquote em { font-style: italic; color: var(--red); font-weight: 400; }
  .conf-card .conf-cauthor { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .conf-card .conf-cauthor img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .conf-card .conf-cauthor .ca-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
  .conf-card .conf-cauthor .ca-loc { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }
  .conf-card .conf-cauthor .ca-verif { display: inline-flex; gap: 4px; margin-top: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #2e9c5a; text-transform: uppercase; }
  .conf-card--video { position: relative; aspect-ratio: 9/16; cursor: pointer; background:#0F0E0C; }
  .conf-card--video video, .conf-card--video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .conf-card--video .conf-feature-scrim { z-index: 1; }
  .conf-card--video .conf-vbadge { top: 12px; left: 12px; padding: 4px 9px; font-size: 10.5px; }
  .conf-card--video .conf-play { width: 56px; height: 56px; }
  .conf-card--video .conf-ccap { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 16px; color: #fff; }
  .conf-card--video .conf-ccap .conf-stars { color: #ffd34d; font-size: 14px; letter-spacing: 2px; margin-bottom: 6px; }
  .conf-card--video .conf-ccap .ca-name { display: block; font-size: 14px; font-weight: 600; }
  .conf-card--video .conf-ccap .ca-loc { display: block; font-size: 12px; opacity: 0.88; }

  .conf-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(34px,4vw,52px); }
  .conf-note { width: 100%; text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--gray); }

  /* Lightbox */
  .conf-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(8,7,6,0.92); display: none; align-items: center; justify-content: center; padding: 24px; }
  .conf-lightbox.is-open { display: flex; }
  .conf-lightbox video { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); background:#000; }
  .conf-lightbox-close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); color: #fff; font-size: 22px; cursor: pointer; }

  /* Carusel : un seul avis à la fois, même grand cadre (vidéo ou texte) */
  .conf-track { position: relative; }
  .conf-slide { display: none; }
  .conf-slide.is-active { display: block; animation: confFade .55s ease both; }
  @keyframes confFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .conf-slide .conf-feature { margin: 0 auto; }
  .conf-feature--text .conf-vbadge::before { display: none; }

  /* Pe telefon, citatul de 20 px acoperea aproape tot filmul şi ascundea butonul
     de redare. Textul scade, iar caseta lasă imaginea să se vadă. */
  @media (max-width: 809px) {
    .conf-fcaption { padding: 12px 13px 13px; max-width: 100%; }
    .conf-fcaption .conf-fquote { font-size: 13px; line-height: 1.32; margin: 0 0 7px; }
    .conf-author { gap: 8px; }
    .conf-author img { width: 30px; height: 30px; }
    /* Nume, localitate şi confirmarea pe un singur rând: trei rânduri separate
       mâncau jumătate din caseta de pe film. */
    .conf-author .ca-name { display: inline; font-size: 11.5px; }
    /* Rolul şi oraşul dispar pe telefon: numele firmei plus „filmat pe şantier"
       intră pe un rând, iar cu ele se rupea în două. Pe calculator rămân. */
    .conf-author .ca-loc { display: none; }
    .conf-author .ca-verif { display: inline-flex; font-size: 9px; margin: 0 0 0 6px; }
    .conf-vbadge { top: 12px; left: 12px; padding: 4px 9px; font-size: 9.5px; }
    .conf-play { width: 56px; height: 56px; }
  }

  .conf-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
  .conf-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--ink);
    font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; }
  .conf-arrow:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
  .conf-dots { display: flex; align-items: center; gap: 9px; }
  .conf-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--border); transition: width .25s ease, background .25s ease, border-radius .25s ease; }
  .conf-dot.is-active { width: 26px; border-radius: 5px; background: var(--red); }

  /* Barre de navigation superposée sur la vidéo, centrée en bas : flèche · points · flèche */
  .conf-feature-nav { position: absolute; z-index: 5; bottom: 15mm; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
    background: rgba(0,0,0,0.32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 999px; }
  .conf-feature-nav .conf-arrow { width: 38px; height: 38px; font-size: 20px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.5); color: #fff; }
  .conf-feature-nav .conf-arrow:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .conf-feature-nav .conf-dots { display: flex; align-items: center; gap: 8px; }
  .conf-feature-nav .conf-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,0.5); transition: width .25s ease, background .25s ease, border-radius .25s ease; }
  .conf-feature-nav .conf-dot.is-active { width: 22px; border-radius: 5px; background: #fff; }

  @media (max-width: 760px) {
    .conf-feature { aspect-ratio: 4/3; }
    /* Pe telefon, bara de navigare stătea centrată jos, fix peste numele firmei.
       O mutăm în colţul din dreapta-jos şi o facem mică — textul rămâne liber. */
    .conf-feature-nav { bottom: 10px; right: 10px; left: auto; transform: none;
      gap: 6px; padding: 4px 7px; }
    .conf-feature-nav .conf-arrow { width: 24px; height: 24px; font-size: 13px; }
    .conf-feature-nav .conf-dot { width: 5px; height: 5px; }
    .conf-feature-nav .conf-dot.is-active { width: 13px; }
    /* Doar rândul de jos (nume · localitate) ocoleşte bara din colţ — citatul
       rămâne pe toată lăţimea, altfel se rupea pe un rând în plus. */
    .conf-author { padding-right: 104px; }
  }

/* --- section --- */

.proces-section {
    background: var(--cream);
    padding: 80px 0;
  }
  .proces-stage-wrap {
    position: relative;
    margin: 60px auto 0;
    max-width: 1480px;
  }
  .proces-stage {
    position: relative;
    background: var(--cream-light);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 64px 48px 56px;
    overflow: visible;
  }
  .proces-watermark {
    position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw;
    pointer-events: none; user-select: none; transform: translateY(-38%);
    height: 1em; line-height: 1; text-align: center; text-transform: uppercase;
    font-family: var(--serif); font-size: clamp(64px, 11vw, 180px);
    font-weight: 500; letter-spacing: -0.06em; z-index: 2;
  }
  .proces-watermark .wm-half { position: absolute; inset: 0; width: 100%; display: block; }
  .proces-watermark .wm-top { color: transparent; -webkit-text-stroke: 1.4px rgba(15,15,15,0.30); clip-path: inset(0 0 62% 0); }
  .proces-watermark .wm-bottom { color: var(--cream-dark); opacity: 0.65; clip-path: inset(38% 0 0 0); }
  .proces-intro {
    max-width: 760px; margin: 0 auto 48px; text-align: center;
  }
  .proces-intro .bubble-tag {
    display: inline-block; background: var(--red-soft); color: var(--red);
    padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px;
  }
  .proces-intro h2 {
    font-family: var(--serif); font-size: clamp(28px, 3.2vw, 44px); font-weight: 500;
    color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 14px;
  }
  .proces-intro h2 em { font-style: italic; color: var(--red); font-weight: 400; }
  .proces-intro p { font-size: 15px; color: var(--gray); line-height: 1.6; margin: 0; }

  .proces-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
  }
  .proces-step {
    background: white;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px 22px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .proces-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.06);
  }
  .proces-step-num {
    width: 38px; height: 38px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 18px;
  }
  .proces-step h4 {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .proces-step h4 em { font-style: italic; color: var(--red); font-weight: 400; }
  .proces-step p {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.5;
    margin: 0 0 12px;
  }
  .proces-step-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  @media (max-width: 1100px) {
    .proces-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    .proces-grid { grid-template-columns: 1fr; }
    .proces-stage { padding: 48px 24px 36px; }
  }

/* --- section --- */

.avis-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,14,12,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: none; align-items: flex-start; justify-content: center;
    padding: clamp(16px,5vh,64px) 16px; overflow-y: auto;
  }
  .avis-overlay.open { display: flex; }
  .avis-modal {
    background: var(--cream-light, #FDFBF7); color: var(--ink, #0F0F0F);
    width: 100%; max-width: 560px; border-radius: 22px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.4); position: relative;
    padding: clamp(24px,4vw,40px); font-family: var(--sans);
    animation: avisIn .28s cubic-bezier(.22,1,.36,1);
  }
  @keyframes avisIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
  .avis-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
  .avis-close:hover { background: var(--cream-dark, #EDE8DC); }
  .avis-modal h3 { font-family: var(--serif); font-size: clamp(24px,3vw,32px); font-weight: 600; margin: 0 0 4px; }
  .avis-modal .avis-sub { font-size: 13.5px; color: var(--muted,#6b6457); margin-bottom: 22px; }
  .avis-field { margin-bottom: 16px; }
  .avis-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted,#6b6457); margin-bottom: 7px; }
  .avis-field input[type=text], .avis-field select, .avis-field textarea {
    width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; outline: none;
  }
  .avis-field input:focus, .avis-field select:focus, .avis-field textarea:focus { border-color: var(--red); }
  .avis-field textarea { resize: vertical; min-height: 96px; }
  .avis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  /* étoiles */
  .avis-stars { display: inline-flex; gap: 6px; }
  .avis-stars button { background: none; border: 0; cursor: pointer; font-size: 30px; line-height: 1; color: #d9d2c4; padding: 0; transition: color .12s, transform .12s; }
  .avis-stars button:hover { transform: scale(1.12); }
  .avis-stars button.on { color: var(--red); }
  /* upload */
  .avis-drop { border: 1.5px dashed var(--border); border-radius: 12px; padding: 16px; text-align: center;
    font-size: 13px; color: var(--muted,#6b6457); cursor: pointer; background: #fff; }
  .avis-drop:hover { border-color: var(--red); color: var(--red); }
  .avis-drop input { display: none; }
  .avis-toggle { display: inline-flex; background: var(--cream-dark,#EDE8DC); border-radius: 100px; padding: 4px; gap: 4px; }
  .at-opt { border: 0; background: none; padding: 9px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--muted,#6b6457); cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
  .at-opt.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(0,0,0,0.12); }
  .avis-drop--video { border-color: var(--red); color: var(--red); background: var(--red-soft, #FBE9EC); font-weight: 600; }
  .avis-drop--video:hover { background: #f8dde2; }
  .avis-video-preview { margin-top: 10px; display: none; }
  .avis-video-preview.has { display: block; }
  .avis-video-preview video { width: 100%; max-height: 200px; border-radius: 12px; background: #000; display: block; }
  .avis-video-remove { margin-top: 8px; background: none; border: 0; color: var(--red); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
  .avis-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .avis-thumb { position: relative; width: 70px; height: 70px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
  .avis-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .avis-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0;
    background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
  .avis-profile-row { display: flex; align-items: center; gap: 14px; }
  .avis-profile-pic { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--cream-dark,#EDE8DC); flex-shrink: 0; }
  .avis-submit { width: 100%; margin-top: 8px; background: var(--red); color: #fff; border: 0; border-radius: 100px;
    font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 15px; cursor: pointer; box-shadow: 0 12px 30px rgba(200,16,46,.3); }
  .avis-submit:hover { background: var(--red-dark, #A60E13); }
  .avis-note { font-size: 11.5px; color: var(--muted,#6b6457); text-align: center; margin-top: 12px; }
  .pb-form-consent { margin-top: 10px; }
  .pb-consent-label { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--muted,#6b6457); cursor: pointer; }
  .pb-consent-label input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--red); }
  .pb-consent-label a { color: var(--red); }
  .avis-err { color: var(--red); font-size: 12.5px; margin-top: 6px; display: none; }
  /* état merci */
  .avis-thanks { display: none; text-align: center; padding: 20px 0; }
  .avis-thanks .at-check { width: 64px; height: 64px; border-radius: 50%; background: var(--red-soft,#FBE9EC); color: var(--red);
    display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 18px; }
  .avis-thanks h3 { margin-bottom: 8px; }
  .avis-thanks p { font-size: 14px; color: var(--muted,#6b6457); }
  .avis-modal.sent .avis-form { display: none; }
  .avis-modal.sent .avis-thanks { display: block; }

/* --- section --- */

.mobile-contact-bar { display: none; }
  @media (max-width: 768px) {
    .mobile-contact-bar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
      display: flex;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-contact-bar .mcb-btn {
      flex: 1 1 0;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      padding: 15px 8px;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
      text-decoration: none; color: #fff;
    }
    .mobile-contact-bar .mcb-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
    .mobile-contact-bar .mcb-call { background: #C8102E; }
    .mobile-contact-bar .mcb-call:active { background: #a60d26; }
    .mobile-contact-bar .mcb-email { background: #1a1a1a; }
    .mobile-contact-bar .mcb-email:active { background: #000; }
    body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  }

/* ===========================================================================
   TYPOGRAPHIE UNIFIÉE — un seul font (Inter), titres sans-serif bold uppercase,
   tailles réduites (décision client, 30 juil). Les watermarks géants (classes
   dédiées, pas des h1-h4) gardent leurs tailles.
   =========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--sans) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
h1 { font-size: clamp(28px, 4.2vw, 56px) !important; }
h2 { font-size: clamp(22px, 3vw, 40px) !important; }
h3 { font-size: clamp(15px, 1.6vw, 21px) !important; }
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--sans) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  color: inherit !important;
}

/* Ambele rânduri, scris plin roşu (regula de bază face acelaşi lucru — păstrată
   ca să bată orice stil moştenit) */
.hero-teaser .hero-teaser-line:last-child {
  -webkit-text-stroke: 0;
  text-stroke: 0;
  color: var(--red);
}

/* Titre héros (état 2) plus petit — tient sur deux lignes exactement (demande client) */
.hero-full-content h1 {
  font-size: clamp(22px, 2.9vw, 38px) !important;
  line-height: 1.15;
}

/* Section UN SEUL SYSTÈME : seul le titre gras reste — ligne 1 noire, ligne 2 rouge (demande client) */
.morph-overlay h2 { color: var(--ink) !important; }
.morph-overlay h2 em { color: var(--red) !important; }

/* Cartes du slider POLISTIBRICK vs CLASSIQUE : titre sur UNE ligne — texte plus petit,
   cartes un peu plus larges (demande client) */
.info-card { width: clamp(320px, 34vw, 500px); max-width: 94%; }
.info-card h4, .info-card .h4-card-label { font-size: 14px !important; white-space: nowrap; letter-spacing: 0; }
.card-team, .card-materials { font-size: 12.5px; }

/* Punte de la grila de sisteme spre pagina de preţuri */
.sistem-pret-punte {
  text-align: center;
  margin: 26px auto 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray, #6b6b6b);
}
.sistem-pret-punte a {
  color: var(--red, #e2211c);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.sistem-pret-punte a:hover { opacity: .78; }

/* Link direct în meniul ☰ — la acelaşi nivel cu titlurile de grup, fără acordeon.
   Selectorul urcă pe #navDrawer ca să bată `.nav-drawer a` (regula moştenită de
   la vechiul sertar de telefon, linia ~576); altfel „Preţuri" ieşea cu alt
   spaţiu şi altă grosime decât „Produse" şi „Soluţii" — dar numai pe prima
   pagină, fiindcă subpaginile nu încarcă fişierul ăsta. */
#navDrawer .nav-drawer-direct {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; color: #000; text-decoration: none;
  padding: 13px 12px; border-radius: 10px; transition: background .15s ease;
}
#navDrawer .nav-drawer-direct:hover { background: rgba(255,255,255,0.55); }

/* Banda legală din footer — măruntă, pe un rând */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; align-items: center; }
.footer-legal-links a { color: #ffffff; text-decoration: none; }
.footer-legal-links a:hover { color: var(--red); }


/* ─────────────────────────────────────────────────────────────────────────────
   BUTOANE PE TELEFON — aceeaşi mărime ca pe restul site-ului
   Prima pagină îşi are stilurile aici, cu reguli proprii (blocul „mobile text
   scale-down") care micşorau butoanele la 12 px. Le aducem la mărimea unică:
   42 px înălţime, font 13 px. Vezi regula pereche din site.css.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* .nav-cta-devis NU intră aici: butonul din bara de sus rămâne mic
     intenţionat, ca antetul să nu crească pe telefon. Era listat şi umfla
     antetul la 42 px, fix invers faţă de comentariul de mai jos. */
  .btn:not(.nav-cta-devis),
  .hero-actions .btn,
  .btn-large,
  .btn-red,
  .btn-primary:not(.nav-cta-devis),
  .btn-ghost,
  .btn-on-dark,
  .btn-on-dark-ghost,
  .cinq-cta,
  .presence-cta {
    padding: 11px 18px !important;
    font-size: 13px !important;
    min-height: 42px;
    line-height: 1.2;
  }
  /* Butoanele din sertarul de meniu — aceeaşi mărime. Cel din bara de sus
     rămâne mai mic intenţionat, ca antetul să nu crească. */
  .nav-drawer-cta .btn { font-size: 13px !important; padding: 11px 18px !important; }
}