/* Базовые значения (на случай, если инспектор не видит bootstrap) */
:root { --bs-body-bg: #ffffff; }
html[data-theme="dark"] { --bs-body-bg: #0b1220; }

/* ========= THEME TOKENS ========= */
:root {
  --bg: #ffffff;
  --fg: #0f172a;
  --muted: #6b7280;
  --primary: #0ea5e9;
  --primary-600: #0284c7;
  --primary-700: #0369a1;
  --panel: #f8fafc;
  --glass: rgba(255,255,255,0.9);
  --border: rgba(148,163,184,0.25);
  --shadow: 0 10px 30px rgba(2,8,23,0.08);
  --focus: 0 0 0 0.2rem rgba(14,165,233,.35);
  --backdrop: rgba(2, 8, 23, .55);
  --modal-bg: #ffffff;
  --modal-shadow: 0 30px 70px rgba(2,8,23,.25);
  --reveal-dur: .8s;
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --primary: #38bdf8;
  --primary-600: #22a7df;
  --primary-700: #1b86b5;
  --panel: #0f172a;
  --glass: #0f172a;
  --border: rgba(148,163,184,0.18);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --focus: 0 0 0 0.2rem rgba(56,189,248,.35);
  --backdrop: rgba(0,0,0,.7);
  --modal-bg: #0f172a;
  --modal-shadow: 0 30px 70px rgba(0,0,0,.6);
}

/* PATCH 8: подсказка системным контролам */
:root { color-scheme: light dark; }

/* ========= BASE ========= */
html, body { height: 100%; }
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
body.luxury {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: rgba(56,189,248,.25); }

/* IMG: стабильность от микродёрга */
/* PATCH 5: убрать глобальные GPU-хинты со всех IMG и дать opt-in класс .gpu-hint */
img {
  image-rendering: auto;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform: none;
  -webkit-transform: none;
  will-change: auto;
}
img.gpu-hint {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity, transform;
}

/* ========= NAVBAR ========= */
.glass-nav {
  background: var(--glass);
  border-bottom: 1px solid var(--border);
}

/* ========= BUTTONS ========= */
.btn {
  transition: transform .06s ease, box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:focus { box-shadow: var(--focus); outline: 0; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-primary:active { background: var(--primary-700) !important; border-color: var(--primary-700) !important; transform: translateY(1px); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-outline-primary:active { transform: translateY(1px); }

/* ========= CARDS / PANELS ========= */
/*.bg-section { background: transparent; }*/
.shadow-hero { box-shadow: var(--shadow); border-radius: 20px; }
.lux-card, .lux-panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #ffffff05;
}
:root[data-theme="dark"] .lux-card,
:root[data-theme="dark"] .lux-panel { background: #ffffff08; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .lux-card,
:root[data-theme="dark"] .lux-panel { color: var(--fg); }
:root[data-theme="dark"] .text-muted { color: #cbd5e1 !important; opacity: 1 !important; }

/* ========= HERO (без пузырей/чипов) ========= */
.hero-section { padding: 64px 0; background: var(--bg); position: relative; z-index: 1; }
.gradient-text {
  background: linear-gradient(90deg, #38bdf8, #818cf8, #22d3ee);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ========= THEME TOGGLE ========= */
.theme-toggle{ position: relative; width: 42px; height: 36px; display: grid; place-items: center; }
.theme-toggle .icon-sun, .theme-toggle .icon-moon{ position: absolute; transition: transform .35s ease, opacity .35s ease; }
[data-theme="light"] .icon-sun{ opacity:1; transform: translateY(0) rotate(0); }
[data-theme="light"] .icon-moon{ opacity:0; transform: translateY(8px) rotate(-20deg); }
[data-theme="dark"] .icon-sun{ opacity:0; transform: translateY(-8px) rotate(20deg); }
[data-theme="dark"] .icon-moon{ opacity:1; transform: translateY(0) rotate(0); }

/* ========= LOGOTYPES ========= */
.brand-logo, .hero-logo{
  height:256px; width:256px; object-fit:contain; vertical-align:middle;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.navbar .brand-logo{ height:256px; width:256px; }
.navbar .navbar-brand{ padding-top:.5rem; padding-bottom:.5rem; }
@media (max-width:576px){ .navbar .brand-logo{ height:72px; width:72px; } }
@media print{ .brand-logo, .hero-logo{ height:15mm; width:15mm; } }

/* ========= FORMS ========= */
.form-control, .form-select{ background-color: var(--bg); color: var(--fg); border-color: var(--border); }
.form-control:focus, .form-select:focus{ border-color: var(--primary); box-shadow: var(--focus); }
.form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); }

/* Корректный вывод ошибок */
.invalid-feedback{ display: none; }
.is-invalid ~ .invalid-feedback{ display:block; }

/* ========= MODAL ========= */
.modal-backdrop.show{ opacity:1; background: var(--backdrop); }
.modal-content{
  background: var(--modal-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--modal-shadow) !important;
}
/* Раньше здесь был общий overflow на .modal-content.
   Чтобы sticky внизу работал стабильно, прокрутка будет в .modal-body. */
.modal-header, .modal-footer{
  background: #ffffff08;
  border-color: var(--border);
}
.modal-content .form-control, .modal-content .form-select{ background-color: var(--bg); color: var(--fg); border-color: var(--border); }
.modal-content .form-control:focus, .modal-content .form-select:focus{ border-color: var(--primary); box-shadow: var(--focus); }

/* ========= FOOTER ========= */
.site-footer{
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 28px 0; font-size: 1.1rem; line-height: 1.5; color: var(--fg);
}
.site-footer .footer-link{ color: var(--muted); text-decoration: none; }
.site-footer .footer-link:hover{ color: var(--primary); text-decoration: underline; }
:root[data-theme="dark"] .site-footer{ background: #0e1726; color:#fff; }
:root[data-theme="dark"] .site-footer .footer-link{ color:#fff; }
:root[data-theme="dark"] .site-footer .footer-link:hover{ color: var(--primary); }

/* ========= MISC ========= */
.img-fluid.rounded-4{ border-radius:1rem !important; }
.modal-content.lux-panel{ border-radius:1rem; }
.cf-turnstile{ width:100%; display:flex; justify-content:center; }

/* ========= ACCESSIBILITY ========= */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== ABOUT (без пузырей) ===== */
.about-hero{ padding: 64px 0; position: relative; }
.about-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:-1; background: transparent; }

/* ===== Reveal ===== */
.reveal, .reveal-left, .reveal-right, .reveal-up {
  opacity: 1; transform: none;
  transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform; contain: content;
}
html.reveal-enabled .reveal,
html.reveal-enabled .reveal-left,
html.reveal-enabled .reveal-right,
html.reveal-enabled .reveal-up { opacity: 0; transform: translateY(14px); }
html.reveal-enabled .reveal-left  { transform: translateX(-28px); }
html.reveal-enabled .reveal-right { transform: translateX( 28px); }
html.reveal-enabled .reveal-up    { transform: translateY( 20px); }
.revealed { opacity: 1 !important; transform: none !important; }
img.reveal, img.reveal-left, img.reveal-right, img.reveal-up {
  transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) cubic-bezier(.22,.61,.36,1);
}
img.reveal-left.revealed, .shadow-hero.reveal-left.revealed { filter: drop-shadow(12px 10px 22px rgba(2,8,23,.18)); }
img.reveal-right.revealed, .shadow-hero.reveal-right.revealed { filter: drop-shadow(-12px 10px 22px rgba(2,8,23,.18)); }

/* ===== Brand marquee (без градиентов) ===== */
.brand-marquee{
  overflow:hidden; border:1px solid var(--border); border-radius:16px;
  background:#ffffff05; box-shadow: var(--shadow); position: relative;
}
.brand-track{ display:inline-flex; gap:14px; padding:12px 14px; white-space:nowrap; will-change:transform; animation: marquee 30s linear infinite; }
.brand-marquee:hover .brand-track{ animation-play-state: paused; }
.brand-badge{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:9999px; font-weight:600; letter-spacing:.2px;
  border:1px solid rgba(148,163,184,.28); background: rgba(148,163,184,.10); box-shadow:0 6px 16px rgba(2,8,23,.08); color: var(--fg);
}
@keyframes marquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .brand-track{ animation:none !important; } }

.counter{ letter-spacing: -0.5px; }

/* ===== QUIZ ===== */
#quizModal .modal-dialog{ max-width: 980px; }
#quizModal .modal-content{ border-radius: 20px; }
.quiz-title{ font-weight: 800; letter-spacing: .2px; text-align: center; margin-bottom: 18px; }
.quiz-progress{ height: 4px; background: rgba(148,163,184,.28); border-radius: 9999px; overflow: hidden; margin: 0 8px 22px; }
.quiz-progress > span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#38bdf8,#818cf8,#22d3ee); transition:width .45s ease; }
.quiz-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 992px){ .quiz-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .quiz-grid{ grid-template-columns: 1fr; } }
.quiz-card{
  user-select:none; cursor:pointer; padding:22px 18px; border-radius:16px; border:1px solid var(--border);
  background:#ffffff08; box-shadow:0 6px 18px rgba(2,8,23,.06);
  text-align:center; transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.quiz-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(2,8,23,.10); border-color: rgba(14,165,233,.45); }
.quiz-card.selected{ border-color: var(--primary); box-shadow:0 16px 34px rgba(14,165,233,.25); background:#e6f6fe; }
.quiz-card img{ width:120px; height:120px; object-fit:contain; margin:8px auto 14px; filter: drop-shadow(0 6px 10px rgba(2,8,23,.08)); }
@media (max-width: 520px){ .quiz-card img{ width:92px; height:92px; } }
.quiz-card-title{ font-weight:700; margin:0; }
.quiz-nav{
  display:flex; gap:12px; justify-content:space-between; margin-top:22px;
  position: sticky; bottom: 0;
  /* PATCH 4: color-mix с фолбэком через @supports ниже */
  background: var(--modal-bg, var(--bs-body-bg, #fff));
  padding-top: .5rem; margin-top: .5rem;
  /* PATCH 1: блюр со -webkit- префиксом */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* PATCH 4: @supports для color-mix */
@supports (background: color-mix(in srgb, white 50%, transparent)) {
  .quiz-nav {
    background: color-mix(in srgb, var(--modal-bg, var(--bs-body-bg, #fff)) 88%, transparent);
  }
}
/* Управление видимостью кнопки Далее теперь только классом: */
/* удалено прежнее глобальное скрытие data-next */
/* #quizModal .quiz-nav [data-next] { display: none !important; } */
#quizModal .quiz-step { display: none; }
#quizModal .quiz-step.active { display: block; }
#quizModal .quiz-nav [data-next].is-hidden { display: none !important; }

/* ===== COOKIE BANNER ===== */
.cookie-banner{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:1080;
  width: calc(100% - 32px); max-width:980px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border-radius:14px; border:1px solid var(--border);
  background: var(--modal-bg); box-shadow: var(--modal-shadow);
  /* PATCH 1: блюр на стеклах */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cookie-banner .cookie-text{ color: var(--fg); }
.cookie-banner .cookie-text .small{ color: var(--muted); margin-top:2px; }
.cookie-banner .cookie-actions{ display:flex; gap:10px; }
@media (max-width: 640px){
  .cookie-banner{ flex-direction:column; align-items:stretch; text-align:left; gap:12px; }
  .cookie-banner .cookie-actions{ justify-content:flex-end; }
}

/* ===== Header chips ===== */
.nav-chip{
  --h:36px; display:inline-flex; align-items:center; gap:8px;
  min-height:var(--h); padding:0 12px; border-radius:9999px; line-height:1; font-weight:600;
}
.nav-chip svg{ display:block; }
.nav-chip.btn-primary{
  background-color: var(--primary) !important; border-color: var(--primary) !important; color:#fff !important;
  box-shadow: 0 6px 14px rgba(14,165,233,.25);
}
.nav-chip.btn-primary:hover{ background-color: var(--primary-600) !important; border-color: var(--primary-600) !important; }
.nav-chip.btn-primary:active{ background-color: var(--primary-700) !important; border-color: var(--primary-700) !important; transform: translateY(1px); }
.nav-chip.theme-toggle{ padding:0 6px; width:48px; justify-content:center; }
:root[data-theme="dark"] .nav-chip.btn-primary{ box-shadow: 0 8px 18px rgba(56,189,248,.35); }

/* ===== PRO MEGA MENU ===== */
.mega-modal .modal-dialog.modal-lg{ max-width: 880px; }
.mega-modal .modal-content.mega-glass{
  background: var(--glass); border:1px solid var(--border); border-radius:20px; box-shadow: 0 24px 60px rgba(2,8,23,.18);
  /* PATCH 1: блюр стека */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .mega-modal .modal-content.mega-glass{ box-shadow: 0 30px 80px rgba(0,0,0,.60); }
.mega-animate .modal-content{ transform: translateY(6px) scale(.98); opacity:0; transition: transform .22s ease, opacity .22s ease; }
.mega-modal.show .mega-animate .modal-content{ transform:none; opacity:1; }
.btn-close-lite{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:transparent; position:relative;
}
.btn-close-lite::before, .btn-close-lite::after{
  content:""; position:absolute; inset:0; margin:auto; width:14px; height:2px; background: currentColor; transform-origin:center;
}
.btn-close-lite::before{ transform: rotate(45deg); }
.btn-close-lite::after{ transform: rotate(-45deg); }
.btn-close-lite:hover{ background: rgba(148,163,184,.08); }
.mega-topbar{ padding:14px 16px; border-bottom:1px solid var(--border); }
.mega-title{ display:flex; align-items:center; gap:10px; font-weight:700; }
.mega-title .glyph{
  width:36px; height:36px; border-radius:12px; display:grid; place-items:center; margin-right:10px;
  background: rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.30); box-shadow: 0 6px 16px rgba(2,8,23,.08);
}
.mega-body{ padding:16px; }
.mega-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){ .mega-grid{ grid-template-columns:1fr 1fr; } }
.mega-item{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:14px 16px; border-radius:16px; border:1px solid var(--border);
  background:#ffffff08; box-shadow:0 8px 24px rgba(2,8,23,.08);
  transition: transform .14s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  text-decoration:none; color:inherit;
}
.mega-item:focus-visible{ outline:none; box-shadow: 0 0 0 0.2rem rgba(14,165,233,.35); }
.mega-item:hover{ transform: translateY(-2px); border-color: rgba(14,165,233,.45); box-shadow:0 18px 36px rgba(14,165,233,.22); background:#f3fbff; }
.mega-left{ display:flex; align-items:center; gap:12px; }
.mega-ico{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 40px;
  background: rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.28); box-shadow:0 6px 16px rgba(2,8,23,.08);
}
.mega-text{ display:flex; flex-direction:column; min-width:0; }
.mega-title-text{ font-weight:700; line-height:1.2; }
.mega-sub{ color: var(--muted); }
.mega-chev{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--border);
  opacity:.7; transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.mega-item:hover .mega-chev{ transform: translateX(4px); opacity:1; background: rgba(148,163,184,.08); }
.mega-footer{
  display:flex; justify-content:flex-end; gap:10px; padding:12px 16px; border-top:1px solid var(--border);
  background:#ffffff08;
}

/* ===== Sheet-меню (узкое) ===== */
.sheet-modal { --bs-modal-margin: 0; }
.sheet-modal .modal-dialog{
  margin:0; position:fixed; top:72px; right:12px;
  width:min(160px, calc(100vw - 24px));
  transform:translateY(-10px); opacity:0;
  transition:transform .2s ease, opacity .2s ease;
  pointer-events:none; z-index:1081;
}
.sheet-modal.show .modal-dialog{ transform:none; opacity:1; pointer-events:auto; }
.sheet-card{
  border-radius:14px !important; overflow:hidden; border:1px solid var(--border) !important;
  background:var(--modal-bg) !important; box-shadow: 0 16px 40px rgba(2,8,23,.18);
  /* PATCH 1: блюр */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .sheet-card{ box-shadow:0 22px 70px rgba(0,0,0,.55); }
.sheet-head{ display:flex; align-items:center; justify-content:center; padding:8px 10px; background:var(--modal-bg); border-bottom:1px solid var(--border); }
.sheet-title{ font-weight:700; margin:0; font-size:14px; }
.sheet-body{ padding:8px; background:var(--modal-bg); }
.sheet-link{
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:.5rem .6rem; border-radius:10px; border:1px solid var(--primary);
  background:var(--primary); color:#fff !important; font-weight:700; font-size:14px; letter-spacing:.1px;
  text-decoration:none !important;
  transition:transform .12s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, border-color .16s ease;
}
.sheet-link + .sheet-link{ margin-top:8px; }
.sheet-link:hover{ transform:translateY(-2px); background:var(--primary-600); border-color:var(--primary-600); box-shadow:0 10px 22px rgba(14,165,233,.28); filter:saturate(1.05); }
.sheet-link:active{ transform:translateY(0); background:var(--primary-700); border-color:var(--primary-700); box-shadow:0 6px 14px rgba(14,165,233,.22); }
.sheet-link:focus-visible{ outline:none; box-shadow:var(--focus); }
.sheet-form .form-control{ border-radius:10px; }
.sheet-form .btn{ border-radius:10px; font-weight:700; }
.sheet-muted{ font-size:12px; opacity:.8; margin-top:6px; }

/* ===== Auth modal helpers ===== */
.auth-tabs .nav-link{ font-weight:700; }
.auth-tabs .nav-link.active{ background: var(--primary); color: #fff; }
.auth-note{ font-size:.85rem; color: var(--muted); }

/* ===== Anti-selection: только по классу ===== */
html.no-select, html.no-select body,
html.no-select :not(input):not(textarea):not([contenteditable="true"]):not(.allow-select){
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Typewriter + staged buttons */
.typewriter .tw-src{ display:none; }
.typewriter [data-tw-source]{ display:none; }
.typewriter.tw-running{ opacity:1 !important; transform:none !important; }
.after-typed{ opacity:0 !important; pointer-events:none; transition:opacity .35s ease, transform .35s ease; transform:translateY(8px); }
.after-typed.show{ opacity:1 !important; pointer-events:auto; transform:none; }
.after-typed.show .reveal, .after-typed.show .reveal-up, .after-typed.show .reveal-left, .after-typed.show .reveal-right{ opacity:1 !important; transform:none !important; }

/* ===================================================================== */
/* ======================  ИЗ HTML (фиксировано) ======================= */
/* ===================================================================== */

/* PhonePicker + feedback */
.phone-picker .dropdown-toggle{ min-width: 84px; }
.phone-picker .form-control{ border-top-left-radius:0; border-bottom-left-radius:0; }
.phone-picker .dropdown-menu{ max-height: 260px; overflow-y: auto; }

/* scanner.html */
.scanner-hero{ padding: 64px 0 28px; position:relative; }
.scanner-hero::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: transparent; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border); border-radius:9999px; background:#ffffff08; }
.feature-card{ height:100%; border:1px solid var(--border); border-radius:16px; background:#ffffff08; padding:18px; }
.num-step{ width:34px; height:34px; border-radius:9999px; display:grid; place-items:center; background: var(--primary); color:#fff; font-weight:700; }
.icon-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); display:inline-block; margin-right:8px; }
.viewer-stage{ position:relative; height:60vh; height:60svh; min-height:420px; background:var(--bg); }
#viewerCanvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.faq .accordion-button{ font-weight:600; }

/* Language chip (flags) */
.lang-chip{ padding:0 8px; min-width:auto; display:inline-flex; align-items:center; gap:6px; }
.lang-chip .flag{ font-size:18px; line-height:1; display:inline-block; }
.lang-chip .lang-label{ font-weight:700; letter-spacing:.2px; }
@media (max-width: 768px){
  .lang-chip{ padding:0 6px; min-width:42px; justify-content:center; }
  .lang-chip .lang-label{ display:none !important; }
}
.lang-menu{ min-width: 160px; padding:6px; }
@media (max-width: 576px){ .lang-menu{ min-width: 130px; } }
.lang-item{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; }
.lang-item .flag{ font-size:16px; line-height:1; }
.lang-item.active{ font-weight:700; }
.lang-item:hover{ background: rgba(148,163,184,.12); }
.nav-chip svg{ margin-left:0; }
.navbar .collapse { overflow: visible; }

/* ===== /kontakt: минимальная геро-панель (ЕДИНСТВЕННАЯ) ===== */
.hero-panel{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  background:#ffffff; color:var(--fg);
  box-shadow: 0 8px 20px rgba(2,8,23,.08);
}
:root[data-theme="dark"] .hero-panel{
  background:#111827;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}
.hero-panel .title{ font-weight:800; margin:0 0 6px; line-height:1.2; }
.hero-panel .sub{ color: var(--muted); margin:0; }

/* ШАПКА всегда поверх контента */
.navbar,
.glass-nav { position: relative; z-index: 2000; }


/* Base: Popper strategy:'fixed' совпадает с CSS position:fixed */
.lang-dropdown .dropdown-menu {
  position: fixed;
  inset: auto !important;     /* координаты задаст Popper */
  z-index: 3100;
  max-width: calc(100vw - 16px); /* уже покрывает мобилки, поэтому можно не дублировать ниже */
}

/* Предки не создают новый контекст/клиппинг */
header, .glass-nav, .navbar {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* На узких экранах отключаем создающие контекст эффекты у «героя» */
@media (max-width: 640px){
  header, .glass-nav, .navbar,
  .hero-section, .hero-section *[class*="blob"],
  .hero-section *[class*="ellipse"], .about-hero-bg {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
  }
}

.modal { z-index: 3000 !important; }
.modal-backdrop { z-index: 2990 !important; }

/* Общий фикс для всех модалок Bootstrap */
.modal .modal-dialog {
  margin: 0.75rem;             /* чтобы было пространство от краёв */
  max-width: min(720px, 100vw - 1.5rem);
}

/* Скролл теперь даём телу модалки (а не .modal-content),
   чтобы sticky внутри вёл себя предсказуемо */
#quizModal .modal-body{
  max-height: min(80vh, 760px);
  overflow: auto;
  position: relative; /* создаёт контекст для sticky */
}

.modal .modal-content {
  max-height: calc(100svh - 1.5rem); /* оставим ограничение для страховки */
  /* overflow: auto;  <-- убрано, чтобы не было двойного скролла */
}

/* Внутри твоего квиза: при узком экране гриды делают 2 колонки вместо 4 */
@media (max-width: 576px) {
  .quiz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .quiz-card { padding: 10px; }
  .quiz-title { font-size: 1.1rem; }
}

/* Кнопки навигации внизу всегда остаются видимыми */
/* (см. блок .quiz-nav выше) */

@media (max-width: 576px) {
  .hero-bubble, .hero-badge, .hero-blur {
    transform: scale(.9);
    opacity: .9;
  }
  /* либо вообще скрыть на очень узких */
  /* .hero-bubble { display:none; } */
}

/* PATCH 6: Sticky в модалках — убедиться, что родители не режут overflow */
.modal, .modal-dialog { overflow: visible; }

/* PATCH 1 (сводно): применить блюр там, где «стек/стекло» */
.mega-modal .modal-content.mega-glass,
.sheet-card,
.cookie-banner,
.quiz-nav {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* PATCH 2: Вьюпорт-единицы — порядок vh → svh → dvh */
.modal-fullscreen, .fullscreen-block {
  min-height: 100vh;   /* фолбэк для старых */
  min-height: 100svh;  /* стабильная высота */
  min-height: 100dvh;  /* динамическая, где корректно поддерживается */
}

/* === OVERRIDE: зелёная палитра для всех кнопок === */
:root {
  --primary:     #047857;  /* тёмно-зелёный */
  --primary-600: #065f46;
  --primary-700: #064e3b;
}

:root[data-theme="dark"] {
  --primary:     #22c55e;  /* чуть ярче в тёмной теме */
  --primary-600: #16a34a;
  --primary-700: #15803d;
}


/* ===== Header-Menü: Links wie "Menu"-Button ===== */

/* Чуть раздвинем пункты меню */
.navbar-nav {
  gap: 0.35rem;
}

/* Делаем .nav-link в хедере такими же таблетками, как .nav-chip.btn-primary */
.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding: 0 14px;
  border-radius: 9999px;

  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;

  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: #fff !important;

  box-shadow: 0 6px 14px rgba(4, 120, 87, 0.28);
  text-decoration: none;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  box-shadow: 0 8px 18px rgba(4, 120, 87, 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}

.navbar-nav .nav-link:active {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.30);
  transform: translateY(0);
}

/* Чуть сильнее свечение в тёмной теме */
:root[data-theme="dark"] .navbar-nav .nav-link {
  box-shadow: 0 8px 20px rgba(4, 120, 87, 0.4);
}

/* ===================================================================== */
/* ======================  PRODUCT TABS LEISTE  ======================== */
/* ===================================================================== */

.product-tabs-bar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.product-tabs-bar .container {
  display: flex;
  justify-content: center;
}

/* Лента с табами */
.product-tabs {
  display: inline-flex;
  gap: 1.75rem;
  padding: 0.45rem 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;            /* Firefox */
}

.product-tabs::-webkit-scrollbar {
  display: none;                    /* WebKit */
}

/* Обычный таб */
.product-tab {
  position: relative;
  padding: 0.35rem 0.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;

  color: var(--muted);
  text-decoration: none;

  transition:
    color .18s ease,
    opacity .18s ease;
}

.product-tab:hover,
.product-tab:focus-visible {
  color: var(--fg);
  text-decoration: none;
}

/* Линия под активным табом */
.product-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 2px;
  border-radius: 999px;

  background: transparent;
  opacity: 0;
  transform: scaleX(0.6);

  transition:
    background-color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

/* Активный таб */
.product-tab.is-active {
  color: var(--primary);
}

.product-tab.is-active::after {
  background: var(--primary);
  opacity: 1;
  transform: scaleX(1);
}

/* Чуть темнее фон-панель в тёмной теме */
:root[data-theme="dark"] .product-tabs-bar {
  background: #020617;
}

/* На маленьких экранах оставляем ту же полосу, она просто становится скроллируемой */
@media (max-width: 576px) {
  .product-tabs {
    gap: 1.1rem;
    padding: 0.35rem 0.25rem;
    justify-content: flex-start;
  }
}
/* === Центр только модалки логина и квиза === */
#authModal .modal-dialog,
#quizModal .modal-dialog {
  position: fixed;
  inset: 50% auto auto 50%;      /* top:50%, left:50% */
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: min(720px, 100vw - 1.5rem);
  width: 100%;
}

/* На маленьких экранах не душим, пусть ведут себя как обычные */
@media (max-width: 575.98px) {
  #authModal .modal-dialog,
  #quizModal .modal-dialog {
    position: relative;
    inset: auto;
    transform: none;
    margin: 0.75rem auto;
  }
}
/* === OVERRIDE: размер логотипа в 2 раза больше === */
.brand-logo,
.hero-logo {
  height: 256px;
  width: 256px;
}

/* Ссылка вокруг логотипа без подчёркивания */
.brand-logo-link {
  text-decoration: none;
}

/* Текст рядом с логотипом — базовый (мобилка/планшет) */
.navbar .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 800;        /* было 600 — сделали жирнее */
  font-size: 1.2rem;       /* комфортно на телефоне */
  letter-spacing: 0.02em;  /* как на макете, чуть «дороже» */
}

/* Вторая строка («Bau & Service») */
.navbar .brand-text .brand-line-2 {
  font-size: 0.95rem;
  font-weight: 600;        /* чуть легче, чем первая строка */
  opacity: 0.9;
}

/* На десктопах увеличиваем размер (соотношение как на сайте) */
@media (min-width: 992px) {
  .navbar .brand-text {
    font-size: 2.7rem;     /* крупный жирный заголовок */
  }

  .navbar .brand-text .brand-line-2 {
    font-size: 2.1rem;
  }
}


/* Светлая тема — тёмный текст */
html[data-theme="light"] .navbar .brand-text {
  color: #111827;
}

/* Тёмная тема — светлый текст */
html[data-theme="dark"] .navbar .brand-text {
  color: #f9fafb;
}