:root {
  --ink: #12202c;
  --muted: #5b6975;
  --line: #d8e0e4;
  --paper: #ffffff;
  --soft: #f3f6f5;
  --teal: #008fa3;
  --teal-dark: #006b80;
  --red: #b42318;
  --yellow: #f0b429;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.site-header {
  align-items: center;
  background: rgba(6, 43, 85, 0.98);
  border-bottom: 1px solid #174a75;
  display: grid;
  gap: 28px;
  grid-template-columns: auto 1fr auto;
  height: 72px;
  left: 0;
  padding: 0 4vw;
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-brand { align-items: center; display: flex; }
.site-brand img { display: block; height: 48px; width: 192px; }
.site-header nav { display: flex; gap: 26px; justify-content: center; }
.site-header nav a { color: #dce9f3; font-size: 14px; font-weight: 700; }
.site-header nav a:hover { color: #35d0dc; }
.header-login {
  border: 1px solid #35d0dc;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 14px;
}

.hero {
  align-items: center;
  background-color: #17222b;
  background-position: center;
  background-size: cover;
  display: flex;
  height: calc(100svh - 144px);
  min-height: 560px;
  max-height: 760px;
  padding: 48px max(5vw, calc((100vw - 1240px) / 2));
  position: relative;
}
.hero::before {
  background: rgba(5, 14, 20, 0.15);
  content: "";
  inset: 0;
  position: absolute;
}
.hero-content { color: #fff; max-width: 660px; position: relative; z-index: 1; }
.hero-brand { color: #5ce0e8; font-size: 13px; font-weight: 900; }
.hero h1 { font-size: 76px; line-height: 0.98; margin: 16px 0 20px; }
.hero > .hero-content > p { font-size: 20px; line-height: 1.55; margin: 0; max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.site-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
}
.site-button.primary { background: var(--teal); color: #fff; }
.site-button.primary:hover { background: var(--teal-dark); }
.site-button.secondary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); color: #fff; }
.hero-facts { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin: 34px 0 0; }
.hero-facts div { border-left: 3px solid var(--yellow); padding-left: 12px; }
.hero-facts dt { font-weight: 800; }
.hero-facts dd { color: #d9e2e7; font-size: 13px; line-height: 1.45; margin: 4px 0 0; }

.process-band {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 auto;
  max-width: 1240px;
  min-height: 72px;
}
.process-band div { align-items: center; border-right: 1px solid var(--line); display: flex; gap: 10px; padding: 14px 20px; }
.process-band div:last-child { border-right: 0; }
.process-band span { color: var(--red); font-size: 12px; font-weight: 900; }
.process-band strong { font-size: 14px; }

.site-section { margin: 0 auto; max-width: 1240px; padding: 92px 32px; }
.section-heading { max-width: 760px; }
.section-heading > span, .demo-copy > span, .proof-copy > span { color: var(--teal); font-size: 12px; font-weight: 900; }
.section-heading h2, .proof-copy h2, .demo-copy h2 { font-size: 42px; line-height: 1.15; margin: 12px 0 18px; }
.section-heading p, .demo-copy > p { color: var(--muted); font-size: 18px; line-height: 1.65; }

.capability-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); margin-top: 48px; background: var(--line); }
.capability-grid article { background: #fff; min-height: 220px; padding: 28px; }
.capability-grid b { color: var(--red); font-size: 12px; }
.capability-grid h3 { font-size: 20px; margin: 28px 0 10px; }
.capability-grid p { color: var(--muted); line-height: 1.6; margin: 0; }

.proof-band {
  align-items: center;
  background: #062b55;
  color: #fff;
  display: grid;
  gap: 60px;
  grid-template-columns: 1fr 1fr;
  padding: 72px max(5vw, calc((100vw - 1176px) / 2));
}
.proof-copy > span { color: #8de0d4; }
.proof-copy h2 { margin-bottom: 0; }
.proof-band ul { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.proof-band li { border-bottom: 1px solid rgba(255,255,255,0.2); padding: 16px 0 16px 28px; position: relative; }
.proof-band li::before { color: var(--yellow); content: "✓"; font-weight: 900; left: 0; position: absolute; }

.onboarding-section { display: grid; gap: 70px; grid-template-columns: 0.9fr 1.1fr; }
.onboarding-steps { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.onboarding-steps li { border-bottom: 1px solid var(--line); display: grid; gap: 18px; grid-template-columns: 42px 1fr; padding: 20px 0; }
.onboarding-steps li > span { color: var(--red); font-size: 13px; font-weight: 900; }
.onboarding-steps h3 { font-size: 18px; margin: 0 0 6px; }
.onboarding-steps p { color: var(--muted); line-height: 1.5; margin: 0; }

.packages-section { background: #17222b; color: #fff; padding: 84px max(5vw, calc((100vw - 1176px) / 2)); }
.section-heading.light > span { color: #8de0d4; }
.section-heading.light h2 { color: #fff; }
.package-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: 40px; }
.package-grid article { border: 1px solid #47606e; border-radius: 8px; display: grid; gap: 28px; padding: 30px; }
.package-grid article.featured-package { border-color: #65c8b9; box-shadow: inset 0 4px 0 var(--teal); }
.package-grid article span { color: #8de0d4; font-size: 12px; font-weight: 900; }
.package-grid h3 { font-size: 28px; margin: 8px 0; }
.package-grid p, .package-grid li { color: #cad6dc; line-height: 1.55; }
.package-grid ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.package-grid li::before { color: var(--yellow); content: "•"; margin-right: 10px; }
.package-grid article > a { color: #8de0d4; font-weight: 900; }

.purchase-section { display: grid; gap: 44px; }
.purchase-path {
  background: var(--line);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.purchase-path li { background: #fff; min-height: 210px; padding: 26px; }
.purchase-path b { color: var(--red); font-size: 13px; }
.purchase-path h3 { font-size: 19px; margin: 30px 0 10px; }
.purchase-path p { color: var(--muted); line-height: 1.55; margin: 0; }
.deployment-strip { border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.deployment-strip div { display: grid; gap: 7px; padding: 24px; }
.deployment-strip div + div { border-left: 1px solid var(--line); }
.deployment-strip strong { color: var(--teal-dark); }
.deployment-strip span { color: var(--muted); line-height: 1.5; }

.demo-section { display: grid; gap: 70px; grid-template-columns: 0.8fr 1.2fr; }
.contact-points { border-top: 1px solid var(--line); margin-top: 30px; }
.contact-points p { border-bottom: 1px solid var(--line); margin: 0; padding: 15px 0; }
.contact-points strong { color: var(--red); display: inline-block; width: 30px; }
.lead-form-wrap { background: var(--soft); border-left: 5px solid var(--teal); padding: 30px; }
.lead-form-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.lead-form label { color: #425361; display: grid; font-size: 13px; font-weight: 700; gap: 6px; }
.lead-form input, .lead-form select, .lead-form textarea {
  background: #fff;
  border: 1px solid #becbd1;
  border-radius: 6px;
  color: var(--ink);
  min-height: 44px;
  padding: 10px 11px;
  width: 100%;
}
.lead-form .field-wide { grid-column: 1 / -1; }
.consent-field { align-items: flex-start; display: flex !important; flex-direction: row; gap: 10px !important; margin: 18px 0; }
.consent-field input { flex: 0 0 auto; min-height: 18px; width: 18px; }
.lead-success { background: #e6f5ef; border: 1px solid #9bcbb9; margin-bottom: 20px; padding: 16px; }
.lead-success p { margin: 5px 0 0; }
.errorlist { color: var(--red); font-size: 12px; list-style: none; margin: 0; padding: 0; }

footer { align-items: center; background: #fff; border-top: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; padding: 28px 5vw; }
.footer-brand { display: grid; }
.footer-brand img { display: block; height: 58px; width: 220px; }
footer p { color: var(--muted); font-size: 13px; }
footer a { color: var(--teal); font-weight: 800; }
footer > div:last-child { display: flex; flex-wrap: wrap; gap: 16px; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .site-header nav { display: none; }
  .hero { background-position: 58% center; padding: 42px 28px; }
  .hero-content { max-width: 590px; }
  .hero h1 { font-size: 62px; }
  .process-band { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .purchase-path { grid-template-columns: 1fr 1fr; }
  .proof-band, .onboarding-section, .demo-section { gap: 42px; grid-template-columns: 1fr; }
  .proof-band { padding: 64px 32px; }
  .onboarding-section { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 620px) {
  .site-header { height: 64px; }
  .site-brand img { height: 39px; width: 150px; }
  .header-login { font-size: 12px; padding: 9px 10px; }
  .hero { height: calc(100svh - 120px); min-height: 540px; padding: 30px 20px; }
  .hero::before { background: rgba(5,14,20,0.38); }
  .hero h1 { font-size: 52px; margin: 12px 0 16px; }
  .hero > .hero-content > p { font-size: 17px; line-height: 1.45; }
  .hero-actions { margin-top: 22px; }
  .site-button { width: 100%; }
  .hero-facts { grid-template-columns: 1fr; margin-top: 22px; }
  .hero-facts div:nth-child(2) { display: none; }
  .process-band { grid-template-columns: 1fr 1fr; overflow: visible; }
  .process-band div { border-bottom: 1px solid var(--line); min-width: 0; }
  .process-band div:last-child { grid-column: 1 / -1; }
  .site-section { padding: 66px 20px; }
  .section-heading h2, .proof-copy h2, .demo-copy h2 { font-size: 32px; }
  .section-heading p, .demo-copy > p { font-size: 16px; }
  .capability-grid, .package-grid, .lead-form-grid, .purchase-path, .deployment-strip { grid-template-columns: 1fr; }
  .deployment-strip div + div { border-left: 0; border-top: 1px solid var(--line); }
  .capability-grid article { min-height: 0; padding: 24px; }
  .proof-band, .packages-section { padding: 60px 20px; }
  .lead-form .field-wide { grid-column: auto; }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (max-height: 690px) and (min-width: 621px) {
  .hero { min-height: 500px; }
  .hero-facts { display: none; }
}