:root{
  --bg:#ffffff; --paper:#f8fafc; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --brand:#f59e0b; --brand-2:#f97316; --ok:#16a34a; --err:#dc2626;
  --radius:16px; --shadow-sm:0 6px 16px rgba(2,6,23,.06); --shadow-lg:0 14px 36px rgba(2,6,23,.12);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Inter,Roboto,'Helvetica Neue',Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
img{display:block;max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px}
.brand-block{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.brand i{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 16px rgba(245,158,11,.6)}
.header-contacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:#0f172a}
.header-contacts .sep{opacity:.35}
.phone{color:#0f172a}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:10px;color:#0f172a95}
.nav a:hover{background:#f1f5f9}
.nav a.active {
  border-bottom: 2px solid var(--accent, #ffcc33);
  padding-bottom: 2px;
  color: #fff;
}
.cta{display:inline-block;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#111827;font-weight:800}
@media (max-width:860px){
  .header-wrap{flex-direction:column;align-items:flex-start}
  .brand-block{flex-direction:column;align-items:flex-start;gap:6px}
  .header-contacts{font-size:13px}
}

/* =========================
   HERO BLOCK — контрастна та читабельна версія
   ========================= */

.hero{
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

/* Фонове зображення (через <img class="hero-bg"> у HTML) */
.hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;          /* не заважає клікам по кнопках */
  user-select: none;
}

/* Вуаль: трохи темніша зверху, світліша знизу,
   щоб і фон було видно, і текст був читабельним */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 15, 25, 0.45) 0%,
      rgba(10, 15, 25, 0.30) 40%,
      rgba(255,255,255,0.10) 100%
    );
}

/* Контент */
.hero-inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 56px 0;
  color: #fff;                   /* світлий текст за замовчуванням */
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.hero h1{
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.15;
  color: #ffffff;
}

.hero p{
  max-width: 820px;
  margin: 0 auto 16px;
  color: #f8fafc;                /* трохи “м’якший” за чисто білий */
}

.hero b{ color: #ffffff; font-weight: 700; }

.hero-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Кнопки в hero */
.hero .btn--brand{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color: #111827;
  font-weight: 800;
  border-radius: 12px;
  transition: transform .15s ease, filter .15s ease;
}
.hero .btn--brand:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.hero .btn--ghost{
  border: 1px solid rgba(255,255,255,.75);
  color: #ffffff;
  background: transparent;
  border-radius: 12px;
  transition: background .15s ease, transform .15s ease;
}
.hero .btn--ghost:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* Адаптивність */
@media (max-width: 768px){
  .hero-inner{ padding: 48px 20px; }
  .hero h1{ font-size: 30px; }
  .hero p{ font-size: 16px; }
}

.hero img { aspect-ratio: 16 / 9; object-fit: cover; }


/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:800;transition:transform .08s ease}
.btn:active{transform:translateY(1px)}
.btn--brand{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#111827}
.btn--brand:hover{filter:brightness(1.05)}
.btn--ghost{border:1px solid var(--line);color:#0f172a;background:#fff}
.btn--ghost:hover{background:#f8fafc}

/* Sections / Typography */
.section{background:#f3f4f6} /* світло-сірий фон для читабельності */
.pad{padding:52px 0}
.section h2{margin:0 0 14px;font-size:clamp(20px,3vw,28px)}
.lead{color:#334155}



/* Benefits */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.card h3{margin:2px 0 8px}
.card p{margin:0;color:#334155}

/* Cases (edge-to-edge) */
.grid-cases{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1024px){.grid-cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-cases{grid-template-columns:1fr}}
.case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s, box-shadow .3s, border-color .3s}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:#f59e0b55}
.case.edge figure{margin:0}
.case.edge img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;object-position:center;border-radius:0;background:#f1f5f9;
}
.case .body{padding:14px 16px}
.case .ttl{font-weight:800;margin:0 0 6px}
.case .meta{color:#475569;font-size:14px;margin-bottom:8px}
.case .desc{color:#334155;margin:6px 0 0}
.cases-seo{color:#334155;margin-top:16px}

/* FAQ accordion */
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm)
}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;position:relative
}
.faq summary::marker{display:none}
.faq summary::after{
  content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);opacity:.6;transition:transform .2s ease
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.faq .faq-a{padding:0 16px 14px 16px;color:#334155}

/* ==== BLOG SLIDER (tech gradient) ==== */
.blog-slider {
  position: relative;
  margin: 4rem auto 3rem;
  max-width: 1100px;
  padding: 2.5rem 2rem 2.2rem;
  border-radius: 1.75rem;
  background: radial-gradient(circle at top left, #1e293b 0%, #020617 50%, #020617 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.8);
  overflow: hidden;
}

.blog-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), transparent 60%),
    radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.2), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
}

.blog-slider__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.blog-slider__title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #e5e7eb;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.blog-slider__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-slider__btn {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.blog-slider__btn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.blog-slider__viewport {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  padding-bottom: 0.7rem;
  margin: 0 -1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.blog-slider__track {
  display: flex;
  gap: 1.25rem;
  padding: 0 1rem;
}

.blog-card {
  flex: 0 0 80%;
  max-width: 360px;
  scroll-snap-align: center;
  background: rgba(15, 23, 42, 0.88);
  border-radius: 1.2rem;
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.9);
  text-align: left;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 55%);
  opacity: 0;
  pointer-events: none; /* важливо: не блокуємо кліки по контенту */
  transition: opacity 0.3s ease;
}


.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 1);
  border-color: rgba(56, 189, 248, 0.7);
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-card__tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a5b4fc;
  margin-bottom: 0.35rem;
}

.blog-card__title {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.blog-card__title a {
  color: #e5e7eb;
  text-decoration: none;
}

.blog-card__title a:hover {
  text-decoration: underline;
}

.blog-card__excerpt {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #38bdf8;
  text-decoration: none;
}

.blog-card__link:hover {
  text-decoration: underline;
}

.blog-card__arrow {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.blog-card__link:hover .blog-card__arrow {
  transform: translateX(3px);
}

/* Адаптація для більших екранів */
@media (min-width: 768px) {
  .blog-slider__viewport {
    margin: 0;
  }

  .blog-card {
    flex-basis: 32%;
    max-width: none;
  }
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.service-card {
  border-radius: 12px;
  padding: 1.5rem;
  background: #0b1520;
  border: 1px solid rgba(255,255,255,0.08);
}

.service-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.service-card a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.service-card a:hover {
  border-bottom-color: rgba(255,255,255,0.4);
}

.service-card p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}

/* Form */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){
  .row{grid-template-columns:1fr}
  .btn, input, textarea{font-size:16px}
}
label{font-size:14px;color:#334155;display:block}
input,textarea{
  width:100%;margin-top:6px;padding:12px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#0f172a
}
input[type="file"]{padding:8px 10px}
input::file-selector-button{
  border:none;border-radius:10px;padding:8px 12px;margin-right:10px;background:#f1f5f9;color:#0f172a
}
textarea{resize:vertical;min-height:120px}
.hint{font-size:12px;color:var(--muted)}
.agree{display:flex;align-items:center;gap:10px;margin:12px 0}
.agree input[type="checkbox"]{width:18px;height:18px;margin:0}
#formStatus{margin-top:8px;font-size:14px}
#formStatus.ok{color:var(--ok)}
#formStatus.err{color:var(--err)}
button[disabled]{opacity:.7;cursor:not-allowed}
#delayHint,
#formStatus {
  min-height: 1.5em;      /* резерв місця під текст */
  display: block;
}


/* Footer */
.site-footer{border-top:1px solid var(--line);padding:20px 0;color:#475569;background:#fff}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===== STICKY CTA ===== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.96); /* темний синьо-сірий */
  color: #e2e8f0;
  padding: 8px 0;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.4);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}

.sticky-cta--visible {
  transform: translateY(0);
}

.sticky-cta__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.9rem;
}

.sticky-cta__btn {
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: #f97316; /* можна підлаштувати під твій бренд */
  color: #0f172a;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sticky-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45);
  background: #fb923c;
}

@media (min-width: 900px) {
  .sticky-cta {
    max-width: 420px;
    left: auto;
    right: 24px;
    bottom: 24px;
    border-radius: 999px;
  }
}
/* ===== QUICK ESTIMATE ===== */
.section--shade {
  background: #f8fafc;
}

.estimate {
  margin-top: 1rem;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.estimate__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.estimate label {
  font-size: 0.9rem;
  color: #0f172a;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.estimate select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5f5;
  font-size: 0.9rem;
}

.btn.btn--outline {
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid #0f172a;
  background: #ffffff;
  padding: 7px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn.btn--outline:hover {
  background: #0f172a;
  color: #f9fafb;
}

.estimate__result {
  font-size: 0.9rem;
  color: #1e293b;
  line-height: 1.5;
  padding-top: 4px;
  border-top: 1px dashed #cbd5f5;
}
.case,
.blog-card {
  transition: transform 0.15s ease;
}

.case:hover,
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg); /* без transition — миттєво, але окей */
}

/* ===== SUBNAV (внутрішнє меню-якір) ===== */
.subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  background: #f8fafc; /* світлий фон */
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
}

.subnav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #334155; /* темно-сірий текст */
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.subnav a:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Активний пункт (коли на нього клікнули або при скролі) */
.subnav a.active {
  background: #f97316; /* твій бренд-помаранчевий */
  color: #ffffff;
}

/* Мобільна адаптація */
@media (max-width: 640px) {
  .subnav {
    gap: 8px;
    padding: 8px 6px;
  }
  .subnav a {
    font-size: 0.8rem;
    padding: 5px 10px;
  }
}
/* ===== FEATURE GRID (переваги / можливості) ===== */
.feature-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.feature-item {
  position: relative;
  padding: 12px 14px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--line, #e2e8f0);
  background: #ffffff;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(15,23,42,0.06));
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.feature-item__title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 4px;
}

.feature-item__text {
  display: block;
  font-size: 0.85rem;
  color: #475569;
}

.feature-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15,23,42,0.14));
  border-color: #cbd5f5;
}

.feature-item--active {
  border-color: #f97316;
  background: #fff7ed;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(15,23,42,0.12));
}

.feature-detail {
  margin-top: 0.75rem;
  padding: 10px 12px;
  border-radius: var(--radius, 10px);
  border: 1px dashed #cbd5f5;
  background: #f8fafc;
  font-size: 0.9rem;
  color: #1e293b;
}

/* Для мобільних трохи збільшуємо відступи */
@media (max-width: 640px) {
  .feature-item {
    padding: 10px 12px;
  }
  .feature-detail {
    font-size: 0.85rem;
  }
}
/* ===== FAQ ACCORDION ===== */
.faq {
  margin-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.faq-item {
  border-bottom: 1px solid #e2e8f0;
}

.faq-item__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0f172a;
}

.faq-item__icon {
  margin-left: 12px;
  font-size: 1.1rem;
  color: #64748b;
  transition: transform 0.15s ease;
}

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  font-size: 0.9rem;
  color: #475569;
  padding: 0 4px 0 4px;
}

.faq-item__a-inner {
  padding: 4px 0 10px 0;
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .faq-item__q {
    font-size: 0.9rem;
  }
  .faq-item__a {
    font-size: 0.85rem;
  }
}
/* Блок послуг на головній */
.services__intro {
  max-width: 720px;
}

.services__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .services__layout {
    grid-template-columns: 1fr;
  }
}

/* Трохи стиснути картки під головну */
.feature-grid--services {
  gap: 1rem;
}

.feature-grid--services .feature-item {
  cursor: pointer;
  position: relative;
  padding-bottom: 1.75rem;
}

.feature-item__kicker {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.feature-item__link {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.8;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
}

.feature-item__link:hover {
  opacity: 1;
  border-bottom-style: solid;
}

/* Правий блок опису послуги */
.services__detail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature-detail--services {
  min-height: 120px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.services__hint {
  font-size: 0.85rem;
  opacity: 0.75;
}

.services__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}
/* === Пов’язані статті (related posts) — ізольовані стилі === */
.related-posts {
  background: #f8f8f8;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

.related-posts h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1e293b;
}

.related-posts .blog-slider__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.related-posts .blog-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.related-posts .blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.related-posts .blog-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.related-posts .blog-card__content {
  padding: 1.2rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.related-posts .blog-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  color: #0f172a;
}

.related-posts .blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.related-posts .blog-card__title a:hover {
  color: #f59e0b;
}

.related-posts .blog-card__excerpt {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.45;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.related-posts .blog-card__link {
  font-weight: 600;
  color: #f59e0b;
  text-decoration: none;
  align-self: flex-start;
  transition: color 0.2s ease;
}

.related-posts .blog-card__link:hover {
  color: #d97706;
}

/* Responsive tweaks тільки для цього блоку */
@media (max-width: 768px) {
  .related-posts .blog-slider__track {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .related-posts .blog-card__image {
    height: 200px;
  }
}
/* Фіксовані пропорції карток портфоліо */
.case__media {
  aspect-ratio: 4 / 3;     /* або 3 / 2 — як тобі візуально більше подобається */
  overflow: hidden;
  border-radius: 12px;
}

.case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-card__cover {
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 0 0.75rem 0;
}

.blog-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* --- CWV/CLS tweaks --- */

/* Герой-блок на головній (адаптуй селектор під свій .hero, якщо називається інакше) */
.hero,
.section.hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Картки кейсів / блогу: фіксована область для картинки */
.case figure,
.blog-card figure {
  margin: 0;
  overflow: hidden;
}

.case figure img,
.blog-card figure img,
.blog-card__image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9; /* або 16/9 – підбери під свої прев’ю */
  object-fit: cover;
}

/* Щоб текст/кнопки не стрибали при появі :hover-ефектів */
.case .body,
.blog-card__content {
  min-height: 8rem; /* трохи запасу, можна підіграти */
}

/* --- Anti-CLS для карток переваг --- */
#benefits .cards,
#benefits .feature-grid {
  align-items: stretch;
}

#benefits .card,
#benefits .feature-item {
  min-height: 120px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

.sitemap-section {
  margin-top: 28px;
}

.sitemap-section h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.sitemap-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.sitemap-list li {
  margin-bottom: 4px;
}

.sitemap-list a {
  text-decoration: none;
}

.sitemap-list a:hover {
  text-decoration: underline;
}