/* ============================================================
   HOME PAGE v3 — "From requirements to running pipelines"
   Page-scoped. Loaded only by /index.html, so nothing here can
   affect another page. Everything is prefixed .hp-.
   Colors come from tokens.css; only the coral firewall accent
   (used once, in the Hybrid illustration) is local.
   ============================================================ */

.hp-shell { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .hp-shell { padding: 0 20px; } }

/* The mockup draws the primary CTA in teal #1D9E75. White on that is 3.39:1,
   which fails WCAG AA for 15px text, so this uses the repo's navy .btn-primary
   (16.45:1). To go teal and stay AA, use --color-teal-900 (6.20:1), not teal-600. */

.hp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hp-cta .btn { padding: 14px 24px; font-size: 15px; font-weight: 600; border-radius: 9px; }

/* ---------------------------------------------------------- hero */
.hp-hero { padding: 96px 0 40px; text-align: center; }
.hp-hero__h1 {
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  max-width: 20ch;
  margin: 0 auto;
  color: var(--color-text-primary);
}
/* Block so the two sentences break in the same place at every size. */
.hp-hero__h1 em {
  display: block;
  font-style: italic;
  font-weight: 700;
  color: var(--color-teal-600);
}
.hp-hero__sub {
  font-size: 18px;
  color: var(--color-text-secondary);
  margin: 22px auto 0;
  max-width: 40ch;
}
.hp-hero .hp-cta { margin-top: 34px; }
@media (max-width: 640px) { .hp-hero { padding: 56px 0 32px; } .hp-hero__sub { font-size: 16px; } }

/* ---------------------------------------------------------- timeline */
.hp-timeline {
  position: relative;
  padding-left: 150px;
  /* Everything below is derived from these, so the dot, the line start and
     the terminal cap stay locked together at every breakpoint. */
  --h2-size: clamp(27px, 3.4vw, 40px);
  --phase-top: 96px;
  --num-line: 20px;
  --line-x: 40px;
  --dot: 24px;
  /* centre of the first line of the h2, measured from the top of a phase */
  --dot-y: calc(var(--phase-top) + var(--num-line) + 6px + 0.56 * var(--h2-size));
}
/* Line runs from the centre of dot 01 to the terminal cap, nothing above. */
.hp-timeline::before {
  content: "";
  position: absolute;
  left: var(--line-x);
  top: var(--dot-y);
  bottom: 5px;
  width: 3px;
  background: var(--color-teal-600);
  border-radius: 2px;
}
/* F1: terminal cap closing the line below phase 04. */
.hp-timeline::after {
  content: "";
  position: absolute;
  left: calc(var(--line-x) - 3.5px);
  bottom: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-teal-600);
}
@media (max-width: 920px) {
  .hp-timeline { padding-left: 60px; --line-x: 12px; --dot: 22px; }
}
@media (max-width: 640px) {
  .hp-timeline { --phase-top: 64px; }
}
/* On a phone the rail was spending 60px of a 390px screen on decoration,
   which squeezed every heading into an extra line. Pull it to the edge. */
@media (max-width: 560px) {
  .hp-timeline { padding-left: 30px; --line-x: 5px; --dot: 17px; }
  .hp-timeline::before { width: 2px; }
  .hp-timeline::after  { left: calc(var(--line-x) - 3px); width: 8px; height: 8px; }
}

.hp-phase { position: relative; padding: var(--phase-top) 0 24px; }
@media (max-width: 640px) { .hp-phase { padding-bottom: 16px; } }

.hp-phase__num {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--num-line);
  color: var(--color-teal-900);
  margin: 0;
}
.hp-phase__h {
  position: relative;
  font-size: var(--h2-size);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin: 6px 0 0;
  color: var(--color-text-primary);
}
/* F6: the dot is drawn by the heading itself, so it centres on the first
   line of the h2 and stays put when the heading wraps. */
.hp-phase__h::before,
.hp-phase__h::after {
  content: "";
  position: absolute;
  top: 0.56em;
  transform: translateY(-50%);
  border-radius: 50%;
}
.hp-phase__h::before {
  left: calc(-1 * (150px - var(--line-x)) - var(--dot) / 2 + 1.5px);
  width: var(--dot); height: var(--dot);
  box-sizing: border-box;
  background: var(--color-bg);
  border: 3px solid var(--color-teal-600);
}
.hp-phase__h::after {
  left: calc(-1 * (150px - var(--line-x)) - 4px + 1.5px);
  width: 8px; height: 8px;
  background: var(--color-teal-600);
}
@media (max-width: 920px) {
  .hp-phase__h::before { left: calc(-1 * (60px - var(--line-x)) - var(--dot) / 2 + 1.5px); }
  .hp-phase__h::after  { left: calc(-1 * (60px - var(--line-x)) - 4px + 1.5px); }
}
/* Must follow the 920px block: both match on a phone, so source order decides. */
@media (max-width: 560px) {
  .hp-phase__h::before { left: calc(-1 * (30px - var(--line-x)) - var(--dot) / 2 + 1px); }
  .hp-phase__h::after  { left: calc(-1 * (30px - var(--line-x)) - 3px + 1px); }
}

/* Featured customer above the stats: full-colour logo, divider, story link.
   This one logo is deliberately not muted — it attributes the three numbers
   below it, so it has to read as a name rather than as wallpaper. */
.hp-phase__cust {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 0;
  flex-wrap: wrap;
}
.hp-phase__cust-logo { height: 32px; width: auto; }
.hp-phase__cust-link {
  padding-left: 18px;
  border-left: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-teal-900);
  text-decoration: none;
  white-space: nowrap;
}
.hp-phase__cust-link span { display: inline-block; margin-left: 4px; }
@media (max-width: 480px) {
  .hp-phase__cust { gap: 12px; }
  .hp-phase__cust-logo { height: 26px; }
  .hp-phase__cust-link { padding-left: 0; border-left: 0; }
}

.hp-eng {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-teal-900);
  border: 1.5px dashed var(--color-teal-500);
  border-radius: 999px;
  background: var(--color-bg);
}
.hp-eng svg { width: 14px; height: 14px; flex: none; }

/* ---------------------------------------------------------- hub diagram */
.hp-hub {
  margin-top: 48px;
  background: var(--color-bg-soft);
  border-radius: 24px;
  padding: 36px 28px;
}
.hp-hub__cols {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  margin-bottom: 18px;
}
.hp-hub__body { position: relative; }

/* Curves live behind the pills and never affect layout. */
.hp-hub__wires {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.hp-hub__core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 124px; height: 124px;
  border-radius: 50%;
  background: var(--color-navy-800);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.hp-hub__core::after {
  content: "";
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal-500);
  opacity: 0.5;
}

.hp-hub__pairs {
  position: relative;
  display: grid;
  /* The centre column only has to clear the core circle and the curves.
     The side columns hold the labels, and the longest of them was landing
     within a pixel of its box, so it wrapped on the slightest reflow. */
  /* Asymmetric on purpose: the need labels are short ("dbt", "Clean data")
     and the capability labels are long, so the right column gets the room
     the left one was not using. The centre only has to clear the core. */
  grid-template-columns: minmax(0, 1.12fr) minmax(150px, 1.00fr) minmax(0, 1.33fr);
  row-gap: 14px;
  margin: 0; padding: 0;
  list-style: none;
}
.hp-hub__pairs > li { display: contents; }

.hp-hub__need,
.hp-hub__cap {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--color-bg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.hp-hub__need {
  grid-column: 1;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-primary);
}
.hp-hub__cap {
  grid-column: 3;
  border: 1.5px solid var(--color-teal-600);
  color: var(--color-teal-900);
  text-decoration: none;
}
a.hp-hub__cap:hover { background: var(--color-teal-50); }
/* Step the labels down before the column gets too narrow for the longest
   one, and balance any wrap that still happens so a line never ends up
   holding a single orphaned word. */
@media (max-width: 1200px) { .hp-hub__need, .hp-hub__cap { font-size: 14px; padding: 6px 14px; } }
@media (max-width: 1000px) { .hp-hub__need, .hp-hub__cap { font-size: 13px; padding: 6px 12px; } }

/* Mobile: no curves, no hub, just the pairs as a readable list.
   A phone is too narrow to hold a need and its capability on one line, and
   letting them wrap turned eight pairs into sixteen loose pills with no
   visible relationship. Each pair is now a two-line unit: the need, then
   its capability indented beneath it and joined by an elbow. */
@media (max-width: 760px) {
  .hp-hub { padding: 22px 16px; }
  .hp-hub__cols, .hp-hub__wires, .hp-hub__core { display: none; }
  .hp-hub__pairs { grid-template-columns: 1fr; row-gap: 18px; }
  .hp-hub__pairs > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .hp-hub__need, .hp-hub__cap {
    grid-column: auto;
    min-height: 0;
    font-size: 14px;
    padding: 7px 14px;
  }
  .hp-hub__cap { position: relative; margin-left: 20px; }
  .hp-hub__cap::before {
    content: "";
    position: absolute;
    left: -14px;
    top: -11px;
    bottom: 50%;
    width: 9px;
    border-left: 1.5px solid var(--color-border);
    border-bottom: 1.5px solid var(--color-border);
    border-bottom-left-radius: 5px;
  }
}

/* Link out to the comparison hub, under the diagram. */
.hp-hub__more {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.hp-hub__more a {
  font-weight: 600;
  color: var(--color-teal-900);
  text-decoration: none;
  white-space: nowrap;
}
.hp-hub__more a span { display: inline-block; margin-left: 4px; }

/* ---------------------------------------------------------- build tiles */
.hp-ways {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 920px) { .hp-ways { grid-template-columns: 1fr 1fr; } }

.hp-way {
  display: block;
  text-align: center;
  padding: 30px 16px 28px;
  border-radius: 20px;
  background: var(--color-bg-soft);
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
}
.hp-way:hover { border-color: var(--color-teal-500); }
.hp-way__ic {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color-bg);
  display: grid;
  place-items: center;
}
.hp-way__ic svg { width: 36px; height: 36px; }
.hp-way h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.hp-way p { font-size: 14px; color: var(--color-text-secondary); margin: 2px 0 0; }

.hp-way--opt { background: var(--color-bg); border: 2px dashed var(--color-teal-500); }
.hp-way--opt .hp-way__ic { background: var(--color-teal-50); }
.hp-way--opt h3 { color: var(--color-teal-900); }

/* ---------------------------------------------------------- deploy tiles */
.hp-deploy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 760px) { .hp-deploy { grid-template-columns: 1fr; } }

.hp-dep {
  display: block;
  text-align: center;
  background: var(--color-bg-soft);
  border-radius: 20px;
  padding: 26px 24px 24px;
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
}
.hp-dep:hover { border-color: var(--color-teal-500); }
.hp-dep svg { width: 100%; height: 110px; display: block; }
.hp-dep h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 0; }
.hp-dep p { font-size: 14px; color: var(--color-text-secondary); margin: 0; }

/* ---------------------------------------------------------- stats + logos */
.hp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) { .hp-stats { grid-template-columns: 1fr; } }

.hp-stat__n {
  display: block;
  font-size: clamp(34px, 3.8vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text-primary);
}
.hp-stat__n em { font-style: normal; color: var(--color-teal-600); }

.hp-stat__l { font-size: 15px; color: var(--color-text-secondary); }

/* ---------------------------------------------------------- logo row */
/* F1/F2: six logos inside phase 04, no grid lines, no heading.
   Heights are derived from measured ink, not canvas size. Rendered at a
   uniform 100px these assets have wildly different ink heights — staples 42
   and rhenus 41 against 100 for the rest — because their PNG canvases carry
   heavy vertical padding. A single max-height therefore drew them at half
   the visible size of the others. Each height below is set so the *ink*
   lands at ~22px, with the two stacked lockups (UMG, Raiffeisen) given a
   little more since their height is shared across several elements. */
/* Grid rather than flex-wrap: the column count is explicit, so the row can
   never break into an orphan (flex was giving 5+1 at 1024 and 4+2 at 768). */
.hp-logos {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: start;
  align-items: center;
  gap: 24px 36px;
  margin-top: 40px;
}
@media (max-width: 1100px) {
  .hp-logos { grid-template-columns: repeat(3, auto); gap: 24px 32px; }
}
.hp-logos img {
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.45;
  transition: opacity 0.15s, filter 0.15s;
}
.hp-logos img[data-logo="umg"]        { height: 40px; opacity: 0.55; }
.hp-logos img[data-logo="nbcu"]       { height: 16px; }
.hp-logos img[data-logo="staples"]    { height: 52px; }
.hp-logos img[data-logo="aiwyn"]      { height: 50px; }
.hp-logos img[data-logo="raiffeisen"] { height: 26px; }
.hp-logos img[data-logo="rhenus"]     { height: 54px; }
/* These two carry denser ink at matched height, so they are muted further. */
.hp-logos img[data-logo="nbcu"]       { opacity: 0.42; }
.hp-logos img[data-logo="raiffeisen"] { opacity: 0.36; }

/* Hover restores full colour, matching .trust__logo elsewhere on the site.
   Declared after the per-logo rules above: same specificity, so source order
   is what lets it override their opacities. */
.hp-logos img:hover {
  opacity: 1;
  filter: grayscale(0);
}

.hp-logos__cta {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-teal-900);
  text-decoration: none;
}
.hp-logos__cta span { display: inline-block; margin-left: 4px; }

/* Narrow screens: the timeline indent takes 60px, so the row is sized to
   land as two rows of three inside what is left, with the ink ratios kept. */
@media (max-width: 640px) {
  .hp-logos { gap: 18px 12px; }
  .hp-logos img[data-logo="umg"]        { height: 27px; }
  .hp-logos img[data-logo="nbcu"]       { height: 11px; }
  .hp-logos img[data-logo="staples"]    { height: 34px; }
  .hp-logos img[data-logo="aiwyn"]      { height: 34px; }
  .hp-logos img[data-logo="raiffeisen"] { height: 17px; }
  .hp-logos img[data-logo="rhenus"]     { height: 36px; }
}
@media (max-width: 380px) {
  .hp-logos img[data-logo="umg"]        { height: 24px; }
  .hp-logos img[data-logo="nbcu"]       { height: 10px; }
  .hp-logos img[data-logo="staples"]    { height: 31px; }
  .hp-logos img[data-logo="aiwyn"]      { height: 31px; }
  .hp-logos img[data-logo="raiffeisen"] { height: 15px; }
  .hp-logos img[data-logo="rhenus"]     { height: 33px; }
}

/* ---------------------------------------------------------- trust row */
/* The logo row is the site's existing .trust section (sections.css). Its
   .trust__logo max-width is a fixed 140px, which is wider than a grid cell
   below ~470px and pushes the page into horizontal scroll — a pre-existing
   bug on the old home page. Corrected here, scoped to the only page that
   uses .trust. */
@media (max-width: 560px) {
  .trust__logo { max-width: 100%; }
  .trust__cell { padding: 14px 6px; }
}

/* ---------------------------------------------------------- close */
.hp-end { padding: 140px 0 120px; text-align: center; }
.hp-end__h {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--color-text-primary);
}
.hp-end__h em {
  display: block;
  font-style: italic;
  font-weight: 700;
  color: var(--color-teal-600);
}
.hp-end .hp-cta { margin-top: 36px; }
@media (max-width: 640px) { .hp-end { padding: 88px 0 72px; } }