:root {
  --ink: #07111d;
  --navy: #06121f;
  --accent: #2b4bcc;
  --accent-hover: #4361d7;
  --accent-light: #a8b4e6;
  --green: #34a66b;
  --amber: #e0a526;
  --red: #d6604d;
  --paper: #f5f8fb;
  --line: #dfe6ed;
  --muted: #5e7186;
  --white: #fff;
  --shadow: 0 24px 80px rgba(4, 18, 35, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  background: #fff;
  overflow-x: hidden;
}

button,
a,
input,
select {
  font: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

.wrap {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
}

.eyebrow {
  font: 700 12px/1 "Manrope";
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

h1,
h2,
h3 {
  font-family: "Manrope", sans-serif;
  letter-spacing: -0.045em;
  margin: 0;
}

h2 {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.02;
}

.section {
  padding: 112px 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}

.section-head p {
  max-width: 430px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

.dark {
  background: var(--navy);
  color: #fff;
}

.grid-glow {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  color: #fff;
}

.nav {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.brand {
  font: 800 25px "Manrope";
  letter-spacing: -0.05em;
}

.brand b {
  color: var(--accent);
}

.navlinks {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: #b9c4d0;
}

.navlinks a:hover {
  color: #fff;
}

.btn {
  border: 0;
  border-radius: 9px;
  padding: 14px 20px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 30px rgba(43, 75, 204, 0.32);
}

.btn-primary:hover {
  background: #4361d7;
}

.btn-secondary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

.btn-light {
  background: #fff;
  color: var(--ink);
}

.menu {
  display: none;
  background: none;
  color: #fff;
  border: 0;
  font-size: 26px;
}

.hero {
  min-height: 850px;
  padding: 150px 0 86px;
  display: flex;
  align-items: center;
  position: relative;
  background:
    radial-gradient(
      circle at 73% 30%,
      rgba(43, 75, 204, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 20% 70%,
      rgba(168, 180, 230, 0.08),
      transparent 25%
    ),
    var(--navy);
  color: #fff;
}

.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4361d7, transparent);
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 72px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(56px, 6.5vw, 84px);
  line-height: 0.98;
  max-width: 650px;
}

.hero h1 span {
  color: #a8b4e6;
}

.hero-copy > p {
  font-size: 19px;
  line-height: 1.6;
  color: #b6c3d2;
  max-width: 560px;
  margin: 28px 0 32px;
}

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

.micro {
  display: flex;
  gap: 22px;
  color: #8ea0b5;
  font-size: 12px;
  margin-top: 22px;
}

.micro span:before {
  content: "✓";
  color: var(--green);
  margin-right: 7px;
}

.trustline {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}

.trustline .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #72839a;
  font: 600 12px "Manrope";
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.systems {
  display: flex;
  gap: 26px;
  align-items: center;
  color: #b6c1ce;
}

.systems b {
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.console {
  background: linear-gradient(180deg, #0e2238, #081727);
  border: 1px solid #28415a;
  border-radius: 18px;
  box-shadow: 0 45px 100px rgba(0, 0, 0, 0.44);
  overflow: hidden;
  position: relative;
}

.console-top {
  height: 48px;
  border-bottom: 1px solid #24384d;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 7px;
  color: #8fa1b4;
  font-size: 12px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40566d;
}

.live {
  margin-left: auto;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(50, 213, 131, 0.6);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(50, 213, 131, 0);
  }
}

.console-body {
  padding: 24px;
}

.console-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 20px;
}

.console-title h3 {
  font-size: 20px;
}

.status {
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 99px;
  background: rgba(50, 213, 131, 0.12);
  color: var(--green);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.kpi {
  background: #102943;
  border: 1px solid #203c56;
  border-radius: 10px;
  padding: 13px;
}

.kpi small {
  display: block;
  color: #8094aa;
  font-size: 10px;
  margin-bottom: 8px;
}

.kpi strong {
  font: 700 21px "Manrope";
}

.kpi em {
  font-style: normal;
  color: var(--green);
  font-size: 10px;
}

.incident {
  background: #0a1a2b;
  border: 1px solid #253a50;
  border-radius: 12px;
  padding: 16px;
}

.order {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}

.order strong {
  font-size: 13px;
}

.order .critical {
  margin-left: auto;
  color: var(--red);
  font-size: 10px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.event {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 9px;
  align-items: center;
  font-size: 12px;
  color: #b8c5d2;
}

.event i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--green);
  position: relative;
}

.event i:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  background: #29435d;
  top: 14px;
  left: 5px;
}

.event:last-child i:after {
  display: none;
}

.event.fail i {
  border-color: var(--red);
}

.event.warn i {
  border-color: var(--amber);
}

.event time {
  font-size: 10px;
  color: #65798e;
}

.spark {
  position: absolute;
  right: -55px;
  bottom: -55px;
  width: 180px;
  height: 180px;
  background: radial-gradient(
    circle,
    rgba(43, 75, 204, 0.22),
    transparent 65%
  );
  pointer-events: none;
}

.proof {
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.proof .wrap {
  padding: 24px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.proof-item {
  padding: 8px 26px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.proof-item:first-child {
  padding-left: 0;
}

.proof-item:last-child {
  border: 0;
}

.proof-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef3ff;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.proof-item b {
  font: 700 14px "Manrope";
  display: block;
}

.proof-item small {
  color: var(--muted);
}

.pain {
  background: var(--paper);
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.pain-item {
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 150px;
}

.pain-item:nth-child(3n) {
  border-right: 0;
}

.pain-item:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.pain-ico {
  width: 34px;
  height: 34px;
  color: var(--red);
  font-size: 24px;
  margin-bottom: 20px;
}

.pain-item h3 {
  font-size: 18px;
  margin-bottom: 7px;
}

.pain-item p {
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
  font-size: 14px;
}

.cost {
  background: linear-gradient(135deg, #081525, #07101c);
  color: #fff;
}

.calc {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.calc-panel,
.cost-output {
  border: 1px solid #243a50;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 18px;
  padding: 30px;
}

.sliders {
  display: grid;
  gap: 28px;
}

.range-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #b7c5d4;
}

.range-head strong {
  color: #fff;
  font-size: 18px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.formula {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: center;
  text-align: center;
}

.formula div {
  background: #0f2338;
  border: 1px solid #243d56;
  padding: 18px 8px;
  border-radius: 11px;
}

.formula span {
  display: block;
  font: 700 27px "Manrope";
}

.formula small {
  color: #8ea0b4;
}

.formula b {
  color: #6f8298;
}

.cost-output {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    145deg,
    rgba(43, 75, 204, 0.18),
    rgba(255, 255, 255, 0.03)
  );
}

.cost-output small {
  color: #9babc0;
}

.cost-output strong {
  font: 800 clamp(44px, 5vw, 68px) "Manrope";
  letter-spacing: -0.06em;
}

.cost-output p {
  color: #b8c6d4;
  line-height: 1.5;
}

.loss-bars {
  display: flex;
  gap: 6px;
  align-items: end;
  height: 72px;
}

.loss-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--red), #a82c3e);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
}

.compare-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  background: #fff;
}

.compare-card.clust {
  background: var(--navy);
  color: #fff;
  border-color: #193655;
  box-shadow: var(--shadow);
}

.compare-card h3 {
  font-size: 26px;
  margin-bottom: 28px;
}

.compare-flow {
  display: grid;
  gap: 12px;
}

.cf-row {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
}

.clust .cf-row {
  border-color: #24415e;
  background: #0d2237;
}

.cf-row i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

.clust .cf-row i {
  background: var(--green);
}

.versus {
  display: grid;
  place-items: center;
  font: 700 12px "Manrope";
  color: #8b9aaa;
}

.compare-note {
  margin-top: 25px;
  font: 700 17px "Manrope";
  color: var(--muted);
}

.clust .compare-note {
  color: var(--accent-light);
}

.orderflow {
  position: relative;
}

.flow-stage {
  background: #081727;
  border: 1px solid #223b54;
  border-radius: 22px;
  padding: 44px;
  box-shadow: var(--shadow);
}

.flowline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

.flowline:before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 36px;
  height: 2px;
  background: #203f5d;
}

.step {
  position: relative;
  text-align: center;
  opacity: 0.38;
}

.step.active,
.step.done {
  opacity: 1;
}

.step-circle {
  width: 74px;
  height: 74px;
  margin: 0 auto 17px;
  border-radius: 50%;
  border: 1px solid #31506e;
  background: #0d243a;
  display: grid;
  place-items: center;
  font-size: 23px;
  position: relative;
  z-index: 1;
}

.step.active .step-circle {
  border-color: var(--accent);
  box-shadow:
    0 0 0 6px rgba(43, 75, 204, 0.13),
    0 0 32px rgba(43, 75, 204, 0.35);
}

.step.done .step-circle {
  border-color: var(--green);
  color: var(--green);
}

.step.fail.active .step-circle {
  border-color: var(--red);
  color: var(--red);
  box-shadow:
    0 0 0 6px rgba(249, 112, 102, 0.12),
    0 0 32px rgba(249, 112, 102, 0.3);
}

.step h3 {
  font-size: 14px;
  letter-spacing: -0.02em;
}

.step small {
  color: #7f93a8;
}

.flow-status {
  text-align: center;
  margin-top: 34px;
  color: #9cb0c4;
  font-size: 13px;
}

.flow-status b {
  color: var(--green);
}

.flow-controls {
  text-align: center;
  margin-top: 18px;
}

.play {
  background: transparent;
  color: #fff;
  border: 1px solid #29465f;
  border-radius: 99px;
  padding: 9px 14px;
  cursor: pointer;
}

.layer {
  background: var(--paper);
}

.ecosystem {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 22px;
  align-items: center;
}

.system-stack {
  display: grid;
  gap: 12px;
}

.system-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.sysmark {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  background: #eef2f7;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.core {
  background: var(--navy);
  color: #fff;
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
}

.core:before,
.core:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 23px;
  border-top: 2px dashed #8ea1b4;
}

.core:before {
  right: 100%;
}

.core:after {
  left: 100%;
}

.core-logo {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: var(--accent);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font: 800 25px "Manrope";
}

.core h3 {
  font-size: 28px;
}

.core-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 23px;
}

.core-grid span {
  background: #102943;
  border: 1px solid #24435e;
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #b7c7d5;
}

.results {
  background: var(--navy);
  color: #fff;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.result {
  border: 1px solid #294158;
  border-radius: 15px;
  background: #0c2035;
  padding: 26px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.result strong {
  font: 800 43px "Manrope";
  letter-spacing: -0.05em;
}

.result b {
  font: 700 14px "Manrope";
}

.result small {
  color: #8397ab;
}

.result .accent {
  color: var(--accent-light);
}

.cases {
  background: #fff;
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.case {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.case-top {
  height: 170px;
  background: linear-gradient(135deg, #eef3ff, #f7f9fc);
  padding: 25px;
  display: flex;
  justify-content: space-between;
}

.case-top span {
  font: 700 12px "Manrope";
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mini-chart {
  align-self: end;
  display: flex;
  gap: 4px;
  align-items: end;
  height: 80px;
}

.mini-chart i {
  width: 10px;
  background: var(--accent);
  border-radius: 2px;
}

.case-body {
  padding: 28px;
}

.case-path {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  gap: 8px;
  align-items: start;
}

.case-path small {
  color: var(--muted);
  display: block;
  margin-bottom: 7px;
}

.case-path b {
  font: 700 14px "Manrope";
}

.arrow {
  color: var(--accent);
}

.steps {
  background: var(--paper);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.work-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 24px;
  position: relative;
}

.work-step:after {
  content: "→";
  position: absolute;
  right: -13px;
  top: 42px;
  color: var(--accent);
  font-size: 20px;
  z-index: 2;
}

.work-step:last-child:after {
  display: none;
}

.num {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #edf3ff;
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 700;
  margin-bottom: 33px;
}

.work-step h3 {
  font-size: 18px;
}

.work-step p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.work-step small {
  color: var(--accent);
  font-weight: 700;
}

.faq {
  max-width: 900px;
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 22px 4px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font: 700 17px "Manrope";
  display: flex;
  justify-content: space-between;
}

.faq summary:after {
  content: "+";
  color: var(--accent);
}

.faq details[open] summary:after {
  content: "–";
}

.faq p {
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
  margin: 14px 0 0;
}

.final {
  padding: 40px 0 80px;
}

.cta-box {
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(43, 75, 204, 0.38),
      transparent 28%
    ),
    var(--navy);
  color: #fff;
  border-radius: 25px;
  padding: 58px;
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 70px;
  align-items: center;
}

.cta-box h2 {
  font-size: clamp(38px, 4vw, 56px);
}

.cta-box p {
  color: #b6c4d3;
  line-height: 1.6;
}

.deliverables {
  display: grid;
  gap: 12px;
  margin: 25px 0;
}

.deliverables span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.deliverables i {
  color: var(--green);
  font-style: normal;
}

.scan-card {
  background: #fff;
  color: var(--ink);
  border-radius: 17px;
  padding: 28px;
}

.scan-card label {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin: 13px 0 7px;
}

.scan-card input,
.scan-card select {
  width: 100%;
  border: 1px solid var(--line);
  padding: 13px;
  border-radius: 9px;
  background: #fff;
}

.scan-card .btn {
  width: 100%;
  margin-top: 17px;
}

/* WPForms renders its own submit button (.wpforms-submit), not our .btn
   markup, so it needs the .btn/.btn-primary look applied directly */
.scan-card .wpforms-submit {
  width: 100%;
  margin-top: 17px;
  border: 0;
  border-radius: 9px;
  padding: 14px 20px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 30px rgba(43, 75, 204, 0.32);
}

.scan-card .wpforms-submit:hover {
  background: #4361d7;
}

/* WPForms Lite (Modern Markup) injects an accessibility description
   next to the submit button while a submission is processing, e.g.
   "Verzend knop is uitgeschakeld tijdens formulier verzending" —
   confirmed from the plugin's actual frontend JS (formSubmitButtonDisable
   in wpforms-modern.min.js), which appends
   <div class="wpforms-hidden" id="...">{text}</div> and points to it via
   aria-describedby. WPForms' own stylesheet normally sets
   .wpforms-hidden{display:none}, disabling that stylesheet (WPForms
   Settings -> Styling) removed the rule, so it rendered as plain visible
   text. It's referenced by aria-describedby regardless of display:none,
   so this doesn't remove it from assistive tech. */
.scan-card .wpforms-hidden {
  display: none !important;
}

/* Kept as a defensive fallback for any other WPForms markup mode/version
   that uses an actual screen-reader-only (not display:none) convention. */
.scan-card [class*="screen-reader"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  font-size: 0 !important;
  word-wrap: normal !important;
}

/* WPForms confirmation message — without WPForms' own stylesheet this
   inherits a muted/washed-out color instead of the site's normal text.
   Matched broadly (any element whose class contains "confirmation")
   since the exact container class differs across WPForms versions.
   Also forces every descendant (p, span, etc. from wpautop-wrapped
   confirmation text), since an element's own color always wins over
   color inherited from an ancestor, even one set with !important. */
.scan-card [class*="confirmation"],
.scan-card [class*="confirmation"] * {
  color: var(--ink) !important;
  font-size: 16px;
  line-height: 1.6;
}

/* Google's reCAPTCHA v3 badge (bottom-right floating shield), added by
   WPForms' spam-protection setting. Google's terms require keeping the
   "protected by reCAPTCHA" attribution visible somewhere on the page if
   this badge is hidden, e.g. a line of text near the form. */
.grecaptcha-badge {
  visibility: hidden;
}

footer {
  background: #050d16;
  color: #8393a5;
  padding: 40px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-size: 13px;
}

/* Header is transparent/absolute over the hero only on the front page;
   everywhere else it needs to sit in normal flow with a solid background. */
body:not(.is-front-page) header {
  position: static;
  background: var(--navy);
}

/* The front page's absolutely-positioned header sits at top:0 of the
   viewport by default, which the WP admin bar (position:fixed, 32px/46px
   tall) then overlaps. Non-front-page headers don't need this: they're
   position:static, so they already sit in normal flow below the bar. */
body.admin-bar.is-front-page header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar.is-front-page header {
    top: 46px;
  }
}

/* Plain content pages (privacy, terms, etc.) */
.page-hero {
  background: var(--navy);
  color: #fff;
  padding: 150px 0 64px;
}

.page-hero h1 {
  font-size: clamp(36px, 4.5vw, 54px);
  max-width: 760px;
}

.prose {
  padding: 72px 0 112px;
  max-width: 760px;
}

.prose h2 {
  font-size: 28px;
  margin: 40px 0 14px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.prose ul {
  padding-left: 20px;
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--navy);
    padding: 10px 20px 24px;
    box-shadow: 0 16px 40px rgba(4, 18, 35, 0.35);
    z-index: 20;
  }

  .navlinks a {
    padding: 10px 0;
    width: 100%;
  }

  .menu {
    display: block;
  }

  .nav .btn {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 132px 0 120px;
  }

  .hero-grid,
  .calc,
  .cta-box {
    grid-template-columns: 1fr;
  }

  .console {
    margin-top: 20px;
  }

  .trustline {
    display: none;
  }

  .proof .wrap,
  .result-grid,
  .step-grid {
    grid-template-columns: 1fr 1fr;
  }

  .proof-item:nth-child(2) {
    border-right: 0;
  }

  .pain-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pain-item:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .pain-item:nth-child(even) {
    border-right: 0;
  }

  .pain-item:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .pain-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .section {
    padding: 80px 0;
  }

  .flow-stage {
    padding: 30px 18px;
  }

  .flowline {
    grid-template-columns: 1fr;
  }

  .flowline:before {
    left: 36px;
    right: auto;
    top: 8%;
    bottom: 8%;
    height: auto;
    width: 2px;
  }

  .step {
    display: grid;
    grid-template-columns: 74px 1fr;
    text-align: left;
    align-items: center;
    gap: 16px;
  }

  .step-circle {
    margin: 0;
  }

  .ecosystem {
    grid-template-columns: 1fr;
  }

  .core:before,
  .core:after {
    display: none;
  }

  .case-grid {
    grid-template-columns: 1fr;
  }

  .work-step:after {
    display: none;
  }
}

@media (max-width: 600px) {
  .wrap {
    width: min(100% - 28px, 1180px);
  }

  .hero h1 {
    font-size: 50px;
  }

  .actions {
    display: grid;
  }

  .actions .btn {
    width: 100%;
  }

  .micro {
    flex-wrap: wrap;
    gap: 8px 15px;
  }

  .kpis {
    grid-template-columns: 1fr 1fr;
  }

  .kpi:last-child {
    grid-column: 1/-1;
  }

  .proof .wrap,
  .pain-grid,
  .result-grid,
  .step-grid {
    grid-template-columns: 1fr;
  }

  .proof-item,
  .proof-item:first-child {
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pain-item,
  .pain-item:nth-child(3n),
  .pain-item:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pain-item:last-child {
    border-bottom: 0;
  }

  .section-head {
    display: block;
  }

  .section-head p {
    margin-top: 18px;
  }

  .formula {
    grid-template-columns: 1fr 1fr;
  }

  .compare {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .versus {
    height: 30px;
  }

  .case-path {
    grid-template-columns: 1fr;
  }

  .case-path .arrow {
    transform: rotate(90deg);
  }

  .cta-box {
    padding: 34px 20px;
  }

  .footer-row {
    display: grid;
    gap: 20px;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}