/* ============================================================
   МАПК — дизайн-система (production, портовано з design-test)
   Суміш: головна (темний фон + золоті градієнти + контраст)
        + program-short (токенна дисципліна, стриманий ритм)
   Використання: підключити цей файл + design-system.js,
   шрифти Google: Inter Tight, Oswald, Playfair Display (kicker/цитати).
   ============================================================ */

/* ---------- 1. Токени ---------- */
:root{
  --bg: #0A0917;
  --bg-elevated: #100F1F;
  --card: #0E0D1C;
  --fg: #F2F0EA;
  --muted: #8E8CA0;
  --soft: #ABA9BA;            /* другорядний текст на картках */
  --border: #232236;
  --border-gold: rgba(196,166,104,.35);
  --gold-1: #C4A668;
  --gold-2: #F5D8A5;
  --gold-grad: linear-gradient(to left, #C4A668, #F5D8A5 50%, #C4A668);
  --gold-dark: #7a6432;       /* золото для світлих секцій */
  --surface-light: #F5F3EE;
  --surface-light-fg: #16151F;
  --surface-light-muted: #3C3A47;
  --radius: 14px;
  --maxw: 1200px;
  --pad-x: 28px;
  --section-gap: clamp(80px, 12vw, 130px);

  /* шрифт заголовків — фінальний вибір: Oswald */
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --display-tracking: .01em;
  --display-weight: 500;
  --display-transform: none;
  --display-scale: 1.02;
}

/* ---------- 2. База ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-weight:300;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(196,166,104,.35)}
img{max-width:100%}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  text-transform:var(--display-transform);
  line-height:1.05;
}
/* типографічна шкала */
.h-hero{font-size:calc(clamp(34px, 9vw, 118px) * var(--display-scale))}
.h-section{font-size:calc(clamp(30px, 4.6vw, 58px) * var(--display-scale))}
.h-card{font-size:calc(clamp(22px, 2.4vw, 30px) * var(--display-scale))}
.h-mega{font-size:calc(clamp(38px, 6vw, 76px) * var(--display-scale))}

.gold{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x)}
section{position:relative}

/* курсивний кікер — завжди Playfair Italic */
.kicker{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:400;
  letter-spacing:.02em; font-size:clamp(15px, 2vw, 21px); color:#C9C6D6;
}

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-1);
  margin-bottom:26px;
}
.eyebrow::before{content:""; width:36px; height:1px; background:var(--gold-1); opacity:.7; flex:none}

/* ---------- 3. Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  text-decoration:none; border-radius:8px; padding:11px 22px;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  cursor:pointer; border:none; white-space:nowrap;
}
.btn-gold{background:var(--gold-grad); color:#141309}
.btn-gold:hover{transform:translateY(-1px); box-shadow:0 6px 24px rgba(196,166,104,.35)}
.btn-ghost{border:1px solid var(--border-gold); color:var(--gold-2); background:transparent}
.btn-ghost:hover{background:rgba(196,166,104,.1)}

/* стрілки-лінки */
.arrow{display:inline-block; transition:transform .2s}
.link-gold{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold-2); font-weight:500; font-size:15px; text-decoration:none;
}
.link-more{ /* для світлих секцій */
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--gold-dark); font-weight:600; font-size:16px;
  border-bottom:1px solid rgba(122,100,50,.4); padding-bottom:3px;
  transition:gap .2s, border-color .2s;
}
.link-more:hover{gap:16px; border-color:var(--gold-dark)}

/* ---------- 4. Шапка ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,9,23,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); min-width:0}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border-gold); flex:none;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:16px; color:var(--gold-2);
  background:radial-gradient(circle at 30% 25%, rgba(245,216,165,.18), transparent 65%);
}
.brand-name{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#CFCDD9; white-space:nowrap}
.brand-name-short{display:none}
nav.main{display:flex; gap:34px}
nav.main a{color:#B9B7C6; text-decoration:none; font-size:14.5px; font-weight:400; transition:color .2s}
nav.main a:hover{color:var(--gold-2)}
.header-cta{flex:none}

/* мобільне меню */
.menu-btn{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  flex-direction:column; gap:5px;
}
.menu-btn span{display:block; width:22px; height:1.5px; background:var(--gold-2); transition:transform .25s, opacity .25s}
.mobile-nav{
  display:none; position:fixed; top:64px; left:0; right:0; z-index:49;
  background:rgba(10,9,23,.97); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:18px var(--pad-x) 26px;
  flex-direction:column; gap:4px;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  color:#D8D6E2; text-decoration:none; font-size:17px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-nav a:last-child{border-bottom:none}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 5. Хіро ---------- */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.hero-video{position:absolute; inset:0; display:flex; justify-content:center; align-items:center; pointer-events:none}
.hero-video video{
  height:92%; width:auto; object-fit:cover; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%);
}
.hero-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,9,23,.55) 0%, rgba(10,9,23,.15) 35%, rgba(10,9,23,.2) 70%, var(--bg) 98%);
}
.hero-in{position:relative; z-index:2; text-align:center; padding-top:100px}
.hero .kicker{margin-bottom:26px}
.hero h1{margin-bottom:30px}
.hero-sub{max-width:640px; margin:0 auto 14px; font-size:clamp(16px, 2vw, 21px); color:#DDDBE6; font-weight:300}
.hero-sub b{font-weight:500; color:var(--fg)}
.hero-authors{font-size:14.5px; color:var(--muted); margin-bottom:48px}
.hero-cta{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:12px; letter-spacing:.25em; text-transform:uppercase; z-index:2;
}

/* ---------- 6. Секції та сітки ---------- */
.section{padding-top:var(--section-gap)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}

/* світла секція-акцент (повна ширина) */
.section-light{
  margin-top:var(--section-gap);
  background:var(--surface-light); color:var(--surface-light-fg);
  padding:clamp(70px, 10vw, 110px) 0;
}
.section-light .eyebrow{color:#9d8347}
.section-light .eyebrow::before{background:#9d8347}
.section-light p{color:var(--surface-light-muted)}
.split{display:grid; grid-template-columns:1.25fr .9fr; gap:70px; align-items:center}

/* ---------- 7. Картки ---------- */
.card{
  position:relative; border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-elevated), var(--card));
  padding:36px 34px 30px; text-decoration:none; color:var(--fg);
  display:flex; flex-direction:column; gap:14px; overflow:hidden;
  transition:border-color .25s, transform .25s, background .25s;
}
a.card:hover{border-color:var(--border-gold); transform:translateY(-3px)}
a.card:hover .arrow{transform:translate(3px,-3px)}
.card p{color:var(--soft); font-size:15.5px; line-height:1.6}
.card .link-gold{margin-top:auto}

/* картка з золотою рискою зверху (події) */
.card-strip::before{content:""; position:absolute; top:0; left:34px; width:64px; height:2px; background:var(--gold-grad)}
.card-tag{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-1); font-weight:500}
.card-meta{color:var(--muted); font-size:15px}

/* нумерований бейдж (ЦА-картки) */
.num-badge{
  font-family:var(--font-display); font-size:15px; color:var(--gold-1);
  border:1px solid var(--border-gold); width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; flex:none;
}

/* світла картка (ЦА-картки на темних секціях) */
.card-light{
  background:var(--surface-light); color:var(--surface-light-fg);
  border-color:transparent;
}
.card-light p{color:var(--surface-light-muted)}
.card-light .link-gold{color:var(--gold-dark)}
a.card-light:hover{border-color:rgba(122,100,50,.4)}

/* іконка-бейдж (заміна num-badge на світлих картках) */
.card-icon{
  width:48px; height:48px; border-radius:50%; flex:none;
  border:1px solid rgba(122,100,50,.4);
  background:rgba(122,100,50,.08);
  display:grid; place-items:center; color:var(--gold-dark);
}
.card-icon svg{width:22px; height:22px}

/* картка-персона (засновники, фахівці) */
.person{display:flex; gap:26px; align-items:flex-start}
.person-photo{
  flex:none; width:116px; height:116px; border-radius:50%;
  border:2px solid var(--border-gold);
  background:#EFEDE7; overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.person-photo img{width:100%; height:100%; object-fit:cover; display:block}
.person h3{margin-bottom:4px}
.person .role{color:var(--gold-1); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; font-weight:500}
.person p{color:var(--soft); font-size:15px; line-height:1.6}

/* ---------- 7b. Порівняльна таблиця (about-method) ----------
   Мобільний: горизонтальний скрол зі sticky-колонкою критеріїв
   і фейдом-підказкою справа (порівняння має сенс лише поруч). */
.compare-wrap{
  position:relative; border:1px solid rgba(22,21,31,.1); border-radius:var(--radius);
  background:#fff;
  overflow:hidden;
}
.compare-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(22,21,31,.15) transparent}
table.compare{width:100%; min-width:720px; border-collapse:collapse; font-size:15px; line-height:1.5}
.compare th, .compare td{
  padding:18px 20px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgba(22,21,31,.1); font-weight:300; color:var(--surface-light-muted);
}
.compare tbody tr:last-child th, .compare tbody tr:last-child td{border-bottom:none}
.compare thead th{
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(22,21,31,.45);
  border-bottom:1px solid var(--border-gold); padding-top:22px; padding-bottom:16px;
}
.compare tbody th[scope="row"]{
  font-family:var(--font-body); font-weight:500; font-size:13.5px;
  color:var(--surface-light-fg); letter-spacing:.02em; min-width:150px;
}
/* sticky-колонка критеріїв при скролі (потрібен суцільний фон) */
.compare thead th:first-child, .compare tbody th[scope="row"]{
  position:sticky; left:0; z-index:1; background:#fff;
}
/* акцент на колонці ПАК */
.compare .col-pak{background:rgba(196,166,104,.12); color:var(--surface-light-fg)}
.compare thead th.col-pak{color:var(--gold-dark)}
/* фейд-підказка, що таблиця скролиться (тільки вузькі екрани) */
.compare-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:56px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.9));
  pointer-events:none; opacity:0; transition:opacity .2s;
}
.compare-hint{display:none}

/* Мобільні картки-порівняння — окрема розмітка (.cmp-cards), показується
   замість таблиці на вузькому екрані. Картка = один критерій.
   Двоколонкова сітка: ліворуч назви методів, праворуч — обрамлений
   стовпчик значень із критерієм-заголовком угорі. */
.cmp-cards{display:none; margin-top:-24px}
/* без зовнішньої рамки — межі малюються по клітинках,
   щоб верхній лівий кут лишався відкритим (без верхньої/лівої ліній) */
.cmp-card{
  display:grid; grid-template-columns:34% 1fr;
}
.cmp-card + .cmp-card{margin-top:22px}

/* верхній лівий кут — відкритий: жодних верхньої та лівої меж */
.cmp-corner{background:transparent; border-bottom:1px solid rgba(22,21,31,.1)}

/* критерій над правим стовпчиком — формує верх правої рамки */
.cmp-head{
  padding:10px 16px; font-family:var(--font-body); font-weight:700; font-size:15px;
  color:var(--gold-dark); background:rgba(122,100,50,.06);
  border-top:1px solid rgba(22,21,31,.1); border-left:1px solid rgba(22,21,31,.1);
  border-right:1px solid rgba(22,21,31,.1); border-bottom:1px solid var(--border-gold);
}

/* ліва колонка — назви методів (менші); ліва межа = зовнішній лівий край */
.cmp-m{
  display:flex; align-items:center;
  padding:9px 12px 9px 16px;
  font-size:10.5px; line-height:1.3; letter-spacing:.03em; text-transform:uppercase;
  color:rgba(22,21,31,.45); background:#fff;
  border-left:1px solid rgba(22,21,31,.1); border-bottom:1px solid rgba(22,21,31,.1);
}
/* права колонка — значення; ліва межа = роздільник, права = зовнішній край */
.cmp-v{
  display:flex; align-items:center;
  padding:9px 16px;
  font-size:13.5px; line-height:1.4; color:var(--surface-light-muted); background:#fff;
  border-left:1px solid rgba(22,21,31,.1); border-right:1px solid rgba(22,21,31,.1);
  border-bottom:1px solid rgba(22,21,31,.1);
}

/* нижній ряд (ПАК) — виділений на всю ширину */
.cmp-m.is-pak{
  background:rgba(196,166,104,.15); color:var(--gold-dark); font-weight:500;
  border-left-color:var(--border-gold); border-bottom-color:var(--border-gold);
}
.cmp-v.is-pak{
  background:rgba(196,166,104,.15); color:var(--surface-light-fg); font-weight:500;
  border-left-color:var(--border-gold); border-right-color:var(--border-gold); border-bottom-color:var(--border-gold);
}

@media (max-width: 780px){
  .compare-wrap{display:none}
  .cmp-cards{display:block}
}

/* ---------- 7c1. Схема-начерк (світла панель, 2 зони, чорні блоки-контури) ---------- */
.sketch{
  display:flex; flex-direction:column;
  border-radius:6px; overflow:hidden;
  max-width:720px; margin:0 auto;
}
.sketch-row{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px 26px; text-align:center}
.sketch-row:not(.is-pak){background:#DCDADD}
.sketch-row.is-pak{background:var(--surface-light)}
.sketch-row-label{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(20,19,26,.5); margin-bottom:16px;
}
.sketch-steps{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; row-gap:14px; column-gap:0}
.sketch-step{
  border:1.5px solid #14131A; border-radius:2px;
  padding:9px 16px; font-size:14.5px; color:#14131A;
  background:none;
}
.sketch-step.is-new{border-color:#8A6A22; border-width:2px; color:#8A6A22; font-weight:600}
.sketch-arrow{color:#14131A; font-size:14px; margin:0 4px; flex:none}
@media (max-width: 620px){
  .sketch-row{padding:18px 16px}
  .sketch-row-label{font-size:10px; margin-bottom:10px}
  .sketch-row + .sketch-row{padding-top:16px}
  .sketch-steps{flex-direction:column; row-gap:0}
  .sketch-step{padding:7px 13px; font-size:13.5px}
  .sketch-arrow{transform:rotate(90deg); margin:-1px 0; font-size:12px}
}

/* ---------- 7d. Список із золотим маркером-рискою ---------- */
.list-dash{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 44px}
.list-dash li{position:relative; padding-left:36px; color:var(--soft); font-size:16px; line-height:1.55}
.list-dash li::before{
  content:""; position:absolute; left:0; top:.75em;
  width:20px; height:1px; background:var(--gold-1);
}
@media (max-width: 900px){
  .list-dash{grid-template-columns:1fr; gap:14px}
}

/* виділена панель-акцент (напр. «найчастіші запити») */
.panel{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-elevated), var(--card));
  padding:40px 44px 38px;
}
@media (max-width: 900px){
  .panel{padding:28px 22px 26px}
}

/* ---------- 7f. Опори методу (іконки замість абзацу) ---------- */
.pillars{display:grid; grid-template-columns:repeat(6,1fr); gap:26px 18px}
.pillar{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.pillar-icon{
  width:64px; height:64px; border-radius:50%; flex:none;
  border:1px solid var(--border-gold);
  background:rgba(196,166,104,.08);
  display:grid; place-items:center; color:var(--gold-1);
}
.pillar-icon svg{width:26px; height:26px}
.pillar span:last-child{font-size:14px; line-height:1.35; color:var(--fg); font-weight:500}
.section-light .pillar-icon{border-color:rgba(122,100,50,.4); background:rgba(122,100,50,.08); color:var(--gold-dark)}
.section-light .pillar span:last-child{color:var(--surface-light-fg)}
@media (max-width: 900px){
  .pillars{grid-template-columns:repeat(3,1fr); gap:24px 14px}
}
@media (max-width: 560px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar-icon{width:56px; height:56px}
  .pillar-icon svg{width:22px; height:22px}
}

/* ---------- 7e. Тизери: фахівці та філії ---------- */
/* вертикальна міні-картка фахівця (тизер на головній) */
.person-mini{align-items:center; text-align:center; gap:0; padding:32px 24px 28px}
.person-mini .person-photo{width:96px; height:96px; margin-bottom:18px}
.person-mini h3{font-family:var(--font-body); font-size:17px; font-weight:500; letter-spacing:.01em; margin-bottom:4px}
.person-mini .role{margin-bottom:0}

/* секція з картою світу на фоні */
.section-world{position:relative}
.section-world::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url(/images/world-bg-big.svg) no-repeat center 65% / min(1480px, 130%);
  opacity:.9; pointer-events:none;
}
/* ряд прапорів-філій */
.flag-row{display:flex; flex-wrap:wrap; gap:16px}
.flag-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-elevated), var(--card));
  padding:20px 18px 16px; flex:1 1 120px; max-width:170px;
  text-decoration:none; transition:border-color .25s, transform .25s;
}
.flag-item:hover{border-color:var(--border-gold); transform:translateY(-3px)}
.flag-item img{width:44px; height:auto; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.45)}
.flag-item span{font-size:13.5px; color:var(--soft); letter-spacing:.03em; text-align:center}
/* нелінкований рекламний чип: без ефекту наведення */
.flag-item.flag-static{cursor:default}
.flag-item.flag-static:hover{border-color:var(--border); transform:none}
@media (max-width: 900px){
  .flag-row{gap:10px}
  .flag-item{flex:1 1 96px; padding:14px 10px 12px}
  .flag-item img{width:36px}
  .flag-item span{font-size:12.5px}
}

/* ---------- 7g. Цитата-думка (внутрішній голос / заперечення) ---------- */
.quote-block{
  position:relative; max-width:620px;
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(18px,2.2vw,23px); line-height:1.45; color:#DDDBE6;
  padding-left:30px;
}
.quote-block::before{
  content:"\201C"; position:absolute; left:0; top:-.1em;
  font-size:1.6em; color:var(--gold-1); line-height:1; font-style:normal;
}
.quote-row{display:flex; flex-direction:column; gap:28px; margin:36px 0}

/* ---------- 7h. Слайдери (відгуки-скріншоти / відео) ---------- */
.slider-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none;
}
.slider-track::-webkit-scrollbar{display:none}
.review-card{
  flex:0 0 78%; max-width:78%; scroll-snap-align:start;
  background:#fff; border:1px solid rgba(22,21,31,.08); border-radius:12px;
  padding:16px 16px 10px; display:flex; flex-direction:column; gap:10px;
  height:420px; overflow:hidden;
}
.review-card h4{font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--surface-light-fg); line-height:1.3}
.review-card .review-img-wrap{flex:1; overflow:hidden; border-radius:8px}
.review-card img{width:100%; height:auto; display:block}
@media (min-width: 640px){ .review-card{flex-basis:300px; max-width:300px} }

.video-card{
  flex:0 0 85%; max-width:85%; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:10px;
}
.video-card h4{
  font-family:var(--font-body); font-weight:500; font-size:15px; color:var(--surface-light-fg);
  min-height:38px; display:flex; align-items:flex-end; line-height:1.3;
}
.video-card .video-frame{position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:rgba(22,21,31,.05)}
.video-card iframe{position:absolute; inset:0; width:100%; height:100%; border:none}
@media (min-width: 640px){ .video-card{flex-basis:380px; max-width:380px} }
@media (min-width: 1024px){ .video-card{flex-basis:480px; max-width:480px} }

.slider-nav{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:22px}
.slider-nav button{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(22,21,31,.18);
  background:transparent; color:var(--surface-light-fg); cursor:pointer;
  display:grid; place-items:center; transition:background .2s, opacity .2s;
}
.slider-nav button:hover{background:rgba(22,21,31,.06)}
.slider-nav button:disabled{opacity:.3; cursor:default}
.slider-nav button svg{width:16px; height:16px}
.slider-counter{font-size:13px; color:var(--surface-light-muted); font-variant-numeric:tabular-nums; min-width:52px; text-align:center}

/* ---------- 7k. Список аудиторій з іконкою ---------- */
.audience-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:26px 44px}
.audience-item{display:flex; gap:18px; align-items:flex-start}
.audience-icon{
  flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-gold); background:rgba(196,166,104,.08);
  display:grid; place-items:center; color:var(--gold-1);
}
.audience-icon svg{width:20px; height:20px}
.audience-item p{color:var(--soft); font-size:15.5px; line-height:1.55; padding-top:2px}
@media (max-width: 900px){
  .audience-list{grid-template-columns:1fr; gap:20px}
}

/* ---------- 7i. Акордеон модулів програми ---------- */
.module-group{margin-bottom:36px}
.module-group-title{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-size:clamp(19px,2vw,24px); margin-bottom:18px;
}
.module-group-title::before{content:""; width:32px; height:1px; background:var(--gold-1); flex:none}
.module{
  border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(160deg, var(--bg-elevated), var(--card));
  margin-bottom:10px; overflow:hidden;
}
.module > summary{
  list-style:none; cursor:pointer; padding:18px 22px;
  display:flex; align-items:baseline; gap:16px;
}
.module > summary::-webkit-details-marker{display:none}
.module-num{font-family:var(--font-body); font-size:13px; color:var(--gold-1); flex:none; font-weight:500}
.module-heading{flex:1; min-width:0}
.module-heading h4{font-family:var(--font-body); font-weight:500; font-size:16px; color:var(--fg)}
.module-heading p{color:var(--muted); font-size:13.5px; margin-top:2px}
.module-chevron{flex:none; color:var(--gold-1); transition:transform .2s; font-size:14px}
.module[open] .module-chevron{transform:rotate(180deg)}
.module-topics{
  padding:2px 22px 22px 22px; margin:0; list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:8px 24px;
  border-top:1px solid var(--border);
}
.module-topics li{color:var(--soft); font-size:14px; padding-top:14px}
@media (max-width: 640px){
  .module-topics{grid-template-columns:1fr}
  .module > summary{padding:16px 18px}
}

/* ---------- 7j. FAQ-акордеон ---------- */
.faq{border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item > summary{
  list-style:none; cursor:pointer; padding:22px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-weight:500; font-size:16.5px; color:var(--fg);
}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item .faq-plus{flex:none; color:var(--gold-1); font-size:20px; font-weight:300; transition:transform .2s}
.faq-item[open] .faq-plus{transform:rotate(45deg)}
.faq-item p{color:var(--soft); padding:0 4px 22px; max-width:820px}

/* ============================================================
   7l. КАТАЛОГ — списки та детальні сторінки (філії / фахівці)
   ============================================================ */

/* шапка внутрішньої сторінки (під фіксованим хедером) */
.page-head{padding-top:calc(64px + clamp(46px,7vw,86px))}
.page-head .h-section{margin-bottom:20px}
.page-lead{max-width:660px; color:var(--soft); font-size:clamp(16px,1.7vw,18px); line-height:1.6}

/* лінк «назад до списку» */
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--muted); font-size:14.5px; text-decoration:none;
  transition:gap .2s, color .2s;
}
.back-link:hover{color:var(--gold-2); gap:14px}
.back-link .arrow{transition:transform .2s}
.back-link:hover .arrow{transform:translateX(-3px)}

/* мітка-локація з піктограмою */
.loc{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:14.5px}
.loc svg{width:15px; height:15px; flex:none; color:var(--gold-1)}

/* ---- сітка-каталог персон ---- */
.dir-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.dir-card{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-elevated), var(--card));
  overflow:hidden; text-decoration:none; color:var(--fg);
  display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
.dir-card:hover{border-color:var(--border-gold); transform:translateY(-4px)}
.dir-photo{aspect-ratio:1/1; overflow:hidden; background:#EFEDE7}
.dir-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s}
.dir-card:hover .dir-photo img{transform:scale(1.05)}
.dir-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.dir-name{font-family:var(--font-body); font-weight:500; font-size:18.5px; letter-spacing:.01em; color:var(--fg)}
.dir-spec{
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:14.5px; font-weight:500;
}
.dir-langs{margin-top:auto; padding-top:6px; color:var(--muted); font-size:13px; letter-spacing:.02em}

/* ---- панель фільтрів ---- */
.filter-bar{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:14px; margin:40px 0 22px}
.field{position:relative; display:flex; flex-direction:column}
.field-search{position:relative}
.field-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none}
.field input, .field select{
  width:100%; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:9px; padding:12px 16px; color:var(--fg);
  font-family:var(--font-body); font-size:14.5px; font-weight:300;
  transition:border-color .2s;
}
.field-search input{padding-left:40px}
.field input::placeholder{color:var(--muted)}
.field input:focus, .field select:focus{outline:none; border-color:var(--border-gold)}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238E8CA0' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px;
}
.field select option{background:var(--bg-elevated); color:var(--fg)}
.result-bar{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap}
.result-count{color:var(--muted); font-size:14.5px}
.result-count b{color:var(--fg); font-weight:500}
.result-reset{background:none; border:none; color:var(--muted); font-size:13.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color .2s}
.result-reset:hover{color:var(--gold-2)}
.dir-empty{text-align:center; color:var(--muted); font-size:18px; padding:70px 0}

/* ---- детальна сторінка персони ---- */
.detail-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start}
.detail-photo{
  position:sticky; top:88px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border-gold); background:#EFEDE7; aspect-ratio:4/5;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.detail-photo img{width:100%; height:100%; object-fit:cover; display:block}
.detail-main{display:flex; flex-direction:column; gap:34px}
.detail-name{margin-bottom:14px}
.detail-head-meta{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.detail-tag{color:var(--gold-1); font-size:14px; letter-spacing:.05em; text-transform:uppercase; font-weight:500}

/* сітка «мета» (диплом, мови, вартість) */
.meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 40px}
.meta-item .meta-label{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.meta-item .meta-val{font-size:16.5px; color:var(--fg); margin-top:6px}
.meta-item.wide{grid-column:1 / -1}
.meta-cost .meta-val{color:var(--gold-2); font-weight:500}

.detail-block h2{font-size:clamp(22px,2.4vw,28px); margin-bottom:16px}
.detail-block p{color:var(--soft); font-size:16px; line-height:1.7; margin-bottom:14px}
.detail-block p:last-child{margin-bottom:0}
.detail-divider{height:1px; background:var(--border); border:none}

.contact-list{display:flex; flex-direction:column; gap:12px}
.contact-list a{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--gold-2); text-decoration:none; font-size:16px; width:fit-content;
  transition:gap .2s;
}
.contact-list a:hover{gap:16px}
.contact-list svg{width:18px; height:18px; color:var(--gold-1); flex:none}

@media (max-width: 900px){
  .dir-grid{grid-template-columns:1fr 1fr; gap:16px}
  .filter-bar{grid-template-columns:1fr 1fr}
  .field-search{grid-column:1 / -1}
  .detail-grid{grid-template-columns:1fr; gap:32px}
  .detail-photo{position:static; max-width:340px; aspect-ratio:1/1}
}
@media (max-width: 560px){
  .dir-grid{grid-template-columns:1fr; gap:16px}
  .filter-bar{grid-template-columns:1fr}
  .meta-grid{grid-template-columns:1fr; gap:20px}
}

/* ============================================================
   7m. ПРОГРАМА НАВЧАННЯ — статистика (6 іконок) + компактний,
   завжди розгорнутий список модулів (світлий дизайн, program-short)
   ============================================================ */
.stats-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:22px 16px}
.stat-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.stat-icon{
  width:52px; height:52px; border-radius:50%; flex:none;
  border:1px solid var(--border-gold); background:rgba(196,166,104,.08);
  display:grid; place-items:center; color:var(--gold-1);
}
.stat-icon svg{width:23px; height:23px}
.stat-num{font-family:var(--font-display); font-size:clamp(20px,2.4vw,26px); color:var(--fg); line-height:1}
.stat-label{font-size:12.5px; color:var(--muted); line-height:1.3}
.section-light .stat-icon{border-color:rgba(122,100,50,.4); background:rgba(122,100,50,.08); color:var(--gold-dark)}
.section-light .stat-num{color:var(--surface-light-fg)}
.section-light .stat-label{color:var(--surface-light-muted)}
@media (max-width:900px){ .stats-grid{grid-template-columns:repeat(3,1fr); gap:26px 14px} }
@media (max-width:560px){ .stats-grid{grid-template-columns:repeat(2,1fr)} }

.prog-group{margin-bottom:30px}
.prog-group-title{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-size:clamp(18px,1.8vw,22px);
  color:var(--surface-light-fg); margin-bottom:16px;
}
.prog-group-title::before{content:""; width:28px; height:1px; background:var(--gold-dark); flex:none}
.prog-module{
  border:1px solid rgba(22,21,31,.1); border-radius:10px; background:#fff;
  padding:16px 20px; margin-bottom:10px;
}
.prog-module-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.prog-num{font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--gold-dark); flex:none}
.prog-title{font-family:var(--font-body); font-weight:600; font-size:15.5px; color:var(--surface-light-fg)}
.prog-desc{font-size:12.5px; color:var(--surface-light-muted); margin:2px 0 12px}
.prog-topics{
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:6px 22px;
  padding-top:12px; border-top:1px solid rgba(22,21,31,.08);
}
.prog-topic{display:flex; gap:8px; font-size:13px; line-height:1.4; color:var(--surface-light-muted)}
.prog-topic-num{color:var(--gold-dark); font-family:var(--font-body); font-size:11px; flex:none; opacity:.7}
@media (max-width:640px){ .prog-topics{grid-template-columns:1fr} }

/* ---------- 8. Контакти / футер ---------- */
.contact{padding:var(--section-gap) 0; text-align:center}
.contact h2{margin-bottom:36px}
.contact-icons{display:flex; gap:40px; justify-content:center}
.contact-icons a{opacity:.85; transition:opacity .2s, transform .2s}
.contact-icons a:hover{opacity:1; transform:translateY(-3px)}
.contact-icons img{width:44px; height:44px}

.site-footer{border-top:1px solid var(--border); padding:38px 0; color:var(--muted); font-size:14px}
.footer-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.site-footer a{color:var(--muted); text-decoration:none; margin-right:22px}
.site-footer a:hover{color:var(--gold-2)}

/* ---------- 9. Респонсив ---------- */
@media (max-width: 1020px){
  nav.main{gap:22px}
}
@media (max-width: 900px){
  :root{--pad-x:20px}
  nav.main{display:none}
  .menu-btn{display:flex}
  .header-cta{font-size:13px; padding:9px 14px}
  .brand-name-full{display:none}
  .brand-name-short{display:inline}

  .grid-2, .grid-3, .split{grid-template-columns:1fr}
  .split{gap:34px}

  .hero-video video{height:62%}
  .hero-in{padding-top:80px}
  .hero-cta .btn{flex:1 1 auto; min-width:200px}

  .card{padding:28px 24px 26px}
  .card-strip::before{left:24px}

  .person{gap:18px}
  .person-photo{width:88px; height:88px}

  .contact-icons{gap:28px}
  .footer-in{flex-direction:column; gap:14px}
}
@media (max-width: 380px){
  .hero-sub{font-size:15px}
  .header-cta{display:none}
}

/* Фокус-точки фото більше не хардкодяться тут: значення живуть у БД
   (site_specialists.PhotoPosY, міграція AddSpecialistPhotoPosY) і рендеряться
   інлайн-стилем object-position у картках, деталях і тизерах. Редагування —
   /uk/specialists/admin-edit та кабінет фахівця /uk/specialists/edit. */