/* V3 — Dentistry without borders */
:root {
  --mouse-x: 50%;
  --mouse-y: 50%;
  --scroll-progress: 0;
}

body { overflow-x: hidden; }

.river-progress {
  position: fixed;
  right: 10px;
  top: 120px;
  bottom: 100px;
  z-index: 70;
  width: 3px;
  border-radius: 99px;
  background: rgba(169, 225, 217, .22);
  pointer-events: none;
}
.river-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--v2-mint), var(--v2-coral));
  transform: scaleY(var(--scroll-progress));
  transform-origin: top;
  box-shadow: 0 0 16px rgba(255, 115, 86, .45);
}

.hero {
  min-height: 820px;
  padding: 92px 0 118px;
  background: #061f29;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, #061f29 0%, rgba(6,31,41,.96) 34%, rgba(6,31,41,.52) 62%, rgba(6,31,41,.1) 100%),
    linear-gradient(0deg, rgba(6,31,41,.5), transparent 40%);
  pointer-events: none;
}
.hero::after { z-index: 0; opacity: .25; }
.hero__grid { min-height: 610px; display: block; position: relative; z-index: 1; }
.hero-art {
  position: absolute;
  left: 50%;
  top: -92px;
  bottom: -118px;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 42px;
}
.hero-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center right;
  transform: translate3d(calc((var(--mx, 0) - .5) * -16px), calc((var(--my, 0) - .5) * -12px), 0) scale(1.025);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.hero__copy { position: relative; z-index: 3; width: min(660px, 58%); padding-top: 34px; }
.hero__eyebrow { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(6,31,41,.42); backdrop-filter: blur(10px); }
.hero h1 { max-width: 690px; font-size: clamp(64px, 6.5vw, 98px); text-shadow: 0 18px 46px rgba(0,0,0,.25); }
.hero__accent { color: var(--v2-lime); text-shadow: none; }
.hero__sub { max-width: 570px; color: rgba(238,247,247,.82); }
.hero__trust li { color: rgba(232,244,244,.78); }

.hero-visual {
  position: absolute;
  right: 0;
  bottom: -55px;
  z-index: 5;
  width: 380px;
  min-height: 0;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 26px;
  background: rgba(247,248,245,.82);
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(24px) saturate(135%);
  transform: none;
  animation: none !important;
}
.hero-visual::before, .hero-visual::after { display: none; }
.hero-visual__code { margin-bottom: 8px; }
.hero-visual__top { padding-bottom: 12px; }
.hero-visual__label { font-size: 15px; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 18px 0; }
.route__point { padding-left: 16px; }
.route__point::before { left: 0; top: 8px; width: 9px; height: 9px; border-width: 2px; }
.route__point span { font-size: 16px; }
.route__point small { font-size: 9px; }
.route__line { width: 58px; height: 2px; margin: 0; border: 0; border-top: 2px dashed #85c9c0; }
.route__line span { left: 50%; top: -20px; transform: translateX(-50%); }
.hero-visual__footer { display: none; }

.scroll-cue {
  position: absolute;
  left: 0;
  bottom: -52px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}
.scroll-cue i { position: relative; display: block; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.scroll-cue i::before { content: ""; position: absolute; left: 50%; top: 13px; width: 6px; height: 6px; margin-left: -3px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); animation: scroll-drop 1.8s ease-in-out infinite; }
@keyframes scroll-drop { 0%,100% { transform: translateY(0) rotate(45deg); opacity: .35; } 50% { transform: translateY(9px) rotate(45deg); opacity: 1; } }

.clinic-strip { margin-top: -30px; overflow: hidden; }
.clinic-strip__inner { max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
.clinic-strip__track {
  display: flex;
  align-items: center;
  gap: 54px;
  width: max-content;
  min-height: 72px;
  padding: 0 28px;
  border: 1px solid rgba(8,40,50,.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(8,40,50,.11);
  animation: marquee-flow 28s linear infinite;
}
.clinic-strip__track:hover { animation-play-state: paused; }
@keyframes marquee-flow { to { transform: translateX(calc(-50% - 27px)); } }

/* Large editorial service bento */
#services { padding-top: 150px; }
#services .section-lead { max-width: 670px; }
.services { grid-auto-flow: dense; }
.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(8,40,50,.08);
  background:
    radial-gradient(420px circle at var(--card-x, 50%) var(--card-y, 0%), rgba(169,225,217,.28), transparent 46%),
    #fff;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.service-card::before {
  position: absolute;
  right: 24px;
  top: 18px;
  z-index: -1;
  color: rgba(8,40,50,.07);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.08em;
}
.service-card:nth-child(1)::before { content: "01"; color: rgba(255,255,255,.08); }
.service-card:nth-child(2)::before { content: "02"; }
.service-card:nth-child(3)::before { content: "03"; }
.service-card:nth-child(4)::before { content: "04"; }
.service-card:nth-child(5)::before { content: "05"; }
.service-card:nth-child(6)::before { content: "06"; }
.service-card > * { transform: translateZ(14px); }
.service-card:hover { transform: perspective(900px) translateY(-10px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }

/* Sticky route story */
#steps { position: relative; overflow: visible; }
#steps .container { max-width: var(--maxw); }
#steps .timeline__item { transition: transform .3s ease, background .3s ease; }
#steps .timeline__item:hover { transform: translateX(8px); background: #fff; }

.stats { position: relative; }
.stats::before { content: "BLG  ·  HEH"; position: absolute; right: 0; top: -70px; color: rgba(8,40,50,.08); font-size: clamp(54px,8vw,110px); font-weight: 600; letter-spacing: -.07em; pointer-events: none; }
.stat { position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; right: -36px; bottom: -36px; width: 110px; height: 110px; border: 1px solid rgba(8,40,50,.1); border-radius: 50%; box-shadow: 0 0 0 18px rgba(169,225,217,.08); }

.galina { background: linear-gradient(145deg, #fff, #edf5f2); }
.galina__text { align-self: center; }
.photo--portrait { background-image: url("../img/hero-art-v3.png"); background-size: cover; background-position: 64% center; }
.photo--portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,31,41,.85), transparent 60%); }
.photo--portrait figcaption { z-index: 2; align-self: flex-start; text-align: left; }

.review { transition: transform .3s ease; }
.review:hover { transform: translateY(-8px) rotate(-.5deg); }
.review:nth-child(2):hover { transform: translateY(-8px) rotate(.5deg); }

.section--cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 360px at 86% 20%, rgba(169,225,217,.2), transparent 65%),
    #061f29;
}
.section--cta::after { content: "ХЭЙХЭ"; position: absolute; right: -1vw; bottom: -4vw; color: rgba(255,255,255,.035); font-size: clamp(100px,20vw,300px); font-weight: 600; line-height: .8; letter-spacing: -.08em; pointer-events: none; }
.cta-layout { position: relative; z-index: 2; }
.contact-card { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.9); backdrop-filter: blur(24px); }

@media (min-width: 900px) {
  .hero__grid { display: block; }
  .services { grid-template-columns: repeat(12, 1fr); }
  .service-card:nth-child(1) { grid-column: span 8; min-height: 390px; }
  .service-card:nth-child(2) { grid-column: span 4; min-height: 390px; }
  .service-card:nth-child(3) { grid-column: span 4; }
  .service-card:nth-child(4) { grid-column: span 8; }
  .service-card:nth-child(5), .service-card:nth-child(6) { grid-column: span 6; }

  #steps .container {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    grid-template-rows: auto auto;
    gap: 24px 72px;
  }
  #steps h2 { position: sticky; top: 130px; align-self: start; grid-column: 1; grid-row: 1 / span 2; max-width: 380px; }
  #steps .timeline { grid-column: 2; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; }
  #steps .timeline__item { min-height: 190px; }
  #steps .callout { grid-column: 2; }
}

@media (max-width: 899px) {
  .river-progress { display: none; }
  .hero { min-height: auto; padding-top: 66px; }
  .hero-art { top: -66px; }
  .hero::before { background: linear-gradient(90deg, rgba(6,31,41,.98), rgba(6,31,41,.83) 64%, rgba(6,31,41,.45)); }
  .hero__copy { width: min(640px, 74%); }
  .hero-visual { position: relative; right: auto; bottom: auto; width: min(480px, 100%); margin: 64px 0 0 auto; }
  .scroll-cue { display: none; }
  #steps h2 { position: static; }
}

@media (max-width: 719px) {
  .hero { min-height: 850px; padding-bottom: 58px; }
  .hero-art { top: -64px; bottom: -58px; opacity: .56; }
  .hero-art img { object-position: 66% center; transform: scale(1.08); }
  .hero::before { background: linear-gradient(180deg, rgba(6,31,41,.96) 0%, rgba(6,31,41,.91) 53%, rgba(6,31,41,.48) 100%); }
  .hero__copy { width: 100%; padding-top: 16px; }
  .hero h1 { font-size: 44px; }
  .hero__trust { max-width: 310px; }
  .hero-visual { position: absolute; left: 18px; right: 18px; bottom: -92px; width: auto; margin: 0; padding: 16px; border-radius: 22px; }
  .route { gap: 8px; padding-bottom: 6px; }
  .route__point span { font-size: 14px; }
  .route__point small { display: none; }
  .clinic-strip { margin-top: 78px; }
  .clinic-strip__track { min-height: 62px; gap: 38px; }
  #services { padding-top: 94px; }
  .service-card::before { font-size: 72px; }
  .service-card:hover { transform: none; }
  .stats::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art img, .service-card, .timeline__item, .review { transition: none; transform: none !important; }
  .scroll-cue i::before, .clinic-strip__track { animation: none; }
}

/* Editable decorative typography */
.section h2::before,
.service-card::before,
.stats::before,
.section--cta::after,
.timeline__item::before { display: none !important; content: none !important; }

.section-number {
  grid-row: 1;
  color: var(--v2-coral);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .08em;
}

.service-card__number {
  position: absolute;
  right: 24px;
  top: 18px;
  z-index: 0;
  color: rgba(8,40,50,.07);
  font-size: 96px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.08em;
}
.service-card:first-child .service-card__number { color: rgba(255,255,255,.08); }

.stats__route-code {
  position: absolute;
  right: 0;
  top: -70px;
  color: rgba(8,40,50,.08);
  font-size: clamp(54px,8vw,110px);
  font-weight: 600;
  letter-spacing: -.07em;
  pointer-events: none;
}

.timeline__number {
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 19px;
  box-shadow: 0 6px 14px rgba(12,68,124,.28);
  border: 3px solid #fff;
}

.cta-background-word {
  position: absolute;
  right: -1vw;
  bottom: -4vw;
  color: rgba(255,255,255,.035);
  font-size: clamp(100px,20vw,300px);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -.08em;
  pointer-events: none;
}

@media (max-width: 719px) {
  .service-card__number { font-size: 72px; }
  .stats__route-code { display: none; }
}