/* Landing v5 — dark, quiet, a lot of air. Art lives in section backgrounds;
   set --bg-image per section, the scrim below guarantees text contrast. */

.lp5 {
  --bg: #0a0a0b;
  --fg: #f2f2f0;
  --muted: #8b8b8f;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --surface: rgba(255, 255, 255, 0.028);

  background: var(--bg);
  color: var(--fg);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

.lp5-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- type scale ---------------------------------------------------------- */
.lp5 h1 {
  font-size: clamp(2.15rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 560;
  margin: 0 0 20px;
  max-width: 19ch;
  text-wrap: balance;
}
.lp5 h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 560;
  margin: 0 0 24px;
  max-width: 26ch;
  text-wrap: balance;
}
.lp5 p {
  margin: 0 0 18px;
  max-width: 66ch;
  text-wrap: pretty;
}
.lp5-eyebrow {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 22px;
}
.lp5-slogan {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--fg);
  max-width: 44ch;
  margin-bottom: 14px;
}
.lp5-lead {
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  color: var(--muted);
  max-width: 62ch;
}
.lp5-note {
  font-size: 15px;
  color: var(--muted);
}
.lp5-result {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  border-left: 2px solid var(--line-strong);
  padding-left: 20px;
  margin: 32px 0 0;
}
.lp5 blockquote {
  margin: 32px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

/* --- sections ------------------------------------------------------------ */
.lp5-hero { padding: clamp(72px, 12vh, 132px) 0 clamp(56px, 8vh, 88px); }
.lp5-sec { padding: clamp(64px, 9vh, 104px) 0; border-top: 1px solid var(--line); }
.lp5-strip { padding: 26px 0; border-top: 1px solid var(--line); }
.lp5-final { margin-top: 72px; }

/* --- buttons ------------------------------------------------------------- */
.lp5-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }
.lp5-btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 8px;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 520;
  transition: opacity 0.15s ease;
  white-space: nowrap;
}
.lp5-btn:hover { opacity: 0.86; }
.lp5-btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.lp5-btn--ghost:hover { border-color: var(--fg); opacity: 1; }


/* --- section backgrounds -------------------------------------------------
   The art sits behind the text, so the scrim must guarantee the background
   under the copy regardless of how bright the picture is. Black at 0.78 caps
   a pure-white image at #383838, which keeps #f2f2f0 body text near 10:1.
   Set --bg-image per section when the art lands; without it the section
   simply stays flat black. */
/* Over artwork the scrim can leave the background as light as #383838, where
   the regular muted grey measures 3.45:1 — under the 4.5:1 floor. These
   sections get a lighter token; on flat black it reads 7.9:1. */
.lp5-bg { --muted: #a3a3a7; }

.lp5-bg { position: relative; isolation: isolate; }
.lp5-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
}
.lp5-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dense on the left, where the copy sits, and thin on the right, where the
     subject of the picture is. Under the text the scrim never drops below
     0.86, which caps the background at #262626 — 13.5:1 for body text and
     6:1 for the muted grey. */
  background: linear-gradient(
    to right,
    rgba(10, 10, 11, 0.92) 0%,
    rgba(10, 10, 11, 0.86) 46%,
    rgba(10, 10, 11, 0.55) 72%,
    rgba(10, 10, 11, 0.3) 100%
  );
}

/* Narrow viewports: the copy spans the full width, so the scrim has to be
   even everywhere. */
@media (max-width: 940px) {
  .lp5-bg::after { background: rgba(10, 10, 11, 0.87); }
}
.lp5-bg > .lp5-wrap { position: relative; }

/* Section art. Each picture is dark on its own; the scrim above still caps
   the background under the copy at #383838. */
.lp5-bg[data-bg="hero"] { --bg-image: url("../img/landing/bg-hero.jpg"); }
.lp5-bg[data-bg="how"] { --bg-image: url("../img/landing/bg-how.jpg"); }
.lp5-bg[data-bg="industries"] { --bg-image: url("../img/landing/bg-industries.jpg"); }
.lp5-bg[data-bg="languages"] { --bg-image: url("../img/landing/bg-languages.jpg"); }
.lp5-bg[data-bg="control"] { --bg-image: url("../img/landing/bg-control.jpg"); }

@media (prefers-reduced-transparency: reduce) {
  .lp5-bg::before { display: none; }
}

/* --- chips --------------------------------------------------------------- */
.lp5-chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.lp5-chips li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

/* --- grids --------------------------------------------------------------- */
.lp5-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lp5-grid li { background: var(--bg); padding: 26px 24px; font-size: 16px; }
.lp5-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lp5-grid--3 { grid-template-columns: repeat(3, 1fr); }

.lp5-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp5-cards p { font-size: 15px; margin: 0; color: var(--fg); }


/* --- ordered steps ------------------------------------------------------- */
.lp5-steps { list-style: none; counter-reset: s; padding: 0; margin: 40px 0 0; }
.lp5-steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.lp5-steps li::before {
  content: counter(s, decimal-leading-zero);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding-top: 4px;
}

/* --- plain list ---------------------------------------------------------- */
.lp5-list { list-style: none; padding: 0; margin: 0 0 24px; }
.lp5-list li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 16px; max-width: 70ch; }

/* --- faq ----------------------------------------------------------------- */
.lp5-faq { margin: 0; }
.lp5-faq dt { font-size: 1.05rem; font-weight: 540; padding: 26px 0 8px; border-top: 1px solid var(--line); }
.lp5-faq dd { margin: 0 0 8px; color: var(--muted); max-width: 68ch; }

.lp5-contacts { color: var(--muted); font-size: 15px; }
.lp5-contacts a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.lp5-contacts a:hover { border-bottom-color: var(--fg); }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 940px) {
  .lp5-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lp5-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .lp5-cards { grid-template-columns: repeat(2, 1fr); }
  .lp5-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .lp5 { font-size: 16px; }
  .lp5-wrap { padding: 0 20px; }
  .lp5-grid--4, .lp5-grid--3, .lp5-cards { grid-template-columns: 1fr; }

  .lp5-steps li { grid-template-columns: 32px 1fr; gap: 14px; }
}