/* ============================================================
   home.css — Home page specific styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 80% 10%, var(--lavender-200), transparent 70%),
    radial-gradient(50% 40% at 5% 90%, var(--sky-soft), transparent 70%);
}
.hero .container { position: relative; z-index: 1; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__eyebrow { margin-bottom: 1.2rem; }
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero__title .text-grad { display: inline-block; }
.hero__sub {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  margin-top: 1.3rem;
  max-width: 46ch;
  line-height: 1.5;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 2rem;
}
.hero__trust {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.8rem; color: var(--ink-faint); font-size: var(--fs-sm);
}
.hero__avatars { display: flex; }
.hero__avatars span {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--white);
  margin-left: -12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.85rem;
}
.hero__avatars span:first-child { margin-left: 0; }

/* Hero illustration */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
}
.hero__art svg.hero-scene { width: min(100%, 480px); height: auto; }
.hero__chip {
  position: absolute;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 0.7rem 0.95rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: 0.9rem;
}
.hero__chip svg { width: 22px; height: 22px; }
.hero__chip .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.hero__chip--1 { top: 8%; left: -4%; }
.hero__chip--2 { bottom: 10%; right: -2%; }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__eyebrow { }
  .hero__sub, .hero__title { margin-inline: auto; }
  .hero__actions, .hero__trust { justify-content: center; }
  .hero__art { order: -1; margin-bottom: 1rem; }
  .hero__chip--1 { left: 2%; }
  .hero__chip--2 { right: 2%; }
}

/* ---------- Stat bar ---------- */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: -2.5rem;
  position: relative;
  z-index: 2;
}
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: calc(-0.5 * clamp(1rem,3vw,2rem));
  top: 10%; height: 80%; width: 1px; background: var(--line);
}
.stat__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--purple-600); line-height: 1;
}
.stat__label { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.5rem; }
@media (max-width: 760px) {
  .stat-bar { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .stat:nth-child(odd)::before, .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(even)::before { display: block; }
}
@media (max-width: 420px) {
  .stat-bar { grid-template-columns: 1fr; }
  .stat::before { display: none !important; }
  .stat + .stat { padding-top: 1.4rem; border-top: 1px solid var(--line); }
}

/* ---------- The gap section ---------- */
.gap-art {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--lavender-100), var(--lavender-200));
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; place-items: center;
}
.gap-list { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.gap-item { display: flex; gap: 1rem; align-items: flex-start; }
.gap-item__ic {
  flex: none; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
}
.gap-item__ic svg { width: 26px; height: 26px; }
.gap-item h3 { font-size: 1.12rem; margin-bottom: 0.2rem; }
.gap-item p { font-size: var(--fs-sm); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.pillars .card__icon svg { width: 30px; height: 30px; }
.pillars .link-arrow { margin-top: 1rem; }
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Mini journey ---------- */
.journey {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem; position: relative; margin-top: 1rem;
}
.journey::before {
  content: ""; position: absolute; top: 36px; left: 8%; right: 8%;
  border-top: 3px dashed var(--lavender-300); z-index: 0;
}
.journey__step { text-align: center; position: relative; z-index: 1; }
.journey__dot {
  width: 72px; height: 72px; border-radius: 50%;
  margin: 0 auto 1rem; display: grid; place-items: center;
  background: var(--white); box-shadow: var(--shadow-sm);
  border: 3px solid var(--lavender-200);
}
.journey__dot svg { width: 30px; height: 30px; }
.journey__step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.journey__step p { font-size: var(--fs-sm); margin-inline: auto; max-width: 22ch; }
.journey__num {
  position: absolute; top: -6px; right: 50%; transform: translateX(34px);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--coral); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 0.8rem; display: grid; place-items: center;
}
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .journey::before { display: none; }
}
@media (max-width: 460px) { .journey { grid-template-columns: 1fr; } }

/* ---------- App showcase ---------- */
.app-show__art {
  position: relative; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--purple-500), var(--purple-400));
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3rem);
  overflow: hidden;
}
.app-show__art .blob { opacity: 0.5; }
.app-feats { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.app-feat { display: flex; gap: 0.9rem; align-items: flex-start; }
.app-feat__ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
.app-feat__ic svg { width: 24px; height: 24px; }
.app-feat h3 { font-size: 1.08rem; margin-bottom: 0.15rem; }
.app-feat p { font-size: var(--fs-sm); }

/* (App-screen / phone-UI styles are shared — see components.css) */

/* ---------- Who we help ---------- */
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.who__item { text-align: center; }
.who__item h3 { font-size: 1.1rem; margin-top: 1rem; }
.who__item p { font-size: var(--fs-sm); margin-inline: auto; max-width: 24ch; margin-top: 0.4rem; }
@media (max-width: 880px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .who { grid-template-columns: 1fr; } }

/* ---------- News preview ---------- */
.news-preview-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem;
}

/* ---------- Quote band ---------- */
.quote-band {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  position: relative;
}
.quote-band__mark {
  width: 84px; height: 84px; border-radius: 24px;
  background: var(--lavender-200); color: var(--purple-500);
  display: grid; place-items: center; flex: none;
}
.quote-band__mark svg { width: 44px; height: 44px; }
.quote-band blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink); line-height: 1.35; }
.quote-band cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 700; color: var(--purple-600); font-size: 0.95rem; }
.quote-band cite small { display: block; color: var(--ink-faint); font-weight: 600; }
.quote-band .placeholder-note { position: absolute; top: 12px; right: 16px; }
@media (max-width: 620px) { .quote-band { grid-template-columns: 1fr; text-align: center; } .quote-band__mark { margin-inline: auto; } }

/* Placeholder marker for client-replaceable content */
.placeholder-note {
  font-family: var(--font-body); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--lavender-100);
  border: 1px dashed var(--lavender-300); border-radius: 999px;
  padding: 3px 9px; display: inline-block;
}