/* ── Home page styles ─────────────────────────────────────── */

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--white) 60%);
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow: hidden;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(26,82,200,.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; }
}

.hero__eyebrow { margin-bottom: 18px; }

.hero__title {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue-900);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.hero__title span { color: var(--blue-500); }

.hero__desc {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 480px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero__trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-600);
}

/* Hero image */
.hero__img-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.hero__img-blob {
  position: absolute;
  width: 85%; height: 85%;
  background: linear-gradient(135deg, var(--blue-100), var(--blue-200));
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  animation: blobFloat 7s ease-in-out infinite;
}
@keyframes blobFloat {
  0%,100% { border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; transform: translateY(0); }
  50%      { border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; transform: translateY(-10px); }
}
.hero__img {
  position: relative;
  width: 82%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: heroImgFloat 6s ease-in-out infinite;
  object-fit: cover;
  aspect-ratio: 4/5;
}
@keyframes heroImgFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero__float-card {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: white;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-lg);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-800);
  white-space: nowrap;
  animation: floatCard 4s ease-in-out infinite;
}
.hero__float-card--top { top: 10%; left: 0; }
.hero__float-card--bottom { bottom: 12%; right: 0; gap: 10px; animation-delay: -2s; }
@keyframes floatCard {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Category pills */
.cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.cat-pills::-webkit-scrollbar { display: none; }

/* Value section */
.value-section {
  background: var(--blue-900);
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .value-grid { grid-template-columns: 1fr; } }

.value-card {
  padding: 28px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  transition: background var(--transition), transform var(--transition);
}
.value-card:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.value-card__icon {
  width: 52px; height: 52px;
  background: rgba(26,82,200,.25);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-300);
  margin-bottom: 16px;
}
.value-card h4 { color: white; font-size: 1rem; margin-bottom: 8px; }
.value-card p { color: rgba(255,255,255,.55); font-size: 0.875rem; line-height: 1.65; max-width: unset; }

/* Brands strip */
.brands-section {
  padding-block: 40px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.brands-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.brand-pill {
  padding: 8px 20px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-600);
  background: white;
  letter-spacing: .02em;
}