:root {
  color-scheme: light;
  --navy: #003f83;
  --navy-deep: #002c5e;
  --blue: #147bb8;
  --green: #1a7a5e;
  --green-bright: #2e9e7e;
  --lime: #b4e33d;
  --ink: #12324a;
  --soft: #466676;
  --line: #d5e8e6;
  --tint: #eff8f7;
  --paper: #ffffff;
  --radius: 18px;
  --shadow: 0 18px 44px rgba(0, 44, 94, 0.14);
  --heading: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, .brand { font-family: var(--heading); color: var(--navy); }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
h1 em { font-style: normal; color: var(--green); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.16; letter-spacing: -0.025em; font-weight: 700; }
h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; }
h4 { font-size: 1.03rem; line-height: 1.3; font-weight: 700; color: var(--navy); }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 12px 26px; border-radius: 999px; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: rgba(255, 255, 255, .7); }
.btn-ghost:hover { background: #fff; }
.btn-light { background: var(--navy); color: #fff; }
.btn-small { min-height: 44px; padding: 8px 20px; font-size: .97rem; white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.28rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.nav-links { display: flex; gap: 26px; }
.nav-links a, .menu nav a { color: var(--ink); font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu { display: none; position: relative; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; color: var(--navy); border-radius: 10px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 52px; width: 210px; display: grid; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.menu nav a { padding: 11px 12px; border-radius: 9px; }
.menu nav a:hover { background: var(--tint); }

.hero { position: relative; overflow: hidden; background: linear-gradient(170deg, #f3fbf8 0%, #fff 70%); }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; color: #cfe7e1; pointer-events: none; }
.contours path { stroke-width: 1.2; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 52px; padding-block: 70px 78px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: .94rem; font-weight: 600; color: var(--green); }
.dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(180, 227, 61, .3); }
.lead { margin-top: 22px; max-width: 34em; font-size: 1.2rem; color: var(--soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.note { margin-top: 18px; font-size: .95rem; color: var(--soft); }

.scene { position: relative; min-height: 480px; }
.map-card { position: absolute; left: 0; top: 18px; width: 82%; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.map-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: .9rem; }
.map-head strong { color: var(--navy); }
.map-head span { color: var(--green); font-weight: 600; }
.map-card svg { width: 100%; background: #f1f9f5; border-radius: 11px; }
.map-lines path { stroke: #d5e9df; stroke-width: 1.4; }
.map-road { stroke: #fff; stroke-width: 10; }
.map-zone { fill: rgba(46, 158, 126, .12); stroke: var(--green-bright); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linejoin: round; }
.pin circle { stroke: #fff; stroke-width: 3; }
.pin.done circle { fill: var(--green-bright); }
.pin.todo circle { fill: var(--navy); }
.map-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .86rem; color: var(--soft); }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }
.map-legend i.done { background: var(--green-bright); }
.map-legend i.todo { background: var(--navy); }

.phone { position: absolute; right: 0; bottom: 8px; width: 214px; padding: 9px; background: var(--navy-deep); border-radius: 32px; box-shadow: 0 26px 52px rgba(0, 44, 94, .32); }
.phone-notch { position: absolute; left: 50%; top: 16px; width: 58px; height: 7px; transform: translateX(-50%); background: var(--navy-deep); border-radius: 8px; z-index: 1; }
.phone-screen { display: grid; gap: 9px; padding: 28px 11px 10px; background: var(--tint); border-radius: 24px; font-size: .79rem; line-height: 1.3; color: var(--ink); }
.phone-bar { display: flex; align-items: center; justify-content: space-between; color: var(--navy); }
.phone-bar strong { font: 700 .98rem var(--heading); }
.chip-off { padding: 3px 7px; background: #fff4d4; color: #724c00; font-weight: 700; font-size: .68rem; border-radius: 999px; }
.phone-stat, .phone-progress, .phone-queue { padding: 10px; background: #fff; border-radius: 12px; }
.phone-stat { display: flex; align-items: center; justify-content: space-between; }
.phone-stat b { font: 700 1.3rem var(--heading); color: var(--navy); }
.phone-stat small { font: 500 .72rem var(--body); color: var(--soft); }
.phone-progress small { display: block; margin-top: 4px; color: var(--soft); }
.bar { height: 7px; margin-top: 7px; background: #dcebe8; border-radius: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green-bright); }
.phone-queue { display: flex; gap: 9px; align-items: center; }
.phone-queue small { display: block; color: var(--soft); }
.queue-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: #fff; background: var(--green); border-radius: 50%; font-weight: 700; }
.phone-nav { display: flex; justify-content: space-between; padding: 7px 2px 1px; font-size: .67rem; color: var(--soft); }
.phone-nav b { color: var(--green); }
.scene figcaption { position: absolute; left: 4px; bottom: 0; max-width: 40%; font-size: .82rem; color: var(--soft); }

.section { padding-block: 88px; }
.section-tint { background: var(--tint); }
.section-head { max-width: 780px; margin-bottom: 46px; }
.kicker { margin-bottom: 12px; font-weight: 700; font-size: .92rem; color: var(--green); }
.two-col { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: start; }
.prose { display: grid; gap: 16px; color: var(--soft); font-size: 1.12rem; }
.prose strong { color: var(--ink); }

.pieces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 54px; border-block: 1px solid var(--line); }
.piece { padding: 30px 28px; }
.piece + .piece { border-left: 1px solid var(--line); }
.piece-tag { display: block; margin-bottom: 10px; font-size: .86rem; font-weight: 700; color: var(--blue); }
.piece h3 { margin-bottom: 9px; font-size: 1.28rem; }
.piece p { color: var(--soft); }

.route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.route::before { content: ''; position: absolute; top: 23px; left: 24px; right: 12%; border-top: 2px dashed var(--green-bright); }
.route li { position: relative; }
.route-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; font: 700 1.1rem var(--heading); color: #fff; background: var(--navy); border: 5px solid var(--tint); border-radius: 50%; box-sizing: content-box; margin-left: -5px; margin-top: -5px; }
.route h3 { margin-bottom: 8px; }
.route p { color: var(--soft); font-size: 1rem; }

.group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 1.32rem; }
.status { padding: 4px 11px; font: 700 .82rem var(--body); border-radius: 999px; }
.status-now { background: #e0f4ea; color: #125c46; }
.status-next { background: #e2eefb; color: var(--navy); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 30px; }
.feature-grid li { padding-top: 14px; border-top: 3px solid var(--green-bright); }
.feature-grid p, .extra-grid p { margin-top: 6px; color: var(--soft); font-size: .98rem; line-height: 1.5; }
.pilot-note { margin: 34px 0 62px; padding: 15px 18px; background: #fff8e6; border-left: 4px solid #e4a100; border-radius: 0 10px 10px 0; font-size: 1rem; }
.extra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.extra-grid li { padding: 22px; background: var(--tint); border-radius: var(--radius); }

.section-navy { background: var(--navy-deep); color: #dbe7f4; }
.section-navy h2 { color: #fff; }
.section-navy .kicker { color: var(--lime); }
.allies { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ally { display: flex; flex-direction: column; padding: 30px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .17); border-radius: var(--radius); }
.ally-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.monogram { padding: 7px 12px; font: 700 1.05rem var(--heading); letter-spacing: .06em; color: var(--navy-deep); background: #fff; border-radius: 9px; }
.ally-role { font-weight: 700; font-size: .93rem; color: var(--lime); }
.ally h3 { color: #fff; font-size: 1.28rem; margin-bottom: 12px; }
.ally p { flex: 1; }
.ally a { align-self: flex-start; margin-top: 20px; font-weight: 700; color: #fff; text-underline-offset: 4px; }
.ally-link { margin-top: 26px; max-width: 760px; color: #dbe7f4; }

.contact { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; padding: 46px; background: var(--tint); border-radius: 26px; }
.contact h2 { margin-bottom: 12px; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.contact p { color: var(--soft); }
.contact-actions { display: grid; gap: 14px; }
.contact-channels { display: grid; gap: 10px; }
.contact-channels:empty { display: none; }
.contact-pending { padding: 12px 14px; background: #fff8e6; border: 1px dashed #c98e00; border-radius: 10px; color: #6a4800 !important; font-weight: 600; }
.contact-login { display: flex; flex-wrap: wrap; gap: 6px; font-size: 1rem; }
.contact-login a { font-weight: 700; color: var(--navy); }

.site-footer { padding-block: 42px; border-top: 1px solid var(--line); }
.footer-row { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; }
.footer-row img { height: auto; }
.footer-row p { max-width: 30em; color: var(--soft); font-size: .96rem; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-row nav a { color: var(--ink); font-weight: 500; }

.animate .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.animate .reveal.shown { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: 42px; padding-block: 52px 56px; }
  .scene { max-width: 540px; width: 100%; margin-inline: auto; }
  .two-col { grid-template-columns: 1fr; gap: 22px; }
  .route { grid-template-columns: 1fr 1fr; }
  .route::before { display: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .extra-grid { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; gap: 28px; }
  .footer-row { grid-template-columns: auto 1fr; }
  .footer-row nav { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .wrap { width: calc(100% - 32px); }
  .section { padding-block: 62px; }
  .brand span { font-size: 1.1rem; }
  .lead { font-size: 1.08rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .scene { min-height: 540px; }
  .map-card { width: 94%; top: 0; padding: 12px; }
  .map-legend { flex-direction: column; gap: 3px; }
  .phone { width: 180px; bottom: 0; }
  .scene figcaption { max-width: 34%; }
  .pieces { grid-template-columns: 1fr; }
  .piece { padding: 24px 0; }
  .piece + .piece { border-left: 0; border-top: 1px solid var(--line); }
  .route, .feature-grid, .extra-grid, .allies { grid-template-columns: 1fr; }
  .ally { padding: 24px; }
  .contact { padding: 28px 22px; border-radius: 20px; }
  .footer-row { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}