/* HURAK WEB — невеликі доповнення поверх перенесеного дизайну v2.
   Тут лише те, що додалося в Next-версії. Базові стилі — у styles.css. */

/* Коли анімації вимкнені (config/site.js → animations:false):
   ховаємо суто декоративні елементи, щоб без скрипта вони не «зависали». */
.anim-off .bg-net,
.anim-off .fly,
.anim-off .type-caret { display: none !important; }

/* Картка портфоліо тепер — посилання на окрему сторінку кейса.
   Прибираємо підкреслення й успадковуємо колір. */
.pf-v4__card a.pf-cardlink { text-decoration: none; color: inherit; display: block; }

/* Сторінка кейса */
.case { position: relative; z-index: 1; padding: clamp(90px, 14vh, 150px) 0 80px; }
.case__top { margin-bottom: 26px; }
.case__back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim);
  font: 600 .82rem/1 var(--font-body), sans-serif; text-decoration: none; }
.case__back:hover { color: var(--text); }
.case__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .case__grid { grid-template-columns: 1fr; } }

/* Секція контакту з формою заявки */
.contact { position: relative; z-index: 1; padding: clamp(70px, 11vh, 130px) 0; }
.contact__inner { max-width: 760px; }
.contact__title { font: 700 clamp(2rem, 5vw, 3.4rem)/1.02 var(--font-display), sans-serif;
  text-transform: lowercase; letter-spacing: -.01em; margin: 14px 0 10px; }
.contact__title::first-letter { text-transform: uppercase; }
.contact__lead { color: var(--text-dim); margin: 30px 0 26px; line-height: 1.6; }
.lead-form { display: grid; gap: 14px; }
.lead-form input, .lead-form textarea {
  width: 100%; padding: 14px 16px; border-radius: 0;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  color: var(--text); font: 500 .95rem/1.4 var(--font-body), sans-serif; }
.lead-form input:focus, .lead-form textarea:focus { outline: none;
  border-color: var(--accent); }
.lead-form textarea { min-height: 110px; resize: vertical; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lead-form__row { grid-template-columns: 1fr; } }
.lead-form__msg { font: 600 .85rem/1.4 var(--font-body), sans-serif; min-height: 1.2em; }
.lead-form__msg.is-ok { color: var(--accent); }
.lead-form__msg.is-err { color: #ff6b6b; }

/* Простий футер */
.foot { position: relative; z-index: 1; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  padding: 34px 0; margin-top: 30px; }
.foot__inner { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: flex-start; }
.foot__copy { color: var(--text-dim); font: 500 .82rem/1.4 var(--font-body), sans-serif; text-align: left; }
.foot__br { display: none; }
@media (max-width: 560px) { .foot__br { display: inline; } }

.foot__links { display: flex; gap: 20px; }
.foot__links a { color: var(--text-dim); text-decoration: none; font: 600 .82rem/1 var(--font-body), sans-serif; }
.foot__links a:hover { color: var(--text); }

/* ── Адмінка ─────────────────────────────────────────────── */
.adm, .adm-auth { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto;
  padding: clamp(80px,12vh,120px) 20px 60px; }
.adm-auth { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.adm-card { background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); padding: 26px; }
.adm-login { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.adm-h1 { font: 700 clamp(1.5rem,3vw,2.1rem)/1.1 var(--font-logo), sans-serif; }
.adm-h2 { font: 700 1.2rem/1.2 var(--font-logo), sans-serif; margin-bottom: 16px; }
.adm-muted { color: var(--text-dim); font: 500 .82rem/1.4 var(--font-body), sans-serif; }
.adm-warn { color: #ffcf5b; font: 600 .82rem/1.45 var(--font-body), sans-serif; }
.adm-err { color: #ff6b6b; font: 600 .85rem/1.4 var(--font-body), sans-serif; }
.adm-msg { color: var(--accent); font: 600 .85rem/1.4 var(--font-body), sans-serif; }
.adm-input { width: 100%; padding: 11px 13px; background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); color: var(--text);
  font: 500 .9rem/1.4 var(--font-body), sans-serif; }
.adm-input:focus { outline: none; border-color: var(--accent); }
.adm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.adm-top-actions { display: flex; gap: 10px; }
.adm-tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.adm-tabs button { background: none; border: none; color: var(--text-dim); padding: 10px 14px;
  font: 600 .9rem/1 var(--font-body), sans-serif; cursor: pointer; border-bottom: 2px solid transparent; }
.adm-tabs button.is-active { color: var(--text); border-bottom-color: var(--accent); }
.adm-list { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.adm-item { display: flex; align-items: center; gap: 14px; padding: 12px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.adm-thumb { width: 92px; height: 58px; object-fit: cover; flex: 0 0 auto;
  background: color-mix(in srgb, var(--text) 8%, transparent); }
.adm-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-item-info b { font: 600 .95rem/1.2 var(--font-body), sans-serif; }
.adm-date { font-size: .74rem; }
.adm-item-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.adm-btn-sm { padding: 7px 12px; background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); color: var(--text);
  font: 600 .78rem/1 var(--font-body), sans-serif; cursor: pointer; text-decoration: none; }
.adm-btn-sm:hover { border-color: var(--accent); }
.adm-danger:hover { border-color: #ff6b6b; color: #ff6b6b; }
.adm-form { display: grid; gap: 14px; margin-top: 6px; }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .adm-grid2 { grid-template-columns: 1fr; } }
.adm-field { display: grid; gap: 6px; }
.adm-field > span { font: 600 .78rem/1.2 var(--font-body), sans-serif; color: var(--text-dim); }
.adm-uprow { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: .75rem; }
.adm-check { display: flex; align-items: center; gap: 8px; font: 600 .85rem/1.2 var(--font-body), sans-serif; }
.adm-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ── Сітка портфоліо (2 або 3 колонки) ───────────────────── */
.pf-grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.pf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pf-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pf-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pf-grid--2, .pf-grid--3 { grid-template-columns: 1fr; } }

/* ── Пагінація портфоліо ─────────────────────────────────── */
.pf-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: clamp(28px, 4vw, 46px); }
.pf-pager button { min-width: 42px; height: 42px; padding: 0 12px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  color: var(--text); font: 600 .9rem/1 var(--font-body), sans-serif; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease; }
.pf-pager button:hover:not(:disabled) { border-color: var(--accent); }
.pf-pager__num.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pf-pager button:disabled { opacity: .4; cursor: default; }

/* ── Клікабельні теги (фільтр) ───────────────────────────── */
.pf-tags li { cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.pf-tags li:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pf-tags li a { color: inherit; text-decoration: none; display: inline-block; }

/* ── Банер активного фільтра за тегом ────────────────────── */
.pf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 6px; padding: 12px 0; }
.pf-filter__label { color: var(--text-dim); font: 600 .85rem/1 var(--font-body), sans-serif; }
.pf-filter__tag { background: var(--accent); color: var(--accent-ink);
  font: 700 .85rem/1 var(--font-body), sans-serif; padding: 7px 12px; }
.pf-filter__clear { color: var(--text-dim); text-decoration: none;
  font: 600 .82rem/1 var(--font-body), sans-serif; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  padding: 7px 12px; transition: border-color .2s ease, color .2s ease; }
.pf-filter__clear:hover { border-color: var(--accent); color: var(--text); }
.pf-filter__count { color: var(--text-dim); font: 500 .8rem/1 var(--font-body), sans-serif; margin-left: auto; }

/* Заголовок «Опис» — приглушений (як «Тип»), щоб виділявся лише «Виконана робота» */
.pf-sublabel { font: 600 .66rem/1 var(--font-body), sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }

/* Тег у заголовку «Роботи за тегом #…» — мʼякий жовтуватий, не яскравий */
.work__title-tag { color: color-mix(in srgb, var(--accent) 55%, var(--text)); }

/* ═══ Сторінки «Про мене» та «Послуги» ═══════════════════════ */
.abt-block { position: relative; z-index: 1; padding: clamp(40px, 6vh, 70px) 0; }
.abt-block .work__title { margin-top: 4px; }

/* Статичне сузір'я Скорпіон — декор у секції «Процес». Права межа
   прив'язана до краю .container (не вилазить за ширину контенту сайту),
   зліва навмисно без обмежень — може налазити на текст кроків. wrap
   розтягнутий на всю висоту .container (position:absolute, не впливає
   на layout), а сам SVG всередині — position:sticky на всю висоту
   в'юпорту, тож лишається видимим, поки секція «Процес» прокручується.
   На вужчих екранах ховаємо — там і так нема місця. */
.proc-constellation-wrap { display: none; }
@media (min-width: 1240px) {
  .abt-block .container { position: relative; }
  .proc-constellation-wrap {
    display: block; position: absolute; top: 0; bottom: 0;
    right: 20px; pointer-events: none;
  }
  .proc-constellation {
    position: sticky; top: 0;
    display: block; height: 100vh; width: auto;
    opacity: .3; transform-origin: 50% 50%;
    transform: rotate(-10deg);
    transition: transform .15s linear;
  }
}

/* Інтро */
.abt-intro { position: relative; z-index: 1; padding: clamp(20px,4vh,40px) 0 0; }
.abt-intro__inner { display: block; }
.abt-intro__desklabel { display: block; }
.abt-name { font: 700 clamp(2rem,5vw,3.4rem)/1 var(--font-display), sans-serif;
  text-transform: lowercase; letter-spacing: -.01em; color: var(--text); margin: 8px 0 14px; }
.abt-name::first-letter { text-transform: uppercase; }
.abt-role { color: var(--accent); font: 600 .95rem/1.3 var(--font-body), sans-serif; margin-bottom: 16px; }
.abt-hook { color: color-mix(in srgb, var(--text) 72%, var(--text-dim)); font-weight: 300;
  font-size: clamp(1rem,1.4vw,1.18rem); line-height: 1.6; max-width: 640px; margin-bottom: 24px; }
.abt-hook b { font-weight: 600; color: var(--text); }
.abt-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Історія */
.abt-story { max-width: 760px; display: grid; gap: 14px; margin-top: 16px; }
.abt-story p { color: color-mix(in srgb, var(--text) 68%, var(--text-dim)); font-weight: 300; line-height: 1.7; }
.abt-note { color: var(--accent) !important; font-weight: 600 !important; font-size: .85rem; }

/* Цифри */
.abt-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(14px,2vw,24px); }
@media (max-width: 760px) { .abt-stats { grid-template-columns: repeat(2,1fr); } }
.abt-stat { padding: 22px 18px; background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.abt-stat__num { display: block; font: 700 clamp(1.8rem,3.5vw,2.6rem)/1 var(--font-display), sans-serif; color: var(--accent); }
.abt-stat__lbl { display: block; margin-top: 8px; color: var(--text-dim); font: 500 .82rem/1.4 var(--font-body), sans-serif; }

/* Навички */
.abt-skills { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(18px,3vw,32px); margin-top: 18px; }
@media (max-width: 680px) { .abt-skills { grid-template-columns: 1fr; } }
.abt-skillgroup__title { font: 600 .7rem/1 var(--font-body), sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.abt-skillgroup__list { margin-bottom: 0; }

/* Сертифікати */
.abt-certs { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 18px 0 24px; }
@media (max-width: 820px) { .abt-certs { grid-template-columns: 1fr; } }
.abt-cert { display: flex; align-items: center; gap: 14px; padding: 16px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  text-decoration: none; color: var(--text); transition: border-color .2s ease, transform .2s ease; }
.abt-cert:hover { border-color: var(--accent); transform: translateY(-3px); }
.abt-cert__badge { flex: 0 0 auto; background: var(--red); color: #fff; font: 700 .7rem/1 var(--font-body), sans-serif;
  padding: 7px 9px; letter-spacing: .05em; }
.abt-cert__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.abt-cert__body b { font: 600 .92rem/1.25 var(--font-body), sans-serif; }
.abt-cert__sub { color: var(--text-dim); font: 500 .76rem/1.3 var(--font-body), sans-serif; }
.abt-cert__open { flex: 0 0 auto; color: var(--accent); font: 600 .78rem/1 var(--font-body), sans-serif; }
.abt-courses { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.abt-courses__label { color: var(--text-dim); font: 600 .82rem/1 var(--font-body), sans-serif; }
.abt-courses .pf-tags { margin: 0; }
.abt-edu-extra { color: var(--text-dim); font: 300 .9rem/1.6 var(--font-body), sans-serif; max-width: 760px; }

/* Досвід */
.abt-exp { display: grid; gap: 18px; margin-top: 18px; max-width: 820px; }
.abt-exp__item { padding: 18px 20px; background: color-mix(in srgb, var(--text) 4%, transparent);
  border-left: 2px solid var(--accent); }
.abt-exp__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.abt-exp__head b { font: 600 1.02rem/1.2 var(--font-body), sans-serif; }
.abt-exp__org { color: var(--text-dim); font: 500 .82rem/1.3 var(--font-body), sans-serif; }
.abt-exp__points { list-style: none; display: grid; gap: 6px; }
.abt-exp__points li { color: color-mix(in srgb, var(--text) 66%, var(--text-dim)); font: 300 .9rem/1.5 var(--font-body), sans-serif; padding-left: 16px; position: relative; }
.abt-exp__points li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

/* Мови */
.abt-langs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.abt-lang { padding: 14px 20px; background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); display: flex; flex-direction: column; gap: 4px; }
.abt-lang b { font: 600 .95rem/1 var(--font-body), sans-serif; }
.abt-lang span { color: var(--text-dim); font: 500 .8rem/1 var(--font-body), sans-serif; }

/* Послуги */
.srv-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(14px,2vw,20px); margin-top: 18px; }
@media (max-width: 760px) { .srv-grid { grid-template-columns: 1fr; } }
.srv-card { padding: 24px; background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); transition: border-color .2s ease, transform .2s ease; }
.srv-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.srv-card__title { font: 700 1.15rem/1.2 var(--font-display), sans-serif; text-transform: uppercase; margin-bottom: 10px; }
.srv-card__desc { color: color-mix(in srgb, var(--text) 64%, var(--text-dim)); font: 300 .92rem/1.6 var(--font-body), sans-serif; }
/* Вертикальний таймлайн процесу: помаранчева лінія + точки-ноди */
.proc-time { position: relative; max-width: 760px; margin-top: clamp(26px, 4vh, 46px); padding: 0; list-style: none; }
/* --fill — на .proc-step (не на ::before!), щоб інлайн-стиль з JS
   (public/js/animations.js) міг його перебити через звичайний каскад.
   Якщо оголосити --fill прямо на ::before, він завжди «свій», і
   успадкування від батька зі style.setProperty НЕ спрацьовує. */
.proc-step { position: relative; display: flex; gap: 20px; padding-bottom: clamp(30px, 5vh, 54px); --fill: 100%; }
.proc-step:last-child { padding-bottom: 0; }
.proc-step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; transform: translateX(-50%);
  top: 16px; height: 100%; width: 3px; border-radius: 3px;
  /* Де саме проходить межа «загорілось / ще ні» (0%..100% зверху вниз
     лінії) — читає --fill з батька. Два шари: суцільна червона заливка
     зверху до --fill (перекриває все, коли --fill:100% — дефолт без
     JS/animations:false, деградує гарно), і сірий пунктир знизу, що
     проступає там, де --fill ще не дійшов. */
  background:
    linear-gradient(to bottom, var(--red) var(--fill), transparent var(--fill)),
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--text) 30%, transparent) 0 5px,
      transparent 5px 11px);
}
.proc-step__rail { flex: 0 0 26px; display: flex; justify-content: center; }
.proc-step__dot {
  position: relative; z-index: 1; margin-top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--red);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 14%, transparent),
              0 0 16px color-mix(in srgb, var(--red) 50%, transparent);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
/* Звичайний (ще не «засвічений») стан — клас додається JS-ом на весь крок
   .proc-step при скролі (public/js/animations.js), знімається, коли
   кружечок доскролюється до 60% висоти екрана. Гасить і кружечок, і лінію
   під ним. Без JS/animations:false все лишається в базовому («засвіченому»)
   вигляді вище — деградує гарно. */
.proc-step.is-dim .proc-step__dot {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow: none;
  transform: scale(.86);
}
.proc-step__body { flex: 1; min-width: 0; }
.proc-step__tag {
  display: block; font: 700 clamp(1.8rem,3.5vw,2.6rem)/1 var(--font-display), sans-serif;
  color: var(--accent); letter-spacing: -.01em; margin-bottom: 9px;
}
.proc-step__title {
  display: block; font: 700 clamp(1.05rem, 1.8vw, 1.4rem)/1.2 var(--font-display), sans-serif;
  letter-spacing: -.01em; margin-bottom: 7px;
}
.proc-step__desc { color: var(--text-dim); font: 300 .92rem/1.55 var(--font-body), sans-serif; max-width: 560px; }
.srv-platforms { margin-top: 16px; }

/* Цифри — варіант на 3 колонки */
.abt-stats--3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 680px) { .abt-stats--3 { grid-template-columns: 1fr; } }

/* Галерея сертифікатів (читабельні зображення, клік → PDF) */
.abt-certgallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin: 18px 0 14px; align-items: start; }
@media (max-width: 720px) { .abt-certgallery { grid-template-columns: 1fr; } }
.abt-certimg { display: block; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent); overflow: hidden;
  transition: border-color .2s ease, transform .2s ease; }
.abt-certimg:hover { border-color: var(--accent); transform: translateY(-3px); }
.abt-certimg img { display: block; width: 100%; height: auto; }
.abt-certimg__cap { display: block; padding: 11px 14px; font: 600 .86rem/1.2 var(--font-body), sans-serif;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }

/* Бейджі дипломів Genius.Space (клік → PDF) */
.abt-diplomas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.abt-diplomas a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px;
  text-decoration: none; color: var(--text); font: 600 .82rem/1 var(--font-body), sans-serif;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent); transition: border-color .2s ease, transform .2s ease; }
.abt-diplomas a:hover { border-color: var(--accent); transform: translateY(-2px); }
.abt-diplomas a i { font-style: normal; background: var(--red); color: #fff;
  font: 700 .6rem/1 var(--font-body), sans-serif; padding: 5px 6px; letter-spacing: .04em; }

/* ── Галерея сертифікатів/дипломів (desktop 5 / tablet 3 / mobile 1) ── */
.cert-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 18px 0 16px; }
@media (max-width: 1000px) { .cert-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cert-gallery { grid-template-columns: 1fr; } }
.cert-item { display: block; text-decoration: none; color: var(--text); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  transition: border-color .2s ease, transform .2s ease; }
.cert-item:hover { border-color: var(--accent); transform: translateY(-3px); }
.cert-item__shot { display: block; background: #fff; aspect-ratio: 3 / 4; overflow: hidden; }
.cert-item__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cert-item__cap { display: block; padding: 9px 11px; font: 600 .76rem/1.3 var(--font-body), sans-serif;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }

/* ── Сертифікати: ≥768px = 3 в ряд, <768px = слайдер ── */
.cert-gallery--desk { grid-template-columns: repeat(4, 1fr); }
.cert-gallery--desk .cert-item__shot { aspect-ratio: 595 / 842; }
@media (max-width: 767px) { .cert-gallery--desk { display: none; } }

/* мʼякий фейд знизу фото героя (десктоп) — щоб зріз не був різким */
/* (старий суцільний фейд знизу прибрано — тепер краї затухають через mask на .abt-photo img) */

.cert-slider { display: none; }
@media (max-width: 767px) {
  /* слайдер на всю ширину; стрілки накладаються поверх слайда */
  .cert-slider { display: block; position: relative; margin-top: 16px; }
  .cert-slider__view { overflow: hidden; }
  .cert-slider__track { display: flex; will-change: transform; }
  .cert-slider__slide { flex: 0 0 100%; display: block; text-decoration: none; color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    background: color-mix(in srgb, var(--text) 4%, transparent); }
  .cert-slider__slide .cert-item__shot { aspect-ratio: 595 / 842; background: #fff; }
  .cert-slider__arrow { position: absolute; top: 42%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; cursor: pointer;
    background: color-mix(in srgb, var(--bg, #080c1a) 55%, transparent); backdrop-filter: blur(2px);
    border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
    color: var(--text); font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .cert-slider__arrow:hover { border-color: var(--accent); background: color-mix(in srgb, var(--bg, #080c1a) 70%, transparent); }
  .cert-slider__arrow--prev { left: 6px; }
  .cert-slider__arrow--next { right: 6px; }
  .cert-slider__dots { position: absolute; left: 0; right: 0; bottom: -22px; display: flex; gap: 7px; justify-content: center; }
  .cert-slider__dots span { width: 7px; height: 7px; border-radius: 50%;
    background: color-mix(in srgb, var(--text) 25%, transparent); }
  .cert-slider__dots span.is-active { background: var(--accent); }
}

/* ── Десктоп (≥768): кнопка «Обговорити проєкт» по центру екрана,
      текст вирівняний по лівому краю кнопки ── */
@media (min-width: 768px) {
  .abt-intro__text { max-width: 660px; }
  .abt-cta { justify-content: flex-start; }
  .abt-cta .btn--lg { width: 320px; justify-content: center; }
}

/* Мобільне: довгий текст «Розрахувати вартість сайту» не має вилазити —
   менший padding/шрифт + окремі CTA на всю ширину контейнера (рівні краї). */
@media (max-width: 560px) {
  .btn--lg { padding: 16px 18px; font-size: .94rem; }
  .abt-cta .btn--lg,
  .menu__cta,
  .lead-form .btn--lg { width: 100%; justify-content: center; }
}

/* ── Прямі кнопки месенджерів під формою контакту ── */
.msg-direct { margin-top: 24px; }
.msg-direct__label { display: block; color: var(--text-dim);
  font: 600 .9rem/1.4 var(--font-body), sans-serif; margin-bottom: 12px; }
/* 3 кнопки разом = ширина рядка інпутів; висота — як в інпутів */
.msg-direct__btns { display: flex; gap: 14px; }
.msg-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 10px; box-sizing: border-box;
  font: 700 .92rem/1 var(--font-body), sans-serif; color: #fff; text-decoration: none;
  letter-spacing: .01em; transition: transform .15s ease, filter .2s ease; }
.msg-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.msg-btn--tg { background: #229ED9; }
.msg-btn--wa { background: #25D366; color: #06351b; }
.msg-btn--vb { background: #7360F2; }
@media (max-width: 420px) { .msg-direct__btns { gap: 8px; } .msg-btn { font-size: .82rem; } }