/* V7 — procedural interactive tooth viewer */

.tooth-lab {
  position: relative;
  z-index: 3;
  margin: 28px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 44px;
  color: #eef9f8;
  scroll-margin-top: 92px;
  background:
    radial-gradient(620px 520px at 82% 48%, rgba(50,205,196,.2), transparent 68%),
    radial-gradient(460px 360px at 12% 8%, rgba(255,115,86,.13), transparent 70%),
    linear-gradient(145deg, #051b24, #092f39 58%, #07343c);
  box-shadow: 0 38px 110px rgba(6,31,41,.25);
  isolation: isolate;
}
.tooth-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background-image:
    linear-gradient(rgba(169,225,217,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,225,217,.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 72% 50%, #000, transparent 68%);
}
.tooth-lab::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  width: 760px;
  height: 250px;
  z-index: -1;
  border: 1px solid rgba(101,228,208,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(101,228,208,.025), 0 0 100px rgba(101,228,208,.09);
  transform: translate(-50%,-50%) rotate(-14deg);
}
.tooth-lab__layout {
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(340px,.88fr) minmax(480px,1.12fr);
  align-items: center;
  gap: clamp(28px,5vw,84px);
  padding-top: 56px;
  padding-bottom: 56px;
}
.tooth-lab__copy { position: relative; z-index: 3; }
.tooth-lab__kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #a9e1d9;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tooth-lab__kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #65e4d0;
  box-shadow: 0 0 0 6px rgba(101,228,208,.12), 0 0 18px rgba(101,228,208,.7);
}
.tooth-lab h2 {
  max-width: 580px;
  margin: 0 0 24px;
  color: #fff;
  font-size: clamp(40px,4.2vw,62px);
  line-height: .98;
  letter-spacing: -.055em;
}
.tooth-lab__copy > p:not(.tooth-lab__kicker) {
  max-width: 520px;
  margin: 0;
  color: rgba(227,242,241,.72);
  font-size: 17px;
  line-height: 1.6;
}
.tooth-lab__features {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.tooth-lab__features li {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(239,250,249,.8);
  background: rgba(255,255,255,.055);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(12px);
}

.tooth-viewer {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 46%, rgba(101,228,208,.14), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 36px 100px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.tooth-viewer__stage {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.tooth-viewer__stage::before,
.tooth-viewer__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: -1;
  border: 1px solid rgba(101,228,208,.14);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(72deg);
}
.tooth-viewer__stage::before { width: 78%; height: 42%; box-shadow: 0 0 60px rgba(101,228,208,.08); }
.tooth-viewer__stage::after { width: 52%; height: 28%; border-color: rgba(255,126,98,.15); }
.tooth-viewer__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: grab;
  touch-action: none;
}
.tooth-viewer__canvas:active { cursor: grabbing; }
.tooth-viewer__canvas:focus-visible { box-shadow: inset 0 0 0 2px #d7f19a; }
.tooth-viewer__halo {
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 50%;
  height: 10%;
  z-index: 1;
  border-radius: 50%;
  background: rgba(70,220,207,.16);
  filter: blur(28px);
  transform: translateX(-50%);
  pointer-events: none;
}
.tooth-viewer__controls {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(233,247,246,.7);
  background: rgba(3,25,33,.32);
}
.tooth-viewer__hint { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; }
.tooth-viewer__hint i {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #65e4d0 0 2px, transparent 3px);
}
.tooth-viewer__source {
  color: rgba(233,247,246,.48);
  font-size: 10px;
  text-decoration: none;
  transition: color .2s ease;
}
.tooth-viewer__source:hover { color: rgba(215,241,154,.9); }
.tooth-viewer.is-loading .tooth-viewer__canvas { opacity: .25; }
.tooth-viewer.is-loading .tooth-viewer__halo { animation: tooth-loading 1.4s ease-in-out infinite; }
@keyframes tooth-loading {
  0%, 100% { opacity: .45; transform: translateX(-50%) scale(.82); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
}
.tooth-viewer__reset {
  flex: none;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #edf9f8;
  background: rgba(255,255,255,.07);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.tooth-viewer__reset:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.tooth-viewer__fallback { display: none; margin: 0; padding: 18px; color: rgba(255,255,255,.72); font-size: 13px; text-align: center; }
.tooth-viewer.is-fallback .tooth-viewer__stage {
  min-height: 520px;
  background:
    linear-gradient(rgba(6,31,41,.24),rgba(6,31,41,.56)),
    url("../img/hero-art-v3.png") 66% center / cover no-repeat;
}
.tooth-viewer.is-fallback .tooth-viewer__canvas,
.tooth-viewer.is-fallback .tooth-viewer__controls { display: none; }
.tooth-viewer.is-fallback .tooth-viewer__fallback { display: block; }

.tooth-viewer.is-dragging { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 44px 120px rgba(0,0,0,.32); }

@supports (animation-timeline: view()) {
  .tooth-viewer {
    animation: tooth-stage-arrive linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes tooth-stage-arrive {
    from { opacity: .4; transform: perspective(1000px) translateY(42px) rotateY(-8deg) scale(.96); }
    to { opacity: 1; transform: perspective(1000px) translateY(0) rotateY(0) scale(1); }
  }
}

@media (max-width: 1040px) {
  .tooth-lab__layout { grid-template-columns: 1fr; gap: 28px; padding-top: 58px; }
  .tooth-lab__copy { max-width: 720px; }
  .tooth-lab h2 { max-width: 760px; }
  .tooth-viewer { width: 100%; }
}

@media (max-width: 719px) {
  .tooth-lab { margin: 14px 7px; border-radius: 26px; }
  .tooth-lab__layout { min-height: 0; padding-top: 42px; padding-bottom: 18px; }
  .tooth-lab h2 { font-size: 36px; }
  .tooth-lab__copy > p:not(.tooth-lab__kicker) { font-size: 15px; }
  .tooth-viewer { border-radius: 24px; }
  .tooth-viewer__stage { min-height: 440px; }
  .tooth-viewer__controls { align-items: flex-start; flex-direction: column; gap: 9px; }
  .tooth-viewer__source { order: 3; }
  .tooth-viewer__reset { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .tooth-viewer { animation: none !important; transform: none !important; opacity: 1 !important; }
}

html.hailan-inline-editor .tooth-viewer { animation: none !important; transform: none !important; opacity: 1 !important; }

/* Content-aware layout: approved copy may intentionally leave some fields blank. */
[data-content] {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

html:not(.hailan-inline-editor) [data-content].is-content-empty,
html:not(.hailan-inline-editor) .is-content-empty-group {
  display: none !important;
}

.timeline__item p,
.faq__body p,
.galina__phone strong {
  line-height: 1.62;
}

.galina__phone strong {
  display: block;
  max-width: 100%;
}

.msg-buttons .btn {
  min-width: 0;
  text-align: center;
}

#clinic-h > span:last-child {
  max-width: 22ch;
}

.sticky-bar__btn {
  min-width: 0;
  padding-inline: 4px;
}

.sticky-bar__btn > span:last-child {
  max-width: 100%;
  text-align: center;
  line-height: 1.08;
}

/* Keep the final consultation block dark enough for its light typography. */
.section.section--cta {
  border-color: rgba(255,255,255,.1);
  background:
    radial-gradient(620px 380px at 84% 18%, rgba(101,228,208,.2), transparent 64%),
    radial-gradient(520px 340px at 4% 100%, rgba(255,115,86,.12), transparent 68%),
    linear-gradient(135deg, #061f29 0%, #0a3440 56%, #071f29 100%);
  box-shadow: 0 38px 100px rgba(6,31,41,.28);
}

.section.section--cta::before {
  right: -160px;
  top: -200px;
  background: radial-gradient(circle, rgba(215,241,154,.13), transparent 68%);
}

.section--cta .cta-kicker {
  color: #74ddd1;
}

.section--cta .cta-copy h2 {
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(0,0,0,.14);
}

.section--cta .cta-copy .lead {
  color: #cee1e3;
}

.section--cta .cta-phone {
  color: #9db9bd;
}

.section--cta .cta-phone a {
  color: #ffffff;
}

.contact-card .btn--max {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #375ef7 0%, #7657f6 58%, #9b55df 100%);
  box-shadow: 0 12px 28px rgba(83,82,235,.2);
}

.contact-card .btn--max:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #2f54e8 0%, #684bea 58%, #8d49d2 100%);
  box-shadow: 0 16px 34px rgba(83,82,235,.28);
}