.hp {
  padding-top: 110px;
  color: var(--wc-ink);
  background: var(--wc-paper);
}

.hp-shell {
  width: min(1280px, calc(100% - 64px));
  margin-inline: auto;
}

.hp-hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  gap: 70px;
  align-items: center;
  padding: 70px 0 95px;
}

.hp-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--wc-blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hp-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.hp-title {
  max-width: 700px;
  font-family: var(--font-display);
  font-size: clamp(54px, 6.8vw, 104px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.065em;
}

.hp-title em {
  display: block;
  color: var(--wc-blue);
  font-family: var(--font-serif);
  font-weight: 400;
}

.hp-lede {
  max-width: 600px;
  margin: 34px 0;
  color: var(--wc-muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
}

.hp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hp-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(0,27,83,.1);
  border-radius: 34px;
  background: #fff;
  box-shadow: var(--wc-shadow);
}

.hp-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-visual--contain img {
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
}

.hp-visual__badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  max-width: 300px;
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 15px;
  color: #fff;
  background: rgba(0,27,83,.82);
  backdrop-filter: blur(16px);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: .05em;
}

.hp-strip {
  border-block: 1px solid var(--wc-line);
  background: #fff;
}

.hp-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.hp-stat {
  min-height: 150px;
  padding: 32px;
  border-right: 1px solid var(--wc-line);
}

.hp-stat:last-child { border-right: 0; }
.hp-stat__label {
  color: var(--wc-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hp-stat__value {
  margin-top: 17px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hp-section { padding: 120px 0; }
.hp-section--white { background: #fff; }
.hp-section--dark { color: #fff; background: var(--wc-ink); }

.hp-intro {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  align-items: start;
}

.hp-section__label {
  color: var(--wc-blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hp-heading {
  max-width: 850px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 780;
  line-height: .96;
  letter-spacing: -.055em;
}

.hp-heading em {
  font-family: var(--font-serif);
  font-weight: 400;
}

.hp-copy {
  max-width: 800px;
  margin-top: 30px;
  color: var(--wc-muted);
  font-size: 18px;
  line-height: 1.75;
}

.hp-section--dark .hp-copy { color: rgba(255,255,255,.66); }

.hp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 70px;
}

.hp-feature {
  min-height: 250px;
  padding: 30px;
  border: 1px solid var(--wc-line);
  border-radius: 22px;
  background: rgba(255,255,255,.55);
}

.hp-feature__num {
  color: var(--wc-blue);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
}

.hp-feature h3 {
  margin: 55px 0 15px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.hp-feature p {
  color: var(--wc-muted);
  font-size: 14px;
  line-height: 1.65;
}

.hp-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 70px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 26px;
  overflow: hidden;
}

.hp-flow__step {
  min-height: 250px;
  padding: 30px;
  border-right: 1px solid rgba(255,255,255,.13);
}
.hp-flow__step:last-child { border-right: 0; }
.hp-flow__step span {
  color: var(--wc-blue-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
}
.hp-flow__step h3 {
  margin: 54px 0 14px;
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: -.03em;
}
.hp-flow__step p {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1.65;
}

.hp-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 65px;
}

.hp-fit__card {
  padding: 36px;
  border: 1px solid var(--wc-line);
  border-radius: 24px;
  background: #fff;
}
.hp-fit__card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.04em;
}
.hp-fit__card ul {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  color: var(--wc-muted);
}
.hp-fit__card li::before { content: "✓"; margin-right: 10px; color: var(--wc-blue); }

.hp-note {
  margin-top: 28px;
  padding: 19px 22px;
  border-left: 3px solid var(--wc-blue);
  color: var(--wc-muted);
  background: rgba(13,108,242,.06);
  font-size: 13px;
  line-height: 1.65;
}

.hp-next {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  padding: 75px 0;
}

.hp-next h2 {
  max-width: 720px;
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 66px);
  line-height: .95;
  letter-spacing: -.055em;
}

@media (max-width: 1024px) {
  .hp-hero { grid-template-columns: 1fr; }
  .hp-visual { min-height: 560px; }
  .hp-intro { grid-template-columns: 1fr; gap: 30px; }
  .hp-feature-grid { grid-template-columns: 1fr 1fr; }
  .hp-flow { grid-template-columns: 1fr 1fr; }
  .hp-flow__step:nth-child(2) { border-right: 0; }
  .hp-flow__step:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
}

@media (max-width: 700px) {
  .hp-shell { width: min(calc(100% - 34px), 1280px); }
  .hp { padding-top: 92px; }
  .hp-hero { min-height: 0; padding: 60px 0 75px; gap: 45px; }
  .hp-title { font-size: clamp(52px, 16vw, 76px); }
  .hp-visual { min-height: 420px; border-radius: 25px; }
  .hp-strip__grid { grid-template-columns: 1fr 1fr; }
  .hp-stat:nth-child(2) { border-right: 0; }
  .hp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--wc-line); }
  .hp-section { padding: 85px 0; }
  .hp-feature-grid, .hp-fit { grid-template-columns: 1fr; }
  .hp-flow { grid-template-columns: 1fr; }
  .hp-flow__step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .hp-flow__step:last-child { border-bottom: 0; }
  .hp-next { align-items: flex-start; flex-direction: column; }
}