/* home.css — homepage specific */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(51,168,245,.22), transparent 62%),
    radial-gradient(600px 400px at 5% 110%, rgba(51,168,245,.14), transparent 60%),
    #fff;
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-block: 1rem 1.1rem; }
.hero h1 em { font-style: normal; background: var(--gradient-sky); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 46ch; }
.hero .btn-row { margin-top: 1.8rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.4rem; }
.hero__meta div strong { display: block; font-size: 1.6rem; font-weight: 900; }
.hero__meta div span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }

.hero__media { position: relative; }
.hero__media .ph { aspect-ratio: 4/5; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.hero__badge {
  position: absolute; left: -18px; bottom: 28px; background: #fff; border-radius: var(--radius);
  padding: 1rem 1.2rem; box-shadow: var(--shadow); border: 1px solid var(--border); max-width: 250px;
}
.hero__badge strong { display: block; font-size: 1.4rem; }
.hero__badge span { font-size: .76rem; color: var(--fg-muted); }

.mission-band { position: relative; overflow: hidden; }
.mission-band__quote { font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.25; max-width: 24ch; }
.mission-band blockquote { border-left: 3px solid var(--kkf-sky); padding-left: 1.4rem; }

.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; }
.value-card { position: relative; overflow: hidden; }
.value-card__index {
  position: absolute; right: 1rem; top: .4rem; font-size: 3.4rem; font-weight: 900;
  color: rgba(51,168,245,.14); line-height: 1;
}

.spark__quote { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; color: var(--kkf-ink); }

.news-card { display: grid; gap: 1rem; }
.news-card .ph { aspect-ratio: 16/10; }
.news-card time { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kkf-sky-dark); font-weight: 700; }

.cta-band {
  background: var(--gradient-sky);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 5vw, 3.4rem);
  display: grid; grid-template-columns: 1.4fr auto; gap: 1.6rem; align-items: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); margin-top: .6rem; }

.audience-card { display: grid; gap: .8rem; }
.audience-card ol { display: grid; gap: .35rem; counter-reset: step; }
.audience-card ol li {
  font-size: .92rem; color: var(--fg-muted); display: flex; gap: .55rem; align-items: center;
}
.audience-card ol li::before {
  counter-increment: step; content: counter(step);
  width: 22px; height: 22px; border-radius: 50%; background: var(--kkf-sky-tint);
  color: var(--kkf-sky-dark); font-size: .72rem; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto;
}

/* --- Image hero with overlay --- */
.hero--image {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  background: var(--kkf-black);
}
.hero--image .hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(11,13,16,.92) 0%, rgba(11,13,16,.72) 45%, rgba(11,13,16,.35) 100%),
    radial-gradient(700px 420px at 85% 10%, rgba(51,168,245,.35), transparent 65%);
}
.hero__content { position: relative; z-index: 2; max-width: 62ch; color: #fff; }
.hero--image h1 { color: #fff; margin-block: 1rem 1.1rem; }
.hero--image h1 em { font-style: normal; background: linear-gradient(90deg, #7FC9FA, #33A8F5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero--image .hero__sub { color: rgba(255,255,255,.86); max-width: 52ch; }
.eyebrow--light { color: var(--kkf-sky-light); }
.hero__note { margin-top: 1.6rem; font-size: .72rem; color: rgba(255,255,255,.5); }
.hero__note code { color: rgba(255,255,255,.72); }
.journey--hero {
  margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  color: rgba(255,255,255,.8);
}
.journey--hero span {
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .38rem .9rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; backdrop-filter: blur(4px);
  background: rgba(255,255,255,.06);
}
.journey--hero span.is-accent { border-color: var(--kkf-sky); color: #fff; background: rgba(51,168,245,.22); }
.journey--hero i { font-style: normal; color: var(--kkf-sky-light); }

/* --- Impact at a glance --- */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.2rem; text-align: center; }
.glance__item { display: grid; gap: .3rem; justify-items: center; }
.glance__icon { font-size: 1.7rem; }
.glance__item strong {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem); font-weight: 900; line-height: 1;
  background: var(--gradient-sky); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glance__label { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--fg-muted); }
@media (max-width: 860px) { .glance { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px) { .hero--image { min-height: 0; } }