/* =========================================================================
   Pharbaco website UI kit — layouts only.
   Tokens, type, chrome (topbar/footer/stats/buttons) all come from
   /colors_and_type.css. Don't redefine them here.
   ========================================================================= */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 40px 0 96px;
  background: var(--pb-ice-soft);
}
.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--container-padding) 64px;
}
.hero-copy { max-width: 760px; }
.hero-display { margin: 0; }
.hero-script { margin: 6px 0 0; }
.hero-sub {
  font-size: 17px; color: var(--pb-gray);
  max-width: 520px; line-height: 1.7;
  margin: 26px 0 34px;
}
.hero-actions { display: flex; gap: 14px; align-items: center; }

/* ---------- CAPABILITIES (uses .pb-stats* from tokens) ---------- */
.caps {
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px var(--container-padding);
}

/* ---------- STORY ---------- */
.story {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--container-padding) 104px;
}
.story-grid {
  display: grid; grid-template-columns: 5fr 6fr;
  gap: 72px; align-items: center;
}
.story-copy h2 { margin-bottom: 24px; }
.story-copy p {
  font-size: 15px; line-height: 1.8; color: var(--pb-gray); margin: 0 0 14px;
}
.story-img-wrap {
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.story-img { width: 100%; height: 100%; object-fit: cover; display: block; }