/* ====== PAGE: ЛЕЧЕНИЕ ЗУБОВ ====== */

/* === HERO === */
.svc-hero{
  position:relative;
  isolation:isolate;
  padding:120px 0 70px;
  background:linear-gradient(180deg,#fff 0%,#E6F1F8 100%);
  overflow:hidden;
}
.svc-hero__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.svc-hero__blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.svc-hero__blob--1{ width:500px; height:500px; top:-180px; right:-120px; background:radial-gradient(circle,rgba(56,168,181,.4) 0%,transparent 70%); animation:bg-drift 18s ease-in-out infinite; }
.svc-hero__blob--2{ width:540px; height:540px; bottom:-220px; left:-140px; background:radial-gradient(circle,rgba(5,132,148,.32) 0%,transparent 70%); animation:bg-drift 22s ease-in-out -8s infinite reverse; }
@keyframes bg-drift{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(40px,-30px,0) scale(1.08); } }

.svc-hero__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.svc-hero__title{
  margin:18px 0 24px;
  font-size:clamp(36px, 4.6vw, 64px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--ink);
}
.svc-hero__sub{
  margin:0 0 32px;
  font-size:18px;
  line-height:1.55;
  color:var(--ink-70);
  max-width:520px;
}
.svc-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-bottom:40px; }
.svc-hero__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  color:var(--green-dark);
  transition:color .2s ease, transform .2s ease;
}
.svc-hero__link:hover{ color:var(--green); transform:translateX(3px); }
.svc-hero__link svg{ animation:bounce-y 2s ease-in-out infinite; }
@keyframes bounce-y{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

.svc-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.svc-hero__stats > div{ display:flex; flex-direction:column; gap:4px; }
.svc-hero__stats b{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.svc-hero__stats span{ font-size:13px; color:var(--ink-50); font-weight:500; line-height:1.4; }

/* === TOOTH ART === */
.svc-hero__art{
  position:relative;
  display:grid;
  place-items:center;
  min-height:520px;
}
.tooth-stage{
  position:relative;
  width:100%;
  max-width:380px;
  aspect-ratio:1/1.2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.tooth-svg{
  width:100%;
  flex:1;
  filter:drop-shadow(0 30px 50px rgba(5,132,148,.18));
}
/* анимация зуба по стадиям */
.tooth-stage[data-stage="0"] #caries{ opacity:1; transform:scale(1); }
.tooth-stage[data-stage="0"] #cariesSpot,
.tooth-stage[data-stage="0"] #cariesSpot2{ opacity:1; }
.tooth-stage[data-stage="0"] #filling{ opacity:0; }

.tooth-stage[data-stage="1"] #caries{ opacity:0; transform:scale(.7); }
.tooth-stage[data-stage="1"] #cariesSpot,
.tooth-stage[data-stage="1"] #cariesSpot2{ opacity:0; }
.tooth-stage[data-stage="1"] #filling{ opacity:0; }

.tooth-stage[data-stage="2"] #caries,
.tooth-stage[data-stage="2"] #cariesSpot,
.tooth-stage[data-stage="2"] #cariesSpot2{ opacity:0; }
.tooth-stage[data-stage="2"] #filling{ opacity:.6; }

.tooth-stage[data-stage="3"] #caries,
.tooth-stage[data-stage="3"] #cariesSpot,
.tooth-stage[data-stage="3"] #cariesSpot2{ opacity:0; }
.tooth-stage[data-stage="3"] #filling{ opacity:1; filter:drop-shadow(0 0 12px rgba(255,255,255,.4)); }

#caries, #filling{ transition: opacity .55s ease, transform .55s ease, filter .55s ease; }
#caries{ transform-origin:192px 135px; }

.tooth-stages{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 20px -8px rgba(5,132,148,.18);
  flex-wrap:wrap;
  justify-content:center;
}
.tooth-stage-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-50);
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, transform .22s ease;
  user-select:none;
}
.tooth-stage-pill:hover{ background:var(--green-tint); color:var(--green-dark); }
.tooth-stage-pill.is-active{
  background:linear-gradient(180deg,var(--green-light),var(--green));
  color:#fff;
  transform:scale(1.04);
}
.tooth-stage-num{
  width:20px;
  height:20px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  font-size:11px; font-weight:800;
  color:#fff;
}
.tooth-stage-pill:not(.is-active) .tooth-stage-num{ background:var(--green-tint); color:var(--green-dark); }

.tooth-tag{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--white);
  border:1px solid var(--line);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-70);
  box-shadow:0 8px 20px -8px rgba(5,132,148,.25);
  pointer-events:none;
  white-space:nowrap;
  opacity:0;
  transform:translateY(8px) scale(.95);
  transition:opacity .4s ease, transform .4s ease;
}
.tooth-tag.is-active{ opacity:1; transform:none; }
.tooth-tag--1{ top:18%; left:-2%; }
.tooth-tag--2{ top:30%; right:-2%; }
.tooth-tag--3{ bottom:32%; left:-6%; }
.tooth-tag--4{ bottom:18%; right:-4%; }
.tooth-tag svg{ color:var(--green); flex:none; }

/* бегущая лента */
.svc-hero__ticker{
  margin-top:60px;
  padding:18px 0;
  background:rgba(5,132,148,.06);
  border-block:1px solid rgba(5,132,148,.18);
  overflow:hidden;
  white-space:nowrap;
}
.svc-hero__ticker-track{
  display:inline-flex;
  align-items:center;
  gap:24px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green-dark);
  animation:ticker 30s linear infinite;
}
.svc-hero__ticker-track span:nth-child(even){ color:rgba(5,132,148,.4); }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* === BENTO (когда обращаться) === */
.svc-when{ padding:120px 0 110px; background:var(--white); }
.svc-bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:auto;
  gap:20px;
  margin:48px 0 0;
  padding:0;
  list-style:none;
}
.svc-bento__card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 26px 26px;
  border-radius:22px;
  background:linear-gradient(180deg,var(--white) 0%,#F4F8FB 100%);
  border:1px solid var(--line);
  box-shadow:0 12px 30px -18px rgba(15,29,23,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  overflow:hidden;
}
.svc-bento__card::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.svc-bento__card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(5,132,148,.35); border-color:rgba(5,132,148,.32); }
.svc-bento__card:hover::after{ opacity:1; }

.svc-bento__icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:18px;
  border-radius:16px;
  background:var(--green-tint);
  color:var(--green);
  transition:transform .35s ease, background .35s ease, color .35s ease;
}
.svc-bento__icon--red{ background:rgba(255, 100, 100, .12); color:#D04545; }
.svc-bento__card:hover .svc-bento__icon{ transform:scale(1.08) rotate(-6deg); }
.svc-bento__card h3{ margin:0 0 10px; font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.svc-bento__card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-70); }
.svc-bento__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  padding:5px 11px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:rgba(255, 100, 100, .12);
  color:#D04545;
  align-self:flex-start;
}
.svc-bento__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-size:14px;
  font-weight:700;
  color:var(--green);
  align-self:flex-start;
  transition:gap .2s ease, color .2s ease;
}
.svc-bento__link:hover{ gap:10px; color:var(--green-dark); }

.svc-bento__card--big{ grid-row:span 2; background:linear-gradient(160deg,#fff 0%,#FCE4E4 100%); border-color:rgba(208,69,69,.18); }
.svc-bento__card--big::after{ background:linear-gradient(90deg,transparent,#D04545,transparent); }
.svc-bento__card--big:hover{ box-shadow:0 24px 50px -20px rgba(208,69,69,.3); border-color:rgba(208,69,69,.4); }
.svc-bento__card--big h3{ font-size:24px; }
.svc-bento__card--wide{ grid-column:span 2; background:linear-gradient(180deg,var(--white) 0%,#E6F1F8 100%); }

/* === HOW — sticky scroll storytelling === */
.svc-how{
  padding:120px 0 130px;
  background:linear-gradient(180deg,#F4F8FB 0%,#E6F1F8 100%);
  position:relative;
  overflow:hidden;
}
.svc-how::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 50% at 20% 0%,rgba(56,168,181,.18) 0%,transparent 60%);
  pointer-events:none;
}
.how-layout{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  margin-top:56px;
  align-items:start;
  position:relative;
}
.how-visual{
  position:relative;
  height:100%;
}
.how-visual__sticky{
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px 28px;
  border-radius:28px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -22px rgba(5,132,148,.35);
  text-align:center;
}
.how-counter{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  font-family:Manrope,system-ui;
}
.how-counter__num{
  font-size:88px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--green-light) 0%,var(--green-dark) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.how-counter__total{ font-size:22px; font-weight:700; color:var(--ink-50); }
.how-progress{
  height:6px;
  border-radius:999px;
  background:rgba(5,132,148,.14);
  overflow:hidden;
  position:relative;
}
.how-progress__bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg,var(--green-light),var(--green-dark));
  border-radius:999px;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.how-icon-stage{
  display:grid;
  place-items:center;
  width:80px; height:80px;
  margin:6px auto 0;
  border-radius:22px;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  box-shadow:0 16px 30px -10px rgba(5,132,148,.55);
  transition:transform .35s ease;
}
.how-icon-stage svg{ width:38px; height:38px; }
.how-icon-stage.is-pop{ animation:how-icon-pop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes how-icon-pop{
  0%{ transform:scale(1) rotate(0); }
  40%{ transform:scale(1.18) rotate(-8deg); }
  100%{ transform:scale(1) rotate(0); }
}
.how-visual__hint{
  margin:0;
  font-size:13px;
  color:var(--ink-50);
  font-weight:500;
}

.how-steps{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:how;
}
.how-step{
  position:relative;
  padding:32px 0 60px;
  opacity:.35;
  transform:translateY(20px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.how-step:last-child{ padding-bottom:0; }
.how-step.is-active,
.how-step.is-prev{ opacity:1; transform:none; }
.how-step.is-active::before{
  content:"";
  position:absolute;
  left:-30px;
  top:38px;
  bottom:30px;
  width:2px;
  background:linear-gradient(180deg,var(--green),transparent);
}
.how-step__num{
  display:inline-block;
  font-size:14px;
  font-weight:800;
  letter-spacing:.05em;
  color:var(--green);
  margin-bottom:6px;
}
.how-step h3{ margin:0 0 12px; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); }
.how-step p{ margin:0 0 18px; font-size:15.5px; line-height:1.65; color:var(--ink-70); max-width:540px; }
.how-step__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.how-step__chips li{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  font-size:13px;
  font-weight:600;
  color:var(--ink-70);
}

/* === METHODS === */
.svc-methods{ padding:120px 0 110px; background:var(--white); }
.svc-methods__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:48px 0 36px;
  padding:0;
  list-style:none;
}
.svc-method{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:30px 28px 28px;
  border-radius:24px;
  background:linear-gradient(180deg,var(--white) 0%,#F4F8FB 100%);
  border:1px solid var(--line);
  box-shadow:0 10px 36px -22px rgba(15,29,23,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.svc-method:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -22px rgba(5,132,148,.4); border-color:rgba(5,132,148,.32); }
.svc-method__num{
  position:absolute;
  top:18px;
  right:22px;
  font-size:48px;
  font-weight:800;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,rgba(5,132,148,.18) 0%,rgba(5,132,148,0) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
  pointer-events:none;
}
.svc-method h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--ink); padding-right:60px; }
.svc-method p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-70); }
.svc-method__price{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:14px;
  color:var(--ink-50);
  font-weight:500;
}
.svc-method__price b{ font-size:24px; font-weight:800; color:var(--green-dark); letter-spacing:-.02em; margin-left:4px; }
.svc-method__bullets{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:13.5px;
  color:var(--ink-70);
}
.svc-method__bullets li{
  position:relative;
  padding-left:18px;
  line-height:1.4;
}
.svc-method__bullets li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 2px rgba(5,132,148,.2);
}
.svc-method--lead{
  background:linear-gradient(160deg,#FFF3D9 0%,#FFE3A8 100%);
  border-color:rgba(240,160,75,.4);
}
.svc-method--lead:hover{ box-shadow:0 24px 50px -22px rgba(240,160,75,.4); border-color:rgba(240,160,75,.6); }
.svc-method--lead .svc-method__price b{ color:#8A5A00; }
.svc-method--lead .svc-method__bullets li::before{ background:#F0A04B; box-shadow:0 0 0 2px rgba(240,160,75,.2); }

.svc-methods__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 28px;
  border-radius:20px;
  background:var(--green-tint);
  border:1px solid rgba(5,132,148,.2);
}
.svc-methods__foot p{ margin:0; font-size:15px; color:var(--ink-70); flex:1; min-width:240px; }

/* === DOCTORS (урезанные карточки) === */
.svc-doctors{ padding:110px 0; background:linear-gradient(180deg,#F4F8FB 0%,#fff 100%); }
.svc-doctors__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin:48px 0 0;
  padding:0;
  list-style:none;
}
.svc-doctor{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:0;
  border-radius:24px;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 16px 40px -22px rgba(15,29,23,.3);
  transition:transform .35s ease, box-shadow .35s ease;
}
.svc-doctor:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -22px rgba(5,132,148,.35); }
.svc-doctor__photo{
  position:relative;
  aspect-ratio:4/5;
  background:linear-gradient(180deg,#0F1D17 0%,#1A2E25 100%);
}
.svc-doctor__photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 20%;
}
.svc-doctor__lead{
  position:absolute;
  top:14px; left:14px;
  padding:6px 11px;
  border-radius:999px;
  background:linear-gradient(135deg,#FFD27A,#F0A04B);
  color:#3A2400;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.04em;
}
.svc-doctor__body{ display:flex; flex-direction:column; gap:8px; padding:24px 26px 22px; }
.svc-doctor__body h3{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); }
.svc-doctor__spec{ font-size:14.5px; font-weight:600; color:var(--green); }
.svc-doctor__exp{ font-size:13px; font-weight:600; color:var(--ink-50); margin-bottom:4px; }
.svc-doctor__body p{ margin:0; font-size:14px; font-style:italic; line-height:1.55; color:var(--ink-70); padding:10px 12px; border-left:2.5px solid var(--green); background:var(--green-tint); border-radius:0 10px 10px 0; }
.svc-doctor__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.svc-doctor__tags span{ padding:4px 10px; border-radius:999px; background:rgba(15,29,23,.04); border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-70); }
.svc-doctor__btn{ margin-top:auto; align-self:flex-start; }

/* === FAQ === */
.svc-faq{ padding:120px 0; background:var(--white); }
.svc-faq__list{ display:flex; flex-direction:column; gap:12px; margin:48px 0 0; padding:0; list-style:none; }
.svc-faq__item{
  border-radius:18px;
  background:linear-gradient(180deg,var(--white) 0%,#F4F8FB 100%);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .25s ease, background-color .25s ease;
}
.svc-faq__item.is-open{ border-color:rgba(5,132,148,.32); background:var(--white); box-shadow:0 16px 30px -16px rgba(5,132,148,.25); }
.svc-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
  padding:20px 24px;
  background:transparent;
  border:0;
  font:inherit;
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  transition:color .2s ease;
}
.svc-faq__q:hover{ color:var(--green-dark); }
.svc-faq__plus{
  position:relative;
  flex:none;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--green-tint);
  transition:background-color .25s ease, transform .35s ease;
}
.svc-faq__plus::before,
.svc-faq__plus::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:12px; height:2px;
  background:var(--green-dark);
  transform:translate(-50%,-50%);
  border-radius:2px;
  transition:transform .35s ease, opacity .25s ease;
}
.svc-faq__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.svc-faq__item.is-open .svc-faq__plus{ background:var(--green); transform:rotate(180deg); }
.svc-faq__item.is-open .svc-faq__plus::before{ opacity:0; }
.svc-faq__item.is-open .svc-faq__plus::after{ transform:translate(-50%,-50%) rotate(0); background:#fff; }
.svc-faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.svc-faq__a > p{ overflow:hidden; }
.svc-faq__a p{
  margin:0;
  padding:0 24px 22px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-70);
}
.svc-faq__item.is-open .svc-faq__a{ grid-template-rows:1fr; }

/* === CTA === */
.svc-cta{
  position:relative;
  isolation:isolate;
  padding:120px 0;
  background:linear-gradient(135deg,#058494 0%,#03616d 100%);
  color:#fff;
  overflow:hidden;
}
.svc-cta__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(50% 60% at 100% 0%,rgba(56,168,181,.4) 0%,transparent 60%),
    radial-gradient(50% 60% at 0% 100%,rgba(255,210,122,.18) 0%,transparent 60%);
}
.svc-cta__inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.svc-cta__inner .eyebrow{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.2);
  color:#fff;
}
.svc-cta__inner .eyebrow__dot{ background:#fff; }
.svc-cta__title{
  margin:18px 0 18px;
  font-size:clamp(30px, 3.4vw, 44px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.025em;
  color:#fff;
}
.svc-cta__sub{ margin:0 0 32px; font-size:16px; line-height:1.6; color:rgba(255,255,255,.85); }
.svc-cta__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-bottom:32px; }
.svc-cta__phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  font-size:16px;
  font-weight:700;
  color:#fff;
  transition:background-color .2s ease, transform .2s ease;
}
.svc-cta__phone:hover{ background:rgba(255,255,255,.24); transform:translateY(-1px); }
.svc-cta__trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.svc-cta__trust > div{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.9); }
.svc-cta__trust svg{ color:#FFD27A; }

/* === HEADER dropdown активный пункт === */
.nav__dd-link--active{ background:var(--green-tint); color:var(--green-dark); }
.nav__dd-link--active .nav__dd-label{ color:var(--green-dark); font-weight:700; }

/* === RESPONSIVE === */
@media (max-width:1100px){
  .svc-hero__inner{ grid-template-columns:1fr; gap:36px; }
  .svc-hero__art{ min-height:420px; }
  .svc-bento{ grid-template-columns:repeat(2,1fr); }
  .svc-bento__card--big{ grid-row:auto; }
  .svc-bento__card--wide{ grid-column:span 2; }
  .how-layout{ grid-template-columns:1fr; gap:24px; }
  .how-visual__sticky{ position:relative; top:0; }
  .how-step.is-active::before{ display:none; }
  .svc-methods__grid{ grid-template-columns:repeat(2,1fr); }
  .svc-doctors__grid{ grid-template-columns:1fr; }
  .svc-doctor{ grid-template-columns:240px 1fr; }
}
@media (max-width:640px){
  .svc-hero{ padding:80px 0 50px; }
  .svc-hero__stats{ grid-template-columns:1fr 1fr; gap:14px 18px; }
  .svc-bento{ grid-template-columns:1fr; }
  .svc-bento__card--wide{ grid-column:auto; }
  .svc-methods__grid{ grid-template-columns:1fr; }
  .svc-doctors__grid{ grid-template-columns:1fr; }
  .svc-doctor{ grid-template-columns:1fr; }
  .svc-doctor__photo{ aspect-ratio:16/10; }
  .tooth-stage{ max-width:280px; }
  .tooth-stage-pill{ padding:7px 10px; font-size:12px; }
  .how-counter__num{ font-size:64px; }
  .svc-cta{ padding:80px 0; }
  .svc-faq__q{ font-size:15.5px; padding:16px 18px; }
  .svc-faq__a p{ font-size:14.5px; padding:0 18px 18px; }
}

/* =================================================================
   ВЫРАВНИВАНИЕ СТРАНИЦЫ: единый ритм секций, ровные сетки
   ================================================================= */
/* одинаковые вертикальные отступы у всех секций */
.svc-when,
.svc-how,
.svc-methods,
.svc-doctors,
.svc-faq,
.svc-cta{ padding:110px 0; }

/* «Когда пора»: широкая карточка — на всю ширину, без пустой ячейки справа */
.svc-bento__card--wide{ grid-column:1 / -1; }

/* врачи: фото уже, текст шире; фото на всю высоту карточки */
.svc-doctor{ grid-template-columns:240px 1fr; }
.svc-doctor__photo{ aspect-ratio:auto; min-height:100%; }
.svc-doctor__photo img{ position:absolute; inset:0; }
.svc-doctor__body{ padding:26px 28px 24px; }

/* вопросы: закрытый ответ скрыт полностью (нижний отступ не «подглядывает») */
.svc-faq__a > p{ min-height:0; padding-bottom:0; transition:padding-bottom .35s ease; }
.svc-faq__item.is-open .svc-faq__a > p{ padding-bottom:22px; }

/* ноутбуки 961–1100: две колонки сохраняем; в одну колонку — только с 960px, как на главной */
@media (max-width:1100px) and (min-width:961px){
  .svc-hero__inner{ grid-template-columns:1.1fr .9fr; gap:32px; }
  .svc-hero__art{ min-height:460px; }
  .how-layout{ grid-template-columns:1fr 1.3fr; gap:40px; }
  .how-visual__sticky{ position:sticky; top:120px; }
  .how-step.is-active::before{ display:block; }
}
/* две колонки карточек: «срочная» карточка — во всю ширину, чтобы не оставалось одиночки */
@media (max-width:1100px){
  .svc-bento__card--big{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .svc-when, .svc-how, .svc-methods, .svc-doctors, .svc-faq{ padding:70px 0; }
  .svc-cta{ padding:80px 0; }
  .svc-bento__card--big,
  .svc-bento__card--wide{ grid-column:auto; }
  .svc-doctor{ grid-template-columns:1fr; }
  .svc-doctor__photo{ aspect-ratio:16/10; min-height:0; }
  .svc-faq__item.is-open .svc-faq__a > p{ padding-bottom:18px; }
}

/* =================================================================
   ПЕРВЫЙ БЛОК: фон-картинка, текст в одну колонку (850px), ниже
   ================================================================= */
.svc-hero{
  padding:230px 0 70px;
  min-height:780px;
  background:#6FA6D6 url("../img/svc-hero-bg.jpg") right center / cover no-repeat;
}
.svc-hero__bg{ display:none; }                 /* цветные пятна больше не нужны */
.svc-hero__inner{ display:block; }             /* без правой колонки с зубом */
.svc-hero__text{ max-width:850px; }
.svc-hero__title{ color:var(--ink); }
.svc-hero__sub{ max-width:620px; color:#17323A; }
.svc-hero__cta{ margin-bottom:0; }
.svc-hero__link{ color:var(--ink); }
.svc-hero__link:hover{ color:var(--green-dark); }

/* бегущая строка: без рывка — отступ несёт каждый пункт, половина ленты = одна копия */
.svc-hero__ticker{
  margin-top:90px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-block:1px solid rgba(255,255,255,.9);
}
.svc-hero__ticker-track{
  gap:0;
  animation:ticker 70s linear infinite;
}
.svc-hero__ticker-track > span{ padding-right:24px; }
.svc-hero__ticker-track > span:nth-child(even){ color:rgba(5,132,148,.45); }
@media (prefers-reduced-motion:reduce){
  .svc-hero__ticker-track{ animation:none; }
}

@media (max-width:960px){
  .svc-hero{ padding:170px 0 60px; min-height:0; background-position:78% center; }
  .svc-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.4) 70%,rgba(255,255,255,.15) 100%);
    pointer-events:none;
  }
  .svc-hero__ticker{ margin-top:60px; }
}

/* узкие ноутбуки: подзаголовок заканчивается до зуба на фоне */
@media (min-width:961px) and (max-width:1200px){
  .svc-hero__sub{ max-width:470px; }
}

/* первый блок: заголовок и подзаголовок белым; бегущая строка ниже на 50px */
.svc-hero__title,
.svc-hero__sub{
  color:#fff;
  text-shadow:0 2px 18px rgba(12,48,86,.38), 0 1px 2px rgba(12,48,86,.25);
}
.svc-hero__ticker{ margin-top:140px; }
@media (max-width:960px){
  .svc-hero::before{
    background:linear-gradient(180deg,rgba(22,70,120,.38) 0%,rgba(22,70,120,.2) 70%,rgba(22,70,120,.05) 100%);
  }
  .svc-hero__ticker{ margin-top:110px; }
}

/* первый блок (компьютер): фон левее на 150px — открывшаяся справа полоса залита
   цветом края снимка и растушёвана; бегущая строка ещё на 50px ниже */
@media (min-width:961px){
  .svc-hero{
    background:
      url("../img/svc-hero-bg.jpg") right 150px center / cover no-repeat,
      linear-gradient(180deg,rgb(56,110,165) 0%,rgb(66,126,182) 10%,rgb(75,136,191) 20%,rgb(82,144,198) 30%,rgb(82,144,198) 40%,rgb(76,139,193) 50%,rgb(89,150,195) 60%,rgb(104,164,206) 70%,rgb(106,166,206) 80%,rgb(109,169,206) 90%,rgb(105,166,203) 100%);
  }
  .svc-hero::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    z-index:-1;
    width:230px;
    background:linear-gradient(180deg,rgb(56,110,165) 0%,rgb(66,126,182) 10%,rgb(75,136,191) 20%,rgb(82,144,198) 30%,rgb(82,144,198) 40%,rgb(76,139,193) 50%,rgb(89,150,195) 60%,rgb(104,164,206) 70%,rgb(106,166,206) 80%,rgb(109,169,206) 90%,rgb(105,166,203) 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 80px);
            mask-image:linear-gradient(90deg,transparent 0,#000 80px);
    pointer-events:none;
  }
}
.svc-hero__ticker{ margin-top:190px; }
@media (max-width:960px){
  .svc-hero__ticker{ margin-top:160px; }
}

/* =================================================================
   «ПРОЦЕСС»: заголовок в две строки, липкая карточка, шаги по прокрутке
   ================================================================= */
.svc-how{ overflow:visible; }                 /* overflow:hidden ломал position:sticky */
.how-layout{ align-items:stretch; }           /* левая колонка на всю высоту — карточке есть где «прилипать» */
.how-step{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.how-step.is-shown{ opacity:1; transform:none; }
.how-progress__bar{ transition:width .12s linear; }
@media (min-width:961px){
  .svc-how .section-head{ max-width:none; }
  .svc-how .section-subtitle{ max-width:660px; }
  .svc-how .section-title .accent{ white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){
  .how-step{ opacity:1; transform:none; transition:none; }
}

/* «Кто будет лечить»: кнопки одинаковые, как «Записаться» на главной (не растягиваются) */
.svc-doctor__btn{ flex:0 0 auto; }

/* «Запись»: кнопка и телефон на одном уровне, одной высоты */
.svc-cta__actions{ align-items:center; margin-bottom:0; }
.svc-cta__actions .btn{ margin-top:0; }
.svc-cta__phone{ min-height:68px; padding:0 30px; }

/* «Кто будет лечить»: кнопки «Записаться» длиннее на 20% (126 → 151px) */
.svc-doctor__btn{ min-width:151px; justify-content:center; text-align:center; }

/* «Процесс»: карточка не «липнет» к экрану, а съезжает к текущему шагу (двигает js/service.js) */
@media (min-width:961px){
  .how-visual__sticky{
    position:relative;
    top:0;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }
}
@media (prefers-reduced-motion:reduce){
  .how-visual__sticky{ transition:none; }
}

/* «Процесс»: место под последним шагом — карточка встаёт ровно напротив шага 06 */
@media (min-width:961px){
  .how-step:last-child{ padding-bottom:130px; }
}

/* первый блок: кнопка «Записаться на приём» — белая, текст и стрелка фирменным цветом */
.svc-hero__cta .btn--primary{
  background:#fff;
  color:var(--green);
  box-shadow:0 14px 32px -14px rgba(12,48,86,.45);
}
.svc-hero__cta .btn--primary:hover{
  color:var(--green-dark);
  box-shadow:0 20px 40px -14px rgba(12,48,86,.55);
}

/* первый блок (компьютер): фон ещё на 100px левее (итого 250px), полоса справа шире;
   бегущая строка ещё на 50px ниже */
@media (min-width:961px){
  .svc-hero{
    background:
      url("../img/svc-hero-bg.jpg") right 250px center / cover no-repeat,
      linear-gradient(180deg,rgb(56,110,165) 0%,rgb(66,126,182) 10%,rgb(75,136,191) 20%,rgb(82,144,198) 30%,rgb(82,144,198) 40%,rgb(76,139,193) 50%,rgb(89,150,195) 60%,rgb(104,164,206) 70%,rgb(106,166,206) 80%,rgb(109,169,206) 90%,rgb(105,166,203) 100%);
  }
  .svc-hero::before{ width:330px; }
}
.svc-hero__ticker{ margin-top:240px; }
@media (max-width:960px){
  .svc-hero__ticker{ margin-top:210px; }
}

/* =================================================================
   «ЗАПИСЬ»: текст слева, врач справа — низ по краю блока, голова выходит за блок
   ================================================================= */
.svc-cta{ overflow:visible; }                 /* иначе голову обрежет */
.svc-cta .container{ position:relative; }
.svc-cta__inner{ max-width:600px; margin:0; text-align:left; }
.svc-cta__actions{ justify-content:flex-start; }
.svc-cta__photo{
  position:absolute;
  right:40px;
  bottom:-110px;                              /* = нижний отступ секции → фото стоит на её крае */
  height:640px;
  pointer-events:none;
}
.svc-cta__photo img{
  display:block;
  width:auto;
  height:100%;
  filter:drop-shadow(0 24px 40px rgba(3,40,48,.35));
}
@media (min-width:961px) and (max-width:1180px){
  .svc-cta__inner{ max-width:520px; }
  .svc-cta__photo{ right:16px; height:520px; }
}
/* телефон и планшет: врач по центру под кнопками, стоит на нижнем крае блока */
@media (max-width:960px){
  .svc-cta{ padding-bottom:0; }
  .svc-cta__actions{ flex-direction:column; align-items:stretch; }
  .svc-cta__actions .btn,
  .svc-cta__phone{ width:100%; justify-content:center; }
  .svc-cta__photo{
    position:relative;
    right:auto;
    bottom:auto;
    display:block;
    width:min(340px,80%);
    height:auto;
    margin:36px auto 0;
  }
  .svc-cta__photo img{ width:100%; height:auto; }
}

/* «Запись»: фото крупнее — голова заметно выходит за верх блока (~100px) */
@media (min-width:1181px){
  .svc-cta__photo{ height:720px; }
}
@media (min-width:961px) and (max-width:1180px){
  .svc-cta__inner{ max-width:500px; }
  .svc-cta__photo{ height:640px; }
}

/* «Запись»: заголовок ровно в две строки на компьютере */
@media (min-width:961px){
  .svc-cta__inner{ max-width:none; }
  .svc-cta__title{ font-size:clamp(28px,2.65vw,38px); white-space:nowrap; }
  .svc-cta__sub{ max-width:520px; }
}

/* «Запись»: стеклянная плашка с именем врача на фото */
.svc-cta__tag{
  position:absolute;
  left:-56px;
  bottom:96px;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  row-gap:3px;
  align-items:center;
  padding:14px 20px 15px 16px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.28));
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 22px 44px -22px rgba(3,40,48,.55), inset 0 1px 0 rgba(255,255,255,.7);
  text-align:left;
  white-space:nowrap;
}
.svc-cta__tag-dot{
  grid-row:1;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(5,132,148,.2);
}
.svc-cta__tag-name{
  grid-row:1;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--ink);
}
.svc-cta__tag-role{
  grid-column:2;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--green-dark);
}
@media (max-width:960px){
  .svc-cta__tag{ left:50%; bottom:28px; transform:translateX(-50%); padding:12px 16px 13px 14px; }
  .svc-cta__tag-name{ font-size:15px; }
  .svc-cta__tag-role{ font-size:12.5px; }
}

/* «Запись» (компьютер): блок 700px, фото стоит на нижнем крае блока,
   голова выходит вверх лишь чуть-чуть (~40px) */
@media (min-width:961px){
  .svc-cta{
    min-height:700px;
    display:flex;
    align-items:center;
  }
  .svc-cta .container{ position:static; }
  .svc-cta__photo{
    bottom:0;
    right:calc((100% - min(100%, 1280px)) / 2 + 40px);
    height:740px;
  }
}
@media (min-width:961px) and (max-width:1180px){
  .svc-cta__inner{ max-width:470px; }
  .svc-cta__photo{ right:16px; height:740px; }
}