:root {
  --blue: #2563eb;
  --blue-deep: #102a43;
  --blue-soft: #eaf0ff;
  --green: #20a36f;
  --green-deep: #167a55;
  --green-soft: #e9f7f1;
  --ink: #151a27;
  --body: #525b6c;
  --muted: #7f8796;
  --line: #e3e6ee;
  --wash: #f7f8fc;
  --white: #fff;
  --sans: "DM Sans", system-ui, sans-serif;
  --display: "Manrope", system-ui, sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --shadow: 0 24px 70px rgba(23, 36, 80, .12), 0 4px 16px rgba(23, 36, 80, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--white); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #2563eb55; outline-offset: 3px; }
.wrap { width: min(1120px, calc(100% - 48px)); margin: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-deep); font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { width: 22px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--green)); content: ""; }

.site-nav { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #e3e6eecb; background: #ffffffed; backdrop-filter: blur(18px) saturate(145%); }
.nav-inner { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; }
.brand img { display: block; width: 132px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 24px; color: #3f4757; font-size: 14px; font-weight: 600; }
.nav-links a:hover { color: var(--blue); }
.nav-menu { position: relative; }
.nav-menu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg) translateY(-2px); transition: transform .18s; }
.nav-menu[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.nav-menu-panel { position: absolute; top: calc(100% + 16px); left: 50%; z-index: 30; display: grid; grid-template-columns: 1fr 1.35fr; width: 390px; padding: 10px; gap: 4px; border: 1px solid #dce3ee; border-radius: 16px; background: linear-gradient(145deg, #fff, #f8faff); box-shadow: 0 22px 60px #102a4326, 0 3px 10px #102a430d; transform: translateX(-50%); }
.nav-menu-panel::before { grid-column: 1 / -1; padding: 3px 9px 8px; color: var(--muted); font: 600 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; content: "Choose your team"; }
.nav-menu-panel::after { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-top: 1px solid #dce3ee; border-left: 1px solid #dce3ee; background: #fff; content: ""; transform: rotate(45deg); }
.nav-menu-panel a { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; white-space: nowrap; }
.nav-menu-panel a::before { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); content: ""; }
.nav-menu-panel a:nth-of-type(even)::before { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.nav-menu-panel a:hover { border-color: #dce5f2; background: #fff; box-shadow: 0 7px 18px #102a430d; color: var(--blue-deep); transform: translateY(-1px); }
.nav-cta, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; font-size: 15px; font-weight: 700; transition: .18s; }
.nav-cta { padding: 10px 16px; background: var(--blue); color: var(--white) !important; }
.btn { padding: 13px 19px; border: 1px solid var(--line); background: #ffffffdf; }
.btn.primary { border-color: var(--blue); background: var(--blue); color: var(--white); box-shadow: 0 10px 24px #2563eb38; }
@property --cta-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nav-cta, .hero .btn.primary { position: relative; isolation: isolate; }
.nav-cta::before, .hero .btn.primary::before {
  content: ''; position: absolute; pointer-events: none; inset: -2px; padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--cta-angle), #60a5fa4d 0 62%, #fde68a99 72%, #f9a8d499 84%, #ffffffb3 92%, #60a5fa4d 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 2px #60a5fa66); animation: cta-orbit 3.2s linear infinite;
}
@keyframes cta-orbit { to { --cta-angle: 360deg; } }
.btn:hover, .nav-cta:hover { transform: translateY(-1px); }
.btn.primary:hover, .nav-cta:hover { background: var(--blue-deep); }
.btn.secondary:hover { border-color: var(--blue); color: var(--blue); }

.hero { position: relative; overflow: hidden; padding: 96px 0 78px; isolation: isolate; }
.hero::before { position: absolute; inset: 0 0 auto; z-index: -2; height: 620px; background: radial-gradient(circle at 18% 12%, #eaf0ff 0, transparent 42%), radial-gradient(circle at 82% 18%, #e9f7f1 0, transparent 38%); content: ""; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr); align-items: center; gap: 66px; }
.hero h1 { max-width: 760px; margin: 17px 0 22px; font: 800 clamp(42px, 5.7vw, 66px)/1.02 var(--display); letter-spacing: -.055em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.lede { max-width: 620px; color: var(--body); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.hero-note { margin-top: 14px; color: var(--muted); font-size: 12px; }

.signal-board { position: relative; overflow: hidden; border: 1px solid #d7e0ed; border-radius: 22px; background: linear-gradient(145deg, #fff, #f9fbff); box-shadow: 0 24px 70px #102a4317, 0 0 0 6px #f4f7fb; transform: none; }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--wash); color: var(--blue-deep); font: 600 10px var(--mono); letter-spacing: .08em; }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--green-deep); }
.live::before { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px #20a36f18; content: ""; }
.signal-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 17px 18px; border-bottom: 1px solid #edf0f5; }
.signal-row:last-of-type { border-bottom: 0; }
.signal-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--blue-soft); color: var(--blue-deep); font: 700 15px var(--mono); }
.signal-row h3 { font-size: 14px; line-height: 1.25; }
.signal-row p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.signal-tag { justify-self: end; padding: 5px 8px; border-radius: 7px; background: var(--green-soft); color: var(--green-deep); font: 600 9px var(--mono); letter-spacing: .05em; text-align: center; }
.board-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; background: var(--blue-deep); color: #d9e4ef; font-size: 11px; }
.board-foot strong { color: #fff; }
.board-foot span { color: #80d9b5; font: 600 9px var(--mono); letter-spacing: .07em; }

.proof-strip { border-block: 1px solid var(--line); background: var(--wash); }
.proofs { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof { padding: 23px 26px; border-right: 1px solid var(--line); }
.proof:last-child { border-right: 0; }
.proof strong { display: block; color: var(--blue-deep); font-size: 13px; }
.proof span { color: var(--muted); font-size: 11px; }

section { padding: 86px 0; }
.section-head { max-width: 730px; margin-bottom: 38px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 14px 0 12px; font: 800 clamp(29px, 4vw, 47px)/1.08 var(--display); letter-spacing: -.045em; }
.section-head p { color: var(--body); font-size: 17px; }

.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.signal-card { min-height: 225px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg, #fff, #fafbfe); box-shadow: 0 8px 30px rgba(23, 36, 80, .05); }
.signal-card .label { display: inline-block; padding: 5px 9px; border-radius: 7px; background: var(--blue-soft); color: var(--blue-deep); font: 600 9px var(--mono); letter-spacing: .07em; }
.signal-visual { display: grid; width: 46px; height: 46px; margin: 24px 0 20px; place-items: center; border-radius: 14px; background: var(--green-soft); color: var(--green-deep); }
.signal-visual svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signal-card h3 { margin-bottom: 8px; font: 750 20px var(--display); letter-spacing: -.02em; }
.signal-card p { color: var(--body); font-size: 14px; }
.signal-card small { display: block; margin-top: 18px; color: var(--muted); font: 500 10px var(--mono); }

.workflow { background: var(--blue-deep); color: #fff; }
.workflow .eyebrow { color: #9fc2ff; }
.workflow .section-head p { color: #aebdcb; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { min-height: 235px; padding: 24px; border: 1px solid #ffffff1f; border-radius: 18px; background: #ffffff0b; }
.step .number { color: #80d9b5; font: 700 11px var(--mono); letter-spacing: .08em; }
.step h3 { margin: 42px 0 9px; font: 750 20px var(--display); }
.step p { color: #b8c5d1; font-size: 14px; }

.discovery { background: var(--wash); }
.discovery-shell { overflow: hidden; border: 1px solid #dce3ee; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.discovery-app { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 430px; }
.discovery-filters { padding: 22px; border-right: 1px solid var(--line); background: #fbfcfe; }
.filter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; color: var(--blue-deep); font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.filter-count { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.filter-group { margin-top: 18px; }
.filter-group > span { display: block; margin-bottom: 8px; color: var(--muted); font: 600 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.filter-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--blue-deep); font-size: 12px; font-weight: 600; }
.filter-value::after { color: var(--muted); content: "\2304"; }
.results-panel { min-width: 0; padding: 22px; }
.results-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.results-top strong { font: 750 16px var(--display); }
.results-top span { color: var(--muted); font: 500 10px var(--mono); }
.company-result { display: grid; grid-template-columns: minmax(180px, 1fr) 120px 135px auto; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid #edf0f5; }
.company-name { min-width: 0; }
.company-name strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.company-name span, .company-size { color: var(--muted); font-size: 11px; }
.change-pill { justify-self: start; padding: 6px 9px; border-radius: 8px; background: var(--green-soft); color: var(--green-deep); font: 600 9px var(--mono); letter-spacing: .03em; }
.result-actions { display: flex; align-items: center; gap: 7px; }
.result-action, .watch-action { display: inline-flex; align-items: center; justify-content: center; height: 32px; border-radius: 9px; font-size: 10px; font-weight: 700; }
.result-action { padding: 0 11px; background: var(--blue); color: #fff; }
.watch-action { width: 32px; border: 1px solid var(--line); color: var(--blue-deep); }
.journey-bar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); background: var(--blue-deep); }
.journey-item { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-right: 1px solid #ffffff17; color: #d8e3ee; font-size: 11px; }
.journey-item:last-child { border-right: 0; }
.journey-item b { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #ffffff10; color: #80d9b5; font: 700 10px var(--mono); }

.guardrail-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
.guardrail-copy h2 { margin: 14px 0; font: 800 clamp(30px, 4vw, 46px)/1.08 var(--display); letter-spacing: -.045em; }
.guardrail-copy p { color: var(--body); font-size: 16px; }
.contract { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; }
.contract-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.contract-row:last-child { border-bottom: 0; }
.contract-row code { color: var(--blue); font: 600 11px var(--mono); }
.contract-row p { color: var(--body); font-size: 13px; }

.delivery { background: var(--wash); }
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.delivery-card { min-height: 245px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.delivery-card .channel { display: inline-block; padding: 5px 9px; border-radius: 7px; background: var(--green-soft); color: var(--green-deep); font: 600 9px var(--mono); letter-spacing: .07em; }
.delivery-card h3 { margin: 43px 0 9px; font: 750 20px var(--display); }
.delivery-card p { color: var(--body); font-size: 14px; }
.prompt { margin-top: 15px; padding: 10px 12px; border-radius: 9px; background: var(--blue-deep); color: #d9e4ef; font: 500 11px/1.55 var(--mono); }

.audience-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.audience-link { padding: 19px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: .18s; }
.audience-link:hover { border-color: #2563eb70; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(23, 36, 80, .08); }
.audience-link strong { display: block; font: 750 16px var(--display); }
.audience-link span { color: var(--muted); font-size: 12px; }

.cta { padding-top: 34px; }
.cta-card { padding: 68px 30px; border: 1px solid #2563eb29; border-radius: 26px; background: linear-gradient(125deg, #eef3ff, #ffffffd9 47%, #e9f7f1); text-align: center; }
.cta-card h2 { font: 800 clamp(31px, 4vw, 49px)/1.08 var(--display); letter-spacing: -.045em; }
.cta-card p { max-width: 590px; margin: 15px auto 27px; color: var(--body); }
.cta-card .hero-actions { justify-content: center; margin-top: 0; }

footer { padding: 48px 0 32px; border-top: 1px solid var(--line); }
.footer-main { display: flex; justify-content: space-between; gap: 50px; flex-wrap: wrap; }
.footer-main p { max-width: 340px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.footer-links { display: flex; gap: 42px; flex-wrap: wrap; }
.footer-links h4 { margin-bottom: 9px; color: var(--muted); font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.footer-links a { display: block; padding: 3px 0; color: var(--body); font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

@media (max-width: 920px) {
  .hero-grid, .guardrail-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 46px; }
  .signal-board { max-width: 680px; transform: none; }
  .proofs { grid-template-columns: repeat(2, 1fr); }
  .proof:nth-child(2) { border-right: 0; }
  .proof:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps, .delivery-grid { grid-template-columns: repeat(2, 1fr); }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .discovery-app { grid-template-columns: 190px minmax(0, 1fr); }
  .company-result { grid-template-columns: minmax(160px, 1fr) 120px auto; }
  .company-size { display: none; }
  .step, .delivery-card { min-height: 0; }
  .step h3, .delivery-card h3 { margin-top: 24px; }
}

@media (max-width: 700px) {
  .wrap { width: calc(100% - 32px); }
  .nav-inner { min-height: 64px; gap: 14px; }
  .nav-links { gap: 14px; }
  .nav-links .nav-link { display: none; }
  .nav-menu summary { white-space: nowrap; }
  .nav-menu-panel { right: 0; left: auto; grid-template-columns: 1fr; width: min(390px, calc(100vw - 32px)); transform: none; }
  .nav-menu-panel::after { right: 31px; left: auto; }
  .hero { padding: 70px 0 58px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-grid > * { min-width: 0; }
  .hero h1 { font-size: 43px; }
  .lede { font-size: 16px; }
  .signal-row { grid-template-columns: 42px minmax(0, 1fr); }
  .signal-tag { grid-column: 2; justify-self: start; }
  .board-foot { align-items: flex-start; flex-direction: column; }
  section { padding: 68px 0; }
  .signal-grid, .audience-links, .steps { grid-template-columns: 1fr; }
  .discovery-app { grid-template-columns: 1fr; }
  .discovery-filters { border-right: 0; border-bottom: 1px solid var(--line); }
  .filter-group { display: inline-block; width: calc(50% - 7px); margin: 10px 10px 0 0; vertical-align: top; }
  .company-result { grid-template-columns: minmax(0, 1fr) auto; }
  .change-pill { grid-row: 2; }
  .result-actions { grid-column: 2; grid-row: 1 / span 2; }
  .journey-bar { grid-template-columns: repeat(2, 1fr); }
  .journey-item:nth-child(2) { border-right: 0; }
  .journey-item:nth-child(-n+2) { border-bottom: 1px solid #ffffff17; }
  .signal-card { min-height: 0; }
  .contract-row { grid-template-columns: 1fr; gap: 6px; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .nav-cta::before, .hero .btn.primary::before { animation: none; }
}