/* ================================================================
   Homepage redesign v2 — matches Дизайн/(new) "головна сторінка.jpg"
   reference: plain header, orbit-diagram hero, quick-booking card,
   floating side tabs, instagram/ai/map card row, USP strip.
================================================================= */

.only-mobile { display: none; }
.only-desktop { display: inline; }

/* ---------- Simple header (replaces tooth-nav) ---------- */
/* Floating rounded "island" bar, inset from the viewport edges —
   NOT a full-bleed bar. Matches the reference's rounded-corner card
   with lavender page background visible around it. */
.site-header-v2 {
  position: fixed; top: 14px; left: 50%; z-index: 310;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out);
}

.site-header-v2.is-scrolled { top: 8px; box-shadow: var(--shadow-md); }

/* No-op wrapper above 899px: header + .menu-widget keep their
   own independent position:fixed exactly as before — a fixed-position
   child ignores its parent's box/display type entirely, so this
   wrapper needs no special display value here (avoids relying on
   display:contents, which has had inconsistent support in some
   WebKit-based mobile browsers). Only inside the 899px block below
   does this become a real sticky flex row. */

.header-v2-inner {
  display: flex; align-items: center; gap: 24px;
  height: 62px;
}

.brand-v2 { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-v2 img { height: 36px; width: auto; }
.brand-v2 .brand-v2-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-v2 .brand-v2-text b { font-family: var(--font-display); font-size: 15px; color: var(--violet-700); }
.brand-v2 .brand-v2-text small { font-size: 10px; color: var(--ink-500); }

.header-v2-actions .btn-book-v2 { padding: 10px 20px; font-size: 13.5px; }

.main-nav-v2 { display: flex; align-items: center; justify-content: center; gap: 22px; flex: 1; }
.main-nav-v2 a { font-size: 14.5px; font-weight: 600; color: var(--ink-700); transition: color var(--dur-fast) var(--ease-out); }
.main-nav-v2 a:hover { color: var(--violet-700); }

.header-v2-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.btn-book-v2 {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glow);
  font-size: 14px; font-weight: 700; color: #fff;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn-book-v2:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(124, 58, 237, 0.36); }
.btn-book-v2 svg { width: 17px; height: 17px; color: #fff; }

.menu-toggle-v2 {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--surface-line);
  align-items: center; justify-content: center;
  color: var(--ink-700);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.menu-toggle-v2:hover { border-color: var(--violet-400); }

.menu-toggle-v2__bars { position: relative; width: 18px; height: 14px; display: block; flex: none; }
.menu-toggle-v2__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-med) var(--ease-out);
}
.menu-toggle-v2__bars span:nth-child(1) { top: 0; }
.menu-toggle-v2__bars span:nth-child(2) { top: 6px; }
.menu-toggle-v2__bars span:nth-child(3) { top: 12px; }

.menu-toggle-v2.is-active .menu-toggle-v2__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle-v2.is-active .menu-toggle-v2__bars span:nth-child(2) { opacity: 0; }
.menu-toggle-v2.is-active .menu-toggle-v2__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.lang-dropdown { position: relative; flex: none; }
.lang-toggle {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 42px; height: 42px; flex: none;
  padding: 0 10px 0 13px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--surface-line);
  background: transparent;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover, .lang-toggle[aria-expanded="true"] { border-color: var(--violet-400); color: var(--violet-700); background: var(--violet-50); }
.lang-toggle:active { transform: scale(0.94); }
.lang-toggle__chevron { width: 11px; height: 11px; flex: none; transition: transform var(--dur-med) var(--ease-out); }
.lang-toggle[aria-expanded="true"] .lang-toggle__chevron { transform: rotate(180deg); }

.lang-dropdown__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 152px; z-index: 320;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--surface-line);
  box-shadow: 0 18px 40px rgba(23, 21, 29, 0.16), 0 4px 14px rgba(23, 21, 29, 0.08);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; pointer-events: none;
  transform: translateY(-14px) scale(0.94); transform-origin: top right;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.lang-dropdown.is-open .lang-dropdown__menu {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.lang-dropdown__menu [data-lang-option] {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 10px; border-radius: 9px; border: none; background: transparent;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-700);
  text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(-4px);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.lang-dropdown.is-open .lang-dropdown__menu [data-lang-option] { opacity: 1; transform: translateY(0); }
.lang-dropdown.is-open .lang-dropdown__menu [data-lang-option]:nth-child(1) { transition-delay: 0.04s; }
.lang-dropdown.is-open .lang-dropdown__menu [data-lang-option]:nth-child(2) { transition-delay: 0.08s; }
.lang-dropdown.is-open .lang-dropdown__menu [data-lang-option]:nth-child(3) { transition-delay: 0.12s; }
.lang-dropdown__menu [data-lang-option] span { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-500); }
.lang-dropdown__menu [data-lang-option]:hover { background: var(--violet-50); color: var(--violet-700); }
.lang-dropdown__menu [data-lang-option].is-active { background: var(--violet-50); color: var(--violet-700); font-weight: 700; }
.lang-dropdown__menu [data-lang-option].is-active span { color: var(--violet-500); }

.scroll-percent {
  display: flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--surface-line);
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--violet-600);
}

/* ---------- Mobile-only menu widget: two-layer trigger+panel that
   grows in place, ported from the user's fourmula.ai reference doc
   (меню налаштування.docx) — the dark bar is always the same size
   (.menu-widget__trigger, on top via z-index) while a second layer
   behind it (.menu-widget__panel) grows to reveal the nav list. The
   reference's light/dark theme toggle is replaced with our language
   button, and its static "0%" with our real working scroll percent.
   Logo stays a separate floating badge to the left (unchanged); this
   widget is the right-side flex item in .mobile-header-row. Hidden
   by default; enabled only inside the 899px mobile block. ---------- */
.menu-widget {
  display: none;
  position: relative;
  width: 252px; height: 50px;
  flex: none;
}

.menu-widget__panel {
  position: absolute; top: 0; right: 0;
  width: 252px; height: 50px;
  background: linear-gradient(180deg, rgba(16, 11, 26, 0.86) 0%, rgba(91, 33, 182, 0.62) 100%);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(46, 16, 101, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: width 0.4s ease, height 0.4s ease, transform 0.4s ease, right 0.4s ease;
}
.menu-widget__panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
.menu-widget.is-open .menu-widget__panel {
  right: -6px;
  width: min(264px, 68vw); height: 430px;
  transform: translateY(-6px);
}

.menu-widget__list {
  height: 100%; box-sizing: border-box;
  padding: 66px 18px 18px;
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.menu-widget.is-open .menu-widget__list { opacity: 1; transition-delay: 0.15s; }

.menu-widget .menu__list { display: flex; flex-direction: column; gap: 2px; }
.menu-widget .menu__list a {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.92); font-size: 16.5px; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 2px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color var(--dur-fast) var(--ease-out);
}
.menu-widget.is-open .menu__list a { opacity: 1; transform: translateY(0); }
.menu-widget.is-open .menu__list a:nth-child(1) { transition-delay: 0.18s; }
.menu-widget.is-open .menu__list a:nth-child(2) { transition-delay: 0.22s; }
.menu-widget.is-open .menu__list a:nth-child(3) { transition-delay: 0.26s; }
.menu-widget.is-open .menu__list a:nth-child(4) { transition-delay: 0.3s; }
.menu-widget.is-open .menu__list a:nth-child(5) { transition-delay: 0.34s; }
.menu-widget.is-open .menu__list a:nth-child(6) { transition-delay: 0.38s; }
.menu-widget .menu__list a.active { color: #fff; font-weight: 700; }
.menu-widget .menu__list a:hover { color: var(--violet-400); }

.menu-widget__bottom {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.menu-widget.is-open .menu-widget__bottom { opacity: 1; transform: translateY(0); transition-delay: 0.42s; }
.menu-widget__bottom .btn-book-v2 {
  flex: 1; justify-content: center;
  background: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-400) 100%);
}
.menu-widget__call {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: rgba(196, 181, 253, 0.3);
  border: 1.5px solid rgba(196, 181, 253, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.menu-widget__call:hover { background: rgba(196, 181, 253, 0.45); border-color: rgba(196, 181, 253, 0.8); }
.menu-widget__call svg { width: 19px; height: 19px; }

.menu-widget__trigger {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 252px; height: 50px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, #150a2e 0%, var(--violet-900) 100%);
  border-radius: var(--radius-xl);
  padding: 0 8px 0 18px;
}

.menu-widget__btn {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  color: #fff;
}
.menu-widget__txt { font-size: 15px; font-weight: 600; width: 66px; flex: none; }
.menu-widget__icon { position: relative; width: 20px; height: 12px; flex: none; display: block; }
.menu-widget__icon span {
  position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}
.menu-widget__icon span:nth-child(1) { top: 0; }
.menu-widget__icon span:nth-child(2) { top: 10px; }
.menu-widget.is-open .menu-widget__icon span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-widget.is-open .menu-widget__icon span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

.menu-widget__side { display: flex; align-items: center; gap: 8px; flex: none; }
.lang-dropdown--mobile { position: relative; flex: none; }
.menu-widget__lang {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 34px; flex: none;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff; font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.menu-widget__lang:hover, .menu-widget__lang[aria-expanded="true"] { border-color: #fff; }
.menu-widget__lang:active { transform: scale(0.94); }
.menu-widget__lang .lang-toggle__chevron { width: 10px; height: 10px; }
.menu-widget__lang[aria-expanded="true"] .lang-toggle__chevron { transform: rotate(180deg); }
.lang-dropdown--mobile .lang-dropdown__menu { top: calc(100% + 12px); }
.menu-widget__pct {
  display: flex; align-items: center; justify-content: center;
  min-width: 50px; height: 34px; flex: none;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero ---------- */
.hero-v2 { padding-top: 130px; padding-bottom: 56px; position: relative; overflow: visible; }

/* ---------- Ambient background blobs (decorative, non-interactive) ----------
   Lives at the page level (not inside .hero-v2) so the blur shows behind the
   header too, not just starting where the hero's own box begins — position:
   absolute with no positioned ancestor anchors to the document root, so
   top:0 means the very top of the page and it still scrolls away normally
   (unlike position:fixed, which would stay pinned while scrolling). Sits
   below the header's z-index (310) and the hero content's z-index (1). */
.page-ambient {
  position: absolute; top: 0; left: 0; right: 0; height: 950px;
  overflow: hidden;
  z-index: 0; pointer-events: none;
}
.hero-v2__blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}
.hero-v2__blob--1 {
  width: 380px; height: 380px; top: -120px; left: -80px;
  background: radial-gradient(circle, var(--violet-300, var(--violet-400)) 0%, transparent 70%);
  animation: blob-drift-1 22s ease-in-out infinite;
}
.hero-v2__blob--2 {
  width: 300px; height: 300px; top: 40%; right: -100px;
  background: radial-gradient(circle, var(--violet-400) 0%, transparent 70%);
  animation: blob-drift-2 26s ease-in-out infinite;
}
.hero-v2__blob--3 {
  width: 220px; height: 220px; bottom: -80px; left: 30%;
  background: radial-gradient(circle, var(--violet-500) 0%, transparent 70%);
  opacity: 0.35;
  animation: blob-drift-3 19s ease-in-out infinite;
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.08); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-35px, -25px) scale(1.1); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -30px) scale(0.95); }
}

.hero-v2-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr 0.85fr;
  gap: 20px;
  align-items: center;
}

.hero-v2-copy h1 { font-size: clamp(32px, 3.4vw, 46px); margin-top: 16px; line-height: 1.12; }
.hero-v2-copy h1 em {
  font-style: italic;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-700), var(--violet-400), var(--violet-600));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hero-shimmer 6s linear infinite;
}
@keyframes hero-shimmer { to { background-position: -300% center; } }
.hero-v2-copy p { margin-top: 16px; color: var(--ink-500); font-size: 15px; line-height: 1.6; max-width: 340px; }

.hero-v2-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }

/* Mobile-only booking + click-to-call row (hidden on desktop — the
   header button and floating side tab already cover this there). */
.hero-v2-cta-row { display: none; align-items: center; gap: 10px; }

.hero-v2-book {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 8px 13px 22px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-glow);
  font-size: 14px; font-weight: 700; color: #fff;
}
.btn-arrow-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.btn-arrow-circle svg { width: 15px; height: 15px; }

.hero-v2-call-btn {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: #fff; border: 1.5px solid var(--surface-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet-600);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.hero-v2-call-btn:hover { border-color: var(--violet-400); }
.hero-v2-call-btn svg { width: 19px; height: 19px; }

.play-link { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-700); text-align: left; line-height: 1.4; background: none; border: none; font-family: inherit; cursor: pointer; }
.play-link .play-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--surface-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--violet-600); flex: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.play-link:hover .play-icon { border-color: var(--violet-400); }
.play-link .play-icon svg { width: 12px; height: 12px; margin-left: 2px; }

/* ---------- Orbit diagram ---------- */
.tooth-orbit { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin-inline: auto; }

.tooth-orbit__ring {
  position: absolute; inset: 14%;
  border: 1.5px dashed rgba(124, 58, 237, 0.28);
  border-radius: 50%;
}
.tooth-orbit__ring--outer { inset: 0; border-color: rgba(124, 58, 237, 0.14); }

.tooth-orbit__tooth {
  position: absolute; inset: 2%;
}
.tooth-orbit__glow {
  position: absolute; z-index: 0;
  top: 8%; left: 50%; width: 82%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(196, 181, 253, 0.35) 45%, transparent 72%);
  pointer-events: none;
}
.tooth-orbit__platform {
  position: absolute; z-index: 1;
  bottom: 8%; left: 50%; width: 88%;
  transform: translateX(-50%);
  pointer-events: none; object-fit: contain;
}
.tooth-orbit__model {
  position: absolute; z-index: 2;
  top: 0; left: 50%; width: 54%; height: 68%;
  transform: translateX(-50%);
  pointer-events: none;
  animation: tooth-float 3.6s ease-in-out infinite;
}
/* Belt-and-suspenders: the site loader already stays up until the model
   fires its own 'load' event (see main.js), but hide model-viewer's
   built-in loading bar too in case that timing is ever imperfect. */
.tooth-orbit__model::part(default-progress-bar) { display: none; }
@keyframes tooth-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-14px); }
}

/* Rotating layer: JS (main.js, [data-orbit]) drives each item's
   left/top with requestAnimationFrame from a single clock, computed
   fresh every frame from elapsed time — not two independent CSS
   animations. Two CSS animations *should* stay in sync (same
   duration, opposite direction) but in practice can drift apart
   after the page has been open a while, visibly desyncing the icon
   position from the tooth. A single JS-driven source of truth can't
   drift by construction, and since items are only ever repositioned
   (never rotated) the icon/label are upright with no counter-spin
   needed at all. */
.tooth-orbit__items {
  position: absolute; inset: 0;
  z-index: 2;
}

.orbit-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100px;
  text-decoration: none; color: inherit; cursor: pointer;
}

.orbit-item__inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}

.orbit-item__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.orbit-item__icon img { width: 22px; height: 22px; object-fit: contain; }
.orbit-item span.orbit-label { font-size: 11.5px; font-weight: 700; color: var(--ink-700); line-height: 1.2; transition: color var(--dur-fast) var(--ease-out); }

.orbit-item:hover .orbit-item__icon { transform: scale(1.16); box-shadow: var(--shadow-lg), 0 0 26px 10px rgba(139, 92, 246, 0.4), 0 0 48px 18px rgba(124, 58, 237, 0.22); }
.orbit-item:hover .orbit-label { color: var(--violet-700); }

.orbit-item--top     { left: 50%;   top: 4%; }
.orbit-item--tr       { left: 89%;  top: 26%; }
.orbit-item--br       { left: 89%;  top: 74%; }
.orbit-item--bottom  { left: 50%;   top: 97%; }
.orbit-item--bl       { left: 11%;  top: 74%; }
.orbit-item--tl       { left: 11%;  top: 26%; }

/* ---------- Quick booking card ---------- */
.booking-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.booking-card__head { display: flex; align-items: center; justify-content: space-between; }
.booking-card__head h3 { font-size: 16px; }
.booking-card__head .badge-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--violet-50); color: var(--violet-600);
  display: flex; align-items: center; justify-content: center;
}
.booking-card__head .badge-icon svg { width: 16px; height: 16px; }
.booking-card__sub { font-size: 12.5px; color: var(--ink-500); margin-top: -10px; }

.booking-step label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-700); margin-bottom: 8px; }
.booking-fake-select {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border: 1.5px solid var(--surface-line);
  border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink-900);
  background: var(--surface-50);
}
.booking-fake-select svg { width: 15px; height: 15px; color: var(--ink-500); }

.time-pills { display: flex; gap: 8px; }
.time-pills button {
  flex: 1; padding: 10px 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--surface-line);
  font-size: 13px; font-weight: 700; color: var(--ink-700);
  background: var(--surface-50);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.time-pills button.active { background: var(--gradient-brand); color: #fff; border-color: transparent; }
.qb-time-empty { flex: 1; font-size: 12.5px; color: var(--ink-500); padding: 10px 2px; }

.booking-card .btn-block { width: 100%; justify-content: center; }
.booking-card .btn-block:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Quick booking: service/date dropdowns ---------- */
.qb-select { position: relative; }
.qb-select .booking-fake-select { width: 100%; cursor: pointer; text-align: left; }
.qb-select .booking-fake-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.qb-select .booking-fake-select svg { transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; }
.qb-select__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  background: #fff; border: 1px solid var(--surface-line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 240px; overflow-y: auto;
  display: none; flex-direction: column; gap: 2px; padding: 8px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.qb-select.is-open .qb-select__menu { display: flex; opacity: 1; transform: translateY(0); }
.qb-select.is-open .booking-fake-select svg { transform: rotate(180deg); }
.qb-select__menu::-webkit-scrollbar { width: 6px; }
.qb-select__menu::-webkit-scrollbar-thumb { background: var(--surface-line); border-radius: var(--radius-pill); }
.qb-select__opt {
  appearance: none; -webkit-appearance: none;
  border: none; background: none; width: 100%; display: flex; align-items: center; gap: 8px;
  text-align: left; padding: 10px 12px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.qb-select__opt:hover { background: var(--violet-50); }
.qb-select__opt.is-active { color: var(--violet-600); background: var(--violet-50); font-weight: 700; }
.qb-select__opt.is-disabled { color: var(--ink-300); cursor: not-allowed; opacity: 0.55; }
.qb-select__opt.is-disabled:hover { background: none; }
.qb-select__opt.is-checking { color: var(--ink-300); cursor: wait; }

/* ---------- Floating side tabs ---------- */
.side-tab {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 150;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 10px 16px;
  background: #fff;
  border: 1px solid var(--surface-line); font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--violet-700);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.side-tab span { writing-mode: vertical-rl; transform: rotate(180deg); }
.side-tab__icon {
  position: relative; overflow: hidden;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, rgba(220, 171, 218, 0.8) 0%, rgba(187, 114, 192, 0.75) 45%, rgba(116, 83, 178, 0.82) 100%);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(122, 83, 178, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.side-tab__icon::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.side-tab__icon svg { position: relative; }
.side-tab svg { width: 14px; height: 14px; flex: none; color: #fff; }
.side-tab--right svg { color: var(--violet-600); }
.side-tab:hover { box-shadow: var(--shadow-glow); transform: translateY(-50%) translateY(-2px); }

.side-tab--left { left: 18px; }
.side-tab--right { right: 18px; }

/* ---------- AI assistant chat popup ----------
   UI shell only for now — real Q&A logic comes later (per project
   roadmap: local rule-based/FAQ bot, no paid API). Suggested-question
   chips + a canned reply keep it feeling responsive in the meantime
   rather than a dead-end button. Floats near the AI side-tab on
   desktop; expands near-fullscreen on mobile (below). */
.ai-chat {
  position: fixed; inset: 0; z-index: 400;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med);
}
.ai-chat.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.ai-chat__panel {
  position: absolute; left: 24px; bottom: 24px;
  width: 360px; max-width: calc(100vw - 48px);
  height: 520px; max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.3s var(--ease-out);
}
.ai-chat.is-open .ai-chat__panel { transform: translateY(0) scale(1); opacity: 1; }

.ai-chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--gradient-brand);
  color: #fff;
  flex: none;
}
.ai-chat__head-info { display: flex; align-items: center; gap: 12px; }
.ai-chat__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden;
}
.ai-chat__avatar img { width: 26px; height: 26px; object-fit: contain; }
.ai-chat__head-text { display: flex; flex-direction: column; line-height: 1.3; }
.ai-chat__head-text b { font-size: 14.5px; }
.ai-chat__status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: 0.85; }
.ai-chat__status i { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; display: block; }
.ai-chat__close {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.16);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.ai-chat__close:hover { background: rgba(255, 255, 255, 0.28); }
.ai-chat__close svg { width: 16px; height: 16px; }

.ai-chat__body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-50);
}
.ai-chat__msg { max-width: 85%; padding: 11px 14px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.5; }
.ai-chat__msg--bot {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--surface-line); color: var(--ink-900);
  border-bottom-left-radius: 4px;
}
.ai-chat__msg--user {
  align-self: flex-end;
  background: var(--gradient-brand); color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-chat__msg--typing { display: flex; gap: 4px; align-items: center; padding: 13px 16px; }
.ai-chat__msg--typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-300);
  animation: ai-typing-bounce 1.1s ease-in-out infinite;
}
.ai-chat__msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat__msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ai-chat__chips { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.ai-chat__chip {
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--violet-100);
  background: var(--violet-50);
  color: var(--violet-700);
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ai-chat__chip:hover { border-color: var(--violet-400); background: var(--violet-100); }

/* In-conversation option rows for the chat's quick-booking flow (service,
   date, time) — same chip look, laid out as a wrapping row instead of the
   welcome screen's vertical stack, and dimmed once an option is picked. */
.ai-chat__chips--inline { flex-direction: row; flex-wrap: wrap; }
.ai-chat__chips--inline .ai-chat__chip { flex: 0 1 auto; }
.ai-chat__chips.is-answered .ai-chat__chip { cursor: default; opacity: 0.5; }
.ai-chat__chips.is-answered .ai-chat__chip:hover { border-color: var(--violet-100); background: var(--violet-50); }
.ai-chat__chips.is-answered .ai-chat__chip.is-picked { opacity: 1; border-color: var(--violet-500); background: var(--violet-100); }

.ai-chat__actions { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; max-width: 85%; margin-top: -2px; }
.ai-chat__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--gradient-brand); color: #fff;
  font-size: 12.5px; font-weight: 700; text-align: center; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ai-chat__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ai-chat__cta--outline {
  background: #fff; border: 1.5px solid var(--violet-200); color: var(--violet-700);
}
.ai-chat__cta--outline:hover { border-color: var(--violet-400); background: var(--violet-50); }

.ai-chat__input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--surface-line);
  background: #fff;
  flex: none;
}
.ai-chat__input {
  flex: 1;
  border: 1.5px solid var(--surface-line);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-size: 13.5px; font-family: inherit;
  background: var(--surface-50);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ai-chat__input:focus { outline: none; border-color: var(--violet-400); background: #fff; }
.ai-chat__send {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--gradient-brand);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ai-chat__send:hover { transform: scale(1.05); }
.ai-chat__send svg { width: 18px; height: 18px; }

/* ---------- Stats band ---------- */
.stats-band { padding-block: clamp(32px, 5vw, 64px); overflow-x: hidden; }
.stats-band__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.stat-card {
  text-align: center; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.stat-card + .stat-card { border-left: 1px solid var(--surface-line); }
.stat-card__icon {
  position: relative; overflow: hidden;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(165deg, rgba(220, 171, 218, 0.8) 0%, rgba(187, 114, 192, 0.75) 45%, rgba(116, 83, 178, 0.82) 100%);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px rgba(122, 83, 178, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 18px;
}
.stat-card__icon::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.stat-card__icon svg { position: relative; width: 28px; height: 28px; }
.stat-card__value {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.2vw, 40px); color: var(--violet-700);
  font-variant-numeric: tabular-nums;
}
.stat-card__unit { font-size: 16px; font-weight: 600; color: var(--violet-600); }
.stat-card__value--rating { gap: 6px; }
.stat-card__value--rating svg { width: 22px; height: 22px; color: #F5B400; flex: none; }
.stat-card__divider { width: 28px; height: 2px; border-radius: 2px; background: var(--violet-100); margin: 14px 0; }
.stat-card__desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.5; }

/* ---------- Case study + Instagram ---------- */
.case-instagram__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: start; overflow-x: hidden; }

.case-block { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 28px; }
.case-block h2 { font-size: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--surface-line); margin-bottom: 24px; }

/* Static side-by-side photos are retired in favor of the same drag
   before/after slider on every breakpoint (was mobile-only; kept as
   dead weight here in case a future layout wants the grid back). */
.case-block__photos { display: none; }
.case-photo__label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-500); margin-bottom: 8px; }
.case-photo__img {
  aspect-ratio: 1/1.05; border-radius: var(--radius-md); width: 100%; object-fit: cover; display: block;
  box-shadow: var(--shadow-sm);
}

/* Drag before/after slider (reuses the .ba-slider component from
   components.css) — now shown at every breakpoint, not just mobile. */
.case-block__slider { display: block; width: 100%; margin-bottom: 28px; }

.case-block__story h3 { font-size: 16px; margin-bottom: 10px; }
.case-block__story p { font-size: 13.5px; color: var(--ink-700); line-height: 1.6; }
.case-block__patient { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.case-block__patient b { display: block; font-size: 13px; }
.case-block__patient span { font-size: 11.5px; color: var(--ink-500); }
.case-block__story blockquote { margin: 14px 0 0; font-size: 13.5px; font-style: italic; color: var(--ink-700); border-left: 2px solid var(--violet-300, var(--violet-400)); padding-left: 14px; }

.btn-outline-sm {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--surface-line);
  font-size: 13px; font-weight: 700; color: var(--violet-700);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-outline-sm:hover { border-color: var(--violet-400); background: var(--violet-50); }

.info-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-x: hidden;
}
.info-card__head { display: flex; align-items: center; justify-content: space-between; }
.info-card__head h4 { font-size: 16px; }
.info-card__head small { display: block; font-size: 11.5px; color: var(--ink-500); font-weight: 400; margin-top: 2px; }
.info-card__head a { font-size: 12.5px; font-weight: 700; color: var(--violet-600); white-space: nowrap; }
.info-card__head-links { display: flex; align-items: center; gap: 10px; flex: none; }
.info-card__head-links .insta-icon-btn {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(135deg, #4f5bd5, #962fbf, #d62976, #fa7e1e, #feda75);
  box-shadow: 0 4px 12px rgba(214, 41, 118, 0.32);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.insta-icon-btn:hover, .insta-icon-btn:active {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(214, 41, 118, 0.42);
}
.insta-icon-btn svg { width: 17px; height: 17px; display: block; }

.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.insta-follow-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; margin-top: auto;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--surface-line);
  font-size: 13.5px; font-weight: 700; color: var(--violet-700);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.insta-follow-btn:hover { border-color: var(--violet-400); background: var(--violet-50); }
.insta-follow-btn svg { width: 16px; height: 16px; flex: none; }
.insta-grid .ph { aspect-ratio: 1; border-radius: 10px; }
.insta-grid .ph::after { display: none; }
.insta-tile {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  display: block; background: var(--surface-100);
}
.insta-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.insta-tile:hover img { transform: scale(1.06); }

/* ---------- Footer ---------- */
.site-footer-v2 { padding-top: 40px; padding-bottom: 20px; border-top: 1px solid var(--surface-line); }
.footer-v2-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.3fr 1.2fr 1fr;
  gap: 24px;
}
.footer-v2-grid > * + * { padding-left: 24px; border-left: 1px solid var(--surface-line); }

.footer-v2-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-v2-brand .brand-v2 img { height: 34px; }
.footer-v2-brand .muted { font-size: 12.5px; color: var(--ink-500); }

.footer-v2-col h4 { font-size: 13.5px; margin-bottom: 14px; }
.footer-v2-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.footer-v2-col a { color: var(--ink-700); transition: color var(--dur-fast) var(--ease-out); }
.footer-v2-col a:hover { color: var(--violet-700); }
.footer-v2-col .muted { font-size: 12.5px; color: var(--ink-500); }
.footer-v2-col .btn-book-v2 { align-self: flex-start; margin-top: 4px; }

.footer-v2-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-700); }
.footer-v2-line svg { width: 15px; height: 15px; color: var(--violet-600); flex: none; margin-top: 1px; }
.footer-v2-route { font-size: 12.5px; font-weight: 700; color: var(--violet-600); display: inline-flex; align-items: center; gap: 6px; }

.footer-v2-social .site-footer__socials { display: flex; gap: 8px; }
.footer-v2-social .site-footer__socials a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-700);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.footer-v2-social .site-footer__socials a:hover { background: var(--gradient-brand); color: #fff; }
.footer-v2-social .site-footer__socials svg { width: 16px; height: 16px; }
/* Clickable map preview photo — replaces the old plain icon+text link.
   A real static screenshot of the clinic's location with a custom
   marker (the clinic's own tooth logo, not a generic pin) centered
   on it; tapping opens real Google Maps navigation. Shared by both
   the desktop footer column and the mobile footer's map slot. */
.footer-v2-map-photo {
  position: relative;
  display: block;
  margin-top: 6px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 10;
}
.footer-v2-map-photo__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-med) var(--ease-out);
}
.footer-v2-map-photo:hover .footer-v2-map-photo__img { transform: scale(1.06); }
.footer-v2-map-photo__marker {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -62%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--violet-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(46, 16, 101, 0.35);
}
.footer-v2-map-photo__marker::after {
  content: '';
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--violet-500);
}
.footer-v2-map-photo__marker img { width: 22px; height: 22px; object-fit: contain; }
.footer-v2-map-photo__label {
  position: absolute; left: 50%; bottom: 6px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.94);
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: var(--violet-700); font-size: 9.5px; font-weight: 700;
  white-space: nowrap;
}

/* Mobile-only footer layout — different grouping than desktop, not
   just a reflow (no nav-links column, book button lives with the
   brand instead of its own column). Hidden until the mobile query. */
.footer-v2-mobile { display: none; }
.footer-v2-mobile__col { display: flex; flex-direction: column; gap: 12px; }
.footer-v2-mobile__tagline { font-size: 15px; font-weight: 600; color: var(--ink-900); }
.footer-v2-mobile__tagline em { font-style: italic; color: var(--violet-600); }
.footer-v2-mobile__col .btn-book-v2 { align-self: flex-start; }
.footer-v2-mobile__map { justify-content: center; }
.footer-v2-mobile__bottom {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 12px; color: var(--ink-500);
  padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--surface-line);
}

@media (max-width: 1180px) {
  .case-instagram__grid { grid-template-columns: 1fr; }
  .footer-v2-grid { grid-template-columns: 1fr 1fr; }
  .footer-v2-grid > * { padding-left: 0; border-left: none; }
}
@media (max-width: 640px) {
  .footer-v2-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .hero-v2-grid { grid-template-columns: 1fr; }
  .tooth-orbit { margin-block: 24px; }
  .side-tab { display: none; }
  .info-cards { grid-template-columns: 1fr; }
  .main-nav-v2 { display: none; }
  .menu-toggle-v2 { display: flex; }
}

@media (max-width: 560px) {
  .header-v2-inner { gap: 12px; }
  .header-v2-actions { gap: 6px; }
  .scroll-percent { min-width: 34px; height: 34px; font-size: 10px; padding: 0 4px; }
  .lang-toggle { height: 34px; font-size: 10px; padding: 0 8px 0 10px; }
  .lang-toggle__chevron { width: 9px; height: 9px; }
  .menu-toggle-v2 { width: 38px; height: 38px; }
}

/* ================================================================
   Mobile design (matches assets/img/телефонна версія.jpg) — this
   is a distinct layout in places, not just a reflow of desktop:
   header loses its booking button, the hero gains an inline
   book+call row, the quick-booking card and side tabs disappear,
   the case-study photo pair becomes a drag slider sitting beside
   (not above) the story text, Instagram becomes a horizontal
   scroll strip, and the footer regroups into 3 columns with no
   nav-links column. Keep this block last so it wins the cascade.
================================================================= */
@media (max-width: 899px) {
  .only-mobile { display: inline; }
  .only-desktop { display: none; }

  /* Shrink + nudge the tooth down (not the orbit ring — shifting the
     ring itself via transform threw off the orbit math's edge-clamping,
     which assumes the ring's untransformed box, distorting the circular
     path into a flattened polygon) so it clears the orbiting icons. */
  .tooth-orbit__model { width: 46%; height: 58%; top: 10%; }


  .stats-band { padding-block: 24px; }
  .stats-band__grid { border-radius: var(--radius-lg); }
  .stat-card { padding: 16px 6px; }
  .stat-card__icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .stat-card__icon svg { width: 17px; height: 17px; }
  .stat-card__value { font-size: 19px; gap: 3px; }
  .stat-card__unit { font-size: 11px; }
  .stat-card__value--rating svg { width: 15px; height: 15px; }
  .stat-card__divider { width: 18px; height: 1.5px; margin: 8px 0; }
  .stat-card__desc { font-size: 9.5px; line-height: 1.35; }

  /* Header splits into two independent pieces: a compact logo-only
     badge on the left, and the dark .mobile-util-pill (menu/lang/
     scroll-%) on the right — the old in-pill nav/actions cluster is
     hidden since the dark pill fully replaces it.

     Both pieces are laid out as normal flex children of
     .mobile-header-row and use position:sticky (not fixed) here —
     some real mobile WebViews (e.g. Telegram's in-app browser) fail
     to keep position:fixed elements pinned during scroll, letting
     them scroll away/"hide" above the viewport top. Sticky avoids
     that whole class of bug since it's anchored to normal document
     flow instead of being computed against the visual viewport. */
  .mobile-header-row {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 14px; z-index: 310;
    padding-inline: 14px;
    transition: top var(--dur-med) var(--ease-out);
  }
  .mobile-header-row.is-scrolled { top: 8px; }

  /* The old dropdown-below-the-pill overlay is tablet-only now (900-
     1180px, still triggered by .menu-toggle-v2 there) — the mobile
     menu-widget below has its own self-contained open/close panel,
     so .mobile-menu must not also be reachable at this width. */
  .mobile-menu { display: none; }

  /* AI assistant floating tab reappears on mobile, matching the
     desktop version exactly — only the left (AI) tab, since the
     right (call) tab's job is already covered on mobile by the
     inline hero-v2-cta-row button and the menu-widget's call icon.
     Vertically centered on the viewport like desktop (position:fixed,
     top:50%, translateY(-50%) inherited from the base .side-tab rule)
     so it stays reachable regardless of scroll position or mobile
     browser toolbar height — a fixed pixel top was tried before and
     kept getting clipped by the browser's own bottom UI on real
     phones, see git history / project notes if that regresses. */
  .side-tab--left { display: flex; left: auto; right: 10px; padding: 12px 8px 14px; transform: translateY(-50%) translateY(-90px); }
  .side-tab--left:hover { transform: translateY(-50%) translateY(-90px) translateY(-2px); }

  /* Chat panel expands near-fullscreen on mobile instead of the
     small desktop floating card — a fixed 360x520 card would be
     cramped or clipped on a phone. */
  .ai-chat__panel {
    left: 10px; right: 10px; bottom: 10px; top: 90px;
    width: auto; height: auto; max-width: none; max-height: none;
  }

  .site-header-v2 { position: static; transform: translateZ(0); width: auto; }
  .main-nav-v2, .header-v2-actions { display: none; }
  .header-v2-inner { width: auto; max-width: none; gap: 0; height: auto; padding: 15px; }
  .site-header-v2 .brand-v2-text { display: none; }
  .site-header-v2 .brand-v2 img { height: 52px; }
  .menu-widget { display: block; }

  .hero-v2-cta-row { display: flex; }
  .booking-card { display: none; }

  .case-block { padding: 20px; }
  .case-block__row { display: flex; align-items: flex-start; gap: 14px; }
  .case-block__slider { flex: 0 0 54%; aspect-ratio: 1/1.05; }
  .case-block__story { flex: 1; min-width: 0; }
  .case-block__story h3 { font-size: 14.5px; }
  .case-block__story p { font-size: 12px; }
  .case-block__patient b { font-size: 12px; }
  .case-block__story blockquote { font-size: 12px; }
  .btn-outline-sm { font-size: 12px; padding: 9px 14px; max-width: 100%; white-space: normal; }

  .insta-grid {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -4px; padding-inline: 4px;
  }
  .insta-grid .ph { flex: 0 0 22%; scroll-snap-align: start; }
  .insta-grid .insta-tile { flex: 0 0 22%; scroll-snap-align: start; }

  .footer-v2-grid { display: none; }
  .footer-v2-mobile {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 18px;
  }
}

/* True small phones: the reference's 3-column footer was designed
   around a wider "phone" canvas (~592px) — below that, the middle
   contact column gets too narrow to read comfortably, so stack. */
@media (max-width: 480px) {
  .footer-v2-mobile { grid-template-columns: 1fr; gap: 22px; }
  .footer-v2-mobile__bottom { grid-column: 1; }
}