/* =========================================================
   framework.css — HyperBlox Framework landing page
   Reuses style.css / service-providers.css / builder.css shared
   classes (header, footer, .container, .eyebrow, .btn) and adds
   the page-specific sections (Figma node 6437:5219).
   ========================================================= */

/* icon tiles — the official Figma SVGs are pre-tiled 40x40 (background
   chip + glyph baked in), so the container just sizes them. */
.fw-howcard__icon,
.fw-setitem__icon,
.fw-peitem__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.fw-howcard__icon img,
.fw-setitem__icon img,
.fw-peitem__icon img { width: 40px; height: 40px; display: block; }

/* indigo eyebrow variant (How it Works) */
.eyebrow--indigo { color: #2b3990; }

/* -----------------------------------------------------
   HERO
   ----------------------------------------------------- */
.fw-hero {
  position: relative;
  background: #0a0d1a;
  overflow: hidden;
}
.fw-breadcrumb {
  position: relative;
  z-index: 2;
  background: #e5e9ee;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.56);
  padding: 4px 0;
}
.fw-breadcrumb .container { display: flex; align-items: center; gap: 6px; }
.fw-breadcrumb a { color: rgba(0, 0, 0, 0.56); text-decoration: none; }
.fw-breadcrumb__sep { color: rgba(0, 0, 0, 0.4); }
.fw-breadcrumb__current { color: #000; }

.fw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fw-hero__img,
.fw-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 9, 30, 0.92) 0%, rgba(7, 9, 30, 0.55) 34%, rgba(7, 9, 30, 0) 64%),
    linear-gradient(0deg, rgba(7, 9, 30, 0.45) 0%, rgba(7, 9, 30, 0) 45%);
}
.fw-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 611px;
  display: flex;
  align-items: center;
}
.fw-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 592px;
  max-width: 100%;
  padding: 60px 0;
}
.fw-hero__title {
  margin: 0;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  max-width: 575px;
}
.fw-hero__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}
.fw-hero__copy .btn { align-self: flex-start; margin-top: 4px; }

/* -----------------------------------------------------
   THE OPPORTUNITY / Introduction
   ----------------------------------------------------- */
.fw-opp { background: #fff; padding: 100px 0 80px; }
.fw-opp__grid {
  display: grid;
  grid-template-columns: minmax(0, 608px) minmax(0, 608px);
  gap: 24px;
  align-items: end;
}
.fw-opp__copy { display: flex; flex-direction: column; gap: 40px; }
.fw-opp__head { display: flex; flex-direction: column; gap: 12px; }
.fw-opp__head .eyebrow { margin-bottom: 0; }
.fw-opp__body { margin: 0; font-size: 18px; line-height: 1.4; color: #000; }
.fw-opp__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
.fw-mini {
  border: 1px solid #c7ced7;
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fw-mini__icon { display: inline-flex; width: 28px; height: 28px; }
.fw-mini__icon img { width: 28px; height: 28px; display: block; }
/* one line at the 1240px design width (Figma); wraps gracefully below */
.fw-mini__title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; color: #000; white-space: nowrap; }
@media (max-width: 1439px) { .fw-mini__title { white-space: normal; } }
.fw-opp__media { border-radius: 8px; overflow: hidden; aspect-ratio: 608 / 377; }
.fw-opp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -----------------------------------------------------
   THE PILLARS / Build, Deliver and Scale
   ----------------------------------------------------- */
.fw-pillars { background: #f3f3f3; padding: 73px 0 80px; }
.fw-pillars__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 52px; }
.fw-pillars__intro { display: flex; gap: 32px; align-items: flex-start; }
.fw-pillars__title {
  margin: 0;
  flex: 0 0 605px;
  max-width: 605px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  color: #000;
}
.fw-pillars__lede { margin: 0; flex: 1; font-size: 18px; line-height: 1.4; color: #50505e; }
.fw-pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fw-pillar {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 396 / 613;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.fw-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 1, 63, 0.35);
}
.fw-pillar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms ease;
}
.fw-pillar:hover .fw-pillar__img { transform: scale(1.06); }
.fw-pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 1, 63, 0) 35%, rgba(15, 1, 63, 0.9) 100%);
}
.fw-pillar__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

/* Pillar cards reuse the homepage .deliver-card pattern; the expanded
   panel shows a bulleted feature list (per Figma) instead of a paragraph. */
.fw-pillars__grid .deliver-card__body { gap: 14px; padding: 24px 22px 22px; }
.fw-pillars__grid .deliver-card:hover .deliver-card__media,
.fw-pillars__grid .deliver-card:focus-visible .deliver-card__media,
.fw-pillars__grid .deliver-card.is-active .deliver-card__media { height: 200px; }
.deliver-card__points {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-black);
}
.deliver-card__points li { list-style: disc; }

/* -----------------------------------------------------
   HOW IT WORKS / Distributed Execution
   ----------------------------------------------------- */
.fw-how { background: #fff; padding: 60px 0; }
.fw-how__head { margin-bottom: 66px; }
.fw-how__head .eyebrow { margin-bottom: 20px; }
.fw-how__intro { display: flex; gap: 39px; align-items: flex-start; }
.fw-how__title {
  margin: 0;
  flex: 0 0 598px;
  max-width: 598px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  color: #000;
}
.fw-how__lede { margin: 0; flex: 1; font-size: 18px; line-height: 1.4; color: #000; }
.fw-how__diagram { margin-bottom: 66px; }
.fw-how__diagram img { width: 100%; height: auto; display: block; }
.fw-how__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fw-howcard {
  border: 1px solid #dadfe6;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fw-howcard__head { display: flex; align-items: center; gap: 12px; }
.fw-howcard__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.45px;
  color: #181819;
}
.fw-howcard__copy { margin: 0; font-size: 16px; line-height: 1.4; color: #000; }

/* -----------------------------------------------------
   WHAT SETS US APART
   ----------------------------------------------------- */
.fw-sets { background: #f2f3f7; padding: 73px 0; }
.fw-sets__grid {
  display: grid;
  grid-template-columns: minmax(0, 553px) minmax(0, 608px);
  gap: 80px;
  align-items: start;
}
.fw-sets__left { display: flex; flex-direction: column; gap: 40px; }
.fw-sets__left .eyebrow { margin-bottom: -16px; }
.fw-sets__title { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 400; color: #000; }
.fw-sets__title strong { font-weight: 600; }
.fw-sets__media { border-radius: 8px; overflow: hidden; aspect-ratio: 553 / 383; }
.fw-sets__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-sets__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fw-setitem {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
  border-bottom: 1px solid #c4c4c4;
}
.fw-setitem__head { display: flex; align-items: center; gap: 18px; }
.fw-setitem__title { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; color: #000; }
.fw-setitem__copy { margin: 0; font-size: 18px; line-height: 1.4; color: #50505e; }

/* -----------------------------------------------------
   DELIVERY MODEL
   ----------------------------------------------------- */
.fw-delivery { background: #fff; padding: 40px 0; }
.fw-delivery__grid {
  display: grid;
  grid-template-columns: minmax(0, 568px) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.fw-delivery__copy { display: flex; flex-direction: column; gap: 20px; }
.fw-delivery__copy .eyebrow { margin-bottom: 0; }
.fw-delivery__title { margin: 0 0 19px; font-size: 40px; line-height: 1.2; font-weight: 400; color: #000; }
.fw-delivery__title strong { font-weight: 700; }
.fw-delivery__body { margin: 0; font-size: 18px; line-height: 1.4; color: #000; }
.fw-delivery__diagram { display: flex; justify-content: center; }
.fw-delivery__diagram img { width: 100%; max-width: 612px; height: auto; display: block; }

/* -----------------------------------------------------
   PARTNER ENABLEMENT
   ----------------------------------------------------- */
.fw-pe { background: #f3f3f3; padding: 60px 0 80px; }
.fw-pe__head { margin-bottom: 40px; }
.fw-pe__head .eyebrow { margin-bottom: 20px; }
.fw-pe__intro { display: flex; gap: 20px; align-items: flex-start; }
.fw-pe__title { margin: 0; flex: 1; font-size: 40px; line-height: 1.2; font-weight: 400; color: #000; }
.fw-pe__title strong { font-weight: 700; }
.fw-pe__lede { margin: 0; flex: 1; font-size: 18px; line-height: 1.4; color: #000; }
.fw-pe__grid {
  display: grid;
  grid-template-columns: minmax(0, 596px) minmax(0, 608px);
  gap: 41px;
  align-items: start;
  margin-bottom: 60px;
}
.fw-pe__media { border-radius: 12px; overflow: hidden; aspect-ratio: 596 / 465; }
.fw-pe__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-pe__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fw-peitem { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.fw-peitem:last-child { border-bottom: 0; padding-bottom: 0; }
.fw-peitem__head { display: flex; align-items: center; gap: 16px; }
.fw-peitem__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; color: #181819; }
.fw-peitem__copy { margin: 0; font-size: 18px; line-height: 1.4; color: #181819; }

/* stats */
.fw-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1194px; margin: 0 auto; }
.fw-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 24px; position: relative; }
.fw-stat + .fw-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 124px;
  border-left: 1px solid #d1d5dc;
}
.fw-stat__num { margin: 0; font-size: 88px; line-height: 1.2; font-weight: 600; letter-spacing: -0.08em; }
.fw-stat__num--blue { color: #1c62cb; }
.fw-stat__num--dark { color: #10304b; }
.fw-stat__num--purple { color: #662d91; }
.fw-stat__label { margin: 0; font-size: 18px; line-height: 1.4; color: #181819; }

/* -----------------------------------------------------
   CTA banner
   ----------------------------------------------------- */
.fw-cta { background: #fff; padding: 80px 0; }
.fw-cta__panel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 446px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding: 80px 24px;
}
.fw-cta__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fw-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(6px);
  transform: scale(1.08);
}
.fw-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 95%);
}
.fw-cta__text { position: relative; z-index: 1; max-width: 770px; display: flex; flex-direction: column; gap: 12px; }
.fw-cta__title { margin: 0; font-size: 48px; line-height: 1.2; font-weight: 500; color: #fff; }
.fw-cta__copy { margin: 0; font-size: 18px; line-height: 1.4; color: #fff; }
.fw-cta__actions { position: relative; z-index: 1; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }

/* -----------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------- */
@media (max-width: 1024px) {
  .fw-hero__title { font-size: 40px; }
  .fw-opp__grid { grid-template-columns: 1fr; gap: 40px; }
  .fw-pillars__intro { flex-direction: column; gap: 16px; }
  .fw-pillars__title { flex-basis: auto; max-width: none; }
  .fw-how__intro { flex-direction: column; gap: 16px; }
  .fw-how__title { flex-basis: auto; max-width: none; }
  .fw-how__cards { grid-template-columns: 1fr; }
  .fw-sets__grid { grid-template-columns: 1fr; gap: 40px; }
  .fw-delivery__grid { grid-template-columns: 1fr; gap: 40px; }
  .fw-pe__intro { flex-direction: column; gap: 16px; }
  .fw-pe__grid { grid-template-columns: 1fr; gap: 32px; }
  .fw-pe__media { max-width: 596px; }
  .fw-stat__num { font-size: 72px; }
  .fw-cta__title { font-size: 36px; }
}

@media (max-width: 720px) {
  .fw-hero__copy { width: 100%; }
  .fw-hero__title { font-size: 34px; }
  .fw-opp, .fw-pe { padding: 60px 0; }
  .fw-pillars, .fw-sets, .fw-delivery, .fw-how { padding: 60px 0; }
  .fw-opp__cards { grid-template-columns: 1fr; }
  .fw-pillars__grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .fw-pillars__title, .fw-how__title, .fw-sets__title, .fw-delivery__title, .fw-pe__title { font-size: 30px; }
  .fw-stats { grid-template-columns: 1fr; gap: 32px; }
  .fw-stat + .fw-stat::before { display: none; }
  .fw-cta__title { font-size: 30px; }
  .fw-cta__panel { padding: 56px 20px; }
}