/* ============================================================================
   BINET MEDICAL — Stylesheet
   ============================================================================
   Palette: Intense Cherry / Dusty Rose / Cotton Candy / Grey
   Framework: Bootstrap 5.3 (loaded via CDN in index.html)
   Fonts: Inter (Google Fonts)
   Icons: Font Awesome 6

   HOW TO CUSTOMIZE
   ----------------
   • Brand colors → edit the CSS variables in section 1 (they cascade everywhere)
   • Section spacing → .section-padding in section 3
   • Card look/feel → sections 10 (products), 11 (services), 12 (why us)
   • Ambient effects → section 25 (dark/soft/white/cta variants)
   • Motion → all @keyframes live in sections 17 and 25 (bottom)

   TABLE OF CONTENTS
   -----------------
    1. COLOR VARIABLES         14. CTA
    2. RESET & BASE            15. CONTACT
    3. UTILITIES               16. FOOTER
    4. BUTTONS                 17. ANIMATIONS (core)
    5. NAVBAR                  18. RESPONSIVE
    6. HERO                    20. BACK-TO-TOP
    6b. HERO CANVAS            22. FOCUS VISIBILITY (a11y)
    7. HERO DESKTOP LOGO       23. LANGUAGE SWITCHER
    8. PROMO CAROUSEL          24. MOBILE MENU
    8b. STATS BAR              25. FINAL ENHANCEMENTS
    9. ABOUT                       - Typography polish
   10. PRODUCTS                    - Hero parallax vars
   11. SERVICES                    - Ambient backgrounds (.bm-ambient)
   12. WHY US                      - Ambient keyframes
   13. BRANDS MARQUEE              - Responsive overrides
   ============================================================================ */

/* ============================================================================
   1. COLOR VARIABLES
   ------------------
   Change any hex here and it will cascade site-wide. --gradient-1 is used
   for primary buttons, links, active states, and hero highlights.
   ============================================================================ */
:root {
  /* Neutrals & backgrounds */
  --navy: #1c1820;
  --navy-light: #261f2a;
  --white: #ffffff;
  --off-white: #fdf7f8;
  --gray-light: #ede6e8;
  --gray: #6e6f73;

  /* Brand cherry palette */
  --blue: #be3745; /* Historic name — actually the cherry red */
  --teal: #d67179; /* Historic name — actually dusty rose    */
  --teal-light: #e4a0a6; /* Historic name — actually cotton candy  */

  /* Text */
  --text-dark: #1a1a2e;
  --text-body: #4a5568;

  /* Gradients & shadows */
  --gradient-1: linear-gradient(135deg, #be3745 0%, #e4a0a6 100%);
  --gradient-2: linear-gradient(135deg, #241e29 0%, #382735 50%, #241e29 100%);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-blue: 0 10px 40px rgba(190, 55, 69, 0.2);

  /* Shape tokens */
  --radius: 16px;
  --radius-sm: 10px;
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 90px; /* Prevents fixed navbar from covering anchor targets */
}
body {
  font-family: "Inter", sans-serif;
  color: var(--text-body);
  overflow-x: hidden;
  background: var(--white);
  max-width: 100vw;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
}

/* Custom brand-tinted scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--navy);
}
::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 4px;
}

/* On mobile the native scrollbar looks better than our themed one */
@media (max-width: 991px) {
  ::-webkit-scrollbar {
    display: none;
  }
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

/* ============================================================================
   3. UTILITIES — Section spacing + labels + titles
   ============================================================================ */
.section-padding {
  padding: 100px 0;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
  position: relative;
  padding-left: 40px;
}
/* The little accent bar to the left of every section label */
.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 2px;
  background: var(--gradient-1);
  transform: translateY(-50%);
}
/* Modifier for centered labels (removes the left accent) */
.section-label--center {
  padding-left: 0;
}
.section-label--center::before {
  display: none;
}

.section-title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
}
.section-subtitle {
  font-size: 1.1rem;
  color: var(--gray);
  max-width: 600px;
  line-height: 1.7;
}

/* ============================================================================
   4. BUTTONS
   ------------
   Three flavors:
     .btn-primary-custom  — Filled gradient (main CTA)
     .btn-outline-custom  — Outlined (secondary; hero variant flips colors)
     .btn-cta             — White pill on dark bg (CTA section only)
   ============================================================================ */
.btn-primary-custom {
  background: var(--gradient-1);
  color: #fff;
  border: none;
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Reverse-gradient fill that slides in on hover */
.btn-primary-custom::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e4a0a6, #be3745);
  transition: var(--transition);
  z-index: -1;
}
.btn-primary-custom:hover::before {
  left: 0;
}
.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
  color: #fff;
}

.btn-outline-custom {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 12px 34px;
  border-radius: 50px;
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-custom:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue);
}

/* Same button, but used inside the dark hero — needs light borders */
.btn-outline-hero {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-cta {
  background: #fff;
  color: #000;
  padding: 16px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  transition: var(--transition);
  animation: ctaPulse 2.5s ease-in-out infinite;
}
.btn-cta:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  color: #000;
}

/* ============================================================================
   5. NAVBAR
   ---------
   Transparent by default; JS adds .scrolled once the user scrolls past
   CONFIG.navScrolledAfter (see main.js) to fade in the dark backdrop
   and shrink padding.
   ============================================================================ */
.navbar-custom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 20px 0;
  transition: var(--transition);
  background: transparent;
}
.navbar-custom.scrolled {
  background: rgba(28, 24, 32, 0.95);
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.navbar-brand-custom {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: 1px;
  text-decoration: none;
}
.navbar-brand-custom span {
  color: var(--teal);
}

/* Small navbar logo — hidden until user scrolls, then swaps in for the big hero logo */
.navbar-logo {
  height: 50px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.92);
  pointer-events: none;
  transition: var(--transition);
}
.navbar-custom.logo-visible .navbar-logo {
  height: 36px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Nav links — animated underline on hover */
.navbar-custom .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 20px !important;
  transition: var(--transition);
  position: relative;
}
.navbar-custom .nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.navbar-custom .nav-link:hover {
  color: #fff !important;
}
.navbar-custom .nav-link:hover::after {
  transform: scaleX(1);
}

/* Hamburger button (visible < 992px). JS toggles .active to morph into an X */
.navbar-toggler-custom {
  border: none;
  background: none;
  padding: 8px;
  cursor: pointer;
}
.navbar-toggler-custom span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
}

/* "Contact" nav link styled as a pill CTA */
.nav-cta {
  background: var(--gradient-1) !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 8px 24px !important;
  margin-left: 10px;
}
.nav-cta::after {
  display: none !important;
}
.nav-cta:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-blue);
}

/* ============================================================================
   6. HERO
   -------
   The three --hero-parallax-* variables are written by main.js → initHeroParallax()
   and consumed by transforms further down in section 25.
   ============================================================================ */
.hero {
  min-height: clamp(720px, 92svh, 900px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--gradient-2);
  height: auto;
  padding: 0;
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
  --hero-parallax-tilt: 0deg;
  perspective: 1200px;
}
/* Two large glow blobs that "breathe" behind the content */
.hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 160%;
  background: radial-gradient(
    ellipse,
    rgba(190, 55, 69, 0.18),
    transparent 70%
  );
  animation: heroPulse 8s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 60%;
  height: 120%;
  background: radial-gradient(
    ellipse,
    rgba(214, 113, 121, 0.14),
    transparent 70%
  );
  animation: heroPulse 10s ease-in-out infinite reverse;
}

/* Decorative floating shape blobs (5 circles) */
.hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
}
.shape-1 {
  width: 400px;
  height: 400px;
  top: 10%;
  right: 5%;
  background: var(--blue);
  animation: slowFloat1 25s ease-in-out infinite;
}
.shape-2 {
  width: 250px;
  height: 250px;
  bottom: 20%;
  left: 10%;
  background: var(--teal);
  animation: slowFloat2 20s ease-in-out infinite;
}
.shape-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  left: 30%;
  background: #fff;
  animation: slowFloat3 18s ease-in-out infinite;
}
.shape-4 {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 25%;
  background: var(--teal-light);
  animation: slowFloat1 15s ease-in-out infinite reverse;
}
.shape-5 {
  width: 200px;
  height: 200px;
  top: 5%;
  left: 55%;
  border: 2px solid rgba(190, 55, 69, 0.25);
  background: transparent;
  animation: slowFloat2 22s ease-in-out infinite reverse;
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: 92px;
  padding-bottom: 78px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 50px;
  color: var(--teal-light);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
}
.hero-badge i {
  font-size: 0.7rem;
  color: #22c55e;
}

.hero h1 {
  font-size: clamp(3rem, 4.6vw, 4.65rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.035em;
}
/* Gradient-fill effect on the highlighted word */
.hero h1 .highlight {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  max-width: 540px;
  margin-bottom: 40px;
}
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-visual {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Glassmorphism card on the right side of the hero */
.hero-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 430px;
  position: relative;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-card-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  margin-bottom: 24px;
  box-shadow: var(--shadow-blue);
}
.hero-card h2 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.hero-card p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.hero-card-features {
  list-style: none;
  padding: 0;
}
.hero-card-features li {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-card-features li i {
  color: var(--teal);
  font-size: 0.75rem;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 3;
}

/* ============================================================================
   6b. HERO CANVAS — Full-hero particle field (rendered by main.js)
   ============================================================================ */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.58;
  pointer-events: none; /* Canvas ignores clicks; the <section> handles them */
  z-index: 1;
}

/* ============================================================================
   7. HERO DESKTOP LOGO
   --------------------
   Big logo shown in the hero itself. main.js adds .scrolled-away when the
   user scrolls past CONFIG.heroLogoHideAfter so it fades out and the small
   navbar logo takes its place.
   ============================================================================ */
.hero-logo-desktop {
  /* HERO LOGO WIDTH CONTROL
       width controls the normal size; transform: scaleX() visually stretches it wider.
       Increase/decrease scaleX if you want more/less horizontal stretch. */
  display: block;
  width: clamp(500px, 50vw, 760px);
  max-width: none;
  margin-bottom: 24px;
  opacity: 0.9;
  transform: scaleX(0.9);
  transform-origin: left center;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.hero-logo-desktop.scrolled-away {
  opacity: 0;
  transform: translateY(-20px) scaleX(1.14);
  pointer-events: none;
}

/* ============================================================================
   8. PROMO CAROUSEL (Bootstrap carousel with brand styling)
   ============================================================================ */
.promo-carousel {
  background: var(--navy);
}
.promo-carousel .carousel-item {
  background: #000;
}
.promo-carousel .promo-media {
  width: 100%;
  height: clamp(260px, 31.25vw, 600px);
  object-fit: contain; /* Shows the full image/video without cutting off important content. */
  object-position: center;
  display: block;
  background: #000;
}
.promo-carousel video.promo-media {
  pointer-events: auto; /* Lets video clicks/taps toggle custom playback controls. */
}

/* Indicator dots */
.promo-carousel .carousel-indicators {
  margin-bottom: 16px;
}
.promo-carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  margin: 0 5px;
  opacity: 1;
  transition: var(--transition);
}
.promo-carousel .carousel-indicators button.active {
  background-color: var(--blue);
  width: 28px;
  border-radius: 5px;
}

/* Prev/next arrow buttons */
.promo-carousel .carousel-control-prev-icon,
.promo-carousel .carousel-control-next-icon {
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  background-size: 50%;
}

/* ============================================================================
   8b. STATS BAR — Overlaps the top of the "about" section (negative margin)
   ============================================================================ */
.stats-bar {
  background: var(--white);
  padding: 0;
  position: relative;
  z-index: 10;
  margin-top: -34px; /* Pulls the bar up into the carousel above */
}
.stats-container {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 50px 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.stat-item {
  text-align: center;
  position: relative;
  padding: 10px;
}
/* Vertical divider between stat items */
.stat-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: var(--gray-light);
}
.stat-number {
  font-size: 3rem;
  font-weight: 900;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray);
}

/* ============================================================================
   9. ABOUT
   ============================================================================ */
.about {
  background: var(--off-white);
}
.about-text p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-body);
  margin-bottom: 16px;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 30px;
}
.about-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.about-feature-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.about-feature-item i {
  font-size: 1.1rem;
  color: var(--blue);
  min-width: 20px;
}
.about-feature-item span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* Stacked decorative cards on the right */
.about-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-card-stack {
  position: relative;
  width: 100%;
  max-width: 450px;
}
.about-deco-card {
  border-radius: 24px;
  padding: 40px;
  position: relative;
}
.about-deco-card.main {
  background: var(--gradient-1);
  color: #fff;
  z-index: 2;
}
.about-deco-card.main h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.about-deco-card.main p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  font-size: 0.95rem;
}
/* Shadow card behind the main one (offset for depth) */
.about-deco-card.back {
  position: absolute;
  top: 30px;
  left: 30px;
  right: -20px;
  bottom: -20px;
  background: var(--navy-light);
  z-index: 1;
  opacity: 0.15;
}
.about-year-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ============================================================================
   10. PRODUCTS
   ============================================================================ */
.products {
  background: var(--white);
}

.product-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  height: 100%;
}
/* Top accent bar that slides in from the left on hover */
.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-1);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.product-card:hover::before {
  transform: scaleX(1);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.product-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(
    135deg,
    rgba(190, 55, 69, 0.08),
    rgba(214, 113, 121, 0.08)
  );
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--blue);
  margin-bottom: 20px;
  transition: var(--transition);
}
.product-card:hover .product-icon {
  background: var(--gradient-1);
  color: #fff;
  transform: scale(1.1);
}

.product-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.product-card p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 16px;
}

.product-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.product-link:hover {
  gap: 12px;
  color: var(--teal);
} /* Arrow slides on hover */

/* ============================================================================
   11. SERVICES
   ============================================================================ */
.services {
  background: var(--off-white);
}

.service-card {
  text-align: center;
  padding: 40px 24px;
  background: var(--white);
  border-radius: var(--radius);
  transition: var(--transition);
  height: 100%;
  border: 1px solid transparent;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(190, 55, 69, 0.1);
}

.service-icon-box {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  background: var(--off-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--blue);
  transition: var(--transition);
}
.service-card:hover .service-icon-box {
  background: var(--gradient-1);
  color: #fff;
  transform: scale(1.1) rotate(5deg);
  box-shadow: var(--shadow-blue);
}
.service-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.service-card p {
  font-size: 0.85rem;
  color: var(--gray);
  line-height: 1.6;
}

/* ============================================================================
   12. WHY US (theme-aware trust section)
   --------------------------------------------------------------------------
   Default/light mode intentionally uses a soft light panel so this trust
   section feels distinct from the dark hero and footer. Dark-mode overrides
   are kept near the end of the stylesheet in section 34 so the theme switch is
   easy to adjust without hunting through older section defaults.

   HOW TO EDIT THIS SECTION
   ------------------------
   • Main section background → .why-us
   • Trust cards → .why-card, .why-card:hover
   • Card icons → .why-card-icon
   • Text colors → .why-us .section-title / .section-subtitle and .why-card h3/p
   • Ambient decorations → .why-us .bm-ring / .bm-scan / .bm-dot-grid
   ============================================================================ */
.why-us {
  background:
    radial-gradient(circle at 15% 18%, rgba(190, 55, 69, 0.1), transparent 30%),
    radial-gradient(
      circle at 86% 74%,
      rgba(228, 160, 166, 0.18),
      transparent 34%
    ),
    linear-gradient(135deg, #f7eef2 0%, #fff7f8 52%, #efe4e8 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle brand glow behind the section; content stays above it through z-indexed cards/containers. */
.why-us::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -30%;
  width: 70%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(190, 55, 69, 0.1), transparent 70%);
  opacity: 0.75;
}

.why-us .section-label {
  color: var(--blue);
}
.why-us .section-title {
  color: #1c1820;
}
.why-us .section-subtitle {
  color: #6e5862;
}

.why-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(190, 55, 69, 0.14);
  border-radius: var(--radius);
  padding: 40px;
  transition: var(--transition);
  height: 100%;
  box-shadow: 0 18px 52px rgba(28, 24, 32, 0.1);
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-5px);
  border-color: rgba(190, 55, 69, 0.24);
  box-shadow: 0 24px 64px rgba(28, 24, 32, 0.14);
}

.why-card-icon {
  width: 56px;
  height: 56px;
  background: var(--gradient-1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 24px;
}

.why-card h3 {
  color: #1c1820;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.why-card p {
  color: #6e5862;
  font-size: 0.9rem;
  line-height: 1.7;
}

.why-card::after {
  background: radial-gradient(
    circle at var(--card-x, 50%) var(--card-y, 0%),
    rgba(190, 55, 69, 0.14),
    transparent 42%
  );
}

.why-us .bm-ring {
  border-color: rgba(190, 55, 69, 0.18);
  box-shadow: 0 0 42px rgba(190, 55, 69, 0.07);
}

.why-us .bm-scan {
  background:
    linear-gradient(90deg, transparent, rgba(190, 55, 69, 0.26), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(190, 55, 69, 0.12) 0 2px,
      transparent 2px 22px
    );
  opacity: 0.2;
}

.why-us .bm-dot-grid {
  background-image: radial-gradient(
    rgba(190, 55, 69, 0.2) 1px,
    transparent 1px
  );
  opacity: 0.12;
}

/* ============================================================================
   13. BRANDS MARQUEE
   ------------------
   Endless horizontal scroll of partner names. Duplicating the marquee-track
   content in HTML is required for the seamless loop (see @keyframes marquee).
   ============================================================================ */
.brands-section {
  padding: 60px 0;
  background: var(--white);
  overflow: hidden;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}
.brands-label {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 30px;
}
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  padding: 0 50px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s;
  user-select: none;
}
.marquee-item:hover {
  color: var(--blue);
}

/* ============================================================================
   14. CTA
   ============================================================================ */
.cta-section {
  background: var(--gradient-1);
  position: relative;
  overflow: hidden;
  padding: 100px 0;
}
.cta-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.08),
    transparent 60%
  );
}
.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.cta-content h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.cta-content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin-bottom: 36px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   15. CONTACT
   ============================================================================ */
.contact {
  background: var(--off-white);
}

/* Dark info card on the left */
.contact-info-card {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 44px 36px;
  color: #fff;
  height: 100%;
}
.contact-info-card h3 {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.contact-info-card > p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  margin-bottom: 30px;
}

/* Each department block (address / office / sales / etc.) */
.contact-dept {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.contact-dept:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.contact-dept-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.contact-dept-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 0.85rem;
}
.contact-dept-header h4 {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
}
.contact-dept-body {
  padding-left: 48px;
} /* Aligns body under the header text, past the icon */
.contact-dept-body p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.75;
}
.contact-dept-body a {
  color: var(--teal-light);
  text-decoration: none;
  transition: var(--transition);
}
.contact-dept-body a:hover {
  color: #fff;
}

/* White map card on the right */
.contact-map-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contact-map-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.contact-map-header i {
  font-size: 1rem;
  color: var(--blue);
}
.contact-map-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.contact-map-frame {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
}
.contact-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: none;
  display: block;
}

.contact-map-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-light);
}
.contact-map-address {
  font-size: 0.82rem;
  color: var(--gray);
}
.contact-map-address i {
  color: var(--blue);
  margin-right: 6px;
}
.contact-map-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
  white-space: nowrap;
}
.contact-map-link:hover {
  color: var(--teal);
  gap: 10px;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.social-link {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.85rem;
}
.social-link:hover {
  background: var(--gradient-1);
  color: #fff;
  transform: translateY(-3px);
}

/* ============================================================================
   16. FOOTER
   ============================================================================ */
.footer {
  background: var(--navy);
  padding: 80px 0 30px;
}
.footer-desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 300px;
}

.footer h3 {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.footer-links {
  list-style: none;
  padding: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}
.footer-links a:hover {
  color: var(--teal);
  padding-left: 5px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 50px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  margin: 0;
}
.footer-heart {
  color: var(--teal);
}
.footer-logoB {
  max-width: 250px;
  width: 100%;
  height: auto;
}

/* Prevent stray horizontal scroll from big blobs bleeding out of sections */
.about,
.contact,
.stats-bar,
.products,
.services {
  overflow-x: hidden;
}

/* ============================================================================
   17. ANIMATIONS (core keyframes)
   ============================================================================ */
@keyframes heroPulse {
  0%,
  100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.1) translate(20px, -20px);
  }
}
@keyframes float1 {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-30px) rotate(5deg);
  }
}
@keyframes float2 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(20px) translateX(-20px);
  }
}
@keyframes float3 {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.05);
  }
}
@keyframes float4 {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-25px) rotate(180deg);
  }
}
@keyframes scrollLine {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.5);
    opacity: 0.3;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes ctaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
  }
}

/* Organic morphing float animations used by the hero shapes */
@keyframes slowFloat1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-30px, -30px);
  }
}
@keyframes slowFloat2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(30px, -40px);
  }
}
@keyframes slowFloat3 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-20px, 20px);
  }
}

/* ============================================================================
   18. RESPONSIVE — Tablet & mobile overrides
   ============================================================================ */
@media (max-width: 991px) {
  .hero-canvas {
    opacity: 0.44;
  }
  .hero h1 {
    font-size: 2.8rem;
  }
  .section-title {
    font-size: 2.2rem;
  }
  .stats-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item:nth-child(2)::after {
    display: none;
  }
  .cta-content h2 {
    font-size: 2.2rem;
  }
  .about-features {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    margin-top: 50px;
  }
  .contact-map-frame iframe {
    min-height: 300px;
  }
  .promo-carousel .promo-media {
    height: 380px;
  }
  /* Below 992px: swap the big hero logo for the small navbar logo (always visible) */
  .hero-logo-desktop {
    display: none;
  }
  .navbar-logo {
    display: inline-block;
    height: 55px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 767px) {
  .hero-canvas {
    opacity: 0.32;
  }
  .navbar-custom {
    background: rgba(28, 24, 32, 0.85);
  } /* Always semi-solid on phones for legibility */
  .hero {
    align-items: flex-start;
    min-height: auto;
    padding: 116px 0 62px;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
  .section-title {
    font-size: 1.8rem;
  }
  .section-padding {
    padding: 70px 0;
  }
  .stats-container {
    grid-template-columns: 1fr 1fr;
    padding: 30px 20px;
    gap: 20px;
  }
  .stat-number {
    font-size: 2.2rem;
  }
  .stat-item::after {
    display: none !important;
  }
  .hero-card {
    padding: 28px;
  }
  .contact-info-card {
    padding: 28px 22px;
  }
  .contact-dept-body {
    padding-left: 0;
  }
  .contact-map-card {
    padding: 18px;
  }
  .contact-map-frame iframe {
    min-height: 250px;
  }
  .contact-map-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cta-content h2 {
    font-size: 1.8rem;
  }
  .promo-carousel .promo-media {
    height: 240px;
  }
  .hero-content {
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-badge {
    font-size: 0.7rem;
    padding: 6px 14px;
  }
  .hero-logo-desktop {
    display: none;
  }
  .navbar-logo {
    display: inline-block;
    height: 55px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

@media (max-width: 575px) {
  .hero {
    padding: 110px 0 54px;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .hero-buttons {
    flex-direction: column;
  }
  .stats-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   20. BACK-TO-TOP BUTTON
   ----------------------
   Hidden by default; main.js adds .visible after CONFIG.backToTopShowAfter px.
   ============================================================================ */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-1);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 9998;
  box-shadow: var(--shadow-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(190, 55, 69, 0.35);
}

/* ============================================================================
   22. KEYBOARD FOCUS VISIBILITY (accessibility)
   ============================================================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ============================================================================
   23. LANGUAGE SWITCHER (MK / EN / SQ)
   -----------------------------------
   Wired up in lang.js. Buttons carry data-lang and get .active on the
   currently-selected language.
   ============================================================================ */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50px;
  padding: 3px;
  vertical-align: middle;
}
.lang-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}
.lang-btn:hover {
  color: #fff;
}
.lang-btn.active {
  background: var(--gradient-1);
  color: #fff;
}

/* ============================================================================
   24. MOBILE MENU POLISH / BUGFIX
   -------------------------------
   IMPORTANT: Bootstrap's d-lg-none utility can override `display`. We defeat
   that with !important + a custom .is-open class so the menu is CLOSED by
   default and only opens when main.js adds .is-open.
   ============================================================================ */
#mobileMenu {
  margin-top: 16px;
  padding: 16px;
  background: rgba(28, 24, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
#mobileMenu:not(.is-open) {
  display: none !important;
}
#mobileMenu.is-open {
  display: block !important;
}
#mobileMenu .nav-link {
  padding: 12px 14px !important;
  border-radius: 10px;
}
#mobileMenu .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Hamburger → X morph (JS adds .active on the toggle) */
.navbar-toggler-custom span {
  transition: var(--transition);
}
.navbar-toggler-custom.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggler-custom.active span:nth-child(2) {
  opacity: 0;
}
.navbar-toggler-custom.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================================
   25. FINAL ENHANCEMENTS
   ----------------------
   Purpose: stable hero sizing, subtle desktop parallax, healthcare-inspired
   ambience for post-hero sections, and softer typography.

   The parallax variables (--hero-parallax-x/y/tilt) are written by
   main.js → initHeroParallax().
   The ambient variables (--bm-pointer-x/y, --card-x/y) are written by
   main.js → initAfterHeroAmbience().
   ============================================================================ */

/* ---- Typography polish (kept the Inter family, softened the weight/tracking) */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-weight: 400;
  letter-spacing: -0.005em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 750;
  letter-spacing: -0.025em;
}
.section-title {
  font-weight: 750;
  letter-spacing: -0.03em;
}
.hero h1 {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.navbar-custom .nav-link,
.btn-primary-custom,
.btn-outline-custom,
.btn-cta {
  font-weight: 600;
}
.hero-description,
.section-subtitle,
.about-text p,
.product-card p,
.service-card p,
.why-card p {
  font-weight: 400;
  letter-spacing: -0.003em;
}

.hero .container {
  position: relative;
  z-index: 3;
}

/* Faint sheen overlay on the hero card */
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    transparent 42%,
    rgba(228, 160, 166, 0.07)
  );
  opacity: 0.55;
}
.hero-scroll-indicator {
  bottom: 24px;
}

/* ---- Hero parallax layers (desktop-only; disabled by main.js on mobile) ---- */
.hero-parallax-canvas,
.hero-parallax-shapes,
.hero-parallax-content,
.hero-parallax-card {
  will-change: transform;
  transition: transform 0.12s linear;
}

.hero-parallax-canvas {
  transform: translate3d(
      calc(var(--hero-parallax-x) * 0.16),
      calc(var(--hero-parallax-y) * 0.3),
      0
    )
    scale(1.03);
}
.hero-parallax-shapes {
  transform: translate3d(
      calc(var(--hero-parallax-x) * 0.42),
      calc(var(--hero-parallax-y) * 0.55),
      0
    )
    scale(1.015);
}
.hero-parallax-content {
  transform: translate3d(
    calc(var(--hero-parallax-x) * -0.1),
    calc(var(--hero-parallax-y) * -0.14),
    0
  );
}
.hero-parallax-card {
  transform: translate3d(
      calc(var(--hero-parallax-x) * -0.2),
      calc(var(--hero-parallax-y) * -0.24),
      0
    )
    rotateX(var(--hero-parallax-tilt));
  transform-style: preserve-3d;
}

/* ---- Healthcare/ultrasound-inspired ambient backgrounds (post-hero sections) ---- */
.bm-ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --bm-pointer-x: 50%;
  --bm-pointer-y: 50%;
}
.bm-ambient > .container,
.bm-ambient > .brands-label,
.bm-ambient > .marquee-wrapper {
  position: relative;
  z-index: 2;
}

.bm-ambient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Static tinted haze layer */
.bm-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background:
    radial-gradient(circle at 20% 18%, rgba(190, 55, 69, 0.1), transparent 25%),
    radial-gradient(
      circle at 82% 78%,
      rgba(228, 160, 166, 0.14),
      transparent 28%
    ),
    linear-gradient(
      115deg,
      transparent 0 48%,
      rgba(190, 55, 69, 0.045) 49% 50%,
      transparent 51% 100%
    );
}
/* Cursor-following spotlight (position + visibility controlled by JS) */
.bm-ambient::after {
  content: "";
  position: absolute;
  left: var(--bm-pointer-x);
  top: var(--bm-pointer-y);
  z-index: 1;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  background: radial-gradient(
    circle,
    rgba(228, 160, 166, 0.24) 0%,
    rgba(190, 55, 69, 0.13) 34%,
    rgba(190, 55, 69, 0.055) 56%,
    transparent 74%
  );
  filter: blur(2px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  will-change: left, top, opacity, transform;
}
.bm-ambient.bm-pointer-active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Bigger, brighter spotlight for dark-bg sections */
.bm-ambient-dark::after {
  width: 430px;
  height: 430px;
  background: radial-gradient(
    circle,
    rgba(228, 160, 166, 0.3) 0%,
    rgba(190, 55, 69, 0.2) 35%,
    rgba(255, 255, 255, 0.055) 58%,
    transparent 76%
  );
}

/* Floating orbs in the ambient background */
.bm-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(0.3px);
  opacity: 0.62;
  animation: bmOrbFloat 24s ease-in-out infinite;
}
.bm-orb-a {
  width: 240px;
  height: 240px;
  right: 5%;
  top: 8%;
  background: radial-gradient(
    circle,
    rgba(228, 160, 166, 0.26),
    rgba(190, 55, 69, 0.055) 64%,
    transparent 74%
  );
}
.bm-orb-b {
  width: 160px;
  height: 160px;
  left: 5%;
  bottom: 8%;
  background: radial-gradient(
    circle,
    rgba(214, 113, 121, 0.22),
    rgba(190, 55, 69, 0.045) 65%,
    transparent 75%
  );
  animation-delay: -8s;
}

/* Expanding "ultrasound ring" pulses */
.bm-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(190, 55, 69, 0.2);
  box-shadow: 0 0 42px rgba(190, 55, 69, 0.07);
  animation: bmUltrasoundRing 8.5s ease-out infinite;
}
.bm-ring-a {
  width: 300px;
  height: 300px;
  right: 10%;
  bottom: 7%;
}
.bm-ring-b {
  width: 190px;
  height: 190px;
  left: 8%;
  top: 12%;
  animation-delay: -4s;
}

/* Ultrasound-style waveform strip */
.bm-scan {
  position: absolute;
  width: min(600px, 60vw);
  height: 115px;
  right: -70px;
  top: 48%;
  opacity: 0.3;
  background:
    linear-gradient(90deg, transparent, rgba(190, 55, 69, 0.42), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(190, 55, 69, 0.18) 0 2px,
      transparent 2px 22px
    );
  clip-path: polygon(
    0 52%,
    8% 52%,
    12% 30%,
    17% 72%,
    22% 52%,
    36% 52%,
    41% 21%,
    47% 81%,
    53% 52%,
    70% 52%,
    75% 36%,
    80% 65%,
    85% 52%,
    100% 52%
  );
  animation: bmScanDrift 14s ease-in-out infinite;
}

/* Fading dot grid — masked to a circular fade */
.bm-dot-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(
    rgba(190, 55, 69, 0.3) 1px,
    transparent 1px
  );
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    black,
    transparent 74%
  );
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 74%);
  animation: bmDotDrift 30s linear infinite;
}

/* Per-section tweaks to the scan-line position */
.products .bm-scan {
  top: 20%;
  right: -100px;
}
.services .bm-scan {
  top: 70%;
  left: -100px;
  right: auto;
  transform: scaleX(-1);
}
.contact .bm-scan {
  top: 18%;
  right: -130px;
}
.brands-section .bm-orb-a {
  top: -115px;
}
.brands-section .bm-ring-a {
  bottom: -165px;
}

/* Dark-background variants use white-toned decorations */
.bm-ambient-dark .bm-ring,
.bm-ambient-cta .bm-ring {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 44px rgba(255, 255, 255, 0.07);
}
.bm-ambient-dark .bm-scan,
.bm-ambient-cta .bm-scan {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.16) 0 2px,
      transparent 2px 22px
    );
}
.bm-ambient-dark .bm-dot-grid,
.bm-ambient-cta .bm-dot-grid {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.24) 1px,
    transparent 1px
  );
}

/* Ensure cards float above the ambient layers */
.product-card,
.service-card,
.why-card,
.about-feature-item,
.contact-map-card,
.contact-info-card {
  position: relative;
  z-index: 2;
}

/* Per-card cursor spotlight (position written by JS: --card-x / --card-y) */
.product-card::after,
.service-card::after,
.why-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--card-x, 50%) var(--card-y, 0%),
    rgba(228, 160, 166, 0.2),
    transparent 40%
  );
  transition: opacity 0.25s ease;
}
.product-card:hover::after,
.service-card:hover::after,
.why-card:hover::after {
  opacity: 1;
}

/* ---- Ambient keyframes ---- */
@keyframes bmOrbFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-24px, 18px, 0) scale(1.06);
  }
}
@keyframes bmUltrasoundRing {
  0% {
    transform: scale(0.76);
    opacity: 0;
  }
  18% {
    opacity: 0.62;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}
@keyframes bmScanDrift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -32px -10px;
  }
}
@keyframes bmDotDrift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 90px 60px;
  }
}

/* ---- Responsive overrides for the enhancements above ---- */
@media (max-width: 1199px) {
  .hero {
    min-height: clamp(700px, 94svh, 860px);
  }
  .hero-logo-desktop {
    width: clamp(430px, 53vw, 660px);
    transform: scaleX(1.12);
  }
}
@media (max-width: 991px) {
  .hero {
    min-height: auto;
    padding: 120px 0 72px;
    align-items: flex-start;
  }
  .hero-visual {
    margin-top: 38px;
  }
  .stats-bar {
    margin-top: -24px;
  }
  /* Kill parallax on tablet + phone (touch users can't trigger it anyway) */
  .hero-parallax-canvas,
  .hero-parallax-shapes,
  .hero-parallax-content,
  .hero-parallax-card {
    transform: none !important;
    transition: none !important;
  }
  .bm-orb-a {
    width: 170px;
    height: 170px;
    right: -35px;
  }
  .bm-ring-a {
    width: 230px;
    height: 230px;
    right: -70px;
  }
  .bm-scan {
    width: 430px;
    opacity: 0.22;
  }
}
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: 116px 0 62px;
  }
  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.55rem);
  }
  .hero-description {
    font-size: 1rem;
    margin-bottom: 28px;
  }
  .hero-card {
    padding: 24px;
  }
  .stats-bar {
    margin-top: 0;
    padding-top: 24px;
  }
  .bm-ambient::after {
    display: none;
  } /* Hide cursor spotlight on touch */
  .bm-ambient-bg {
    opacity: 0.72;
  }
  .bm-scan {
    width: 350px;
    opacity: 0.16;
  }
  .bm-dot-grid {
    opacity: 0.1;
  }
}
@media (max-width: 575px) {
  .hero {
    padding: 110px 0 54px;
  }
}

/* ---- Accessibility: honor prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax-canvas,
  .hero-parallax-shapes,
  .hero-parallax-content,
  .hero-parallax-card {
    transform: none !important;
    transition: none !important;
  }
  .bm-orb,
  .bm-ring,
  .bm-scan,
  .bm-dot-grid {
    animation: none !important;
  }
  .bm-ambient::after {
    transition: none !important;
  }
}

/* ============================================================================
26. ANIMATION TOGGLE / LOW-MOTION MODE

Navbar icon toggle for turning heavy animations on/off. The setting is saved
and the page reloads after each change to cleanly restart/stop canvas effects.
Both theme and animation toggles are icon-only in the final release.
No hover tooltip is shown.
============================================================================ */
.animation-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: var(--transition);
  overflow: visible;
}
.animation-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.animation-toggle.is-off {
  background: var(--gradient-1);
  color: #fff;
  border-color: transparent;
}
.animation-toggle-icon {
  font-size: 0.86rem;
  line-height: 1;
  pointer-events: none;
  transition: var(--transition);
}

/* Low-motion mode: disable heavy decorative motion. */
html.animations-off *,
html.animations-off *::before,
html.animations-off *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.animations-off .hero-canvas,
html.animations-off .bm-ambient-bg {
  display: none !important;
}
html.animations-off .hero-parallax-canvas,
html.animations-off .hero-parallax-shapes,
html.animations-off .hero-parallax-content,
html.animations-off .hero-parallax-card {
  transform: none !important;
}
html.animations-off [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}
html.animations-off .bm-ambient::before,
html.animations-off .bm-ambient::after,
html.animations-off .hero::before,
html.animations-off .hero::after,
html.animations-off .hero-card::after,
html.animations-off .product-card::after,
html.animations-off .service-card::after,
html.animations-off .why-card::after {
  display: none !important;
}

/* Exception: "Наши партнери" always rolls, even when animations are off. */
html.animations-off .brands-section .marquee-track {
  animation: marquee 30s linear infinite !important;
}

/* Exception: product-details popup content relies on its entrance animation
   to reach opacity:1 (it starts at opacity:0 in the base rule). With
   animations off the animation never runs, so force the "arrived" state
   directly, or the content stays invisible. */
html.animations-off .product-detail-panel-head,
html.animations-off .product-detail-panel-actions,
html.animations-off .product-detail-card {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================================
   27. DARK MODE TOGGLE / DARK THEME
   ============================================================================
   Navbar icon toggle for turning the soft light sections into a darker theme.
   Unlike the animation toggle, this does NOT reload the page — it only toggles
   html.dark-mode and saves the preference in localStorage.
   ============================================================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: var(--transition);
  overflow: visible;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.theme-toggle.is-on {
  background: var(--gradient-1);
  color: #fff;
  border-color: transparent;
}
.theme-toggle-icon {
  font-size: 0.86rem;
  line-height: 1;
  pointer-events: none;
  transition: var(--transition);
}
.theme-toggle.is-on .theme-toggle-icon {
  transform: rotate(-8deg) scale(0.96);
}

html.dark-mode {
  color-scheme: dark;
  --white: #151118;
  --off-white: #1c1820;
  --gray-light: #332b36;
  --gray: #c4b7bf;
  --text-dark: #f7eef2;
  --text-body: #d7ccd2;
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.38);
}
html.dark-mode body,
html.dark-mode .products,
html.dark-mode .brands-section {
  background: var(--white);
}
html.dark-mode .about,
html.dark-mode .services,
html.dark-mode .contact,
html.dark-mode .stats-bar {
  background: var(--off-white);
}
html.dark-mode .stats-container,
html.dark-mode .product-card,
html.dark-mode .service-card,
html.dark-mode .about-feature-item,
html.dark-mode .contact-map-card {
  background: #211b25;
  border-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .product-card p,
html.dark-mode .service-card p,
html.dark-mode .about-text p,
html.dark-mode .section-subtitle,
html.dark-mode .contact-map-address,
html.dark-mode .stat-label {
  color: var(--gray);
}
html.dark-mode .product-card h3,
html.dark-mode .service-card h3,
html.dark-mode .about-feature-item span,
html.dark-mode .contact-map-header h3 {
  color: var(--text-dark);
}
html.dark-mode .service-icon-box,
html.dark-mode .product-icon {
  background: rgba(255, 255, 255, 0.06);
}
html.dark-mode .brands-section {
  border-top-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .marquee-item {
  color: rgba(255, 255, 255, 0.18);
}
html.dark-mode .marquee-item:hover {
  color: var(--teal-light);
}
html.dark-mode .contact-map-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}
html.dark-mode .bm-ambient::before {
  opacity: 0.28;
}
html.dark-mode .back-to-top,
html.dark-mode .theme-toggle.is-on,
html.dark-mode .animation-toggle.is-off {
  box-shadow: 0 12px 34px rgba(190, 55, 69, 0.3);
}
/* ============================================================================
   28. NAV CONTROLS (Language, Theme, Animations)
   ============================================================================ */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.control-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  padding: 4px 4px 4px 14px;
}

.control-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* Mobile specific styling: stack them and push buttons to the right edge */
.mobile-menu-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu-controls .control-group {
  justify-content: space-between;
  width: 100%;
  padding: 6px 6px 6px 16px;
}

/* Crisp borders when dark mode is active */
html.dark-mode .control-group {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ============================================================================
29. SAFARI PERFORMANCE MODE

macOS/iOS Safari can struggle with simultaneous canvas animation, backdrop blur,
large filtered pseudo-elements, clip-path scanlines, and many long-running CSS
animations. main.js/head bootstrap adds html.safari-performance only for Safari,
keeping the design intact while removing the most expensive layers.
============================================================================ */
html.safari-performance .hero-canvas {
  opacity: 0.34;
}
html.safari-performance .bm-ambient-bg {
  display: none !important;
}
html.safari-performance .bm-ambient::before {
  opacity: 0.18;
}
html.safari-performance .bm-ambient::after {
  display: none !important;
}
html.safari-performance .hero::before,
html.safari-performance .hero::after {
  animation: none !important;
}
html.safari-performance .shape {
  animation: none !important;
}
html.safari-performance .hero-parallax-canvas,
html.safari-performance .hero-parallax-shapes,
html.safari-performance .hero-parallax-content,
html.safari-performance .hero-parallax-card {
  transition: none !important;
}
html.safari-performance .navbar-custom.scrolled,
html.safari-performance .hero-badge,
html.safari-performance .hero-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.safari-performance [data-aos] {
  transition-duration: 0.45s !important;
}

/* ============================================================================
30. PROMO VIDEO CONTROL FIX

Bootstrap carousel arrows are full-height side overlays by default. On video
slides, those overlays can sit above the browser's native video controls and
make the seek bar feel unclickable. These rules make the arrows compact side
buttons and hide indicator dots while a video is active.
============================================================================ */
.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next {
  width: 56px;
  height: 76px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  opacity: 0.9;
  z-index: 4;
}
.promo-carousel .carousel-control-prev {
  left: 14px;
}
.promo-carousel .carousel-control-next {
  right: 14px;
}
.promo-carousel .carousel-control-prev:hover,
.promo-carousel .carousel-control-next:hover {
  opacity: 1;
}
.promo-carousel .carousel-control-prev-icon,
.promo-carousel .carousel-control-next-icon {
  pointer-events: none;
}
.promo-carousel video.promo-media {
  position: relative;
  z-index: 2;
}
#promoCarousel.has-active-video .carousel-indicators {
  display: none;
}
@media (max-width: 767px) {
  .promo-carousel .carousel-control-prev,
  .promo-carousel .carousel-control-next {
    width: 44px;
    height: 58px;
  }
  .promo-carousel .carousel-control-prev {
    left: 8px;
  }
  .promo-carousel .carousel-control-next {
    right: 8px;
  }
}

/* ============================================================================
31. CUSTOM PROMO VIDEO CONTROLS

Browser-native video controls can be inconsistent inside Bootstrap carousels,
especially when carousel overlays are present. These custom controls provide a
reliable visible seek bar, play/pause, time display, and mute button.
============================================================================ */
.promo-video-shell {
  position: relative;
  width: 100%;
  height: clamp(260px, 31.25vw, 600px);
  background: #000;
  overflow: hidden;
}
.promo-video-shell .promo-media {
  height: 100%;
}
.promo-video-controls {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(900px, calc(100% - 56px));
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease;
}
.promo-video-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}
.promo-video-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.04);
}
.promo-video-seek {
  flex: 1;
  min-width: 90px;
  accent-color: var(--blue);
  cursor: pointer;
}
.promo-video-time {
  min-width: 92px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
#promoCarousel.has-active-video .carousel-control-prev,
#promoCarousel.has-active-video .carousel-control-next {
  z-index: 8;
}
@media (max-width: 767px) {
  .promo-video-shell {
    height: 240px;
  }
  .promo-video-controls {
    bottom: 18px;
    width: calc(100% - 22px);
    gap: 7px;
    padding: 8px;
    border-radius: 18px;
  }
  .promo-video-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
  }
  .promo-video-time {
    min-width: 74px;
    font-size: 0.68rem;
  }
}

/* Auto-hide custom video controls while the video is playing. Controls reappear
   on hover, pointer/touch movement, keyboard focus, or when the video is paused. */
.promo-video-shell.controls-hidden .promo-video-controls {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}
.promo-video-shell:hover .promo-video-controls,
.promo-video-shell:focus-within .promo-video-controls,
.promo-video-shell.controls-visible .promo-video-controls {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.promo-video-shell:fullscreen,
.promo-video-shell:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  background: #000;
}
.promo-video-shell:fullscreen .promo-media,
.promo-video-shell:-webkit-full-screen .promo-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.promo-video-shell:fullscreen .promo-video-controls,
.promo-video-shell:-webkit-full-screen .promo-video-controls {
  bottom: 34px;
  width: min(1100px, calc(100% - 64px));
}

/* Volume control: slider + visible percentage value. */
.promo-video-volume-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 150px;
}
.promo-video-volume {
  width: 74px;
  accent-color: var(--blue);
  cursor: pointer;
}
.promo-video-volume-value {
  width: 34px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (max-width: 767px) {
  .promo-video-volume-group {
    min-width: 104px;
    gap: 5px;
  }
  .promo-video-volume {
    width: 48px;
  }
  .promo-video-volume-value {
    width: 28px;
    font-size: 0.64rem;
  }
}
@media (max-width: 430px) {
  .promo-video-time {
    display: none;
  }
  .promo-video-volume-group {
    min-width: 88px;
  }
  .promo-video-volume {
    width: 42px;
  }
}

/* ============================================================================
32. MOBILE NAVBAR LANDSCAPE SCROLL FIX

Fixes phone landscape mode where the opened mobile menu can become taller than
available viewport height and hide the theme/animation controls. The menu gets
its own scroll area inside the fixed navbar, so all options remain reachable.
============================================================================ */
@media (max-width: 991px) {
  #mobileMenu {
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  .navbar-custom {
    padding: 8px 0;
  }

  .navbar-logo {
    height: 42px;
  }

  #mobileMenu {
    margin-top: 8px;
    padding: 10px;
    max-height: calc(100dvh - 66px);
  }

  #mobileMenu .nav-link {
    padding: 7px 12px !important;
    font-size: 0.86rem;
  }

  .mobile-menu-controls {
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
  }

  .mobile-menu-controls .control-group {
    min-height: 38px;
    padding: 5px 6px 5px 12px;
  }

  .mobile-menu-controls .control-label {
    font-size: 0.64rem;
  }
}

@media (max-width: 991px) and (orientation: landscape) and (max-height: 430px) {
  #mobileMenu {
    max-height: calc(100dvh - 58px);
    padding: 8px;
  }

  #mobileMenu .nav-link {
    padding: 6px 10px !important;
    font-size: 0.82rem;
  }

  .mobile-menu-controls {
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
  }

  .mobile-menu-controls .control-group {
    min-height: 34px;
  }
}

/* ============================================================================
33. DARK MODE HERO + CTA POLISH

Extends the dark theme to the two intentionally high-impact sections that have
fixed brand gradients in light mode: the hero and the final CTA. The design goal
is not flat black — it keeps the premium medical-tech glow, but shifts the mood
darker, softer, and more comfortable for low-light viewing.
============================================================================ */
html.dark-mode .hero {
  background:
    radial-gradient(
      circle at 18% 16%,
      rgba(190, 55, 69, 0.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 24%,
      rgba(228, 160, 166, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 68% 82%,
      rgba(214, 113, 121, 0.1),
      transparent 34%
    ),
    linear-gradient(135deg, #08060a 0%, #151118 42%, #1c1820 72%, #0b070d 100%);
}

html.dark-mode .hero::before {
  background: radial-gradient(
    ellipse,
    rgba(190, 55, 69, 0.18),
    transparent 70%
  );
  opacity: 0.82;
}

html.dark-mode .hero::after {
  background: radial-gradient(
    ellipse,
    rgba(228, 160, 166, 0.12),
    transparent 70%
  );
  opacity: 0.72;
}

html.dark-mode .hero-card,
html.dark-mode .hero-badge {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html.dark-mode .hero-card::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    transparent 42%,
    rgba(190, 55, 69, 0.1)
  );
  opacity: 0.65;
}

html.dark-mode .hero-description,
html.dark-mode .hero-card p,
html.dark-mode .hero-card-features li {
  color: rgba(255, 255, 255, 0.72);
}

html.dark-mode .hero-canvas {
  opacity: 0.46;
}
html.dark-mode .shape {
  opacity: 0.1;
}

html.dark-mode .cta-section {
  background:
    radial-gradient(
      circle at 22% 22%,
      rgba(228, 160, 166, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 76%,
      rgba(190, 55, 69, 0.18),
      transparent 34%
    ),
    linear-gradient(135deg, #0b070d 0%, #1c1820 46%, #2a1721 100%);
}

html.dark-mode .cta-section::before {
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.08),
    transparent 62%
  );
  opacity: 0.9;
}

html.dark-mode .cta-content h2 {
  color: #fff;
  text-shadow: 0 14px 46px rgba(0, 0, 0, 0.38);
}

html.dark-mode .cta-content p {
  color: rgba(255, 255, 255, 0.78);
}

html.dark-mode .btn-cta {
  background: var(--gradient-1);
  color: #fff;
  box-shadow: 0 18px 48px rgba(190, 55, 69, 0.28);
}

html.dark-mode .btn-cta:hover {
  color: #fff;
  box-shadow: 0 22px 58px rgba(190, 55, 69, 0.38);
}

html.dark-mode .cta-section .bm-orb,
html.dark-mode .cta-section .bm-ring,
html.dark-mode .cta-section .bm-scan,
html.dark-mode .cta-section .bm-dot-grid {
  opacity: 0.42;
}

/* ============================================================================
34. WHY-US DARK MODE THEME ALIGNMENT

This is the dark-mode counterpart to the light Why Us base styles in section 12.
Keep these rules near the end of the stylesheet so they clearly override the
light section defaults when html.dark-mode is present.
============================================================================ */
html.dark-mode .why-us {
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(190, 55, 69, 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 82% 74%,
      rgba(228, 160, 166, 0.1),
      transparent 34%
    ),
    linear-gradient(135deg, #0b070d 0%, #171219 46%, #1c1820 100%);
}

html.dark-mode .why-us::before {
  background: radial-gradient(ellipse, rgba(190, 55, 69, 0.1), transparent 70%);
  opacity: 0.68;
}

html.dark-mode .why-us .section-label {
  color: var(--teal-light);
}
html.dark-mode .why-us .section-title {
  color: #fff;
}
html.dark-mode .why-us .section-subtitle {
  color: rgba(255, 255, 255, 0.64);
}

html.dark-mode .why-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

html.dark-mode .why-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(190, 55, 69, 0.28);
  box-shadow: 0 28px 82px rgba(0, 0, 0, 0.34);
}

html.dark-mode .why-card h3 {
  color: #fff;
}
html.dark-mode .why-card p {
  color: rgba(255, 255, 255, 0.7);
}

html.dark-mode .why-card::after {
  background: radial-gradient(
    circle at var(--card-x, 50%) var(--card-y, 0%),
    rgba(228, 160, 166, 0.16),
    transparent 42%
  );
}

html.dark-mode .why-us .bm-ring {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 44px rgba(255, 255, 255, 0.06);
}

html.dark-mode .why-us .bm-scan {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.13) 0 2px,
      transparent 2px 22px
    );
  opacity: 0.22;
}

html.dark-mode .why-us .bm-dot-grid {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px
  );
  opacity: 0.12;
}

/* ============================================================================
35a. FINAL ICON-ONLY TOGGLE CLEANUP

Final preference: both the theme and animation toggles are icon-only. Older I/O
label markup and styling have been removed, so both controls use the compact
base 34px pill size.
============================================================================ */
.theme-toggle,
.animation-toggle {
  width: 34px;
  min-width: 34px;
}

/* ============================================================================
35. RELEASE CONTROLS — PROMO CAROUSEL + CTA BUTTON

This is the single source of truth for the final promo carousel controls and the
final CTA button contrast rules.

PROMO CAROUSEL BEHAVIOR
-----------------------
• Desktop/tablet: previous/next controls keep the Binet glass/gradient style.
• Mobile: previous/next controls intentionally revert to Bootstrap-like default
  overlay controls. This avoids the custom themed mobile buttons taking visual
  space below the promo image/video.
• Desktop arrow glyphs are real text symbols (‹ and ›), not Bootstrap background
  SVGs. This keeps them visible in desktop/tablet layouts.

CTA BUTTON BEHAVIOR
-------------------
• Light mode: "Закажи средба" remains a white button in all states.
• Dark mode: "Закажи средба" keeps the Binet gradient and white text in all states.
============================================================================ */
.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next {
  width: 58px;
  height: 78px;
  top: 50%;
  bottom: auto;
  border-radius: 999px;
  opacity: 0.92;
  transform: translateY(-50%);
  z-index: 8;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    filter 0.22s ease;
}

.promo-carousel .carousel-control-prev {
  left: 18px;
}
.promo-carousel .carousel-control-next {
  right: 18px;
}

.promo-carousel .carousel-control-prev:hover,
.promo-carousel .carousel-control-next:hover,
.promo-carousel .carousel-control-prev:focus-visible,
.promo-carousel .carousel-control-next:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 16px 28px rgba(190, 55, 69, 0.28));
}

.promo-carousel .carousel-control-prev:hover {
  transform: translateY(-50%) translateX(-2px);
}
.promo-carousel .carousel-control-next:hover {
  transform: translateY(-50%) translateX(2px);
}

.promo-carousel .carousel-control-prev-icon,
.promo-carousel .carousel-control-next-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-image: none !important;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #070407;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  pointer-events: none;
}

.promo-carousel .carousel-control-prev-icon::before,
.promo-carousel .carousel-control-next-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.36),
      transparent 34%
    ),
    var(--gradient-1);
  opacity: 1;
}

.promo-carousel .carousel-control-prev-icon::after,
.promo-carousel .carousel-control-next-icon::after {
  position: relative;
  z-index: 2;
  inset: auto;
  display: block;
  background: none;
  color: #070407;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.promo-carousel .carousel-control-prev-icon::after {
  content: "‹";
  transform: translateX(-1px);
}

.promo-carousel .carousel-control-next-icon::after {
  content: "›";
  transform: translateX(1px);
}

.promo-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.promo-carousel .carousel-control-next:hover .carousel-control-next-icon,
.promo-carousel
  .carousel-control-prev:focus-visible
  .carousel-control-prev-icon,
.promo-carousel
  .carousel-control-next:focus-visible
  .carousel-control-next-icon {
  transform: scale(1.05);
  box-shadow:
    0 18px 42px rgba(190, 55, 69, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

html.dark-mode .promo-carousel .carousel-control-prev-icon,
html.dark-mode .promo-carousel .carousel-control-next-icon {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(190, 55, 69, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html.dark-mode .promo-carousel .carousel-control-prev-icon::before,
html.dark-mode .promo-carousel .carousel-control-next-icon::before {
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 0.22),
      transparent 34%
    ),
    linear-gradient(135deg, rgba(190, 55, 69, 0.94), rgba(74, 38, 50, 0.98));
}

html.dark-mode .promo-carousel .carousel-control-prev-icon::after,
html.dark-mode .promo-carousel .carousel-control-next-icon::after {
  color: #070407;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 10px rgba(0, 0, 0, 0.24);
}

.cta-section .btn-cta,
.cta-section .btn-cta:visited,
.cta-section .btn-cta:hover,
.cta-section .btn-cta:focus-visible {
  background: #fff;
  color: #000;
}

html.dark-mode .cta-section .btn-cta,
html.dark-mode .cta-section .btn-cta:visited,
html.dark-mode .cta-section .btn-cta:hover,
html.dark-mode .cta-section .btn-cta:focus-visible {
  background: var(--gradient-1);
  color: #fff;
}

/* Mobile deliberately uses default Bootstrap-like side controls instead of
   themed glass controls. These are simpler, less bulky, and do not create a
   separate control strip below the media. */
@media (max-width: 767px) {
  .promo-carousel {
    padding-bottom: 0;
    overflow: hidden;
  }

  .promo-carousel .carousel-control-prev,
  .promo-carousel .carousel-control-next,
  #promoCarousel.has-active-video .carousel-control-prev,
  #promoCarousel.has-active-video .carousel-control-next {
    top: 0;
    bottom: 0;
    width: 15%;
    height: 100%;
    border-radius: 0;
    opacity: 0.55;
    transform: none;
    filter: none;
    background: none;
    z-index: 6;
  }

  .promo-carousel .carousel-control-prev,
  #promoCarousel.has-active-video .carousel-control-prev {
    left: 0;
    right: auto;
  }

  .promo-carousel .carousel-control-next,
  #promoCarousel.has-active-video .carousel-control-next {
    right: 0;
    left: auto;
  }

  .promo-carousel .carousel-control-prev:hover,
  .promo-carousel .carousel-control-next:hover,
  .promo-carousel .carousel-control-prev:focus-visible,
  .promo-carousel .carousel-control-next:focus-visible {
    opacity: 0.78;
    transform: none;
    filter: none;
  }

  .promo-carousel .carousel-control-prev-icon,
  .promo-carousel .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }

  .promo-carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
  }

  .promo-carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }

  .promo-carousel .carousel-control-prev-icon::before,
  .promo-carousel .carousel-control-next-icon::before,
  .promo-carousel .carousel-control-prev-icon::after,
  .promo-carousel .carousel-control-next-icon::after {
    content: none;
    display: none;
  }

  .promo-carousel .carousel-indicators {
    bottom: 8px;
    margin-bottom: 0;
  }

  #promoCarousel.has-active-video .carousel-indicators {
    display: none;
  }
}

/* ============================================================================
36. FINAL PRODUCT LINK POLISH

The "Дознај повеќе" links are important outbound actions, so the final release
makes them read more like a soft mini-button instead of plain inline text. The
style stays lightweight: no layout-heavy effects, no extra JavaScript, and only
simple transform/box-shadow transitions.

HOW TO TUNE LATER
-----------------
• More subtle: lower the padding or reduce background opacity.
• More prominent: increase box-shadow or use var(--gradient-1) as default bg.
• Arrow movement: adjust translateX() on .product-link i below.
============================================================================ */
.product-link {
  margin-top: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(190, 55, 69, 0.18);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(190, 55, 69, 0.38), rgba(214, 113, 121, 0.18))
      border-box;
  color: var(--blue);
  box-shadow: 0 10px 24px rgba(190, 55, 69, 0.08);
}

.product-link i {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(190, 55, 69, 0.1);
  color: var(--blue);
  font-size: 0.72rem;
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}

.product-link:hover,
.product-link:focus-visible {
  gap: 9px;
  color: #fff;
  border-color: transparent;
  background: var(--gradient-1);
  box-shadow: 0 16px 36px rgba(190, 55, 69, 0.24);
  transform: translateY(-2px);
  outline: none;
}

.product-link:hover i,
.product-link:focus-visible i {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: translateX(3px);
}

.product-card:hover .product-link {
  border-color: rgba(190, 55, 69, 0.28);
  box-shadow: 0 14px 30px rgba(190, 55, 69, 0.14);
}

html.dark-mode .product-link {
  background:
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055))
      padding-box,
    linear-gradient(135deg, rgba(228, 160, 166, 0.38), rgba(190, 55, 69, 0.3))
      border-box;
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

html.dark-mode .product-link i {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.88);
}

html.dark-mode .product-link:hover,
html.dark-mode .product-link:focus-visible {
  background: var(--gradient-1);
  color: #fff;
  box-shadow: 0 18px 40px rgba(190, 55, 69, 0.25);
}

@media (max-width: 575px) {
  .product-link {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}

/* ============================================================================
37. RELEASE PRODUCT DETAILS POPUP

Single consolidated release section for product cards, the popup overlay, product
popup titles/subtitles, mobile readability, CTA styling, and performance-friendly
open/close animations.
============================================================================ */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-card > p {
  margin-bottom: 22px;
}

.product-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
  border-top: 0;
}

.product-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(190, 55, 69, 0.28),
    transparent
  );
}

.product-actions .product-link {
  margin-top: 0;
  justify-content: center;
}

.product-actions .product-link,
.product-actions .product-official-main {
  min-height: 40px;
}

.product-actions--single {
  justify-content: flex-start;
}

.product-actions--single .product-official-main {
  margin-left: 0;
}

.product-official-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--gradient-1);
  color: #fff;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(190, 55, 69, 0.18);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.product-official-main:hover,
.product-official-main:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(190, 55, 69, 0.3);
}

.product-details-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.26s ease,
    visibility 0s linear 0.38s;
}

.product-details-overlay.is-open,
.product-details-overlay.is-closing {
  visibility: visible;
}

.product-details-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.26s ease,
    visibility 0s linear 0s;
}

.product-details-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.24s ease,
    visibility 0s linear 0.38s;
}

.product-details-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(8, 6, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.28s ease;
}

.product-details-overlay.is-open .product-details-backdrop {
  opacity: 1;
}

.product-details-overlay.is-closing .product-details-backdrop {
  opacity: 0;
}

.product-details-dialog {
  position: relative;
  width: min(1080px, calc(100vw - 32px));
  max-height: min(780px, calc(100dvh - 28px));
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 8%, rgba(190, 55, 69, 0.16), transparent 28%),
    radial-gradient(
      circle at 14% 74%,
      rgba(228, 160, 166, 0.18),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 247, 248, 0.93)
    );
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
  padding: 28px;
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.955);
  transition:
    opacity 0.24s ease,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.product-details-overlay.is-open .product-details-dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.product-details-overlay.is-closing .product-details-dialog {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    opacity 0.2s ease,
    transform 0.26s cubic-bezier(0.4, 0, 1, 1);
}

.product-details-light {
  position: absolute;
  inset: auto 12% -18% 12%;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(190, 55, 69, 0.3), transparent 68%);
  filter: blur(8px);
  opacity: 0.76;
}

.product-details-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 24, 32, 0.1);
  color: var(--text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.product-details-close:hover,
.product-details-close:focus-visible {
  transform: rotate(6deg) scale(1.04);
  background: var(--gradient-1);
  color: #fff;
}

.product-detail-panel {
  display: none;
  position: relative;
  z-index: 2;
}

.product-detail-panel.is-active {
  display: block;
}

.product-detail-panel-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 22px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}

.product-detail-panel-head h3 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(720px, 100%);
  padding: 13px 22px 15px;
  border-radius: 22px;
  color: var(--text-dark);
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98),
        rgba(255, 247, 248, 0.92)
      )
      padding-box,
    linear-gradient(
        135deg,
        rgba(190, 55, 69, 0.42),
        rgba(255, 255, 255, 0.36),
        rgba(228, 160, 166, 0.32)
      )
      border-box;
  border: 1px solid transparent;
  box-shadow:
    0 18px 46px rgba(28, 24, 32, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: clamp(1.08rem, 1vw + 1rem, 1.55rem);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: normal;
}

.product-detail-panel-head h3::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--blue),
    rgba(228, 160, 166, 0.85),
    transparent
  );
  opacity: 0.78;
}

.product-detail-panel-subtitle {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px 13px;
  border-radius: 999px;
  color: var(--blue);
  background: rgba(190, 55, 69, 0.075);
  border: 1px solid rgba(190, 55, 69, 0.16);
  box-shadow: 0 10px 24px rgba(190, 55, 69, 0.08);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.075em;
  line-height: 1.15;
  text-transform: uppercase;
}

.product-detail-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  perspective: 1200px;
  max-width: 820px;
  margin: 0 auto;
}

.product-detail-stack--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1080px;
}

.product-detail-card {
  position: relative;
  min-height: 455px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 248, 0.9))
      padding-box,
    linear-gradient(135deg, rgba(190, 55, 69, 0.22), rgba(255, 255, 255, 0.25))
      border-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 64px rgba(28, 24, 32, 0.16);
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.955)
    rotate(var(--card-rotate, 0deg));
  will-change: opacity, transform;
}

.product-detail-stack--three .product-detail-card {
  min-height: 430px;
}

.product-detail-card-1 {
  --card-rotate: -1.1deg;
}

.product-detail-card-2 {
  --card-rotate: 1.1deg;
}

.product-detail-card-3 {
  --card-rotate: 0.6deg;
}

.product-detail-image {
  min-height: 205px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(28, 24, 32, 0.02), rgba(190, 55, 69, 0.12)),
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 255, 255, 0.25),
      transparent 38%
    );
  pointer-events: none;
}

.product-detail-image i {
  display: none;
}

.product-detail-copy {
  position: relative;
  z-index: 1;
  padding: 18px 20px 20px;
  flex: 1;
}

.product-detail-copy h4 {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0 0 8px 16px;
  color: var(--text-dark);
  font-size: 1.06rem;
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.product-detail-copy h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 5px;
  height: 1.35em;
  border-radius: 999px;
  background: var(--gradient-1);
  box-shadow: 0 8px 16px rgba(190, 55, 69, 0.18);
}

.product-detail-copy h4::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(190, 55, 69, 0.34), transparent);
}

.product-detail-copy p {
  color: var(--gray);
  font-size: 0.84rem;
  line-height: 1.46;
  margin: 0;
  opacity: 0.9;
}

.product-detail-panel-actions {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 22px auto 0;
  padding-top: 18px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: opacity, transform;
}

.product-detail-panel-actions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(190, 55, 69, 0.3),
    transparent
  );
}

.product-detail-more {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 850;
  background-image: linear-gradient(
    135deg,
    #be3745 0%,
    #d94e5d 48%,
    #be3745 100%
  );
  background-size: 180% 100%;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 30px rgba(190, 55, 69, 0.18);
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-position 0.28s ease,
    border-color 0.22s ease;
  will-change: transform;
}

.product-detail-more::before {
  display: none;
}

.product-detail-more::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.24s ease;
}

.product-detail-more:hover,
.product-detail-more:focus-visible {
  color: #fff;
  transform: translate3d(0, -3px, 0);
  background-position: 100% 50%;
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 20px 42px rgba(190, 55, 69, 0.32);
}

.product-detail-more:hover::after,
.product-detail-more:focus-visible::after {
  transform: scaleX(1);
}

.product-detail-more i {
  font-size: 0.78rem;
  transition: transform 0.22s ease;
}

.product-detail-more:hover i,
.product-detail-more:focus-visible i {
  transform: translate3d(4px, -3px, 0);
}

.product-details-dialog > .product-detail-panel-actions,
.product-detail-panel:not(.is-active) .product-detail-panel-actions {
  display: none !important;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-panel-head {
  animation: productPopupContentIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.04s
    both;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-panel-actions {
  animation: productPopupContentIn 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.26s
    both;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-card {
  animation: productPopupCardIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-card-1 {
  animation-delay: 0.08s !important;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-card-2 {
  animation-delay: 0.15s !important;
}

.product-details-overlay.is-open
  .product-detail-panel.is-active
  .product-detail-card-3 {
  animation-delay: 0.22s !important;
}

.product-details-overlay.is-closing
  .product-detail-panel.is-active
  .product-detail-panel-head,
.product-details-overlay.is-closing
  .product-detail-panel.is-active
  .product-detail-panel-actions {
  animation: productPopupContentOut 0.18s ease both;
}

.product-details-overlay.is-closing
  .product-detail-panel.is-active
  .product-detail-card {
  animation: productPopupCardOut 0.22s ease both !important;
}

@keyframes productPopupContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes productPopupCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.955)
      rotate(var(--card-rotate, 0deg));
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.006)
      rotate(var(--card-rotate, 0deg));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(var(--card-rotate, 0deg));
  }
}

@keyframes productPopupContentOut {
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes productPopupCardOut {
  to {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985)
      rotate(var(--card-rotate, 0deg));
  }
}

html.dark-mode .product-details-dialog {
  background:
    radial-gradient(circle at 50% 8%, rgba(190, 55, 69, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(21, 17, 24, 0.98), rgba(28, 24, 32, 0.96));
  border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .product-detail-panel-head h3 {
  color: #fff;
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.105),
        rgba(255, 255, 255, 0.055)
      )
      padding-box,
    linear-gradient(
        135deg,
        rgba(228, 160, 166, 0.34),
        rgba(255, 255, 255, 0.1),
        rgba(190, 55, 69, 0.4)
      )
      border-box;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
}

html.dark-mode .product-detail-panel-subtitle {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

html.dark-mode .product-detail-card {
  background:
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.075),
        rgba(255, 255, 255, 0.045)
      )
      padding-box,
    linear-gradient(
        135deg,
        rgba(228, 160, 166, 0.22),
        rgba(255, 255, 255, 0.08)
      )
      border-box;
}

html.dark-mode .product-detail-copy h4 {
  color: #fff;
}

html.dark-mode .product-detail-copy p {
  color: rgba(255, 255, 255, 0.72);
}

html.dark-mode .product-detail-more {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    0 8px 24px rgba(190, 55, 69, 0.16);
}

html.dark-mode .product-detail-more:hover,
html.dark-mode .product-detail-more:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.38),
    0 10px 30px rgba(190, 55, 69, 0.24);
}

@media (max-width: 991px) {
  .product-card h3 {
    min-height: 0;
  }
  .product-detail-card {
    min-height: 380px;
  }
  .product-detail-stack--three .product-detail-card {
    min-height: 360px;
  }
  .product-detail-image {
    min-height: 165px;
  }
  .product-detail-copy {
    padding: 14px;
  }
  .product-detail-copy p {
    font-size: 0.76rem;
    line-height: 1.38;
  }
}

@media (max-width: 767px) {
  #promoCarousel.has-active-video .carousel-control-prev,
  #promoCarousel.has-active-video .carousel-control-next {
    bottom: 72px;
    height: auto;
  }

  .promo-video-controls {
    z-index: 30;
  }
  .product-actions {
    flex-direction: row;
    gap: 8px;
    padding-top: 14px;
  }

  .product-actions .product-link,
  .product-actions .product-official-main {
    flex: 1 1 0;
    padding-inline: 10px;
    font-size: 0.76rem;
    text-align: center;
    white-space: normal;
  }

  .product-details-overlay {
    align-items: start;
    padding: 10px;
    overflow: hidden;
  }

  .product-details-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 12px 16px;
    border-radius: 22px;
  }

  .product-details-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .product-detail-panel-head {
    gap: 7px;
    margin: 34px 0 16px;
  }

  .product-detail-panel-head h3 {
    max-width: calc(100% - 52px);
    padding: 11px 14px 13px;
    border-radius: 18px;
    font-size: 1rem;
    line-height: 1.22;
  }

  .product-detail-panel-head h3::after {
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
  }

  .product-detail-panel-subtitle {
    padding: 5px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.055em;
    text-align: center;
  }

  .product-detail-stack,
  .product-detail-stack--three {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
  }

  .product-detail-card,
  .product-detail-stack--three .product-detail-card {
    min-height: auto;
    border-radius: 18px;
  }

  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-card {
    animation: productPopupMobileCardIn 0.3s ease both;
  }

  .product-detail-image {
    min-height: 180px;
  }
  .product-detail-copy {
    padding: 14px 14px 16px;
  }

  .product-detail-copy h4 {
    font-size: 0.94rem;
    padding-left: 14px;
    margin-bottom: 8px;
  }

  .product-detail-copy h4::before {
    width: 4px;
  }
  .product-detail-copy h4::after {
    left: 14px;
  }

  .product-detail-copy p,
  .product-detail-stack--three .product-detail-copy p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .product-detail-panel-actions {
    margin-top: 16px;
    padding-top: 14px;
  }

  .product-detail-panel-actions::before {
    left: 6%;
    right: 6%;
  }

  .product-detail-more {
    width: 100%;
    max-width: 520px;
    font-size: 0.82rem;
  }

  .product-detail-more:hover,
  .product-detail-more:focus-visible {
    transform: translate3d(0, -2px, 0);
  }
}

@media (max-width: 430px) {
  .product-detail-image {
    min-height: 155px;
  }

  .product-detail-copy p,
  .product-detail-stack--three .product-detail-copy p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    font-size: 0.8rem;
    line-height: 1.43;
  }
}

@keyframes productPopupMobileCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-more,
  .product-detail-more::after,
  .product-detail-more i,
  .product-details-overlay,
  .product-details-backdrop,
  .product-details-dialog,
  .product-detail-panel-head,
  .product-detail-panel-actions,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-card,
  .product-details-overlay.is-closing
    .product-detail-panel.is-active
    .product-detail-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-card,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-panel-head,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-panel-actions {
    opacity: 1 !important;
  }
}

/* ============================================================================
38. RELEASE LANDSCAPE MOBILE POPUP SCROLL FIX

Phones in landscape have very little vertical height. In that state, the popup
must scroll as a full overlay instead of relying only on nested dialog scrolling.
This keeps the cards and CTA reachable on iOS Safari, Android Chrome, and older
mobile browsers while preserving the normal desktop/tablet layout.
============================================================================ */
@media (max-width: 900px) and (orientation: landscape),
  (max-height: 520px) and (max-width: 980px) {
  .product-details-overlay.is-open,
  .product-details-overlay.is-closing {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
  }

  .product-details-backdrop {
    position: fixed;
  }

  .product-details-dialog {
    width: min(960px, calc(100vw - 20px));
    max-height: none;
    min-height: auto;
    margin: 0 auto 10px;
    overflow: visible;
    padding: 14px 12px 16px;
    border-radius: 20px;
  }

  .product-details-close {
    position: sticky;
    top: 8px;
    margin-left: auto;
    z-index: 5;
    width: 34px;
    height: 34px;
  }

  .product-detail-panel-head {
    margin: 4px 0 12px;
    gap: 6px;
  }

  .product-detail-panel-head h3 {
    max-width: calc(100% - 48px);
    padding: 9px 14px 11px;
    font-size: 0.95rem;
    border-radius: 16px;
  }

  .product-detail-panel-subtitle {
    padding: 4px 10px;
    font-size: 0.66rem;
  }

  .product-detail-stack,
  .product-detail-stack--three {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 620px;
  }

  .product-detail-card,
  .product-detail-stack--three .product-detail-card {
    min-height: auto;
    border-radius: 16px;
  }

  .product-detail-image {
    min-height: 135px;
  }

  .product-detail-copy {
    padding: 12px 13px 14px;
  }

  .product-detail-copy h4 {
    font-size: 0.92rem;
    margin-bottom: 7px;
  }

  .product-detail-copy p,
  .product-detail-stack--three .product-detail-copy p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .product-detail-panel-actions {
    margin-top: 14px;
    padding-top: 12px;
    padding-bottom: 2px;
  }

  .product-detail-more {
    width: min(520px, 100%);
    min-height: 40px;
    font-size: 0.8rem;
  }
}

/* ============================================================================
39. RELEASE CTA NO UNDERLINE FIX

Keeps the "Види повеќе продукти" CTA consistent with the rest of the site by
removing visible underline effects while preserving the lift and icon animation.
============================================================================ */
.product-detail-more,
.product-detail-more:hover,
.product-detail-more:focus,
.product-detail-more:focus-visible,
.product-detail-more:active {
  text-decoration: none !important;
}

.product-detail-more::after {
  display: none !important;
}

/* ============================================================================
40. FINAL CROSS-BROWSER MOTION UNIFICATION PATCH
-------------------------------------------------------------------------------
Purpose:
- The mobile navbar now animates consistently because it no longer depends on
  display:none/display:block, which cannot transition.
- The product details popup uses one lightweight transform/opacity animation on
  all browsers/devices, so Safari, Chrome, Edge, and Firefox feel the same.
- Landscape phone popup closing no longer jumps to the top; main.js preserves
  and restores the exact page scroll position while the overlay is open.
============================================================================ */

@media (max-width: 991px) {
  #mobileMenu,
  #mobileMenu:not(.is-open) {
    display: block !important;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translate3d(0, -10px, 0) scaleY(0.98);
    transform-origin: top center;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      padding-top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      padding-bottom 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.22s ease,
      transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.34s;
  }

  #mobileMenu.is-open {
    max-height: calc(100dvh - 92px);
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(1);
    pointer-events: auto;
    visibility: visible;
    overflow-y: auto;
    transition:
      max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      padding-top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      padding-bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  #mobileMenu.is-open {
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: calc(100dvh - 66px);
  }
}

@media (max-width: 991px) and (orientation: landscape) and (max-height: 430px) {
  #mobileMenu.is-open {
    padding-top: 8px;
    padding-bottom: 8px;
    max-height: calc(100dvh - 58px);
  }
}

.product-details-overlay,
.product-details-backdrop,
.product-details-dialog,
.product-detail-panel-head,
.product-detail-panel-actions,
.product-detail-card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.product-details-dialog {
  transform: translate3d(0, 18px, 0) scale(0.98);
  transition:
    opacity 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-details-overlay.is-open .product-details-dialog {
  transform: translate3d(0, 0, 0) scale(1);
}

.product-details-overlay.is-closing .product-details-dialog {
  transform: translate3d(0, 12px, 0) scale(0.99);
  transition:
    opacity 0.18s ease,
    transform 0.22s ease;
}

@keyframes productPopupContentIn {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes productPopupCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes productPopupMobileCardIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes productPopupContentOut {
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

@keyframes productPopupCardOut {
  to {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

.product-detail-card,
.product-detail-card-1,
.product-detail-card-2,
.product-detail-card-3 {
  --card-rotate: 0deg;
}
/* Prevent images and media visuals from being dragged/selected */
img,
.product-detail-image,
.promo-media,
.hero-logo-desktop,
.navbar-logo,
.footer-logoB {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
/* ============================================================================
41. MOBILE PRODUCT POPUP REPAINT STABILITY
-------------------------------------------------------------------------------
Fixes mobile browser repaint/compositing issues in long product detail panels
(e.g., DIAGRAMM HALBACH consumables) where content can disappear while scrolling
back upward. Mobile uses the fixed overlay as the only scrolling container and
keeps cards in their final painted state instead of animating/translating them.
============================================================================ */
@media (max-width: 767px) {
  .product-details-overlay.is-open,
  .product-details-overlay.is-closing {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px;
  }

  .product-details-backdrop {
    position: fixed;
  }

  .product-details-dialog {
    width: min(620px, calc(100vw - 16px));
    max-height: none;
    overflow: visible;
    margin: 0 auto 12px;
    transform: none;
    will-change: auto;
  }

  .product-details-overlay.is-open .product-details-dialog,
  .product-details-overlay.is-closing .product-details-dialog {
    transform: none;
  }

  .product-details-close {
    position: sticky;
    top: 8px;
    margin-left: auto;
    z-index: 10;
  }

  .product-detail-panel-head,
  .product-detail-panel-actions,
  .product-detail-card,
  .product-detail-stack--three .product-detail-card,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-panel-head,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-panel-actions,
  .product-details-overlay.is-open
    .product-detail-panel.is-active
    .product-detail-card,
  .product-details-overlay.is-closing
    .product-detail-panel.is-active
    .product-detail-panel-head,
  .product-details-overlay.is-closing
    .product-detail-panel.is-active
    .product-detail-panel-actions,
  .product-details-overlay.is-closing
    .product-detail-panel.is-active
    .product-detail-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-property:
      background-color, border-color, box-shadow, color !important;
    will-change: auto !important;
  }

  .product-detail-stack,
  .product-detail-stack--three {
    perspective: none;
    transform-style: flat;
  }

  .product-detail-card,
  .product-detail-card-1,
  .product-detail-card-2,
  .product-detail-card-3 {
    --card-rotate: 0deg;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    contain: none;
  }

  .product-detail-image,
  .product-detail-copy {
    transform: none;
    will-change: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
}

/* ============================================================================
42. FINAL NAVBAR + HERO LOGO STABILITY
-------------------------------------------------------------------------------
Keeps the navbar usable at laptop/constrained desktop widths and keeps the hero
logo away from the hero card without visually squeezing it.
============================================================================ */

/* Compact desktop navbar before switching to hamburger. */
@media (min-width: 1301px) and (max-width: 1450px) {
  .navbar-custom .nav-link {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 0.84rem;
  }

  .navbar-custom .nav-link::after {
    left: 12px;
    right: 12px;
  }

  .nav-controls {
    gap: 7px;
    margin-left: 10px;
  }

  .control-group {
    gap: 6px;
    padding: 4px 4px 4px 9px;
  }

  .control-label {
    font-size: 0.62rem;
    letter-spacing: 0.35px;
  }

  .lang-btn {
    padding: 5px 8px;
    font-size: 0.68rem;
  }

  .theme-toggle,
  .animation-toggle {
    width: 32px;
    min-width: 32px;
    height: 29px;
  }

  .navbar-custom.logo-visible .navbar-logo {
    height: 32px;
    margin-right: 4px;
  }
}

/* Use the existing hamburger drawer before desktop nav starts overflowing. */
@media (max-width: 1300px) {
  .navbar-custom .d-lg-flex {
    display: none !important;
  }

  .navbar-custom .d-lg-none {
    display: block !important;
  }

  .navbar-custom .container {
    max-width: 100%;
  }

  .navbar-logo {
    display: inline-block;
    height: 52px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .navbar-custom.logo-visible .navbar-logo,
  .navbar-custom.scrolled .navbar-logo {
    height: 44px;
  }

  .navbar-toggler-custom {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
  }

  #mobileMenu:not(.is-open) {
    display: none !important;
  }
}

@media (max-width: 1300px) and (orientation: landscape) {
  .navbar-logo {
    height: 44px;
  }

  .navbar-custom.logo-visible .navbar-logo,
  .navbar-custom.scrolled .navbar-logo {
    height: 38px;
  }
}

/* Hero logo: natural aspect ratio, safer size caps, no squishing. */
@media (min-width: 992px) and (max-width: 1399px) {
  .hero-parallax-content,
  .hero-parallax-card {
    transform: none !important;
    transition: none !important;
  }

  .hero-content {
    min-width: 0;
    overflow: hidden;
    padding-right: 24px;
  }

  .hero-visual {
    min-width: 0;
    padding-left: 24px;
  }

  .hero-logo-desktop {
    width: min(100%, clamp(340px, 36vw, 520px));
    max-width: calc(100% - 12px);
    height: auto;
    transform: none !important;
    transform-origin: left center;
  }

  .hero-logo-desktop.scrolled-away {
    transform: translateY(-20px) !important;
  }
}

@media (min-width: 1400px) {
  .hero-logo-desktop {
    width: min(100%, clamp(440px, 42vw, 650px));
    max-width: min(100%, 650px);
    height: auto;
    transform: none !important;
  }

  .hero-logo-desktop.scrolled-away {
    transform: translateY(-20px) !important;
  }
}

/* ============================================================================
43. MOBILE NAVBAR OPEN/CLOSE ANIMATION RESTORE
-------------------------------------------------------------------------------
The custom 1300px navbar breakpoint uses the mobile drawer earlier than
Bootstrap's default lg breakpoint. This final override keeps #mobileMenu in the
layout so max-height/opacity/transform can animate. The menu is still visually
closed and non-interactive until .is-open is added by main.js.
============================================================================ */
@media (max-width: 1300px) {
  #mobileMenu,
  #mobileMenu:not(.is-open) {
    display: block !important;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    box-shadow: none;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transform: translate3d(0, -10px, 0) scaleY(0.98);
    transform-origin: top center;
    transition:
      max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      padding-top 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      padding-bottom 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      opacity 0.22s ease,
      transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.34s;
  }

  #mobileMenu.is-open {
    max-height: calc(100dvh - 92px);
    margin-top: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-md);
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    visibility: visible;
    transform: translate3d(0, 0, 0) scaleY(1);
    transition:
      max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      margin-top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      padding-top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      padding-bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      opacity 0.24s ease,
      transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }
}

@media (max-width: 1300px) and (orientation: landscape) {
  #mobileMenu.is-open {
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: calc(100dvh - 66px);
  }
}

@media (max-width: 1300px) and (orientation: landscape) and (max-height: 430px) {
  #mobileMenu.is-open {
    padding-top: 8px;
    padding-bottom: 8px;
    max-height: calc(100dvh - 58px);
  }
}