/* Artur Podolog NYC — дизайн-код «Innovation Clinic»:
   электрический синий + белые скруглённые панели, крупный тяжёлый гротеск
   с тесным трекингом, номерные карточки, плавающие пилюли поверх фото. */
:root{
  /* палитра */
  --blue:#009FED;
  --blue-700:#0A7AB9;
  --blue-400:#30BBFF;
  --blue-100:#D4F1FF;
  --blue-50:#EEF9FF;
  --page:#E8F5FB;
  --surface:#FFFFFF;
  --ink:#0B1424;
  --ink-2:#4A5872;
  --ink-3:#8593AC;
  --line:#E1F1F7;
  --line-2:#C9E6F4;
  --on-blue:#FFFFFF;
  --on-blue-soft:rgba(255,255,255,.78);

  /* шаг сетки */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* скругления: панель / карточка / мелочь / пилюля */
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:10px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(11,20,36,.04), 0 4px 14px -6px rgba(11,20,36,.10);
  --shadow-md:0 2px 6px rgba(11,20,36,.05), 0 18px 38px -18px rgba(11,20,36,.22);
  --shadow-lg:0 6px 14px rgba(11,20,36,.06), 0 34px 60px -26px rgba(11,20,36,.30);
  --shadow-blue:0 14px 30px -12px rgba(0,159,237,.55);

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

  /* гексагональная сетка референса — фоновая текстура секций */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z' fill='none' stroke='%23009FED' stroke-opacity='.10' stroke-width='1.2'/%3E%3Cpath d='M0 49 27 64.5v31L0 111l-27-15.5v-31z' fill='none' stroke='%23009FED' stroke-opacity='.10' stroke-width='1.2'/%3E%3Cpath d='M56 49 83 64.5v31L56 111 29 95.5v-31z' fill='none' stroke='%23009FED' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
p{margin:0}
h1,h2,h3,.display{margin:0; font-family:"Manrope",-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:800; line-height:1.04; letter-spacing:-.035em; text-wrap:balance; color:var(--ink)}
h1{font-size:clamp(40px,7vw,72px)}
h2{font-size:clamp(28px,4.4vw,46px)}
h3{font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.25}

a{color:var(--blue); text-decoration:none; transition:color var(--dur) var(--ease)}
a:hover{color:var(--blue-700)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);
  outline-offset:3px; border-radius:var(--r-sm)}

/* ---------- каркас ---------- */
.shell{max-width:1180px; margin:0 auto; padding:0 var(--sp-5)}
.narrow{max-width:760px}
.stack{display:flex; flex-direction:column}
.gap-3{gap:var(--sp-3)} .gap-4{gap:var(--sp-4)} .gap-5{gap:var(--sp-5)}
.section{padding:var(--sp-8) 0}

.eyebrow{font-family:"Manrope",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue)}
.eyebrow--on-blue{color:var(--on-blue-soft)}
/* подпись в скобках рядом с заголовком — приём референса «(What you get)» */
.paren{font-family:"Inter",sans-serif; font-size:15px; font-weight:400;
  letter-spacing:0; color:var(--ink-3)}
.ru-en{color:var(--ink-3); font-size:.88em; font-weight:400}
.lede{color:var(--ink-2); font-size:17px}
.lede--on-blue{color:var(--on-blue-soft)}

.section-head{display:flex; flex-direction:column; gap:var(--sp-3);
  margin-bottom:var(--sp-6); max-width:64ch}
.head-split{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-6); margin-bottom:var(--sp-6); flex-wrap:wrap}
.head-split .lede{max-width:46ch}

/* ---------- шапка ---------- */
.topbar{position:sticky; top:0; z-index:100;
  background:rgba(232,245,251,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,230,244,.7)}
.topbar .shell{display:flex; align-items:center; gap:var(--sp-5); min-height:72px}
.brand{display:inline-flex; align-items:center; gap:10px;
  font-family:"Manrope",sans-serif; font-weight:800; font-size:18px;
  letter-spacing:-.03em; color:var(--ink)}
.brand:hover{color:var(--blue)}
.brand-mark{width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-blue)}
.brand-mark svg{width:16px; height:16px}
.topbar nav{display:flex; align-items:center; gap:var(--sp-5); margin-left:var(--sp-6)}
.topbar nav a{color:var(--ink-2); font-size:15px; font-weight:500}
.topbar nav a:hover{color:var(--blue)}
.topbar-end{margin-left:auto; display:flex; align-items:center; gap:var(--sp-3)}
/* пилюля с адресом — как «Medychnyi Avenue» в референсе */
.loc{display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--ink-2); box-shadow:var(--shadow-sm)}
.loc svg{width:15px; height:15px; color:var(--blue); flex:none}
.icon-btn{width:44px; height:44px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:var(--ink); color:#fff; box-shadow:var(--shadow-md);
  transition:background-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.icon-btn:hover{background:var(--blue); color:#fff; transform:translateY(-1px)}
.icon-btn svg{width:19px; height:19px}

/* ---------- кнопки ---------- */
.btn{display:inline-flex; align-items:center; gap:var(--sp-3);
  min-height:56px; padding:0 10px 0 var(--sp-6); border-radius:var(--r-pill);
  font-family:"Manrope",sans-serif; font-size:16px; font-weight:700; letter-spacing:-.01em;
  cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.btn-ic{width:38px; height:38px; border-radius:50%; flex:none; display:grid;
  place-items:center; background:rgba(255,255,255,.2)}
.btn-ic svg{width:18px; height:18px}
.btn-primary{background:var(--blue); color:#fff; box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--blue-700); color:#fff; transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2);
  box-shadow:var(--shadow-sm)}
.btn-ghost .btn-ic{background:var(--blue-50); color:var(--blue)}
.btn-ghost:hover{color:var(--blue); border-color:var(--blue); transform:translateY(-2px)}
.btn-white{background:#fff; color:var(--ink); box-shadow:var(--shadow-md)}
.btn-white .btn-ic{background:var(--blue); color:#fff}
.btn-white:hover{color:var(--blue); transform:translateY(-2px)}

/* ---------- панели ---------- */
.panel{background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-7);
  box-shadow:var(--shadow-md)}
.panel-blue{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-700) 100%);
  color:var(--on-blue); border-radius:var(--r-xl); padding:var(--sp-7);
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.panel-blue h2,.panel-blue h3{color:var(--on-blue)}
.panel-blue::before{content:""; position:absolute; inset:0; background:var(--hex);
  opacity:.5; filter:brightness(0) invert(1); mix-blend-mode:soft-light;
  pointer-events:none}
.panel-blue > *{position:relative}

/* ---------- герой ---------- */
.hero{padding:var(--sp-6) 0 var(--sp-7)}
.hero-card{background:var(--surface); border-radius:var(--r-xl); padding:var(--sp-8);
  box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.hero-card::before{content:""; position:absolute; inset:0; background:var(--hex);
  opacity:.55; pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:1.06fr .94fr;
  gap:var(--sp-7); align-items:stretch}
.hero h1{margin-top:var(--sp-4)}
/* строчная вставка внутри заголовка — приём референса «We treat not only symptoms» */
.h1-note{display:block; margin-top:var(--sp-4); max-width:34ch;
  font-family:"Inter",sans-serif; font-size:16px; font-weight:400; line-height:1.55;
  letter-spacing:0; color:var(--ink-2)}
.h1-note strong{color:var(--ink); font-weight:700}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6)}
.hero-note{margin-top:var(--sp-4); font-size:14px; color:var(--ink-3); max-width:44ch}

/* строка цифр-фактов */
.stats{display:flex; gap:var(--sp-6); margin-top:var(--sp-7); padding-top:var(--sp-5);
  border-top:1px solid var(--line); flex-wrap:wrap}
.stat-n{font-family:"Manrope",sans-serif; font-size:34px; font-weight:800;
  letter-spacing:-.04em; line-height:1; color:var(--ink)}
.stat-n em{font-style:normal; color:var(--blue)}
.stat-t{margin-top:6px; font-size:13px; line-height:1.35; color:var(--ink-3); max-width:16ch}

/* синяя панель с фото */
.hero-photo{position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-700) 100%);
  padding:var(--sp-6); min-height:460px; display:flex; flex-direction:column;
  box-shadow:var(--shadow-blue)}
.hero-photo::before{content:""; position:absolute; inset:0; background:var(--hex);
  opacity:.55; filter:brightness(0) invert(1); mix-blend-mode:soft-light}
.hero-photo-head{position:relative; z-index:2; max-width:24ch}
.hero-photo-head h2{font-size:clamp(22px,2.4vw,30px); color:#fff}
.hero-photo-head p{margin-top:var(--sp-2); font-size:14px; color:var(--on-blue-soft)}
.doc{position:absolute; inset:auto 0 0 0; height:72%; z-index:1}
.doc img{width:100%; height:100%; object-fit:cover; object-position:top center;
  border-radius:var(--r-lg)}
/* для фото с вырезанным фоном (PNG без подложки) — контейнер получает .is-cutout */
.doc.is-cutout img{object-fit:contain; object-position:bottom center; border-radius:0}
.doc picture{display:contents}

/* плавающие пилюли поверх фото */
.tag{position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px; border-radius:var(--r-pill); background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); box-shadow:var(--shadow-md);
  font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap}
.tag svg{width:14px; height:14px; color:var(--blue); flex:none}
.tag-1{left:var(--sp-5); top:44%}
.tag-2{right:var(--sp-5); top:56%}
.tag-3{left:var(--sp-5); bottom:var(--sp-6)}

/* ---------- секция-высказывание ---------- */
.statement{text-align:center; padding:var(--sp-8) 0}
.statement .display{font-size:clamp(26px,3.9vw,44px); line-height:1.18; max-width:20ch;
  margin:0 auto; letter-spacing:-.03em}
.statement .display span{font-weight:500; color:var(--ink-2)}
.statement .lede{margin:var(--sp-5) auto 0; max-width:56ch}
.statement .btn{margin-top:var(--sp-6)}
/* круглая иконка внутри строки текста — приём референса с эмодзи в заголовке */
.chip-ic{display:inline-grid; place-items:center; width:1.05em; height:1.05em;
  border-radius:50%; background:var(--blue); color:#fff; vertical-align:-.12em;
  margin:0 .12em; box-shadow:var(--shadow-blue)}
.chip-ic svg{width:.58em; height:.58em}

/* ---------- услуги ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:var(--sp-4)}
.svc{position:relative; background:var(--surface); border-radius:var(--r-lg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.svc:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.svc-num{font-family:"Manrope",sans-serif; font-size:52px; font-weight:800;
  letter-spacing:-.05em; line-height:.9; color:var(--blue-100);
  margin-bottom:var(--sp-3)}
.svc-name{font-family:"Manrope",sans-serif; font-size:18px; font-weight:700;
  letter-spacing:-.02em; line-height:1.25}
.svc-en{font-size:13.5px; color:var(--ink-3)}
.svc-foot{margin-top:auto; padding-top:var(--sp-4); display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-3); border-top:1px solid var(--line)}
.svc-book{font-size:13.5px; font-weight:600; color:var(--blue);
  border-bottom:1px solid currentColor; padding-bottom:1px}
.svc-time{font-size:13.5px; font-weight:700; color:var(--ink-2);
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px}
.svc-time svg{width:14px; height:14px; color:var(--blue)}
/* акцентная синяя карточка в сетке */
.svc--accent{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-700) 100%);
  color:var(--on-blue); box-shadow:var(--shadow-blue)}
.svc--accent::before{content:""; position:absolute; inset:0; background:var(--hex);
  opacity:.5; filter:brightness(0) invert(1); mix-blend-mode:soft-light}
.svc--accent > *{position:relative}
.svc--accent .svc-name{color:#fff; font-size:20px}
.svc--accent p:not(.svc-num){font-size:14px; color:var(--on-blue-soft); margin-top:var(--sp-2)}
.svc--accent .svc-foot{border-top-color:rgba(255,255,255,.22)}
.svc--accent .svc-book{color:#fff}

/* ---------- о кабинете ---------- */
.visit-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-6);
  align-items:stretch}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.fact{background:var(--surface); border-radius:var(--r-md); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2)}
.fact-wide{grid-column:1 / -1}
.fact-ic{width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-50); color:var(--blue)}
.fact-ic svg{width:18px; height:18px}
.fact h3{font-family:"Manrope",sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.fact p{font-size:15.5px; color:var(--ink)}
.hours-row{display:flex; justify-content:space-between; gap:var(--sp-4);
  font-variant-numeric:tabular-nums}
.hours-row + .hours-row{margin-top:var(--sp-1)}

/* ---------- запись ---------- */
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center}
.tel{display:inline-flex; align-items:center; gap:var(--sp-4);
  font-family:"Manrope",sans-serif; font-size:clamp(30px,4.4vw,44px); font-weight:800;
  letter-spacing:-.04em; color:#fff; margin:var(--sp-4) 0 var(--sp-3)}
.tel:hover{color:#fff; opacity:.86}
.tel .btn-ic{width:52px; height:52px; background:rgba(255,255,255,.18)}
.tel .btn-ic svg{width:24px; height:24px}

/* согласие на SMS — белая карточка внутри синей панели, читаемость важнее вида */
.consent{background:var(--surface); color:var(--ink-2); border-radius:var(--r-lg);
  padding:var(--sp-5); font-size:14px; line-height:1.6;
  display:flex; flex-direction:column; gap:var(--sp-3)}
.consent strong{color:var(--ink); font-weight:700}
.kbd{display:inline-block; padding:1px 8px; border-radius:6px; background:var(--blue-50);
  border:1px solid var(--line-2); font-size:12.5px; font-weight:700; color:var(--ink);
  font-family:"Manrope",sans-serif}

/* ---------- служебные страницы ---------- */
.legal-body{max-width:72ch}
.legal-body h2{font-size:24px; margin:var(--sp-7) 0 var(--sp-3)}
.legal-body h2:first-of-type{margin-top:var(--sp-4)}
.legal-body p{margin-bottom:var(--sp-3); color:var(--ink-2)}
.legal-body p strong{color:var(--ink)}
.legal-body ul{margin:0 0 var(--sp-3); padding-left:var(--sp-5); color:var(--ink-2);
  display:flex; flex-direction:column; gap:var(--sp-2)}
.callout{background:var(--blue-50); border-left:3px solid var(--blue);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:var(--sp-5); margin:var(--sp-5) 0}
.callout p{color:var(--ink); margin:0}
.updated{font-size:14px; color:var(--ink-3)}

/* ---------- подвал ---------- */
.foot{margin-top:var(--sp-8); padding:var(--sp-8) 0 var(--sp-7)}
.foot-card{background:var(--ink); color:#fff; border-radius:var(--r-xl);
  padding:var(--sp-7); display:flex; flex-wrap:wrap; gap:var(--sp-6);
  justify-content:space-between}
.foot-card .brand{color:#fff}
.foot-card .brand:hover{color:var(--blue-400)}
.foot p{font-size:15px; color:rgba(255,255,255,.72); margin-top:var(--sp-2)}
.foot a{color:#fff}
.foot a:hover{color:var(--blue-400)}
.foot .legalname{font-size:13.5px; color:rgba(255,255,255,.5)}
.foot nav{display:flex; flex-direction:column; gap:var(--sp-2); font-size:15px}
.foot nav a{color:rgba(255,255,255,.72)}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-card{padding:var(--sp-6)}
  .hero-photo{min-height:420px}
  .visit-grid,.cta-grid{grid-template-columns:1fr}
  .topbar .loc{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .shell{padding:0 var(--sp-4)}
  .section{padding:var(--sp-7) 0}
  .hero-card,.panel,.panel-blue,.foot-card{padding:var(--sp-5); border-radius:var(--r-lg)}
  .hero-photo{min-height:440px; padding:var(--sp-5)}
  .topbar nav{display:none}
  .topbar-end{margin-left:auto}
  .btn{width:100%; justify-content:space-between}
  .stats{gap:var(--sp-5)}
  .facts{grid-template-columns:1fr}
  .tag-1{left:var(--sp-3); top:46%} .tag-2{right:var(--sp-3); top:60%}
  .tag-3{left:12%; bottom:var(--sp-4)}
  .statement .display{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}