/* ==========================================================================
   Implant City — стоматология и имплантация в Уральске

   Палитра снята пипеткой с логотипа: диск фирменного знака даёт #183046.
   Из него развёрнута тёмно-синяя шкала; акцент — холодный стальной голубой,
   он же «городской». Одним тоном акцента не обойтись по контрасту:
   --accent      #4FA3D1  только на тёмном  — 6,4:1 на --ink-900
   --accent-deep #0E5C86  только на светлом — 7,3:1 на белом

   Имена токенов намеренно нейтральные (--ink-*, --accent-*), а не --navy/--steel:
   палитру уже дважды меняли, и имя, привязанное к конкретному цвету, врёт
   после первой же смены.

   Геометрия намеренно жёсткая (радиусы 4/8/12px), шрифт заголовков
   геометрический — так силуэт города из знака читается в самой вёрстке.
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root{
  /* Тёмно-синяя шкала: --ink-700 снят с логотипа, остальное выведено из него */
  --ink-900:  #0A1724;
  --ink-850:  #0E1F30;
  --ink-800:  #12273B;
  --ink-700:  #183046;   /* фирменный: средний цвет диска логотипа */
  --ink-600:  #1F3E59;
  --ink-line: rgba(255,255,255,.11);
  --ink-deep: #0A1724;    /* самый тёмный — активная «таблетка» в полосе разделов */

  /* Акцент */
  --accent:      #4FA3D1;  /* только на тёмном  — 6.4:1 на --ink-900 */
  --accent-lite: #8CC8E8;
  --accent-deep: #0E5C86;  /* только на светлом — 7.3:1 на белом      */
  --accent-soft: rgba(79,163,209,.14);
  --accent-tint: #E7F1F8;

  /* Светлые поверхности — холодные, а не кремовые */
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F1F5F9;
  --tint:      #F4F8FB;
  --text:      #0A1724;
  --muted:     #445A6E;   /* 7.2:1 на белом       */
  --muted-dark:#B7CBDB;   /* 10.7:1 на --ink-900 */
  --border:    #DCE5EC;
  --nav-strip: rgba(255,255,255,.97);  /* подложка липкой полосы разделов */

  /* WhatsApp: официальный #25D366 даёт под белым текстом всего 2:1,
     поэтому кнопка использует затемнённый вариант — 5.2:1 */
  --wa:       #0F7D43;
  --wa-hover: #128F4C;

  /* Типографика */
  --font-display: "Montserrat", "Segoe UI", system-ui, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Шкала отступов, кратная 4 */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --radius-xs:   4px;
  --radius:      8px;
  --radius-lg:  12px;
  --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(12,27,42,.06), 0 2px 8px rgba(12,27,42,.05);
  --shadow-md: 0 4px 12px rgba(12,27,42,.07), 0 14px 34px rgba(12,27,42,.08);
  --shadow-lg: 0 18px 48px rgba(10,23,36,.16);

  /* Слои */
  --z-nav:100; --z-bar:90; --z-menu:200;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;

  /* Высота мобильной панели действий — проставляется из JS */
  --bar-h:0px;
}

/* ---------- 2. Сброс и база ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.14;
  margin:0;
  letter-spacing:-.02em;
}
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }

:focus-visible{
  outline:3px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.section--dark :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible,
.action-bar :focus-visible{ outline-color:var(--accent-lite); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s-4); top:-100px;
  z-index:calc(var(--z-menu) + 1);
  padding:var(--s-3) var(--s-5);
  background:var(--accent-deep); color:#fff; font-weight:600;
  border-radius:var(--radius);
}
.skip-link:focus{ top:var(--s-4); }

/* ---------- 3. Раскладка ---------- */
.wrap{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; }

.section{ padding-block:var(--s-8); position:relative; }
.section--tint{ background:var(--tint); }
.section--dark{ background:var(--ink-900); color:#EAF2F8; }
.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }
.section--dark .section-lead{ color:var(--muted-dark); }

.section-head{ max-width:62ch; margin-bottom:var(--s-6); }
.section-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  font-family:var(--font-display);
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:var(--s-2);
  display:flex; align-items:center; gap:var(--s-2);
}
.section-head--center .eyebrow{ justify-content:center; }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; flex:none; }
.section--dark .eyebrow{ color:var(--accent); }

.section-title{ font-size:clamp(1.6rem,4.6vw,2.5rem); }
.section-lead{ margin-top:var(--s-3); color:var(--muted); font-size:1.02rem; }

/* Силуэт города — фирменный мотив, снятый со знака в логотипе.
   Рисуется псевдоэлементом, поэтому не добавляет в DOM ни одного узла. */
.skyline{ position:relative; overflow:hidden; }
.skyline::after{
  content:""; position:absolute; inset:auto 0 0 0; height:120px;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg fill='%234FA3D1' fill-opacity='0.15'%3E%3Crect x='0' y='72' width='46' height='48'/%3E%3Crect x='52' y='44' width='30' height='76'/%3E%3Crect x='88' y='86' width='58' height='34'/%3E%3Crect x='152' y='30' width='24' height='90'/%3E%3Crect x='161' y='8' width='6' height='24'/%3E%3Crect x='182' y='66' width='52' height='54'/%3E%3Crect x='240' y='52' width='34' height='68'/%3E%3Crect x='280' y='90' width='70' height='30'/%3E%3Crect x='356' y='40' width='28' height='80'/%3E%3Crect x='390' y='74' width='44' height='46'/%3E%3Crect x='440' y='58' width='26' height='62'/%3E%3Crect x='472' y='88' width='62' height='32'/%3E%3Crect x='540' y='36' width='32' height='84'/%3E%3Crect x='552' y='14' width='7' height='24'/%3E%3Crect x='578' y='70' width='48' height='50'/%3E%3Crect x='632' y='84' width='38' height='36'/%3E%3Crect x='676' y='48' width='30' height='72'/%3E%3Crect x='712' y='78' width='56' height='42'/%3E%3Crect x='774' y='60' width='24' height='60'/%3E%3Crect x='804' y='92' width='66' height='28'/%3E%3Crect x='876' y='34' width='26' height='86'/%3E%3Crect x='883' y='12' width='6' height='24'/%3E%3Crect x='908' y='72' width='50' height='48'/%3E%3Crect x='964' y='56' width='32' height='64'/%3E%3Crect x='1002' y='88' width='58' height='32'/%3E%3Crect x='1066' y='46' width='28' height='74'/%3E%3Crect x='1100' y='76' width='46' height='44'/%3E%3Crect x='1152' y='64' width='48' height='56'/%3E%3C/g%3E%3C/svg%3E")
    bottom center / 1200px 120px repeat-x;
  /* растворяем силуэт кверху, чтобы он читался фоном, а не полосой */
  -webkit-mask-image:linear-gradient(to top, #000 38%, transparent 100%);
          mask-image:linear-gradient(to top, #000 38%, transparent 100%);
}

/* ---------- 4. Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  min-height:48px;
  padding:var(--s-3) var(--s-5);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-weight:700; font-size:.95rem;
  text-align:center; cursor:pointer;
  border:1.5px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
  touch-action:manipulation;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:active{ transform:translateY(1px); }
.btn--block{ width:100%; }

/* Основная: стальной голубой с тёмно-синим текстом — 6.4:1 */
.btn--primary{ background:var(--accent); color:#08131F; box-shadow:0 6px 20px rgba(79,163,209,.28); }
.btn--primary:hover{ background:var(--accent-lite); box-shadow:0 8px 26px rgba(79,163,209,.36); }

.btn--wa{ background:var(--wa); color:#fff; }
.btn--wa:hover{ background:var(--wa-hover); }

.btn--ghost{ border-color:var(--border); color:var(--text); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }

.btn--ghost-dark{ border-color:rgba(255,255,255,.3); color:#fff; }
.btn--ghost-dark:hover{ border-color:var(--accent); color:var(--accent-lite); background:rgba(79,163,209,.1); }

/* ---------- 5. Шапка ---------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(10,23,36,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ink-line);
  color:#fff;
}
.header-inner{ display:flex; align-items:center; gap:var(--s-4); min-height:64px; }
.brand{ display:flex; align-items:center; gap:var(--s-3); margin-right:auto; }
.brand img{ width:32px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family:var(--font-display); font-weight:800;
  font-size:1rem; letter-spacing:.05em; text-transform:uppercase;
}
.brand-sub{ font-size:.66rem; color:var(--muted-dark); letter-spacing:.12em; text-transform:uppercase; }

.site-nav{ display:none; gap:var(--s-5); }
.site-nav a{
  font-size:.92rem; font-weight:500; color:#DCE8F1;
  padding-block:var(--s-2); position:relative;
  transition:color var(--dur) var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.site-nav a:hover{ color:#fff; }
.site-nav a:hover::after{ transform:scaleX(1); }

.header-cta{ display:none; min-height:42px; padding-inline:var(--s-4); font-size:.88rem; }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-right:-8px;
  border-radius:var(--radius); color:#fff;
}
.nav-toggle svg{ width:26px; height:26px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ---------- 6. Мобильное меню ----------
   Живёт вне <header> намеренно: у шапки есть backdrop-filter, а он создаёт
   containing block для position:fixed потомков — вложенное меню схлопнулось
   бы до высоты шапки. */
.mobile-menu{
  position:fixed; inset:64px 0 0 0; z-index:var(--z-menu);
  background:var(--ink-900);
  padding:var(--s-5) 20px calc(var(--s-7) + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             visibility 0s linear var(--dur);
  color:#fff;
}
.mobile-menu[data-open="true"]{
  opacity:1; visibility:visible; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
html.menu-open{ overflow:hidden; }

.m-link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  min-height:56px; padding:var(--s-3) 0;
  border-bottom:1px solid var(--ink-line);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
}
.m-link svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.m-actions{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }
.m-meta{
  display:grid; gap:var(--s-1);
  margin-top:var(--s-6); padding-top:var(--s-5);
  border-top:1px solid var(--ink-line);
  font-size:.9rem; color:var(--muted-dark);
}
.m-meta strong{ color:#fff; }

/* ---------- 6b. Полоса разделов ----------
   Липкая лента под шапкой: на телефоне и планшете это основная навигация,
   потому что список разделов в шапке там спрятан под бургер. От 1024px
   полоса скрыта — те же ссылки уже стоят в шапке, дублировать незачем. */
.quicknav{
  position:sticky; top:64px;
  z-index:calc(var(--z-nav) - 1);
  background:var(--nav-strip);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.quicknav .wrap{ padding-inline:0; }
.quicknav-scroll{
  display:flex; gap:var(--s-2);
  padding:8px 20px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  /* правый край растворяем: обрезанная посередине «таблетка» читается как
     сломанная вёрстка, а растворяющаяся — как «здесь ещё есть, листай» */
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);
          mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.quicknav-scroll::-webkit-scrollbar{ display:none; }
.qn-link{
  flex:none; scroll-snap-align:center;
  display:inline-flex; align-items:center;
  min-height:44px; padding-inline:var(--s-4);
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface);
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  color:var(--muted); white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.qn-link:hover{ border-color:var(--accent-deep); color:var(--accent-deep); }
.qn-link[aria-current="true"]{
  background:var(--ink-deep); border-color:var(--ink-deep); color:#fff;
}

/* Текущий раздел подсвечивается и в шапке на десктопе */
.site-nav a[aria-current="true"]{ color:#fff; }
.site-nav a[aria-current="true"]::after{ transform:scaleX(1); }

/* Якорь не должен уезжать под шапку и под полосу разделов */
.hero[id], section[id]{ scroll-margin-top:126px; }

/* ---------- 7. Первый экран ---------- */
.hero{
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(79,163,209,.20), transparent 62%),
    linear-gradient(168deg, var(--ink-850) 0%, var(--ink-900) 62%, #081320 100%);
  color:#fff;
  padding-block:var(--s-8) calc(var(--s-9) + 20px);
  position:relative; overflow:hidden;
}
.hero-inner{ display:grid; gap:var(--s-7); position:relative; z-index:1; }

.hero-badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:7px 14px 7px 10px;
  border:1px solid rgba(79,163,209,.4);
  background:var(--accent-soft);
  border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:600; color:var(--accent-lite);
  margin-bottom:var(--s-5);
}
.hero-badge svg{ width:16px; height:16px; flex:none; }

.hero h1{
  font-size:clamp(2rem,7.4vw,3.7rem);
  letter-spacing:-.03em;
  text-wrap:balance;
}
.hero h1 .accent{ color:var(--accent); }
.hero-lead{
  margin-top:var(--s-5);
  max-width:56ch;
  color:#C6D9E7; font-size:1.05rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }
.hero-actions .btn{ flex:1 1 240px; }

.hero-note{
  display:flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); font-size:.85rem; color:var(--muted-dark);
}
.hero-note svg{ width:16px; height:16px; color:var(--accent); flex:none; }

.hero-stats{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:1px; background:var(--ink-line);
  border:1px solid var(--ink-line); border-radius:var(--radius-lg);
  overflow:hidden;
}
.hero-stats > div{ background:rgba(10,23,36,.72); padding:var(--s-5) var(--s-4); }
.hero-stats dt{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.35rem,4.8vw,2rem); color:var(--accent);
  letter-spacing:-.02em; line-height:1.1;
}
.hero-stats dd{ margin-top:var(--s-1); font-size:.84rem; color:var(--muted-dark); line-height:1.45; }

/* ---------- 8. Преимущества ---------- */
.why-grid{ display:grid; gap:var(--s-4); }
.why-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--s-5);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.why-card:hover{ border-color:var(--accent-deep); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.why-ico{
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--radius); background:var(--accent-tint); color:var(--accent-deep);
  margin-bottom:var(--s-4);
}
.why-ico svg{ width:24px; height:24px; }
.why-card h3{ font-size:1.05rem; }
.why-card p{ margin-top:var(--s-2); color:var(--muted); font-size:.95rem; }

/* ---------- 9. Услуги ---------- */
.svc-grid{ display:grid; gap:var(--s-4); }
.svc{
  display:flex; gap:var(--s-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent-deep);
  border-radius:var(--radius);
  padding:var(--s-5);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.svc-ico{ color:var(--accent-deep); flex:none; }
.svc-ico svg{ width:26px; height:26px; }
.svc h3{ font-size:1.02rem; }
.svc p{ margin-top:var(--s-2); color:var(--muted); font-size:.93rem; }
.svc-price{
  display:inline-block; margin-top:var(--s-3);
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--accent-deep);
}

/* ---------- 10. Имплантация ---------- */
.offer-grid{ display:grid; gap:var(--s-4); margin-top:var(--s-6); }
.offer{
  position:relative;
  background:linear-gradient(160deg, var(--ink-800), var(--ink-850));
  border:1px solid var(--ink-line);
  border-radius:var(--radius-lg);
  padding:var(--s-6) var(--s-5);
  display:flex; flex-direction:column;
}
.offer--lead{ border-color:rgba(79,163,209,.42); background:linear-gradient(160deg,#16324B,var(--ink-850)); }
.offer-flag{
  position:absolute; top:0; right:var(--s-5); transform:translateY(-50%);
  padding:5px 12px; border-radius:var(--radius-pill);
  background:var(--accent); color:#08131F;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.offer h3{ font-size:1.18rem; }
.offer-sub{ margin-top:var(--s-2); font-size:.9rem; color:var(--muted-dark); }
.offer-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }
.offer-now{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.55rem,5.6vw,2rem); color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.offer-was{ color:#8FA8BD; text-decoration:line-through; font-size:1rem; font-variant-numeric:tabular-nums; }
.offer ul{ margin-top:var(--s-5); display:grid; gap:var(--s-2); }
.offer li{ display:flex; gap:var(--s-2); font-size:.92rem; color:#D3E2EE; }
.offer li svg{ width:18px; height:18px; color:var(--accent); flex:none; margin-top:3px; }
/* margin-top:auto прибивает кнопку к низу карточки: списки преимуществ
   разной длины, и без этого кнопки в ряду стоят на разной высоте */
.offer .btn{ margin-top:auto; padding-top:var(--s-3); padding-bottom:var(--s-3); }
.offer ul{ margin-bottom:var(--s-6); }

.allon-facts{
  display:grid; gap:var(--s-4); margin-top:var(--s-7);
  padding-top:var(--s-6); border-top:1px solid var(--ink-line);
}
.fact h4{ font-size:.98rem; color:var(--accent-lite); }
.fact p{ margin-top:var(--s-2); font-size:.92rem; color:var(--muted-dark); }

/* ---------- 11. Результаты работ (шторка «до/после») ---------- */
.case-grid{ display:grid; gap:var(--s-5); }
.case{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.case-media{
  position:relative; aspect-ratio:4/3; background:var(--surface-2);
  isolation:isolate;
}
.case-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* «после» лежит снизу и видно сразу; «до» открывается шторкой слева направо.
   Едет transform, а не clip-path: transform Chromium анимирует на композиторе,
   а clip-path — перерисовкой в основном потоке, то есть каждый кадр заново
   растрирует фотографию (а карточек три). Обёртка уезжает влево, картинка
   внутри компенсирует сдвиг встречным transform — поэтому шторка открывается,
   а само фото стоит на месте. */
.case-curtain{
  position:absolute; inset:0; z-index:1;
  overflow:hidden;
  transform:translate3d(-100%,0,0);
  transition:transform 400ms var(--ease);
}
.case-curtain img{
  transform:translate3d(100%,0,0);
  transition:transform 400ms var(--ease);
}
.case[data-reveal="true"] .case-curtain,
.case[data-reveal="true"] .case-curtain img{ transform:translate3d(0,0,0); }
.case-tag{
  position:absolute; z-index:2; left:var(--s-3); top:var(--s-3);
  padding:5px 11px; border-radius:var(--radius-xs);
  background:rgba(10,23,36,.82); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.case-body{ padding:var(--s-5); }
.case-body h3{ font-size:1.02rem; }
.case-body p{ margin-top:var(--s-2); color:var(--muted); font-size:.92rem; }
.case-toggle{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; margin-top:var(--s-4);
  padding:var(--s-2) var(--s-4);
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-family:var(--font-display); font-weight:700; font-size:.88rem;
  color:var(--accent-deep);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.case-toggle:hover{ border-color:var(--accent-deep); background:var(--accent-tint); }
.case-toggle svg{ width:18px; height:18px; flex:none; transition:transform var(--dur) var(--ease); }
.case[data-reveal="true"] .case-toggle svg{ transform:rotate(180deg); }
.case-note{
  margin-top:var(--s-5); font-size:.85rem; color:var(--muted);
  display:flex; gap:var(--s-2); align-items:flex-start;
}
.case-note svg{ width:17px; height:17px; color:var(--accent-deep); flex:none; margin-top:3px; }

/* ---------- 12. Работы лаборатории ---------- */
.work-grid{ display:grid; gap:var(--s-4); margin-top:var(--s-6); }
.work{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--ink-line); background:var(--ink-850);
}
.work img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.work figcaption{ padding:var(--s-4); font-size:.9rem; color:var(--muted-dark); }
.work figcaption strong{ display:block; color:#fff; font-family:var(--font-display); font-size:.96rem; margin-bottom:2px; }

/* ---------- 13. Врач ---------- */
.doc{
  display:grid; gap:var(--s-6);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
}
.doc-photo{ position:relative; background:var(--surface-2); }
.doc-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%; }
.doc-info{ padding:var(--s-5) var(--s-5) var(--s-6); }
.doc-role{
  font-family:var(--font-display); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);
}
.doc-info h3{ font-size:clamp(1.25rem,4.2vw,1.7rem); margin-top:var(--s-2); }
.doc-info > p{ margin-top:var(--s-3); color:var(--muted); font-size:.97rem; }

.edu{ margin-top:var(--s-6); display:grid; gap:var(--s-5); position:relative; }
.edu-item{ position:relative; padding-left:var(--s-6); }
.edu-item::before{
  content:""; position:absolute; left:6px; top:9px;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent-deep); box-shadow:0 0 0 4px var(--accent-tint);
}
.edu-item::after{
  content:""; position:absolute; left:10px; top:22px; bottom:calc(var(--s-5) * -1);
  width:1px; background:var(--border);
}
.edu-item:last-child::after{ display:none; }
.edu-item h4{ font-size:.98rem; }
.edu-item p{ margin-top:2px; color:var(--muted); font-size:.9rem; }
.edu-meta{ color:var(--accent-deep); font-weight:600; font-size:.82rem; }

.doc-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6); }

/* ---------- 14. Прайс ---------- */
.price-groups{ display:grid; gap:var(--s-5); align-items:start; }
.price-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.price-head{
  display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  background:var(--ink-900); color:#fff;
}
.price-head svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.price-head h3{ font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.price-list{ padding:var(--s-2) var(--s-5) var(--s-4); }
.price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) 0;
  border-bottom:1px dashed var(--border);
}
.price-row:last-child{ border-bottom:0; }
.price-name{ min-width:0; font-size:.94rem; }
.price-name small{ display:block; color:var(--muted); font-size:.82rem; margin-top:1px; }
.price-val{
  flex:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:.94rem;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.price-foot{
  margin-top:var(--s-5); padding:var(--s-4) var(--s-5);
  background:var(--accent-tint); border-radius:var(--radius);
  font-size:.88rem; color:var(--muted);
  display:flex; gap:var(--s-3); align-items:flex-start;
}
.price-foot svg{ width:20px; height:20px; color:var(--accent-deep); flex:none; margin-top:2px; }

/* ---------- 15. Отзывы ---------- */
.rating-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5);
  padding:var(--s-5);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); margin-bottom:var(--s-5);
}
.rating-score{
  font-family:var(--font-display); font-weight:800; font-size:2.2rem;
  line-height:1; letter-spacing:-.02em;
}
.stars{ display:flex; gap:3px; color:#E8A317; }
.stars svg{ width:19px; height:19px; }
.rating-meta{ font-size:.9rem; color:var(--muted); }
.rating-bar .btn{ margin-left:auto; }

.rev-grid{ display:grid; gap:var(--s-4); }
.rev{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--s-5);
  display:flex; flex-direction:column;
}
.rev-top{ display:flex; align-items:center; gap:var(--s-3); }
.rev-avatar{
  width:40px; height:40px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink-700); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
}
.rev-name{ font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.rev-date{ font-size:.8rem; color:var(--muted); }
.rev .stars{ margin-top:var(--s-3); }
.rev-text{ margin-top:var(--s-3); color:var(--muted); font-size:.94rem; }
.rev-lang{
  margin-top:var(--s-3); padding-top:var(--s-3);
  border-top:1px dashed var(--border);
  font-size:.85rem; color:var(--muted);
}
.rev-lang b{ color:var(--text); font-weight:600; }

/* ---------- 16. Контакты ---------- */
.contact-grid{ display:grid; gap:var(--s-6); }
.contact-list{ display:grid; gap:var(--s-5); }
.contact-item{ display:flex; gap:var(--s-4); }
.contact-item .ico{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:var(--radius); background:rgba(79,163,209,.14); color:var(--accent);
}
.contact-item .ico svg{ width:21px; height:21px; }
.contact-item dt{
  font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s-1);
}
.contact-item dd{ font-size:1rem; }
.contact-item dd.small{ font-size:.87rem; color:var(--muted-dark); }
.contact-item a:hover{ color:var(--accent-lite); }
.contact-actions{ display:grid; gap:var(--s-3); margin-top:var(--s-6); }

.hours-row{
  display:flex; justify-content:space-between; gap:var(--s-4);
  max-width:280px; padding-block:2px;
}
.hours-row span:last-child{ font-variant-numeric:tabular-nums; }
.hours-note{ margin-top:var(--s-1); font-size:.87rem; color:var(--muted-dark); }

/* Карточка адреса вместо встроенной карты: координаты точки 2GIS публично
   не отдаются, а карта Google по текстовому адресу может встать не туда.
   Показываем то, что проверено, и уводим за маршрутом в 2GIS. */
.place-card{
  position:relative;
  display:flex; flex-direction:column;
  /* нижний отступ с запасом: под кнопкой проходит силуэт города,
     и без него кнопка ложится прямо на башни */
  padding:var(--s-7) var(--s-5) calc(var(--s-6) + 44px);
  text-align:center;
  border:1px solid var(--ink-line); border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-850));
}
.place-card > *{ position:relative; z-index:1; }
.place-card.skyline::after{ height:78px; opacity:.7; }
.place-pin{
  width:60px; height:60px; margin:0 auto var(--s-4);
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(79,163,209,.14); border:1px solid rgba(79,163,209,.34);
  color:var(--accent);
}
.place-pin svg{ width:30px; height:30px; }
.place-addr{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.3rem,4.4vw,1.75rem); color:#fff; letter-spacing:-.02em;
}
.place-city{ margin-top:var(--s-2); font-size:.94rem; color:var(--muted-dark); }

.place-meta{
  display:grid; gap:1px; margin:var(--s-6) 0 var(--s-6);
  background:var(--ink-line);
  border-block:1px solid var(--ink-line);
}
.place-meta > div{ background:var(--ink-850); padding:var(--s-4) var(--s-3); }
.place-meta dt{
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s-1);
}
.place-meta dd{ font-size:.95rem; color:#DCE8F1; font-variant-numeric:tabular-nums; }
.place-card .btn{ margin-top:auto; padding-inline:var(--s-3); }
@media (max-width:419px){
  /* «Построить маршрут в 2GIS» не влезает в строку на узком экране */
  .place-card{ padding-inline:var(--s-4); }
  .place-card .btn{ font-size:.89rem; }
}

/* ---------- 17. Подвал ---------- */
.site-footer{
  background:#07121D; color:#C6D9E7;
  padding-block:var(--s-7) calc(var(--s-6) + var(--bar-h));
  border-top:1px solid var(--ink-line);
}
.footer-top{ display:grid; gap:var(--s-6); }
.footer-brand{ display:flex; align-items:center; gap:var(--s-3); color:#fff; }
.footer-brand img{ width:38px; height:auto; }
.footer-about{ margin-top:var(--s-4); font-size:.92rem; max-width:46ch; }
.socials{ display:flex; gap:var(--s-2); margin-top:var(--s-5); }
.socials a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--ink-line); border-radius:var(--radius);
  color:#C6D9E7;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.socials a:hover{ border-color:var(--accent); color:var(--accent-lite); background:rgba(79,163,209,.1); }
.socials svg{ width:21px; height:21px; }

.footer-col h2{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--s-3);
}
.footer-col li{ padding-block:5px; }
.footer-col a:hover{ color:var(--accent-lite); }

.footer-bottom{
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--ink-line);
  display:grid; gap:var(--s-3);
  font-size:.82rem; color:#93A9BC;
}
.disclaimer{ max-width:70ch; }

/* ---------- 18. Мобильная панель действий ---------- */
.action-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(7,18,29,.96);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--ink-line);
  transform:translateY(110%);
  transition:transform 260ms var(--ease);
}
.action-bar[data-show="true"]{ transform:none; }
.action-bar .btn{ min-height:50px; font-size:.93rem; padding-inline:10px; }

/* ---------- 18b. Тач-цели ----------
   Ссылки-строки в контактах и подвале по высоте равны строке текста (~20px),
   а пальцем по такой попасть трудно. На устройствах с грубым указателем
   и на узких экранах растягиваем их до 44px, не трогая десктоп с мышью. */
@media (pointer:coarse), (max-width:1023px){
  .contact-item dd a,
  .footer-col li a{
    display:inline-flex; align-items:center;
    min-height:44px;
  }
  .footer-col li{ padding-block:0; }
}

/* ---------- 19. Появление при прокрутке ---------- */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 520ms var(--ease), transform 520ms var(--ease);
}

/* ==========================================================================
   20. Адаптив — mobile-first, точки 480 / 600 / 768 / 1024 / 1280
   ========================================================================== */
@media (max-width:479px){
  .wrap{ padding-inline:16px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .rating-bar .btn{ margin-left:0; width:100%; }
  .offer-flag{ right:var(--s-4); }
}

/* Отступ снизу под мобильной панелью действий, чтобы она не перекрывала
   контент последней секции. --bar-h проставляется из JS. */
main{ padding-bottom:0; }
.site-footer{ padding-bottom:calc(var(--s-6) + var(--bar-h)); }

@media (min-width:600px){
  .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .allon-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-bottom{ grid-template-columns:1fr auto; align-items:start; }
  .hero-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:768px){
  .section{ padding-block:var(--s-9); }
  .case-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rev-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .price-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .offer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-top{ grid-template-columns:1.6fr 1fr 1fr; gap:var(--s-7); }
  .doc{ grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:0; align-items:stretch; }
  .doc-photo img{ height:100%; aspect-ratio:auto; min-height:420px; }
  .doc-info{ padding:var(--s-7) var(--s-7) var(--s-7) var(--s-6); }
}

@media (min-width:1024px){
  .site-nav{ display:flex; }
  .quicknav{ display:none; }
  .hero[id], section[id]{ scroll-margin-top:80px; }
  .header-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-menu{ display:none; }
  .action-bar{ display:none; }

  .hero{ padding-block:var(--s-9) calc(var(--s-9) + 40px); }
  .hero-inner{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:var(--s-8); }
  .hero-stats{ grid-template-columns:minmax(0,1fr); }

  .why-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .svc-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .case-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .allon-facts{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; }
  .place-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:1120px){
  .offer-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  /* в четыре колонки на карточку остаётся ~230px под текст —
     цену уменьшаем, иначе «2 500 000 ₸» ломается посреди числа */
  .offer-now{ font-size:1.6rem; }
  .offer{ padding-inline:var(--s-4); }
}

@media (min-width:1280px){
  .wrap{ padding-inline:32px; }
  .price-groups{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Горизонтальная ориентация телефона: экран низкий, режем вертикальные отступы */
@media (max-width:1023px) and (orientation:landscape){
  .hero{ padding-block:var(--s-6) var(--s-7); }
  .section{ padding-block:var(--s-7); }
  .mobile-menu{ padding-top:var(--s-4); }
  /* На боку экран низкий: 7.4vw дают ~60px заголовка, и первый экран
     целиком уходит под один h1. Режем шкалу до 38px. */
  .hero h1{ font-size:clamp(1.7rem,4.6vw,2.4rem); }
  .hero-badge{ margin-bottom:var(--s-4); }
  .hero-lead{ font-size:.97rem; margin-top:var(--s-4); }
  .hero-actions{ margin-top:var(--s-5); }
}

/* ---------- 21. Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .action-bar{ transform:none; }
  .action-bar[data-show="false"]{ transform:translateY(110%); }
}

@media print{
  .site-header,.action-bar,.mobile-menu,.skip-link,.case-toggle{ display:none !important; }
  .section--dark,.hero,.site-footer{ background:#fff !important; color:#000 !important; }
  .section--dark h2,.section--dark h3,.hero h1{ color:#000 !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}