/* ==========================================================================
   home.css
   Styles specific to the home page (index.html).
   ========================================================================== */

/* ---- Hero + slider ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__slide.is-active {
  opacity: 1;
  animation: kenburns 7s ease-out both;
}
/* Slide imagery (set here instead of inline styles) — one per business vertical */
.hero__slide--1 { background-image: url("https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1920&q=80"); } /* Finance */
.hero__slide--2 { background-image: url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920&q=80"); } /* Real Estate */
.hero__slide--3 { background-image: url("https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1920&q=80"); } /* Insurance */
.hero__slide--4 { background-image: url("https://images.unsplash.com/photo-1550583724-b2692b85b150?auto=format&fit=crop&w=1920&q=80"); } /* Goat & Dairy */
.hero__slide--5 { background-image: url("https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1920&q=80"); } /* FMCG */
.hero__slide--6 { background-image: url("https://images.unsplash.com/photo-1512069772995-ec65ed45afd6?auto=format&fit=crop&w=1920&q=80"); } /* Herbal */
/* Light-transparency overlay for legibility */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(9, 18, 38, 0.78) 0%, rgba(9, 18, 38, 0.5) 45%, rgba(9, 18, 38, 0.28) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding-block: calc(var(--header-height) + 2rem) 4rem;
}

/* Per-slide content panels, stacked in one grid cell so the tallest
   defines the height (no layout shift as they crossfade). */
.hero__panels { display: grid; }
.hero__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0.7s;
  pointer-events: none;
}
.hero__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(6px);
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

.hero__title {
  font-size: var(--fs-hero);
  color: #fff;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}
.hero__title .accent { color: var(--color-accent); }
.hero__text {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.9);
  max-width: 56ch;
  margin-bottom: var(--space-xl);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

.hero__stats {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--space-2xl);
  flex-wrap: wrap;
}
.hero__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: var(--fw-bold);
  color: #fff;
}
.hero__stat span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); }

/* Slider dots */
.hero__dots {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.6rem;
}
.hero__dot {
  width: 32px; height: 4px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hero__dot.is-active { background: #fff; width: 46px; }

.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Trust strip ---- */
.trust {
  background: linear-gradient(90deg, var(--color-primary-light), #fff 50%, var(--color-secondary-light));
  border-bottom: 1px solid var(--color-border-soft);
  padding-block: var(--space-lg);
}
.trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.trust__label { font-size: var(--fs-sm); color: var(--color-text-light); font-weight: var(--fw-medium); }
.trust__items { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem); }
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-size: var(--fs-sm);
}
.trust__item i { color: var(--color-secondary); }

/* ---- About preview ---- */
.about-preview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-preview__media { position: relative; }
.about-preview__img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}
.about-preview__badge {
  position: absolute;
  right: -18px;
  bottom: 32px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 240px;
}
.about-preview__badge .icon-badge { width: 48px; height: 48px; font-size: 1.15rem; }
.about-preview__badge strong { display: block; font-family: var(--font-heading); font-size: 1.1rem; }
.about-preview__badge span { font-size: var(--fs-xs); color: var(--color-text-light); }

.about-preview__list { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xl); }
.about-preview__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.about-preview__list i {
  color: var(--color-secondary);
  margin-top: 0.25rem;
  flex: none;
}
.about-preview__list strong { font-family: var(--font-heading); font-weight: var(--fw-semibold); }

/* ---- Counters ---- */
.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.counter {
  text-align: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-top: 3px solid var(--color-primary);
}
.counters .counter:nth-child(1) { background: var(--color-primary-light); border-top-color: var(--color-primary); }
.counters .counter:nth-child(2) { background: var(--color-secondary-light); border-top-color: var(--color-secondary); }
.counters .counter:nth-child(2) .counter__num { color: var(--color-secondary); }
.counters .counter:nth-child(3) { background: var(--color-accent-light); border-top-color: var(--color-accent); }
.counters .counter:nth-child(3) .counter__num { color: var(--color-accent-dark); }
.counters .counter:nth-child(4) { background: var(--color-primary-light); border-top-color: var(--color-primary); }
.counter__num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
}
.counter__num .suffix { color: var(--color-accent); }
.counter__label { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--color-text-light); }

/* ---- Product cards ---- */
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.products__grid .product-card:nth-child(1) { border-top-color: var(--color-secondary); }
.products__grid .product-card:nth-child(2) { border-top-color: var(--color-primary); }
.products__grid .product-card:nth-child(3) { border-top-color: var(--color-accent); }
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.product-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.08); }
.product-card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-family: var(--font-heading);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.product-card__body { padding: var(--space-lg); display: flex; flex-direction: column; flex: 1; }
.product-card__title { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.product-card__text { color: var(--color-text-light); font-size: var(--fs-sm); margin-bottom: var(--space-lg); }
.product-card .btn--link { margin-top: auto; }

/* ---- Service cards ---- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.service-card {
  position: relative;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.services__grid .service-card:nth-child(1) { background: var(--color-primary-light); }
.services__grid .service-card:nth-child(2) { background: var(--color-secondary-light); }
.services__grid .service-card:nth-child(2)::before { background: linear-gradient(90deg, var(--color-secondary), var(--color-accent)); }
.services__grid .service-card:nth-child(3) { background: var(--color-accent-light); }
.services__grid .service-card:nth-child(3)::before { background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card__title { font-size: var(--fs-h3); margin: var(--space-md) 0 0.5rem; }
.service-card__text { color: var(--color-text-light); font-size: var(--fs-sm); }
.service-card__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-lg);
}

/* ---- Why choose us ---- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.why-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.why__grid .why-card:nth-child(3n+1) { background: var(--color-primary-light); border-color: #d9e6ff; }
.why__grid .why-card:nth-child(3n+2) { background: var(--color-secondary-light); border-color: #d3efdd; }
.why__grid .why-card:nth-child(3n+2) .icon-badge { color: var(--color-secondary-dark); background: #d3efdd; }
.why__grid .why-card:nth-child(3n+3) { background: var(--color-accent-light); border-color: #f0e6c4; }
.why__grid .why-card:nth-child(3n+3) .icon-badge { color: var(--color-accent-dark); background: #f2e7c2; }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.why-card__title { font-size: 1.15rem; margin: var(--space-md) 0 0.4rem; }
.why-card__text { color: var(--color-text-light); font-size: var(--fs-sm); margin: 0; }

/* ---- Process timeline ---- */
.process__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.process__timeline::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.process-step__num {
  width: 58px; height: 58px;
  margin: 0 auto var(--space-md);
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  color: #fff;
  background: var(--color-primary);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.process-step:nth-child(2) .process-step__num { background: #2f74f0; }
.process-step:nth-child(3) .process-step__num { background: var(--color-secondary); }
.process-step:nth-child(4) .process-step__num { background: #2aa35a; }
.process-step:nth-child(5) .process-step__num { background: var(--color-accent-dark); }
.process-step__title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.process-step__text { font-size: var(--fs-sm); color: var(--color-text-light); margin: 0; }

/* ---- Testimonials ---- */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.testimonial {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, var(--color-primary-light));
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.testimonials__grid .testimonial:nth-child(2) { background: linear-gradient(180deg, #fff, var(--color-secondary-light)); border-left-color: var(--color-secondary); }
.testimonials__grid .testimonial:nth-child(3) { background: linear-gradient(180deg, #fff, var(--color-accent-light)); border-left-color: var(--color-accent); }
.testimonial__stars { color: var(--color-accent); margin-bottom: var(--space-md); letter-spacing: 2px; }
.testimonial__quote { font-size: 1.02rem; color: var(--color-text); margin: 10px; }
.testimonial__author { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.testimonial__role { font-size: var(--fs-xs); color: var(--color-text-light); }

/* ---- CTA band ---- */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-primary), #1247c9 55%, var(--color-secondary));
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta__inner { position: relative; z-index: 2; max-width: 680px; margin-inline: auto; }
.cta__title { color: #fff; font-size: var(--fs-h2); }
.cta__text { color: rgba(255, 255, 255, 0.9); font-size: var(--fs-lead); margin-bottom: var(--space-xl); }
.cta__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.cta__wrap { padding-block: var(--section-padding-y); }

/* ---- Home contact section ---- */
.home-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

/* ==========================================================================
   Dark & colourful accents
   ========================================================================== */

/* --- Stat counters as dark cards (pop against the white section) --- */
.counters .counter,
.counters .counter:nth-child(1),
.counters .counter:nth-child(2),
.counters .counter:nth-child(3),
.counters .counter:nth-child(4) {
  background: linear-gradient(160deg, #10203f 0%, #0c1730 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}
.counters .counter:nth-child(1) { border-top-color: var(--color-primary); }
.counters .counter:nth-child(2) { border-top-color: var(--color-secondary); }
.counters .counter:nth-child(3) { border-top-color: var(--color-accent); }
.counters .counter:nth-child(4) { border-top-color: #7c5cff; }
.counters .counter__num { color: #ffffff; }
.counters .counter:nth-child(1) .counter__num { color: #6ea8ff; }
.counters .counter:nth-child(2) .counter__num { color: #4ade80; }
.counters .counter:nth-child(3) .counter__num { color: var(--color-accent); }
.counters .counter:nth-child(4) .counter__num { color: #b39bff; }
.counters .counter__num .suffix { color: inherit; }
.counters .counter__label { color: rgba(255, 255, 255, 0.72); }

/* --- Why Choose Us: dark, eye-catching band with glass cards --- */
.section[aria-labelledby="why-title"] {
  background: linear-gradient(135deg, #0b1a37 0%, #10264f 55%, #0a2246 100%);
  position: relative;
}
.section[aria-labelledby="why-title"] .section__title { color: #fff; }
.section[aria-labelledby="why-title"] .section__subtitle { color: rgba(255, 255, 255, 0.78); }

.section[aria-labelledby="why-title"] .why-card,
.why__grid .why-card:nth-child(3n+1),
.why__grid .why-card:nth-child(3n+2),
.why__grid .why-card:nth-child(3n+3) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--color-accent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.section[aria-labelledby="why-title"] .why-card:nth-child(3n+1) { border-top-color: var(--color-primary); }
.section[aria-labelledby="why-title"] .why-card:nth-child(3n+2) { border-top-color: var(--color-secondary); }
.section[aria-labelledby="why-title"] .why-card:nth-child(3n+3) { border-top-color: var(--color-accent); }
.section[aria-labelledby="why-title"] .why-card:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-6px);
}
.section[aria-labelledby="why-title"] .why-card__title { color: #fff; }
.section[aria-labelledby="why-title"] .why-card__text { color: rgba(255, 255, 255, 0.72); }