/* ==========================================
   Linkersdo Modular CSS v1.0 — Synchronized with index.css
   FILE: sections.css
   PURPOSE: Section backgrounds & blocks
   ========================================== */
.hero-section {
   color: var(--text-on-dark);
   background: var(--hero-background, linear-gradient(180deg, rgba(51, 179, 204, .8), rgba(228, 229, 234, .5))), var(--hero-bg);
   background-size: cover;
   background-position: center
}

.hero-wrap {
   align-items: center
}

.hero-section h1 {
   color: #fff
}

.hero-section h2 {
   color: #f5f6f7;
   font-weight: 700
}

.kpis-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   padding: 0;
   margin: 16px 0 0;
   list-style: none
}

.kpi {
   border: 1px solid var(--chip-brd);
   background: var(--chip-bg);
   color: var(--chip-fg);
   padding: 8px 12px;
   border-radius: 12px;
   backdrop-filter: saturate(140%) blur(2px)
}

#seo-story {
   background: var(--seo-story-background, linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .92))), var(--seo-bg);
   background-size: cover;
   background-position: center
}



.lite-hero {
   color: #151313;
   background: var(--lite-hero-bg, linear-gradient(180deg, rgba(163, 228, 241, .8), rgba(248, 249, 249, .8))), var(--value-bg);
   background-size: cover;
   background-position: center
}

.venn-art {
   display: flex;
   align-items: center;
   justify-content: center
}

.case-section {
   color: #02176fdf;
   background: var(--case-section-bg, linear-gradient(180deg, rgba(163, 228, 241, .8), rgba(248, 249, 249, .8))), var(--case-bg);
   background-size: cover;
   background-position: center
}

.testimonials-section {
   background: var(--testimonials-section-bg, linear-gradient(180deg, rgba(163, 228, 241, .8), rgba(248, 249, 249, .8))), var(--testimonials-bg);
   background-size: cover;
   background-position: center
}

.testimonials-section .grid {
   justify-content: center;
   align-items: stretch;
   gap: 1.5rem
}

.split-expertise {
   color: #534e4e;
   background: var(--split-expertise-bg, linear-gradient(180deg, rgba(2, 6, 23, .88), rgba(2, 6, 23, .75))), var(--value-bg);
   background-size: cover;
   background-position: center
}

.footer-grid {
   display: grid;
   gap: 24px;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   align-items: flex-start
}


.cta-banner {
  background: var(--cta-banner-bg, linear-gradient(180deg, rgba(39, 62, 161, 0.88), rgba(2, 6, 23, .75))), var(--value-bg);
  color: #fff;
  padding: 64px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.cta-banner h2 {
  color: #fff;
}
.cta-banner p {
  color: #e2e8f0;
}
.cta-banner .btn {
  background: #fff;
  color: var(--brand);
}