/* ============================================================
   pages/home.css — стилі головної сторінки
   ============================================================ */

/* ===================== HERO ===================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3.5rem, 8vw, 7rem);
  background: var(--color-surface);
  isolation: isolate;
}

/* М'який mesh-фон */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(40% 45% at 12% 18%, rgba(19, 121, 91, 0.14), transparent 70%),
    radial-gradient(38% 42% at 88% 12%, rgba(30, 69, 117, 0.16), transparent 70%),
    radial-gradient(45% 50% at 78% 88%, rgba(201, 169, 97, 0.12), transparent 70%),
    radial-gradient(35% 40% at 25% 95%, rgba(19, 121, 91, 0.10), transparent 70%);
}
/* Плаваючі розмиті плями */
.hero__shape {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  pointer-events: none;
}
.hero__shape--1 {
  width: 380px; height: 380px;
  background: var(--color-brand-accent);
  top: -120px; left: -80px;
  animation: drift-1 34s ease-in-out infinite;
}
.hero__shape--2 {
  width: 320px; height: 320px;
  background: var(--color-brand-primary-500);
  top: -60px; right: -60px;
  animation: drift-2 28s ease-in-out infinite;
}
.hero__shape--3 {
  width: 300px; height: 300px;
  background: var(--color-brand-gold);
  bottom: -160px; left: 40%;
  opacity: 0.35;
  animation: drift-3 40s ease-in-out infinite;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__content { max-width: 620px; }
.hero h1 {
  margin-top: var(--space-5);
  font-size: var(--fs-hero-h1);
}
.hero h1 .word {
  display: inline-block;
  animation: word-rise 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.055s);
}
.hero h1 .accent { color: var(--color-brand-accent); }
.hero__sub {
  margin-top: var(--space-5);
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--color-ink-muted);
  max-width: 540px;
}
.hero__actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hero__actions .btn--primary { animation: cta-pulse 3.4s var(--ease-standard) infinite; }
.hero__trust {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.hero__trust svg { width: 20px; height: 20px; color: var(--color-brand-accent); flex-shrink: 0; }

/* Скляна картка hero */
.hero__card {
  position: relative;
  background: var(--glass-white-70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.hero__card-head .badge--accent { margin-left: auto; }
.hero__card-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-brand-primary);
  color: #fff;
}
.hero__card-mark svg { width: 24px; height: 24px; }
.hero__card-head b { font-size: var(--fs-body-l); }
.hero__card-head small { display: block; color: var(--color-ink-subtle); font-size: var(--fs-small); }

.hero__card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.hero__card-stats .stat__num { font-size: clamp(2rem, 3vw, 2.5rem); }
.hero__card-stats .stat { text-align: left; }
.hero__card-stats .stat__label { margin-top: var(--space-1); }

.hero__card-list { display: grid; gap: var(--space-3); }
.hero__card-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-ink);
}
.hero__card-list svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--color-brand-accent);
}

@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__card { max-width: 480px; }
}

/* ===================== TRUST-STRIP ===================== */
.trust-strip {
  border-block: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  padding-block: var(--space-6);
}
.trust-strip__label {
  font-size: var(--fs-small);
  color: var(--color-ink-subtle);
  max-width: 200px;
}
.trust-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}
.trust-strip__items .chip {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ===================== НАПРЯМКИ (3 картки) ===================== */
.directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.direction-card {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.direction-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-brand-primary);
  color: #fff;
  margin-bottom: var(--space-5);
}
.direction-card__icon svg { width: 30px; height: 30px; }
.direction-card h3 { margin-bottom: var(--space-2); }
.direction-card > p { color: var(--color-ink-muted); font-size: var(--fs-body); }
.direction-card__list {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-5);
}
.direction-card__list li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-ink-muted);
}
.direction-card__list svg { width: 16px; height: 16px; color: var(--color-brand-accent); flex-shrink: 0; margin-top: 2px; }
.direction-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.direction-card__price { font-size: var(--fs-small); color: var(--color-ink-subtle); }
.direction-card__price b { display: block; font-size: var(--fs-h4); color: var(--color-ink); }

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

/* ===================== СТАТИСТИКА ===================== */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.stats-band .stat__num { color: #fff; }
@media (max-width: 720px) {
  .stats-band { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-4); }
}

/* ===================== ПЕРЕВАГИ ===================== */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.diff-card .feature-card__icon { background: var(--color-brand-primary-50); color: var(--color-brand-primary); }
.diff-card--accent { border: 1px solid var(--color-brand-accent-100); background: var(--color-brand-accent-100); }
.diff-card--accent .feature-card__icon { background: #fff; }
@media (max-width: 920px) { .diff-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .diff-grid { grid-template-columns: 1fr; } }

/* ===================== КЕЙСИ (превʼю) ===================== */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.case-card__top {
  padding: var(--space-6) var(--space-6) 0;
}
.case-card__visual {
  margin: var(--space-5) var(--space-6) 0;
  height: 150px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-primary-500));
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
}
.case-card__visual svg { width: 56px; height: 56px; }
.case-card__body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; flex: 1; }
.case-card h3 { font-size: var(--fs-h4); margin-block: var(--space-2); }
.case-card__body p { font-size: var(--fs-small); color: var(--color-ink-muted); }
.case-card__metric {
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.case-card__metric b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--color-brand-accent);
}
.case-card__metric span { font-size: var(--fs-small); color: var(--color-ink-muted); }
.case-card__link { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
@media (max-width: 880px) { .cases-grid { grid-template-columns: 1fr; } }

/* ===================== КОМАНДА (коротко) ===================== */
.team-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.team-mini__certs {
  display: grid;
  gap: var(--space-4);
}
.team-mini__cert {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.team-mini__cert-badge {
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: rgba(201, 169, 97, 0.14);
  color: var(--color-brand-gold-700);
  font-weight: 600;
}
.team-mini__cert-badge svg { width: 26px; height: 26px; }
.team-mini__cert b { display: block; }
.team-mini__cert span { font-size: var(--fs-small); color: var(--color-ink-muted); }
@media (max-width: 820px) { .team-mini { grid-template-columns: 1fr; } }

/* ===================== FAQ ===================== */
.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.faq-layout__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
@media (max-width: 820px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout__aside { position: static; }
}