/*
  ============================================================
  BioDEsign Systems · Premium UI Upgrade v2
  Apple / macOS Design Language Enhancement
  ============================================================

  Этот файл подключается ПОСЛЕ index.css и переопределяет
  визуальный стиль в сторону Apple/macOS-эстетики:
  — плавающие окна с chrome-bar и traffic lights
  — многослойные «глубокие» тени (Apple-shadow)
  — Apple Store-стиль для карточек товаров
  — Refined glassmorphism
  ============================================================
*/

/* ──────────────────────────────────────────────────────────
   ENHANCED DESIGN TOKENS
   ────────────────────────────────────────────────────────── */
:root {
  --chrome-height: 33px;

  /* Apple-style multi-layer shadows */
  --shadow-apple-sm:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(5,25,45,0.07),
    0 12px 28px rgba(5,25,45,0.06);

  --shadow-apple-md:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(5,25,45,0.09),
    0 24px 56px rgba(5,25,45,0.10),
    inset 0 1px 0 rgba(255,255,255,0.7);

  --shadow-apple-lg:
    0 2px 6px rgba(0,0,0,0.05),
    0 12px 32px rgba(5,25,45,0.11),
    0 36px 80px rgba(5,25,45,0.16),
    0 72px 140px rgba(5,25,45,0.11),
    inset 0 1px 0 rgba(255,255,255,0.75);

  --shadow-apple-window:
    0 2px 4px rgba(0,0,0,0.03),
    0 10px 28px rgba(5,25,45,0.09),
    0 32px 72px rgba(5,25,45,0.15),
    0 64px 128px rgba(5,25,45,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);

  --radius-window: 14px;
  --radius-card: 22px;
  --radius-section: 24px;
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --shadow-apple-window:
    0 2px 4px rgba(0,0,0,0.2),
    0 10px 28px rgba(0,0,0,0.3),
    0 32px 72px rgba(0,0,0,0.4),
    0 64px 128px rgba(0,0,0,0.35);
}

/* ──────────────────────────────────────────────────────────
   FLOATING DEVICE CARDS → macOS WINDOW STYLE
   ────────────────────────────────────────────────────────── */

/* Базовый стиль окна */
.floating-device {
  border-radius: var(--radius-window) !important;
  overflow: hidden !important;
  padding-top: var(--chrome-height) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: var(--shadow-apple-window) !important;
}

[data-theme="dark"] .floating-device {
  background: rgba(28, 28, 30, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: var(--shadow-apple-window) !important;
}

/* macOS title bar с traffic lights (через radial-gradient) */
.floating-device::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--chrome-height) !important;
  z-index: 10 !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;

  /* Chrome-bar: белый фон + три точки traffic lights */
  background:
    /* Красная — Close */
    radial-gradient(circle at center, #FF5F57 5px, transparent 5px)
      calc(0% + 14px) 50% / 11px 11px no-repeat,
    /* Жёлтая — Minimize */
    radial-gradient(circle at center, #FEBC2E 5px, transparent 5px)
      calc(0% + 33px) 50% / 11px 11px no-repeat,
    /* Зелёная — Maximize */
    radial-gradient(circle at center, #28C840 5px, transparent 5px)
      calc(0% + 52px) 50% / 11px 11px no-repeat,
    /* Фон title bar */
    rgba(246, 246, 248, 0.94) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-theme="dark"] .floating-device::before {
  background:
    radial-gradient(circle at center, #FF5F57 5px, transparent 5px)
      calc(0% + 14px) 50% / 11px 11px no-repeat,
    radial-gradient(circle at center, #FEBC2E 5px, transparent 5px)
      calc(0% + 33px) 50% / 11px 11px no-repeat,
    radial-gradient(circle at center, #28C840 5px, transparent 5px)
      calc(0% + 52px) 50% / 11px 11px no-repeat,
    rgba(30, 30, 32, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* Изображение внутри окна — меньше отступ сверху */
.floating-device img {
  padding: 8px 14px 14px !important;
}

/* ──────────────────────────────────────────────────────────
   HERO DEVICE STAGE — More 3D depth
   ────────────────────────────────────────────────────────── */

.hero-device-stage {
  perspective: 2400px !important;
}

/* Устанавливаем улучшенные тени для каждой карточки отдельно */
.device-large {
  box-shadow: var(--shadow-apple-window) !important;
  animation: device-float-large 8s var(--easing-smooth) infinite !important;
}

.device-mid {
  box-shadow: var(--shadow-apple-window) !important;
  animation: device-float-mid 7s var(--easing-smooth) infinite !important;
  animation-delay: -2.5s !important;
}

.device-small {
  box-shadow: var(--shadow-apple-window) !important;
  animation: device-float-small 6.5s var(--easing-smooth) infinite !important;
  animation-delay: -4.8s !important;
}

/* Более органичные паттерны парения */
@keyframes device-float-large {
  0%, 100% { translate: 0 0; }
  30%       { translate: 3px -16px; }
  60%       { translate: -4px -22px; }
  80%       { translate: -2px -12px; }
}

@keyframes device-float-mid {
  0%, 100% { translate: 0 0; }
  35%       { translate: -5px -18px; }
  70%       { translate: 4px -10px; }
}

@keyframes device-float-small {
  0%, 100% { translate: 0 0; }
  40%       { translate: 6px -20px; }
  75%       { translate: -4px -14px; }
}

/* ──────────────────────────────────────────────────────────
   SCROLL OFFSET — sections don't hide under sticky header
   ────────────────────────────────────────────────────────── */

section,
footer {
  scroll-margin-top: 88px !important;
}

/* ──────────────────────────────────────────────────────────
   NAVIGATION — Apple Pill Buttons
   ────────────────────────────────────────────────────────── */

/* Prevent "О" / "НАС" wrap */
.nav-links a,
.nav-menu-button {
  white-space: nowrap !important;
}

/* Pill-button look for each nav item */
.nav-links {
  gap: 2px !important;
  align-items: center !important;
}

.nav-links a,
.nav-links .nav-menu-button {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--text-secondary, #4a5568) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition:
    background 0.18s var(--easing-smooth),
    color 0.18s,
    box-shadow 0.18s !important;
}

.nav-links a:hover,
.nav-links .nav-menu-button:hover {
  background: rgba(120, 120, 130, 0.10) !important;
  color: var(--text-primary, #07151c) !important;
}

.nav-links a.active,
.nav-links .nav-menu-button.active {
  background: rgba(120, 120, 130, 0.13) !important;
  color: var(--text-primary, #07151c) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

[data-theme="dark"] .nav-links a,
[data-theme="dark"] .nav-links .nav-menu-button {
  color: rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.active,
[data-theme="dark"] .nav-links .nav-menu-button:hover,
[data-theme="dark"] .nav-links .nav-menu-button.active {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* ──────────────────────────────────────────────────────────
   HEADER — Refined Apple-style pill
   ────────────────────────────────────────────────────────── */

header {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 6px 20px rgba(5,25,45,0.07),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

[data-theme="dark"] header {
  background: rgba(28, 28, 30, 0.76) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.2),
    0 6px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.06),
    0 12px 32px rgba(5,25,45,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

[data-theme="dark"] header.scrolled {
  background: rgba(28, 28, 30, 0.90) !important;
}

/* ──────────────────────────────────────────────────────────
   PROOF ITEMS (статистика в hero)
   ────────────────────────────────────────────────────────── */

.proof-item {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(5,25,45,0.06),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
  transition: transform 0.3s var(--easing-spring), box-shadow 0.3s !important;
}

.proof-item:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: var(--shadow-apple-md) !important;
}

/* ──────────────────────────────────────────────────────────
   PRODUCT CARDS — Apple Store Style
   ────────────────────────────────────────────────────────── */

.product-card {
  border-radius: var(--radius-card) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-apple-sm) !important;
  transition:
    transform 0.40s var(--easing-spring),
    box-shadow 0.40s var(--easing-smooth),
    border-color 0.25s !important;
}

[data-theme="dark"] .product-card {
  background: rgba(28, 28, 30, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.15),
    0 6px 20px rgba(0,0,0,0.2),
    0 18px 48px rgba(0,0,0,0.22) !important;
}

.product-card:hover {
  transform: translateY(-12px) scale(1.01) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 16px 48px rgba(5,25,45,0.12),
    0 40px 90px rgba(5,25,45,0.14) !important;
  border-color: rgba(18, 179, 199, 0.28) !important;
}

.product-card:hover .product-catalog-img {
  transform: translateY(-12px) scale(1.05) !important;
}

.product-image-container {
  border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0 !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.99), rgba(240,248,250,0.96)),
    radial-gradient(500px 300px at 65% 15%, rgba(18,179,199,0.18), transparent 65%) !important;
}

/* ──────────────────────────────────────────────────────────
   WORKFLOW & ENGINEERING CARDS
   ────────────────────────────────────────────────────────── */

.workflow-step,
.engineering-card {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: var(--shadow-apple-sm) !important;
  transition:
    transform 0.38s var(--easing-spring),
    box-shadow 0.38s var(--easing-smooth),
    border-color 0.25s !important;
}

[data-theme="dark"] .workflow-step,
[data-theme="dark"] .engineering-card {
  background: rgba(28, 28, 30, 0.88) !important;
}

.workflow-step:hover,
.engineering-card:hover {
  transform: translateY(-9px) scale(1.01) !important;
  box-shadow: var(--shadow-apple-md) !important;
  border-color: rgba(18, 179, 199, 0.32) !important;
}

/* ──────────────────────────────────────────────────────────
   LEGEND VISUAL (О компании секция)
   ────────────────────────────────────────────────────────── */

.legend-visual {
  border-radius: var(--radius-section) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.05),
    0 20px 56px rgba(5,25,45,0.09),
    0 52px 100px rgba(5,25,45,0.08) !important;
}

/* Chips на legend-visual */
.visual-chip {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 24px rgba(5,25,45,0.10),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}

/* ──────────────────────────────────────────────────────────
   MEGA MENU — More refined float
   ────────────────────────────────────────────────────────── */

.mega-menu {
  box-shadow:
    0 4px 16px rgba(0,0,0,0.05),
    0 24px 64px rgba(5,25,45,0.11),
    0 64px 128px rgba(5,25,45,0.07) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}

.mega-link-card {
  transition:
    transform 0.3s var(--easing-spring),
    box-shadow 0.3s var(--easing-smooth),
    border-color 0.2s,
    background 0.2s !important;
}

.mega-link-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: var(--shadow-apple-sm) !important;
}

/* ──────────────────────────────────────────────────────────
   MARKETPLACE BOARD PANELS
   ────────────────────────────────────────────────────────── */

.market-featured,
.market-panel,
.incoming-panel,
.manufacturer-panel {
  border-radius: 24px !important;
  box-shadow: var(--shadow-apple-sm) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

[data-theme="dark"] .market-featured,
[data-theme="dark"] .market-panel,
[data-theme="dark"] .incoming-panel,
[data-theme="dark"] .manufacturer-panel {
  background: rgba(28, 28, 30, 0.78) !important;
}

.market-mini-card {
  border-radius: 18px !important;
  transition:
    transform 0.3s var(--easing-spring),
    box-shadow 0.3s var(--easing-smooth),
    border-color 0.2s !important;
}

.market-mini-card:hover {
  transform: translateY(-7px) scale(1.01) !important;
  box-shadow: var(--shadow-apple-sm) !important;
}

/* ──────────────────────────────────────────────────────────
   MANUFACTURER CHIPS
   ────────────────────────────────────────────────────────── */

.manufacturer-chip {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 12px 36px rgba(5,25,45,0.07),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  transition:
    transform 0.38s var(--easing-spring),
    box-shadow 0.38s var(--easing-smooth),
    border-color 0.25s !important;
}

.manufacturer-chip:hover {
  transform: translateY(-12px) scale(1.02) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.07),
    0 28px 70px rgba(5,25,45,0.14) !important;
}

/* ──────────────────────────────────────────────────────────
   CINEMATIC SECTION — Stage ring upgrade
   ────────────────────────────────────────────────────────── */

.cinema-ring {
  box-shadow:
    0 8px 32px rgba(0,0,0,0.04),
    0 36px 96px rgba(5,25,45,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

/* ──────────────────────────────────────────────────────────
   FILTER TABS — Apple Segmented Control Style
   ────────────────────────────────────────────────────────── */

.filter-tabs {
  background: rgba(120, 120, 130, 0.11) !important;
  border-color: transparent !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 4px !important;
  border-radius: 999px !important;
}

.filter-tab {
  border-radius: 999px !important;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
}

.filter-tab.active {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.10),
    0 3px 8px rgba(0,0,0,0.08) !important;
}

[data-theme="dark"] .filter-tab.active {
  background: rgba(58, 58, 63, 0.95) !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.3),
    0 3px 8px rgba(0,0,0,0.25) !important;
}

/* ──────────────────────────────────────────────────────────
   SEARCH BOX — Apple Spotlight Style
   ────────────────────────────────────────────────────────── */

.search-box input {
  background: rgba(120, 120, 130, 0.10) !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  height: 46px !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.search-box input:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(18, 179, 199, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(18, 179, 199, 0.13) !important;
}

[data-theme="dark"] .search-box input {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .search-box input:focus {
  background: rgba(40, 40, 44, 0.95) !important;
}

/* ──────────────────────────────────────────────────────────
   MODAL — Apple Sheet Style
   ────────────────────────────────────────────────────────── */

.modal-container {
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 32px 96px rgba(5,25,45,0.16),
    0 80px 160px rgba(5,25,45,0.10) !important;
}

.modal-visual {
  border-radius: 18px !important;
}

/* ──────────────────────────────────────────────────────────
   CART DRAWER — Premium Sidebar
   ────────────────────────────────────────────────────────── */

.cart-drawer {
  border-radius: 18px !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 32px 96px rgba(5,25,45,0.14) !important;
}

/* ──────────────────────────────────────────────────────────
   CART ITEMS
   ────────────────────────────────────────────────────────── */

.cart-item {
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s !important;
}

.cart-item:hover {
  box-shadow: 0 4px 16px rgba(5,25,45,0.08) !important;
}

/* ──────────────────────────────────────────────────────────
   TOAST NOTIFICATION — Apple HUD Style
   ────────────────────────────────────────────────────────── */

.toast {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.08),
    0 16px 48px rgba(5,25,45,0.10) !important;
}

[data-theme="dark"] .toast {
  background: rgba(40, 40, 44, 0.88) !important;
}

/* ──────────────────────────────────────────────────────────
   BUTTONS — More refined
   ────────────────────────────────────────────────────────── */

.btn-primary {
  box-shadow:
    0 2px 6px rgba(7,21,28,0.15),
    0 8px 24px rgba(7,21,28,0.14),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition:
    transform 0.25s var(--easing-spring),
    box-shadow 0.25s var(--easing-smooth),
    background 0.2s !important;
}

.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 4px 12px rgba(7,21,28,0.2),
    0 16px 40px rgba(7,21,28,0.18) !important;
}

.btn-secondary {
  transition:
    transform 0.25s var(--easing-spring),
    box-shadow 0.25s var(--easing-smooth),
    border-color 0.2s !important;
}

.btn-secondary:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-apple-sm) !important;
}

.btn-accent {
  box-shadow:
    0 2px 8px rgba(18,179,199,0.22),
    0 8px 24px rgba(18,179,199,0.16) !important;
}

.btn-accent:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 4px 16px rgba(18,179,199,0.28),
    0 16px 40px rgba(18,179,199,0.18) !important;
}

/* ──────────────────────────────────────────────────────────
   CINEMATIC STEPS — More depth
   ────────────────────────────────────────────────────────── */

.cinematic-step {
  border-radius: 18px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition:
    opacity 0.4s var(--easing-smooth),
    transform 0.4s var(--easing-smooth),
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s !important;
}

.cinematic-step.active {
  box-shadow: var(--shadow-apple-sm) !important;
}

/* ──────────────────────────────────────────────────────────
   MEGA PANEL COPY — Glass card
   ────────────────────────────────────────────────────────── */

.mega-panel-copy {
  border-radius: 18px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ──────────────────────────────────────────────────────────
   CONFIG MODAL — Apple Settings Panel
   ────────────────────────────────────────────────────────── */

.config-modal {
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.08),
    0 32px 80px rgba(5,25,45,0.14) !important;
}

/* ──────────────────────────────────────────────────────────
   FOOTER — Richer dark gradient
   ────────────────────────────────────────────────────────── */

footer {
  background:
    linear-gradient(150deg, #07151c 0%, #0d2535 55%, #081820 100%),
    radial-gradient(800px 400px at 85% 0%, rgba(18,179,199,0.18), transparent 65%),
    radial-gradient(600px 400px at 10% 80%, rgba(76,191,145,0.10), transparent 65%) !important;
}

/* ──────────────────────────────────────────────────────────
   MARKET INCOMING TABLE
   ────────────────────────────────────────────────────────── */

.incoming-table {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* ──────────────────────────────────────────────────────────
   LANGUAGE SWITCHER — More refined
   ────────────────────────────────────────────────────────── */

.language-switcher {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.language-option.active {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ──────────────────────────────────────────────────────────
   HERO SECTION — Minor background enhancement
   ────────────────────────────────────────────────────────── */

@media (min-width: 821px) {
  .hero-device-stage {
    transform: translate3d(0, calc(var(--hero-progress) * -72px), 0) scale(calc(1 + var(--hero-progress) * 0.07)) !important;
  }
}

/* ──────────────────────────────────────────────────────────
   PAGE TRANSITIONS — страницы появляются с анимацией
   ────────────────────────────────────────────────────────── */

/* По умолчанию секции скрыты через JS.
   CSS-анимация при появлении. */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-page].page-visible {
  animation: page-enter 0.42s var(--easing-smooth) both !important;
}

/* Небольшая задержка между секциями одной страницы */
[data-page].page-visible:nth-of-type(2) {
  animation-delay: 0.06s !important;
}

/* ──────────────────────────────────────────────────────────
   PAGE PROGRESS INDICATOR — Right-side dot trail (Apple/iPhone feel)
   ────────────────────────────────────────────────────────── */

#page-nav-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

#page-nav-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(80, 80, 90, 0.25);
  transition: all 0.35s var(--easing-smooth);
  pointer-events: auto;
  cursor: pointer;
}

#page-nav-dots .dot.active {
  height: 20px;
  border-radius: 3px;
  background: rgba(18, 179, 199, 0.85);
}

[data-theme="dark"] #page-nav-dots .dot {
  background: rgba(255,255,255,0.2);
}
[data-theme="dark"] #page-nav-dots .dot.active {
  background: rgba(18, 179, 199, 0.9);
}

@media (max-width: 1024px) {
  #page-nav-dots { display: none; }
}

/* ──────────────────────────────────────────────────────────
   SECTION VISUAL SEPARATORS — Premium dividers
   ────────────────────────────────────────────────────────── */

section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.045) !important;
}

[data-theme="dark"] section + section {
  border-top-color: rgba(255, 255, 255, 0.04) !important;
}

/* ──────────────────────────────────────────────────────────
   CATALOG SECTION — Sidebar filter layout
   ────────────────────────────────────────────────────────── */

/* Make the catalog section feel like its own "page" */
.catalog-section {
  min-height: 100vh !important;
  background:
    radial-gradient(900px 600px at 5% 30%, rgba(18,179,199,0.04), transparent 65%),
    radial-gradient(700px 500px at 90% 70%, rgba(76,191,145,0.04), transparent 65%) !important;
}

/* Top filter bar as a floating pill row */
.controls-wrapper {
  position: sticky !important;
  top: 80px !important;
  z-index: 100 !important;
  background: rgba(248, 248, 252, 0.92) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  margin-bottom: 28px !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 8px 24px rgba(5,25,45,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

[data-theme="dark"] .controls-wrapper {
  background: rgba(28, 28, 30, 0.92) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.2),
    0 8px 24px rgba(0,0,0,0.25) !important;
}

/* ──────────────────────────────────────────────────────────
   ENGINEERING SECTION — Full page feel
   ────────────────────────────────────────────────────────── */

.engineering-section {
  min-height: 80vh !important;
}

/* ──────────────────────────────────────────────────────────
   MARKETPLACE (Inventory) SECTION — Premium board
   ────────────────────────────────────────────────────────── */

.marketplace-section {
  min-height: 70vh !important;
  background:
    radial-gradient(800px 500px at 85% 20%, rgba(76,191,145,0.05), transparent 65%) !important;
}

/* ──────────────────────────────────────────────────────────
   ABOUT SECTION — Upgrade with Apple grid
   ────────────────────────────────────────────────────────── */

.about-section,
section#about {
  min-height: 70vh !important;
}

/* ──────────────────────────────────────────────────────────
   HERO — Full viewport height
   ────────────────────────────────────────────────────────── */

.hero {
  min-height: 100vh !important;
}

/* ──────────────────────────────────────────────────────────
   PRODUCT CARD — More premium image area
   ────────────────────────────────────────────────────────── */

.product-catalog-img {
  width: 72% !important;
  object-fit: contain !important;
  transition: transform 0.5s var(--easing-spring) !important;
}

/* Product name typography */
.product-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.product-tagline {
  font-size: 12.5px !important;
  opacity: 0.62 !important;
  letter-spacing: -0.005em !important;
}

/* Product badge */
.product-badge {
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ──────────────────────────────────────────────────────────
   SECTION HEADERS — Refined typography
   ────────────────────────────────────────────────────────── */

.section-header .eyebrow {
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  opacity: 0.55 !important;
}

.section-header h2 {
  font-size: clamp(28px, 4vw, 46px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────────
   LOGO — More polished
   ────────────────────────────────────────────────────────── */

.logo-container img {
  height: 32px !important;
  width: auto !important;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE: Mobile chrome bar hide on small cards
   ────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .floating-device {
    padding-top: 28px !important;
    --chrome-height: 28px;
  }

  .floating-device::before {
    height: 28px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MEGA DESIGN EXPERT AUDIT — v2.1
   Сравнение с Linear.app · Vercel · Stripe · Apple.com
   Исправления типографики, цвета, ритма, сетки
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. HERO — ТУГАЯ ТИПОГРАФИКА + ГРАДИЕНТНЫЕ ОРБЫ
   ────────────────────────────────────────────────────────── */

/* Tight headline like Vercel/Linear */
.hero h1 {
  font-size: clamp(44px, 7vw, 92px) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
}

/* Ограничиваем ширину текстового блока */
.hero-text {
  max-width: 560px !important;
}

/* Ambient gradient orbs (как у Linear/Vercel) */
.hero-ambient span:nth-child(1) {
  background: radial-gradient(ellipse, rgba(18,179,199,0.22) 0%, transparent 65%) !important;
  width: 700px !important;
  height: 500px !important;
  top: -10% !important;
  left: -8% !important;
}
.hero-ambient span:nth-child(2) {
  background: radial-gradient(ellipse, rgba(76,191,145,0.16) 0%, transparent 65%) !important;
  width: 600px !important;
  height: 400px !important;
  top: 40% !important;
  right: 5% !important;
}
.hero-ambient span:nth-child(3) {
  background: radial-gradient(ellipse, rgba(100,120,240,0.10) 0%, transparent 65%) !important;
  width: 500px !important;
  height: 300px !important;
  bottom: 0 !important;
  left: 30% !important;
}

/* ──────────────────────────────────────────────────────────
   2. PROOF / STATS — Premium glass tiles
   ────────────────────────────────────────────────────────── */

.hero-proof {
  gap: 12px !important;
}

.proof-item {
  min-width: 110px !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
}

.proof-item .proof-value {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.proof-item .proof-label {
  font-size: 11px !important;
  opacity: 0.55 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  display: block !important;
}

/* ──────────────────────────────────────────────────────────
   3. HERO BUTTONS — Pill size & weight upgrade
   ────────────────────────────────────────────────────────── */

.hero-buttons {
  gap: 12px !important;
  margin: 32px 0 !important;
}

.hero-buttons .btn-primary {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: -0.01em !important;
}

.hero-buttons .btn-secondary {
  padding: 13px 26px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  letter-spacing: -0.01em !important;
}

/* ──────────────────────────────────────────────────────────
   4. HEADER — Tighter, more balanced
   ────────────────────────────────────────────────────────── */

.header-inner {
  height: 60px !important;
  padding: 0 24px !important;
}

/* Logo image cleaner */
.logo-container {
  display: flex !important;
  align-items: center !important;
}

/* ──────────────────────────────────────────────────────────
   5. EYEBROW TEXT — Consistent across ALL sections
   ────────────────────────────────────────────────────────── */

.eyebrow,
[class*="eyebrow"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.5 !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* ──────────────────────────────────────────────────────────
   6. SECTION HEADER — Linear/Vercel typography
   ────────────────────────────────────────────────────────── */

.section-header {
  max-width: 680px !important;
  margin: 0 auto 48px !important;
  text-align: center !important;
}

.section-header p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  opacity: 0.65 !important;
  max-width: 560px !important;
  margin: 12px auto 0 !important;
}

/* ──────────────────────────────────────────────────────────
   7. ENGINEERING CARDS — Better 4-column grid
   ────────────────────────────────────────────────────────── */

.features-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}

.engineering-card {
  padding: 28px !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

.engineering-card h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.engineering-card h4 svg {
  color: rgba(18,179,199,0.9) !important;
  flex-shrink: 0 !important;
}

.engineering-card p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  opacity: 0.6 !important;
}

/* ──────────────────────────────────────────────────────────
   8. WORKFLOW STEPS — Better spacing
   ────────────────────────────────────────────────────────── */

.workflow-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}

.workflow-step {
  padding: 28px !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

.step-num {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  opacity: 0.12 !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 16px !important;
}

.workflow-step h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

.workflow-step p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  opacity: 0.6 !important;
}

/* ──────────────────────────────────────────────────────────
   9. ABOUT / LEGEND SECTION — premium image ratio
   ────────────────────────────────────────────────────────── */

.legend-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.legend-text h2 {
  font-size: clamp(26px, 3.5vw, 42px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
}

.legend-text p {
  font-size: 16px !important;
  line-height: 1.7 !important;
  opacity: 0.7 !important;
  margin-bottom: 14px !important;
}

.capability-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.capability-list span {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  background: rgba(18,179,199,0.07) !important;
  border-radius: 10px !important;
  border-left: 2px solid rgba(18,179,199,0.5) !important;
  color: var(--text-primary) !important;
}

/* ──────────────────────────────────────────────────────────
   10. CONTACTS PAGE — Светлый full-page дизайн с картой
   ────────────────────────────────────────────────────────── */

/* ── Полный сброс тёмного index.css-футера ── */
footer#contacts {
  background: #ffffff !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  color: #1a1a2e !important;
}

/* index.css ставит footer p/a/h4 { color: #eef8fb } — перебиваем */
footer#contacts p,
footer#contacts a,
footer#contacts h4,
footer#contacts h1,
footer#contacts h2,
footer#contacts span,
footer#contacts small {
  color: inherit !important;
}

[data-theme="dark"] footer#contacts {
  background: #ffffff !important;
  color: #1a1a2e !important;
}

/* Обёртка страницы */
.contacts-page {
  min-height: 100vh !important;
  background: #ffffff !important;
  color: #1a1a2e !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Контакты всегда светлые — даже в тёмной теме */
[data-theme="dark"] .contacts-page {
  background: #ffffff !important;
  color: #1a1a2e !important;
}

/* Фоновые орбы */
.contacts-page::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(800px 500px at 95% 10%, rgba(18,179,199,0.09), transparent 55%),
    radial-gradient(600px 400px at 5% 90%, rgba(76,191,145,0.07), transparent 55%) !important;
  z-index: 0 !important;
}
.contacts-page > * { position: relative !important; z-index: 1 !important; }

/* ── Заголовок ── */
.contacts-header {
  text-align: center !important;
  padding-top: 130px !important;
  padding-bottom: 52px !important;
}

.contacts-eyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #12b3c7 !important;
  margin-bottom: 14px !important;
}

.contacts-title {
  font-size: clamp(34px, 5vw, 62px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #0f0f14 !important;
  margin: 0 0 16px !important;
}
/* всегда тёмный текст на белом фоне */
[data-theme="dark"] .contacts-title { color: #0f0f14 !important; }

.contacts-subtitle {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #6b7280 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}
[data-theme="dark"] .contacts-subtitle { color: #6b7280 !important; }

/* ── Основной блок ── */
.contacts-body {
  display: grid !important;
  grid-template-columns: 400px 1fr !important;
  gap: 36px !important;
  align-items: stretch !important;
  flex: 1 !important;
  padding-bottom: 56px !important;
}

/* ── Левая панель: карточки ── */
.contacts-info-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.contact-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s !important;
}
.contact-card:hover {
  box-shadow: 0 4px 20px rgba(18,179,199,0.12) !important;
}
[data-theme="dark"] .contact-card {
  background: #f5f5f7 !important;
  border-color: rgba(0,0,0,0.06) !important;
}

.contact-card-icon {
  width: 42px !important; height: 42px !important;
  background: rgba(18,179,199,0.12) !important;
  border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  color: #12b3c7 !important;
}

.contact-card-text {
  display: flex !important; flex-direction: column !important; gap: 4px !important;
}

.contact-card-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase !important;
  color: #9ca3af !important;
}
[data-theme="dark"] .contact-card-label { color: #9ca3af !important; }

.contact-card-value {
  font-size: 15px !important; font-weight: 500 !important;
  line-height: 1.5 !important; color: #1a1a2e !important;
}
[data-theme="dark"] .contact-card-value { color: #1a1a2e !important; }

.contact-card-link {
  text-decoration: none !important; color: #12b3c7 !important;
  transition: opacity 0.2s !important;
}
.contact-card-link:hover { opacity: 0.75 !important; }

/* Кнопка карты */
footer#contacts .contacts-map-btn,
.contacts-map-btn {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9fbff 100%) !important;
  color: #06314d !important;
  border: 1px solid rgba(18, 179, 199, 0.28) !important;
  box-shadow: 0 14px 34px rgba(18, 179, 199, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  border-radius: 999px !important; padding: 14px 24px !important;
  font-size: 14px !important; font-weight: 600 !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s !important;
  margin-top: 4px !important;
}
footer#contacts .contacts-map-btn:hover,
.contacts-map-btn:hover {
  border-color: rgba(18, 179, 199, 0.55) !important;
  box-shadow: 0 18px 42px rgba(18, 179, 199, 0.22), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-1px) !important;
}
[data-theme="dark"] footer#contacts .contacts-map-btn,
[data-theme="dark"] .contacts-map-btn {
  background: linear-gradient(135deg, rgba(11, 34, 48, 0.94) 0%, rgba(15, 91, 111, 0.9) 100%) !important;
  color: #ecfeff !important;
  border: 1px solid rgba(103, 232, 249, 0.34) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* ── Правая панель: карта ── */
.contacts-map-panel {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 12px 40px rgba(5,25,45,0.10),
    0 40px 80px rgba(5,25,45,0.07) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  min-height: 460px !important;
}
[data-theme="dark"] .contacts-map-panel {
  border-color: rgba(0,0,0,0.07) !important;
}

.contacts-map-iframe {
  width: 100% !important; height: 100% !important;
  min-height: 460px !important; border: none !important; display: block !important;
}

/* ── Нижняя строка ── */
.contacts-footer-bottom {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; font-size: 12px !important;
  color: #9ca3af !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  padding-top: 24px !important; padding-bottom: 32px !important;
  flex-wrap: wrap !important; gap: 8px !important;
}
[data-theme="dark"] .contacts-footer-bottom {
  color: #9ca3af !important;
  border-top-color: rgba(0,0,0,0.07) !important;
}

/* ── Адаптив ── */
@media (max-width: 920px) {
  .contacts-body { grid-template-columns: 1fr !important; }
  .contacts-map-panel { min-height: 320px !important; }
  .contacts-map-iframe { min-height: 320px !important; }
  .contacts-header { padding-top: 104px !important; }
}
@media (max-width: 640px) {
  .contacts-footer-bottom { flex-direction: column !important; text-align: center !important; }
}

/* ──────────────────────────────────────────────────────────
   11. PER-PAGE BACKGROUND ACCENTS — subtle differentiation
   ────────────────────────────────────────────────────────── */

/* Catalog page — commerce blue tint */
[data-page="catalog"].page-visible {
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(18,179,199,0.04), transparent) !important;
}

/* Engineering page — тёмный техно-акцент */
[data-page="engineering"].page-visible {
  background:
    radial-gradient(700px 400px at 100% 50%, rgba(18,179,199,0.05), transparent) !important;
}

/* About page — тёплый */
[data-page="about"].page-visible {
  background:
    radial-gradient(800px 500px at 80% 0%, rgba(76,191,145,0.05), transparent) !important;
}

/* Marketplace — premium gold tint */
[data-page="marketplace"].page-visible {
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(254,188,46,0.04), transparent) !important;
}

/* ──────────────────────────────────────────────────────────
   12. PRODUCT CARDS — tighter grid, bigger images
   ────────────────────────────────────────────────────────── */

#catalog-grid,
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 22px !important;
}

/* Product card — NO overflow:hidden on whole card (clips buttons) */
.product-card {
  overflow: visible !important;
  /* border-radius works via background-clip */
}

/* Image container handles its own clipping */
.product-image-container {
  height: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0 !important;
}

/* Real class names from app.js: product-content, product-title */
.product-content {
  padding: 18px 20px 20px !important;
}

.product-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 5px !important;
  line-height: 1.3 !important;
}

.product-tagline {
  font-size: 13px !important;
  opacity: 0.55 !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

/* ─── Product actions — статус сверху, кнопки снизу ─── */
.product-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

/* Статус-строка: «СТАТУС ● Refurbished» */
.price-box {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}

.price-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.38 !important;
}

.price-value {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* Card button row — кнопки в одну строку под статусом */
.card-button-row {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  margin-top: 0 !important;
}

.card-button-row .btn {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
}

/* Manufacturer badge */
.manufacturer-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--olympus-blue-primary, #12b3c7) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* ──────────────────────────────────────────────────────────
   13. SEARCH + FILTER CONTROLS — больше пространства
   ────────────────────────────────────────────────────────── */

.controls-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

.search-box {
  flex: 1 !important;
  min-width: 220px !important;
}

.filter-tabs {
  flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   14. MARKETPLACE BOARD — better featured card
   ────────────────────────────────────────────────────────── */

.market-featured {
  padding: 36px 40px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 40px !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

.market-kicker {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.45 !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.market-featured h3 {
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
}

/* ──────────────────────────────────────────────────────────
   15. FUTURE CONTENT GRID — шаблон для новых блоков
   ────────────────────────────────────────────────────────── */

/*
  Универсальная сетка для будущих секций:
  .content-grid          — обёртка с авто-колонками
  .content-card          — карточка контента
  .content-card--wide    — широкая (занимает 2 колонки)
  .content-card--tall    — высокая (занимает 2 ряда)
  .content-card--hero    — занимает всю ширину
  
  Пример использования:
  <div class="content-grid">
    <div class="content-card content-card--wide">...</div>
    <div class="content-card">...</div>
    <div class="content-card content-card--tall">...</div>
  </div>
*/

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
  width: 100%;
}

.content-card {
  grid-column: span 4;
  border-radius: 24px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: var(--shadow-apple-sm);
  padding: 28px;
  transition: transform 0.35s var(--easing-spring), box-shadow 0.35s var(--easing-smooth);
}

.content-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-apple-md);
}

[data-theme="dark"] .content-card {
  background: rgba(28,28,30,0.85);
  border-color: rgba(255,255,255,0.07);
}

.content-card--wide  { grid-column: span 8; }
.content-card--tall  { grid-row: span 2; }
.content-card--hero  { grid-column: span 12; }

@media (max-width: 1024px) {
  .content-grid { grid-template-columns: repeat(6, 1fr); }
  .content-card { grid-column: span 3; }
  .content-card--wide { grid-column: span 6; }
  .content-card--hero { grid-column: span 6; }
}

@media (max-width: 640px) {
  .content-grid { grid-template-columns: 1fr; }
  .content-card,
  .content-card--wide,
  .content-card--tall,
  .content-card--hero { grid-column: span 1; }
}

/* ──────────────────────────────────────────────────────────
   16. SCROLLBAR — Apple-style thin
   ────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(120,120,130,0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,130,0.45); }

/* ──────────────────────────────────────────────────────────
   17. SELECTION COLOR — brand teal
   ────────────────────────────────────────────────────────── */

::selection {
  background: rgba(18,179,199,0.22);
  color: inherit;
}

/* ──────────────────────────────────────────────────────────
   18. GLOBAL RHYTHM — consistent vertical spacing
   ────────────────────────────────────────────────────────── */

.catalog-section > .container,
.engineering-section > .container,
.marketplace-section > .container,
.legend-section > .container {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ──────────────────────────────────────────────────────────
   19. TAGS / BADGES — consistent pill style
   ────────────────────────────────────────────────────────── */

.product-badge,
.market-kicker,
.panel-kicker {
  font-family: inherit !important;
}

/* ──────────────────────────────────────────────────────────
   20. DARK MODE GLOBAL POLISH
   ────────────────────────────────────────────────────────── */

[data-theme="dark"] .engineering-card,
[data-theme="dark"] .workflow-step {
  border-color: rgba(255,255,255,0.05) !important;
}

[data-theme="dark"] .capability-list span {
  background: rgba(18,179,199,0.10) !important;
  border-left-color: rgba(18,179,199,0.4) !important;
}

[data-theme="dark"] .section-header p {
  opacity: 0.55 !important;
}

/* ══════════════════════════════════════════════════════════
   21. HERO PHOTO CAROUSEL
   ══════════════════════════════════════════════════════════ */

.hero-photo-carousel {
  position: relative !important;
  width: 480px !important;
  height: 380px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.12) !important;
  flex-shrink: 0 !important;
}
.carousel-slide {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transition: opacity 1s ease !important;
}
.carousel-slide.active { opacity: 1 !important; }
.carousel-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.carousel-dots {
  position: absolute !important;
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 7px !important;
  z-index: 3 !important;
  align-items: center !important;
}
.carousel-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.45) !important;
  cursor: pointer !important;
  transition: all 0.35s ease !important;
  border: none !important;
}
.carousel-dot.active {
  background: white !important;
  width: 22px !important;
  border-radius: 4px !important;
}
@media (max-width: 900px) {
  .hero-photo-carousel {
    width: 100% !important;
    height: 260px !important;
    border-radius: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   22. ABOUT SECTION — PREMIUM REDESIGN
   ══════════════════════════════════════════════════════════ */

.about-section { padding: 0 !important; overflow: hidden !important; }

/* Full-width hero banner */
.about-hero-banner {
  position: relative !important;
  height: 540px !important;
  overflow: hidden !important;
  display: block !important;
  background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #0d2137 100%) !important;
}
.about-hero-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center 40% !important;
  display: block !important;
}
.about-hero-gradient {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.08) 100%) !important;
  pointer-events: none !important;
}
.about-hero-text {
  position: absolute !important;
  bottom: 64px !important;
  left: 0 !important; right: 0 !important;
  padding: 0 max(24px, calc((100vw - 1200px)/2 + 24px)) !important;
}
.about-hero-text .eyebrow { color: rgba(255,255,255,0.78) !important; letter-spacing: 0.12em !important; }
.about-hero-text h2 {
  color: white !important;
  font-size: clamp(28px, 4.2vw, 56px) !important;
  font-weight: 700 !important; line-height: 1.1 !important;
  margin-top: 10px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* Stats bar */
.about-stats-row {
  background: #f5f5f7 !important;
  padding: 32px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .about-stats-row {
  background: #1d1d1f !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
.about-stats-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.about-stat { text-align: center !important; padding: 0 44px !important; }
.about-stat-num {
  display: block !important;
  font-size: 34px !important; font-weight: 700 !important;
  color: #0066cc !important; letter-spacing: -1.5px !important; line-height: 1 !important;
}
[data-theme="dark"] .about-stat-num { color: #3ea6ff !important; }
.about-stat-label {
  display: block !important;
  font-size: 11.5px !important; color: #6e6e73 !important;
  margin-top: 5px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important;
}
.about-stat-divider {
  width: 1px !important; height: 44px !important;
  background: rgba(0,0,0,0.1) !important; flex-shrink: 0 !important;
}
[data-theme="dark"] .about-stat-divider { background: rgba(255,255,255,0.1) !important; }

/* Content grid */
.about-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
  align-items: start !important;
}
.about-text-col h3 {
  font-size: clamp(22px, 2.5vw, 34px) !important;
  font-weight: 700 !important; margin: 12px 0 22px !important; line-height: 1.18 !important;
}
.about-text-col > p {
  font-size: 16px !important; line-height: 1.72 !important;
  color: var(--text-secondary) !important; margin-bottom: 16px !important;
}
.about-capabilities-list {
  margin-top: 30px !important; display: flex !important;
  flex-direction: column !important; gap: 11px !important;
}
.about-cap-item {
  display: flex !important; align-items: center !important;
  gap: 10px !important; font-size: 14.5px !important; font-weight: 500 !important;
}
.about-cap-item svg { color: #0066cc !important; flex-shrink: 0 !important; }
[data-theme="dark"] .about-cap-item svg { color: #3ea6ff !important; }

/* Photo mosaic */
.about-photo-mosaic {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 12px !important; height: 500px !important;
}
.mosaic-tall {
  grid-row: 1 / 3 !important;
  border-radius: 18px !important; overflow: hidden !important;
  background: #d0d0d5 !important;
}
.mosaic-small-top, .mosaic-small-bottom {
  border-radius: 18px !important; overflow: hidden !important;
  background: #d0d0d5 !important;
}
.about-photo-mosaic img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  transition: transform 0.5s ease !important; display: block !important;
}
.mosaic-tall:hover img,
.mosaic-small-top:hover img,
.mosaic-small-bottom:hover img { transform: scale(1.04) !important; }

/* Workflow */
.about-workflow {
  background: #f5f5f7 !important;
  padding: 72px 0 !important;
}
[data-theme="dark"] .about-workflow { background: #1d1d1f !important; }
.about-workflow-eyebrow {
  text-align: center !important; display: block !important; margin-bottom: 14px !important;
}
.about-workflow-title {
  text-align: center !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 700 !important; margin-bottom: 0 !important;
}
.about-workflow-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 36px !important; margin-top: 44px !important;
}
.about-workflow-step { text-align: center !important; padding: 0 8px !important; }
.about-workflow-step .step-num {
  display: block !important;
  font-size: 44px !important; font-weight: 800 !important;
  color: #0066cc !important; opacity: 0.22 !important;
  line-height: 1 !important; margin-bottom: 14px !important;
}
[data-theme="dark"] .about-workflow-step .step-num { color: #3ea6ff !important; opacity: 0.3 !important; }
.about-workflow-step h4 {
  font-size: 16px !important; font-weight: 700 !important; margin-bottom: 10px !important;
}
.about-workflow-step p {
  font-size: 13.5px !important; line-height: 1.65 !important; color: var(--text-secondary) !important;
}

/* Banner photo */
.about-banner-photo {
  position: relative !important; height: 420px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #0a1628, #1a3a5c) !important;
}
.about-banner-photo img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important; display: block !important;
}
.about-banner-overlay {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%) !important;
  display: flex !important;
  align-items: flex-end !important; justify-content: center !important;
  padding-bottom: 56px !important;
}
.about-banner-tagline {
  font-size: clamp(36px, 6vw, 72px) !important;
  font-weight: 800 !important; color: white !important;
  letter-spacing: -2px !important; text-align: center !important;
  margin: 0 !important; text-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Location + Map */
.about-location-grid {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  gap: 52px !important;
  padding-top: 88px !important; padding-bottom: 88px !important;
  align-items: start !important;
}
.about-location-info h3 {
  font-size: 28px !important; font-weight: 700 !important;
  margin: 12px 0 18px !important; line-height: 1.2 !important;
}
.about-location-info > p {
  font-size: 15px !important; line-height: 1.7 !important;
  color: var(--text-secondary) !important; margin-bottom: 28px !important;
}
.about-address-card {
  display: flex !important; align-items: flex-start !important;
  gap: 14px !important; background: #f5f5f7 !important;
  border-radius: 16px !important; padding: 18px 22px !important;
  margin-bottom: 12px !important;
  font-size: 14px !important; line-height: 1.55 !important;
}
[data-theme="dark"] .about-address-card { background: #2d2d30 !important; }
.about-address-card svg { margin-top: 2px !important; color: #0066cc !important; flex-shrink: 0 !important; }
[data-theme="dark"] .about-address-card svg { color: #3ea6ff !important; }
.about-address-card strong { display: block !important; font-weight: 600 !important; margin-bottom: 2px !important; }
.about-address-card small { color: #6e6e73 !important; font-size: 12.5px !important; }
.about-map-container {
  border-radius: 24px !important; overflow: hidden !important;
  height: 400px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.1) !important;
}
.about-map-iframe {
  width: 100% !important; height: 100% !important;
  border: none !important; display: block !important;
}

/* Responsive: About */
@media (max-width: 1024px) {
  .about-content-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important; padding-top: 56px !important; padding-bottom: 56px !important;
  }
  .about-photo-mosaic { height: 340px !important; }
  .about-workflow-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  .about-location-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important; padding-top: 56px !important; padding-bottom: 56px !important;
  }
  .about-stats-inner { flex-wrap: wrap !important; }
  .about-stat { padding: 12px 28px !important; }
  .about-hero-banner { height: 380px !important; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM UI RESTYLE v3 — Apple-like BioDesignSystems layer
   Keeps existing routing, catalog, cart and localization logic.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg-primary: #f6faff !important;
  --bg-secondary: #ffffff !important;
  --bg-soft: #eef5ff !important;
  --bg-glass: rgba(255, 255, 255, 0.74) !important;
  --bg-glass-hover: rgba(255, 255, 255, 0.92) !important;
  --border-color: rgba(37, 99, 235, 0.12) !important;
  --text-primary: #071a3a !important;
  --text-secondary: #667085 !important;
  --text-muted: #8a98ad !important;
  --brand-ink: #071a3a !important;
  --brand-blue: #2563eb !important;
  --brand-cyan: #3b82f6 !important;
  --brand-green: #22c55e !important;
  --metal-blue: #a8b4c7 !important;
  --panel-border: rgba(148, 163, 184, 0.24) !important;
  --premium-shadow-sm: 0 10px 28px rgba(7, 26, 58, 0.07), inset 0 1px 0 rgba(255,255,255,0.86);
  --premium-shadow-md: 0 22px 60px rgba(7, 26, 58, 0.11), 0 2px 8px rgba(7, 26, 58, 0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  --premium-shadow-lg: 0 40px 110px rgba(7, 26, 58, 0.16), 0 12px 32px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255,255,255,0.92);
  --radius-card: 28px !important;
  --radius-section: 32px !important;
}

[data-theme="dark"] {
  --bg-primary: #eef5ff !important;
  --bg-secondary: #ffffff !important;
  --bg-soft: #f5f9ff !important;
  --bg-glass: rgba(255, 255, 255, 0.74) !important;
  --bg-glass-hover: rgba(255, 255, 255, 0.94) !important;
  --text-primary: #071a3a !important;
  --text-secondary: #667085 !important;
  --text-muted: #8a98ad !important;
  --brand-ink: #071a3a !important;
}

* {
  letter-spacing: 0 !important;
}

body,
[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6faff 28%, #edf5ff 100%) !important;
  color: var(--text-primary) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, 0.026) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 72%);
}

h1,
h2,
h3,
h4,
p,
a,
button,
span,
small,
input,
textarea {
  overflow-wrap: anywhere;
}

#settings-btn {
  display: none !important;
}

header {
  width: min(1240px, calc(100% - 32px)) !important;
  top: 18px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--premium-shadow-sm) !important;
}

header.scrolled {
  top: 10px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--premium-shadow-md) !important;
}

.header-inner {
  min-height: 68px !important;
  height: auto !important;
  gap: 18px !important;
}

.logo-container {
  flex: 0 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.82)) !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.logo-container img {
  height: 34px !important;
  max-width: min(210px, 38vw) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

.nav-links {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: center !important;
  gap: 4px !important;
}

.nav-links a,
.nav-links .nav-menu-button {
  min-height: 36px !important;
  padding: 8px 13px !important;
  color: #273b5f !important;
  background: transparent !important;
}

.nav-links a:hover,
.nav-links .nav-menu-button:hover,
.nav-links a.active,
.nav-links .nav-menu-button.active {
  background: rgba(219, 234, 254, 0.72) !important;
  color: #071a3a !important;
}

.nav-actions {
  flex: 0 0 auto !important;
}

.language-switcher,
.btn-icon {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(148,163,184,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.language-option.active {
  background: linear-gradient(135deg, #071a3a, #1f4fa8) !important;
  color: #fff !important;
}

.hero {
  min-height: 100svh !important;
  padding-top: 128px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,250,255,0.9) 55%, rgba(219,234,254,0.44)) !important;
}

.hero::before,
.hero-ambient {
  display: none !important;
}

.hero-inner-container {
  min-height: calc(100svh - 128px) !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1fr) !important;
  gap: clamp(34px, 6vw, 92px) !important;
  align-items: center !important;
}

.hero-text {
  max-width: 620px !important;
  padding: 26px 0 !important;
}

.hero-text .eyebrow,
.section-header .eyebrow,
[class*="eyebrow"],
.market-kicker,
.panel-kicker,
.contacts-eyebrow {
  color: #2563eb !important;
  opacity: 0.92 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.hero h1 {
  font-size: clamp(48px, 7vw, 92px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  background: linear-gradient(135deg, #071a3a 0%, #123f89 50%, #5f718c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-text p {
  max-width: 590px !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  line-height: 1.68 !important;
  color: #53627a !important;
}

.hero-buttons {
  flex-wrap: wrap !important;
}

.btn,
.card-button-row .btn {
  min-height: 44px !important;
  border-radius: 999px !important;
}

.btn-primary {
  background: linear-gradient(135deg, #071a3a 0%, #153f86 58%, #2563eb 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.22), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #071a3a !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}

.btn-accent {
  background: linear-gradient(135deg, #dbeafe, #ffffff 42%, #e5e7eb) !important;
  color: #071a3a !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
}

.hero-photo-carousel {
  width: min(560px, 100%) !important;
  height: clamp(420px, 42vw, 620px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,0.88) !important;
  background: linear-gradient(180deg, #fff, #edf5ff) !important;
  box-shadow: var(--premium-shadow-lg) !important;
}

.hero-photo-carousel::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 26px;
  pointer-events: none;
}

.carousel-slide img {
  object-fit: contain !important;
  padding: clamp(14px, 2vw, 26px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(239,246,255,0.82)) !important;
}

.proof-item,
.market-featured,
.market-panel,
.incoming-panel,
.manufacturer-panel,
.engineering-card,
.contact-card,
.about-address-card,
.controls-wrapper,
.product-card,
.modal-container,
.cart-drawer,
.config-modal {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--panel-border) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--premium-shadow-sm) !important;
  backdrop-filter: blur(22px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.28) !important;
}

.proof-item:hover,
.market-featured:hover,
.market-panel:hover,
.incoming-panel:hover,
.manufacturer-panel:hover,
.engineering-card:hover,
.contact-card:hover,
.product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
  box-shadow: var(--premium-shadow-md) !important;
}

.section-header h2,
.cinematic-copy h2,
.contacts-title {
  color: #071a3a !important;
  letter-spacing: 0 !important;
}

.about-hero-text h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 8px 28px rgba(7, 26, 58, 0.42) !important;
}

.section-header p,
.cinematic-copy > p,
.contacts-subtitle {
  color: #667085 !important;
  opacity: 1 !important;
}

.cinematic-showcase {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.cinematic-sticky {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.88)) !important;
}

.cinematic-sticky::before {
  display: none !important;
}

.cinematic-stage {
  overflow: visible !important;
}

.cinema-ring {
  border-radius: 34px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(239,246,255,0.82)) !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
}

.cinema-layer {
  border-radius: 26px !important;
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(148,163,184,0.20) !important;
  box-shadow: var(--premium-shadow-md) !important;
}

.cinema-layer img {
  object-fit: contain !important;
}

.marketplace-section,
.catalog-section,
.engineering-section {
  background: linear-gradient(180deg, #f8fbff, #ffffff) !important;
}

.marketplace-board {
  gap: 24px !important;
}

.market-featured {
  min-height: 480px !important;
  overflow: hidden !important;
}

.market-featured h3 {
  color: #071a3a !important;
  letter-spacing: 0 !important;
}

.market-featured-visual {
  background: linear-gradient(160deg, #ffffff, #eef5ff) !important;
  border-radius: 26px !important;
}

.market-featured-visual img,
.market-mini-card img {
  object-fit: contain !important;
  filter: drop-shadow(0 18px 24px rgba(7, 26, 58, 0.12)) !important;
}

.incoming-row,
.market-mini-card,
.manufacturer-chip {
  border-radius: 20px !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  background: rgba(255,255,255,0.72) !important;
}

.controls-wrapper {
  top: 96px !important;
  padding: 14px !important;
}

.search-box {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  border-radius: 18px !important;
}

.filter-tabs {
  gap: 5px !important;
  background: #eef5ff !important;
  border-radius: 18px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.filter-tabs::-webkit-scrollbar {
  display: none !important;
}

.filter-tab {
  min-height: 36px !important;
  white-space: nowrap !important;
}

#catalog-grid,
.product-grid {
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)) !important;
  gap: 24px !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.product-image-container {
  height: 270px !important;
  margin: 10px 10px 0 !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
}

.graphic-backglow {
  opacity: 0.12 !important;
  filter: blur(34px) !important;
}

.product-catalog-img {
  width: 82% !important;
  height: 82% !important;
  max-width: 250px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 18px 22px rgba(7, 26, 58, 0.12)) !important;
}

.image-source-pill {
  top: 14px !important;
  left: 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.78) !important;
  color: #2563eb !important;
  border: 1px solid rgba(37,99,235,0.12) !important;
}

.product-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  padding: 20px 22px 22px !important;
}

.manufacturer-badge,
.price-label {
  color: #2563eb !important;
}

.product-title {
  min-height: 42px !important;
  color: #071a3a !important;
  font-size: 17px !important;
  line-height: 1.26 !important;
}

.product-tagline {
  flex: 1 1 auto !important;
  color: #667085 !important;
  opacity: 1 !important;
}

.product-actions {
  margin-top: auto !important;
}

.price-box {
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #f6faff !important;
  border: 1px solid rgba(148,163,184,0.16) !important;
}

.price-value {
  color: #22c55e !important;
}

.card-button-row {
  gap: 8px !important;
}

.card-button-row .btn {
  font-size: 12px !important;
  padding: 10px 12px !important;
}

.about-hero-banner {
  height: min(520px, 56vw) !important;
  min-height: 340px !important;
  background: #eef5ff !important;
}

.about-hero-img {
  filter: saturate(0.96) contrast(1.02) !important;
}

.about-hero-gradient {
  background:
    linear-gradient(90deg, rgba(7,26,58,0.78), rgba(7,26,58,0.28) 58%, rgba(255,255,255,0.05)) !important;
}

.about-stats-row,
.about-workflow {
  background: linear-gradient(180deg, #ffffff, #f6faff) !important;
}

.about-stat-num {
  color: #2563eb !important;
}

.about-content-grid,
.about-location-grid {
  align-items: center !important;
}

.about-photo-mosaic > div,
.about-map-container,
.contacts-map-panel {
  border: 1px solid rgba(148,163,184,0.2) !important;
  box-shadow: var(--premium-shadow-md) !important;
}

.about-photo-mosaic img,
.about-banner-photo img {
  object-fit: cover !important;
}

.about-workflow-step {
  padding: 24px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  box-shadow: var(--premium-shadow-sm) !important;
}

footer#contacts,
.contacts-page {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
}

.contacts-header {
  padding-top: 132px !important;
}

.contacts-title {
  background: linear-gradient(135deg, #071a3a, #2563eb 66%, #a8b4c7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.contacts-map-btn {
  background: linear-gradient(135deg, #2563eb, #071a3a) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 18px 38px rgba(37,99,235,0.20) !important;
}

.contacts-map-btn svg {
  flex-shrink: 0 !important;
}

.cart-drawer {
  transform: translateX(calc(100% + 28px)) !important;
}

.cart-drawer.active {
  transform: translateX(0) !important;
}

.modal-visual {
  background: linear-gradient(180deg, #ffffff, #f2f7ff) !important;
}

.modal-visual img,
.modal-visual-img {
  object-fit: contain !important;
}

@media (min-width: 821px) and (max-width: 1180px) {
  header {
    width: calc(100% - 24px) !important;
  }

  .header-inner {
    padding: 10px 14px !important;
  }

  .nav-links a,
  .nav-links .nav-menu-button {
    padding: 8px 9px !important;
    font-size: 12px !important;
  }

  .hero-inner-container {
    grid-template-columns: 1fr 0.9fr !important;
  }
}

@media (max-width: 1040px) {
  .hero-inner-container {
    grid-template-columns: 1fr !important;
    padding-bottom: 54px !important;
  }

  .hero-photo-carousel {
    justify-self: center !important;
    height: min(520px, 72vw) !important;
  }

  .cinematic-grid {
    padding-top: 112px !important;
  }
}

@media (max-width: 820px) {
  header {
    width: calc(100% - 20px) !important;
    border-radius: 24px !important;
  }

  .header-inner {
    padding: 10px !important;
    gap: 10px !important;
  }

  .logo-container {
    padding: 7px 8px !important;
  }

  .logo-container img {
    height: 30px !important;
    max-width: 138px !important;
  }

  .nav-links {
    order: 4 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    background: rgba(246,250,255,0.78) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .nav-links::-webkit-scrollbar {
    display: none !important;
  }

  .nav-links a,
  .nav-links .nav-menu-button {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .hero {
    padding-top: 154px !important;
  }

  .hero h1 {
    font-size: clamp(40px, 13vw, 64px) !important;
  }

  .hero-photo-carousel {
    height: 360px !important;
  }

  .hero-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .proof-item {
    min-width: 0 !important;
    padding: 14px 10px !important;
  }

  .cinematic-stage {
    min-height: 390px !important;
    overflow: hidden !important;
  }

  .cinema-layer {
    max-width: calc(100vw - 48px) !important;
  }

  .about-workflow-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 18px !important;
  }

  .nav-actions {
    margin-left: auto !important;
  }

  .language-switcher {
    height: 36px !important;
  }

  .language-option {
    min-width: 27px !important;
    height: 28px !important;
    font-size: 10px !important;
  }

  .btn-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .hero {
    padding-top: 146px !important;
  }

  .hero-text p {
    font-size: 16px !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
  }

  .hero-proof {
    grid-template-columns: 1fr !important;
  }

  .hero-photo-carousel {
    height: 300px !important;
    border-radius: 26px !important;
  }

  .carousel-slide img {
    padding: 12px !important;
  }

  .cinematic-grid {
    padding-top: 64px !important;
  }

  .cinematic-stage {
    height: 340px !important;
    min-height: 340px !important;
  }

  .cinema-layer {
    width: calc(100vw - 56px) !important;
    max-width: 292px !important;
  }

  .cinema-layer figcaption {
    font-size: 11px !important;
  }

  #catalog-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .product-image-container {
    height: 235px !important;
  }

  .card-button-row {
    flex-direction: column !important;
  }

  .about-stats-inner,
  .about-workflow-grid,
  .about-photo-mosaic {
    grid-template-columns: 1fr !important;
  }

  .about-stat-divider {
    display: none !important;
  }

  .about-workflow-grid {
    display: grid !important;
  }

  .about-photo-mosaic {
    display: grid !important;
    height: auto !important;
  }

  .mosaic-tall,
  .mosaic-small-top,
  .mosaic-small-bottom {
    min-height: 220px !important;
    grid-row: auto !important;
  }

  .about-banner-photo {
    height: 300px !important;
  }

  .about-location-grid,
  .contacts-body {
    gap: 22px !important;
  }

  .contacts-header {
    padding-top: 146px !important;
  }

  .contacts-title {
    font-size: clamp(40px, 15vw, 62px) !important;
  }
}

@media (max-width: 340px) {
  .container {
    padding: 0 14px !important;
  }

  .logo-container img {
    max-width: 118px !important;
  }

  .nav-actions {
    gap: 4px !important;
  }

  .language-option {
    min-width: 25px !important;
  }

  .hero-photo-carousel {
    height: 282px !important;
  }

  .cinema-layer {
    max-width: none !important;
  }
}

/* Router guard: older contact-page styles used display:block!important.
   The page router must remain authoritative. */
section[data-page][style*="display: none"],
footer[data-page][style*="display: none"],
footer#contacts[style*="display: none"] {
  display: none !important;
}

@media (max-width: 820px) {
  .cinematic-stage {
    padding-inline: 8px !important;
  }

  .cinema-layer,
  .cinema-layer[data-scene] {
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    transform-origin: center !important;
    transform: none !important;
    animation: none !important;
    opacity: 0 !important;
  }

  .cinema-layer.active {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .mosaic-tall,
  .mosaic-small-top,
  .mosaic-small-bottom {
    min-height: 190px !important;
  }
}

@media (max-width: 340px) {
  .cinema-layer {
    max-width: none !important;
  }

  .mosaic-tall,
  .mosaic-small-top,
  .mosaic-small-bottom {
    min-height: 176px !important;
  }
}

/* Brand logo extracted from the supplied transparent mark */
.logo-container {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.logo-container img {
  height: 44px !important;
  width: auto !important;
  max-width: min(260px, 42vw) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}

@media (max-width: 720px) {
  .logo-container img {
    height: 38px !important;
    max-width: 168px !important;
  }
}

@media (max-width: 340px) {
  .logo-container img {
    height: 34px !important;
    max-width: 142px !important;
  }
}