:root {
  --bg: #06101d;
  --bg-deep: #030a13;
  --surface: #0a1726;
  --surface-2: #0d1c2d;
  --line: rgba(162, 197, 225, .15);
  --line-strong: rgba(73, 179, 255, .36);
  --text: #f3f8fc;
  --muted: #91a6ba;
  --blue: #318aff;
  --cyan: #42d7e8;
  --blue-soft: #78b7ff;
  --success: #64e5b7;
  --danger: #ff8d91;
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 74% 9%, rgba(36, 115, 217, .12), transparent 31%), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 100% 5px; }
a { color: inherit; }
button, input, select { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 18px; color: var(--bg); background: var(--cyan); border-radius: 4px; transition: top .2s; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.site-header.scrolled { background: rgba(3, 10, 19, .84); border-color: var(--line); backdrop-filter: blur(18px); }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; letter-spacing: .18em; font-weight: 600; white-space: nowrap; }
.brand strong { color: var(--cyan); }
.brand-mark { width: 27px; height: 25px; display: flex; gap: 3px; align-items: flex-end; }
.brand-mark i { width: 7px; display: block; border: 2px solid var(--blue); border-bottom: 0; }
.brand-mark i:nth-child(1) { height: 13px; }
.brand-mark i:nth-child(2) { height: 24px; border-color: var(--cyan); }
.brand-mark i:nth-child(3) { height: 18px; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-menu > a:not(.button) { color: #b5c4d2; text-decoration: none; font-size: 14px; transition: color .2s; }
.nav-menu > a:not(.button):hover { color: white; }
.nav-toggle { display: none; color: white; border: 0; background: transparent; width: 44px; height: 44px; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px 0; background: currentColor; transition: transform .2s; }

.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 22px; color: #f8fbff; background: var(--blue); border: 1px solid var(--blue); border-radius: 4px; text-decoration: none; font-weight: 650; cursor: pointer; box-shadow: 0 12px 30px rgba(30, 113, 231, .18); transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { background: #227af0; transform: translateY(-2px); box-shadow: 0 15px 34px rgba(30, 113, 231, .28); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: 13px; }
.text-link { display: inline-flex; gap: 12px; align-items: center; color: #dbe9f4; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(219, 233, 244, .35); padding-bottom: 3px; }
.text-link span { color: var(--cyan); }

.hero { min-height: 780px; padding: 148px 0 80px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 70px; }
.eyebrow { margin: 0 0 20px; color: var(--cyan); font-size: 11px; line-height: 1.4; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-copy > .eyebrow span { width: 24px; height: 1px; background: var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 28px; font-size: clamp(50px, 5.1vw, 78px); letter-spacing: -.055em; line-height: .99; font-weight: 660; }
h1 em, h2 em { color: var(--blue-soft); font-style: normal; font-weight: inherit; }
.hero-lede { max-width: 590px; margin-bottom: 32px; color: #a9bac8; font-size: 18px; line-height: 1.72; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: -10px 0 30px; padding: 0; list-style: none; color: #c5d7e5; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.hero-benefits li { display: flex; align-items: center; gap: 9px; }
.hero-benefits li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(66,215,232,.08); }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.pilot-note { margin: 26px 0 0; display: flex; gap: 10px; align-items: center; color: #7790a5; font-size: 12px; }
.pilot-note > span { width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(66,215,232,.08); }

.route-visual { position: relative; padding: 18px; background: rgba(7, 21, 35, .72); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 35px 80px rgba(0,0,0,.25); }
.route-visual::before { content: ""; position: absolute; left: -16px; top: 16%; width: 16px; height: 1px; background: var(--blue); box-shadow: 0 346px 0 var(--cyan); }
.visual-topline, .visual-caption { display: flex; align-items: center; justify-content: space-between; color: #71899e; font-size: 9px; letter-spacing: .16em; }
.live-dot { display: flex; align-items: center; gap: 7px; color: #95b1c7; }
.live-dot::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 4px rgba(66,215,232,.08); }
.route-map { width: 100%; display: block; margin: 2px 0 8px; }
.city-grid path { fill: none; stroke: rgba(128, 164, 194, .1); stroke-width: 1; }
.source-routes path { fill: none; stroke: #456078; stroke-width: 2; stroke-dasharray: 5 7; }
.shared-route-shadow, .shared-route { fill: none; stroke-linecap: round; }
.shared-route-shadow { stroke: rgba(49,138,255,.15); stroke-width: 18; }
.shared-route { stroke: url(#none); stroke: var(--blue); stroke-width: 3; stroke-dasharray: 8 7; animation: routeDash 8s linear infinite; }
.source-node circle { fill: #0e2235; stroke: #54728a; }
.source-node path { fill: none; stroke: #aac0d1; stroke-width: 1.5; }
.source-node text, .drop-node text { fill: #8ca4b7; font-size: 11px; letter-spacing: .04em; }
.hub-node > circle:not(.pulse) { fill: #0e3152; stroke: var(--cyan); stroke-width: 1.5; }
.hub-node .pulse { fill: rgba(66,215,232,.05); stroke: rgba(66,215,232,.2); animation: hubPulse 2.8s ease-out infinite; }
.hub-node path { fill: none; stroke: #d6fbff; stroke-width: 1.5; }
.hub-node text { fill: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-anchor: middle; }
.drop-node circle { fill: var(--blue); stroke: #bfe0ff; stroke-width: 2; }
.route-runner { fill: white; stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 5px var(--cyan)); }
.visual-caption { justify-content: flex-start; gap: 20px; letter-spacing: .05em; }
.visual-caption span { display: flex; align-items: center; gap: 7px; }
.visual-caption i { width: 7px; height: 7px; border-radius: 50%; }
.legend-source { background: #54728a; }.legend-hub { background: var(--cyan); }.legend-route { background: var(--blue); }

.section { padding: 128px 0; }
.section-heading { max-width: 760px; margin-bottom: 60px; }
.section-heading.narrow { max-width: 650px; }
h2 { margin-bottom: 22px; font-size: clamp(40px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.05; font-weight: 620; }
.section-heading > p:last-child, .audience-intro > p, .zones-copy > p, .signup-copy > p { max-width: 610px; color: var(--muted); font-size: 17px; }
h3 { font-size: 20px; line-height: 1.25; }

.problem { background: var(--bg-deep); }
.comparison { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; }
.comparison-side { min-height: 410px; padding: 32px; border: 1px solid var(--line); }
.comparison-side.today { background: rgba(255,255,255,.015); }
.comparison-side.smart { background: rgba(49,138,255,.06); border-color: var(--line-strong); }
.comparison-side header { display: flex; gap: 17px; align-items: flex-start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.comparison-side header > span { color: #587083; font: 11px ui-monospace, monospace; }
.comparison-side header p { margin: 0 0 4px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.comparison-side.smart header p { color: var(--cyan); }
.comparison-side header h3 { margin: 0; }
.comparison-switch { display: grid; place-items: center; color: var(--cyan); }
.comparison-switch span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 50%; }
.lane-list { margin-top: 40px; display: grid; gap: 25px; }
.lane { display: grid; grid-template-columns: 30px auto 1fr auto; align-items: center; gap: 10px; color: #91a6b8; font-size: 11px; }
.lane b, .merge-sources b { width: 26px; height: 26px; display: grid; place-items: center; color: #dce8f1; background: #132435; border: 1px solid #456077; border-radius: 50%; font-size: 10px; }
.lane i { height: 1px; background: repeating-linear-gradient(90deg, #486379 0 5px, transparent 5px 10px); }
.package { padding: 5px 8px; color: #8299ac; background: #111f2d; border: 1px solid var(--line); }
.vehicle { min-width: 92px; text-align: right; }
.comparison-note { margin: 35px 0 0; color: #637b8f; font-size: 12px; }
.merge-diagram { width: 80%; margin: 38px auto 0; text-align: center; }
.merge-sources { display: flex; justify-content: space-between; }
.merge-lines { height: 48px; display: flex; justify-content: space-between; padding-inline: 13px; overflow: hidden; }
.merge-lines i { width: 1px; height: 70px; display: block; background: #3974a5; transform-origin: top; }
.merge-lines i:first-child { transform: rotate(-55deg); }.merge-lines i:last-child { transform: rotate(55deg); }
.merge-hub { position: relative; z-index: 1; width: 172px; margin: 0 auto; padding: 11px; color: #e8fbfd; background: #0d3150; border: 1px solid var(--cyan); font-size: 12px; font-weight: 700; }
.merge-hub small { display: block; color: #8dabbc; font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.merge-arrow { color: var(--cyan); margin: 8px 0; }
.merge-route { display: flex; gap: 13px; align-items: center; justify-content: center; color: #d6eaff; font-size: 12px; font-weight: 650; }
.merge-route > span { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 5px rgba(49,138,255,.1); }
.merge-route i { color: var(--cyan); font-style: normal; }

.how { border-bottom: 1px solid var(--line); }
.steps { position: relative; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; counter-reset: steps; }
.steps::before { content: ""; position: absolute; left: 14%; right: 14%; top: 96px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), var(--line-strong), transparent); }
.steps li { position: relative; z-index: 1; padding: 0 52px 0 0; }
.steps li + li { padding-left: 42px; border-left: 1px solid var(--line); }
.step-num { margin-bottom: 22px; color: var(--cyan); font: 10px ui-monospace, monospace; letter-spacing: .12em; }
.step-icon { width: 88px; height: 88px; margin-bottom: 28px; display: grid; place-items: center; position: relative; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 50%; }
.step-icon span { position: absolute; width: 19px; height: 19px; border: 1px solid var(--blue-soft); }
.step-icon span:first-child { transform: translate(-12px,-10px); }.step-icon span:nth-child(2) { transform: translate(12px,-10px); }.step-icon span:nth-child(3) { transform: translate(0,12px); }
.step-icon.converge::after { content: ""; width: 20px; height: 20px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 6px rgba(49,138,255,.1); }
.step-icon.converge span { width: 5px; height: 5px; background: var(--cyan); border: 0; border-radius: 50%; }
.step-icon.converge span:first-child { transform: translate(-28px,-20px); }.step-icon.converge span:nth-child(2) { transform: translate(28px,-20px); }.step-icon.converge span:nth-child(3) { transform: translate(0,30px); }
.step-icon.route span { width: 8px; height: 8px; background: var(--cyan); border: 0; border-radius: 50%; }
.step-icon.route span:first-child { transform: translate(-27px,20px); }.step-icon.route span:nth-child(2) { transform: translate(0,-18px); }.step-icon.route span:nth-child(3) { transform: translate(28px,10px); }
.step-icon.route::after { content: ""; position: absolute; width: 62px; height: 40px; border-top: 1px dashed var(--blue); border-radius: 50%; transform: rotate(-9deg); }
.steps h3 { margin-bottom: 12px; }.steps p { color: var(--muted); max-width: 300px; font-size: 15px; }

.audience { background: #071320; }
.audience-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: start; }
.audience-intro { position: sticky; top: 128px; }
.audience-intro .text-link { margin-top: 20px; font-size: 14px; }
.audience-list { border-top: 1px solid var(--line); }
.audience-list article { padding: 31px 8px; display: grid; grid-template-columns: 54px 1fr; gap: 12px; border-bottom: 1px solid var(--line); transition: background .2s, padding .2s; }
.audience-list article:hover { padding-left: 18px; background: rgba(49,138,255,.035); }
.audience-list article > span { color: #567086; font: 10px ui-monospace, monospace; }
.audience-list h3 { margin-bottom: 8px; }.audience-list p { margin: 0; color: var(--muted); font-size: 14px; }
.audience-list .audience-label { margin-bottom: 7px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.audience-list .audience-primary h3 { font-size: 23px; }
.audience-list h3 small { margin-left: 10px; padding: 4px 6px; color: #6f8799; border: 1px solid var(--line); font-size: 8px; letter-spacing: .1em; vertical-align: middle; }
.audience-list .future { opacity: .7; }

.benefits { background: var(--bg-deep); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefit-grid article { min-height: 340px; padding: 38px 42px 42px 0; }
.benefit-grid article + article { padding-left: 42px; border-left: 1px solid var(--line); }
.benefit-mark { width: 62px; height: 62px; display: block; position: relative; margin-bottom: 46px; border: 1px solid var(--line-strong); border-radius: 50%; }
.benefit-mark::before, .benefit-mark::after { content: ""; position: absolute; }
.benefit-mark.cost::before { inset: 17px; border: 1px solid var(--cyan); border-radius: 50%; }.benefit-mark.cost::after { width: 20px; height: 1px; background: var(--cyan); top: 30px; left: 20px; transform: rotate(-35deg); }
.benefit-mark.efficiency::before { width: 28px; height: 28px; left: 16px; top: 16px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); transform: rotate(45deg); }.benefit-mark.efficiency::after { width: 24px; height: 1px; left: 18px; top: 30px; background: var(--cyan); }
.benefit-mark.mobility::before { width: 20px; height: 28px; left: 20px; top: 15px; border: 1px solid var(--cyan); border-radius: 50% 0 50% 50%; transform: rotate(32deg); }
.benefit-grid .index { color: var(--cyan); font: 9px ui-monospace, monospace; letter-spacing: .12em; }.benefit-grid h3 { font-size: 23px; }.benefit-grid article > p:last-child { color: var(--muted); font-size: 14px; }

.zones { overflow: hidden; }
.zones-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; align-items: center; }
.zone-map { position: relative; min-width: 0; background: rgba(6, 18, 30, .5); border: 1px solid var(--line); }
.zone-map svg { width: 100%; display: block; }
.coast { fill: none; stroke: rgba(66,215,232,.45); stroke-width: 2; stroke-dasharray: 2 8; }
.map-streets path { fill: none; stroke: rgba(139,172,198,.08); }
.zone circle { fill: rgba(8,24,39,.9); stroke: #36516a; }
.zone text { fill: #92a9bc; font-size: 10px; font-weight: 700; text-anchor: middle; letter-spacing: .08em; }
.zone .zone-status { fill: #577084; font-size: 6px; text-anchor: middle; letter-spacing: .08em; }
.active-zone circle:not(.zone-pulse) { fill: #0c2a46; stroke: var(--cyan); stroke-width: 1.5; }
.active-zone .zone-pulse { fill: rgba(49,138,255,.07); stroke: rgba(49,138,255,.25); stroke-dasharray: 3 6; }
.active-zone text { fill: #e0faff; }.active-zone .zone-status { fill: var(--cyan); }
.zone-link { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .55; }
.map-label { position: absolute; left: 18px; bottom: 16px; color: #5f788c; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.map-label span { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--cyan); border-radius: 50%; }
.zone-list { margin: 42px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.zone-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); color: #8aa0b2; }
.zone-list li > span { width: 7px; height: 7px; border: 1px solid #5b7183; border-radius: 50%; }.zone-list li.active > span { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(66,215,232,.08); }
.zone-list b { font-size: 14px; font-weight: 560; }.zone-list small { color: #557085; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }.zone-list .active b { color: white; }.zone-list .active small { color: var(--cyan); }

.pilot { padding-top: 32px; background: var(--bg-deep); }
.pilot-panel { padding: 28px 48px 50px; position: relative; background: #0a1b2b; border: 1px solid var(--line-strong); overflow: hidden; }
.pilot-panel::after { content: "30"; position: absolute; right: -12px; bottom: -116px; color: rgba(49,138,255,.055); font-size: 360px; line-height: 1; letter-spacing: -.1em; font-weight: 800; pointer-events: none; }
.pilot-kicker { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: #648096; font: 9px ui-monospace, monospace; letter-spacing: .14em; }
.pilot-grid { position: relative; z-index: 1; padding-top: 50px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 100px; }
.pilot-grid h2 { max-width: 660px; }.pilot-grid > div:first-child > p:not(.eyebrow) { max-width: 600px; color: var(--muted); }.pilot-grid .button { margin-top: 15px; }
.pilot-offer { padding-left: 40px; border-left: 1px solid var(--line); }
.offer-label { color: #7590a5; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.pilot-offer > strong { display: flex; align-items: flex-end; gap: 10px; color: white; font-size: 86px; line-height: .9; letter-spacing: -.07em; }.pilot-offer > strong small { padding-bottom: 8px; color: var(--cyan); font-size: 18px; letter-spacing: -.02em; }
.reference-price { margin: 32px 0 14px; padding-top: 20px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }.reference-price span { font-size: 28px; font-weight: 650; }.reference-price span small { font-size: 12px; color: #93a8ba; font-weight: 500; }.reference-price b { color: var(--cyan); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }.pilot-offer > p:last-child { color: #667f92; font-size: 11px; }

.signup { background: #06101d; }
.signup-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.contact-points { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }.contact-points p { margin: 14px 0; color: #8ca1b3; font-size: 13px; }.contact-points span { margin-right: 12px; color: var(--cyan); font: 9px ui-monospace, monospace; }
.form-wrap { padding: 36px; background: #081725; border: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { min-width: 0; margin-bottom: 21px; }
.field label { display: block; margin-bottom: 8px; color: #bdd0de; font-size: 12px; font-weight: 600; }.field label > span { color: #6f879b; font-weight: 400; }.field label > span[aria-hidden] { color: var(--cyan); }
.field input, .field select { width: 100%; height: 49px; padding: 0 13px; color: #e7f0f7; background: #06111d; border: 1px solid #263b4e; border-radius: 3px; outline: none; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: #536b7e; }.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(49,138,255,.1); }.field select { color-scheme: dark; }
.field.invalid input, .field.invalid select { border-color: var(--danger); }.error { min-height: 14px; display: block; margin-top: 4px; color: var(--danger); font-size: 10px; }
.consent { display: flex; align-items: flex-start; gap: 10px; color: #7f96a8; font-size: 11px; cursor: pointer; }.consent input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue); }.consent b { color: var(--cyan); }
.consent-error { margin-left: 26px; }
.form-submit { width: 100%; margin-top: 19px; }
.form-status { margin: 14px 0 0; color: var(--success); font-size: 13px; font-weight: 600; text-align: center; }.demo-note { margin: 9px 0 0; color: #587084; font-size: 9px; text-align: center; }

.site-footer { padding: 70px 0 28px; background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer-top { padding-bottom: 48px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 80px; align-items: start; }.footer-top p { color: #71889a; font-size: 13px; }.footer-top nav { display: flex; gap: 25px; }.footer-top nav a { color: #91a6b7; font-size: 12px; text-decoration: none; }.footer-top nav a:hover { color: white; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; color: #4e6679; border-top: 1px solid var(--line); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.in-view { opacity: 1; transform: none; }
@keyframes routeDash { to { stroke-dashoffset: -120; } }
@keyframes hubPulse { 0% { transform: scale(.7); opacity: .8; } 75%,100% { transform: scale(1.45); opacity: 0; } }

@media (max-width: 980px) {
  :root { --shell: min(100% - 40px, 760px); }
  .hero { padding-top: 126px; }.hero-grid { grid-template-columns: 1fr; gap: 60px; }.hero-copy { max-width: 700px; }.route-visual { max-width: 690px; }
  .comparison { grid-template-columns: 1fr; gap: 18px; }.comparison-switch { height: 30px; }.comparison-switch span { transform: rotate(90deg); }.comparison-side { min-height: 390px; }
  .steps li { padding-right: 22px; }.steps li + li { padding-left: 22px; }
  .audience-grid, .zones-grid, .signup-grid { grid-template-columns: 1fr; gap: 62px; }.audience-intro { position: static; max-width: 650px; }.zone-map { order: 2; }.zones-copy { order: 1; }
  .pilot-grid { gap: 45px; }.pilot-offer > strong { font-size: 70px; }
  .footer-top { grid-template-columns: 1fr 1fr; }.footer-top nav { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 32px); }
  .nav { height: 68px; }.nav-toggle { display: block; }.nav-menu { position: absolute; left: 0; right: 0; top: 68px; padding: 18px 16px 22px; display: none; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(3,10,19,.98); border-bottom: 1px solid var(--line); }.nav-menu.open { display: flex; }.nav-menu > a:not(.button) { min-height: 46px; display: flex; align-items: center; padding: 0 10px; }.nav-menu .button { margin-top: 8px; }.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { min-height: auto; padding: 118px 0 64px; }.hero-grid { gap: 46px; }.hero-copy > .eyebrow { font-size: 9px; }.hero-lede { font-size: 16px; line-height: 1.62; }.hero-benefits { gap: 9px 16px; margin-bottom: 28px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }.hero-actions .text-link { align-self: flex-start; }.pilot-note { line-height: 1.4; }
  .route-visual { margin: 0 -8px; padding: 12px; }.route-visual::before { display: none; }.visual-caption { gap: 10px; flex-wrap: wrap; }.route-map { margin-top: 8px; }.source-node text, .drop-node text { font-size: 9px; }
  .section { padding: 88px 0; }.section-heading { margin-bottom: 42px; }h2 { font-size: 39px; }
  .comparison-side { min-height: auto; padding: 22px 18px; }.lane { grid-template-columns: 26px auto 1fr; }.vehicle { grid-column: 2 / -1; text-align: left; }.merge-diagram { width: 88%; }
  .steps { display: block; }.steps::before { left: 43px; top: 60px; bottom: 55px; right: auto; width: 1px; height: auto; }.steps li, .steps li + li { min-height: 170px; padding: 0 0 35px 116px; border: 0; }.step-num { position: absolute; left: 3px; top: 37px; }.step-icon { position: absolute; left: 28px; top: 13px; width: 65px; height: 65px; margin: 0; }.step-icon span { transform: scale(.75); }.steps h3 { padding-top: 19px; }
  .audience-list article { grid-template-columns: 38px 1fr; }.audience-list h3 small { display: table; margin: 8px 0 0; }
  .benefit-grid { grid-template-columns: 1fr; }.benefit-grid article, .benefit-grid article + article { min-height: auto; padding: 30px 0; border-left: 0; border-top: 1px solid var(--line); }.benefit-grid article:first-child { border-top: 0; }.benefit-mark { margin-bottom: 28px; }
  .zones-grid { gap: 44px; }.zone-map { margin: 0 -8px; }.zone-list li { grid-template-columns: 18px 1fr; }.zone-list small { grid-column: 2; }
  .pilot { padding-top: 0; }.pilot-panel { width: 100%; padding: 22px 24px 40px; border-left: 0; border-right: 0; }.pilot-grid { grid-template-columns: 1fr; }.pilot-grid h2 { font-size: 42px; }.pilot-offer { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); }.pilot-panel::after { font-size: 260px; bottom: -80px; }.pilot-kicker span:last-child { display: none; }
  .form-wrap { margin: 0 -8px; padding: 24px 18px; }.form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }.footer-top nav { grid-column: auto; flex-wrap: wrap; }.footer-bottom { flex-direction: column; gap: 8px; }
}

/* La referencia de Moebius aporta ritmo, proporciones y composición, no su
   identidad cromática. Urban Smart mantiene íntegra su paleta tecnológica. */
:root {
  --bg: #06101d;
  --bg-deep: #030a13;
  --surface: #0a1726;
  --surface-2: #0d1c2d;
  --line: rgba(162, 197, 225, .15);
  --line-strong: rgba(73, 179, 255, .36);
  --text: #f3f8fc;
  --muted: #91a6ba;
  --blue: #318aff;
  --cyan: #42d7e8;
  --blue-soft: #78b7ff;
  --orange: #318aff;
}

body { background: var(--bg); color: var(--text); }
body::before { background: radial-gradient(circle at 74% 9%, rgba(36, 115, 217, .12), transparent 31%), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 100% 5px; }
.site-header, .site-header.scrolled { background: rgba(3, 10, 19, .92); border-color: var(--line); }
.brand, .nav-menu > a:not(.button) { color: var(--text); }
.brand strong, .eyebrow, .nav-menu > a:not(.button):hover { color: var(--cyan); }
.brand-mark i { border-color: var(--blue); }.brand-mark i:nth-child(2) { border-color: var(--cyan); }
.button, .pilot .button { background: var(--blue); border-color: var(--blue); }.button:hover { background: #227af0; }
.text-link { color: #dbe9f4; border-color: rgba(219,233,244,.35); }.text-link span { color: var(--cyan); }

.hero, .how, .audience, .zones, .pilot { background: var(--bg); }
.hero { border-color: var(--line); }
h1, h2 { color: var(--text); } h1 em, h2 em { color: var(--blue-soft); }
.hero-copy > .eyebrow span { background: var(--cyan); }
.hero-lede, .section-heading > p:last-child, .audience-intro > p, .zones-copy > p, .signup-copy > p { color: var(--muted); }
.pilot-note { color: #7790a5; }
.route-visual { background: rgba(7, 21, 35, .72); border-color: var(--line-strong); box-shadow: 0 35px 80px rgba(0,0,0,.25); }
.route-visual::before { background: var(--blue); box-shadow: 0 346px 0 var(--cyan); }
.visual-topline, .visual-caption, .live-dot { color: #71899e; }
.city-grid path { stroke: rgba(128, 164, 194, .1); }.source-routes path { stroke: #456078; }.shared-route-shadow { stroke: rgba(49,138,255,.15); }
.source-node circle { fill: #0e2235; stroke: #54728a; }.source-node path { stroke: #aac0d1; }.source-node text, .drop-node text { fill: #8ca4b7; }
.hub-node > circle:not(.pulse) { fill: #0e3152; stroke: var(--cyan); }.hub-node path { stroke: #d6fbff; }.hub-node text { fill: var(--cyan); }

.problem, .benefits, .site-footer { background: var(--bg-deep); }
.problem .section-heading h2, .problem .comparison-side h3 { color: var(--text); }.problem .section-heading h2 em { color: var(--blue-soft); }.problem .section-heading > p:last-child { color: var(--muted); }.problem .eyebrow { color: var(--cyan); }
.comparison-side.smart { background: rgba(49,138,255,.06); border-color: var(--line-strong); }.comparison-side.smart header p { color: var(--cyan); }
.how { border-color: var(--line); }.step-num, .audience-list article > span, .benefit-grid .index { color: var(--cyan); }.step-icon { background: var(--bg); border-color: var(--line-strong); }.step-icon.converge::after { background: var(--blue); box-shadow: 0 0 0 6px rgba(49,138,255,.1); }
.audience-list article:hover { background: rgba(49,138,255,.035); }.audience-list p, .benefit-grid article > p:last-child { color: var(--muted); }
.benefits { color: var(--text); }.benefit-grid, .benefit-grid article + article { border-color: var(--line); }

.zone-map { background: rgba(6, 18, 30, .5); border-color: var(--line); box-shadow: none; }.map-streets path { stroke: rgba(139,172,198,.08); }.zone circle { fill: rgba(8,24,39,.9); stroke: #36516a; }.zone text { fill: #92a9bc; }.zone .zone-status { fill: #577084; }.active-zone circle:not(.zone-pulse) { fill: #0c2a46; stroke: var(--cyan); }.active-zone text { fill: #e0faff; }.active-zone .zone-status { fill: var(--cyan); }.map-label, .zone-list small { color: #5f788c; }.zone-list .active b { color: white; }.zone-list .active small { color: var(--cyan); }.zone-list li.active > span { background: var(--cyan); border-color: var(--cyan); }

.pilot-panel { background: #0a1b2b; border-color: var(--line-strong); color: var(--text); box-shadow: none; }.pilot-panel h2 { color: var(--text); }.pilot-panel h2 em { color: var(--blue-soft); }.pilot-panel::after { color: rgba(49,138,255,.055); }.pilot-grid > div:first-child > p:not(.eyebrow) { color: var(--muted); }.pilot-offer > strong { color: white; }.pilot-offer > strong small, .reference-price b { color: var(--cyan); }
.signup { background: var(--bg); color: var(--text); }.signup h2 { color: var(--text); }.signup h2 em, .signup .eyebrow { color: var(--blue-soft); }.signup-copy > p { color: var(--muted); }
.site-footer { border-color: var(--line); }.footer-top p, .footer-top nav a { color: #71889a; }.footer-bottom { color: #4e6679; border-color: var(--line); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-menu { background: rgba(3,10,19,.99); border-color: var(--line); }.nav-menu > a:not(.button) { color: var(--text); border-color: var(--line); }
  .nav-toggle { color: white; }
  .route-visual { margin-inline: 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .route-runner { display: none; }
}

/* -------------------------------------------------------------------------
   Dirección editorial clara, emparentada con el sistema visual de Moebius.
   Urban Smart conserva su azul/cyan como código propio; el crema, la tinta,
   las etiquetas técnicas y el ritmo amplio ordenan la experiencia.
   ------------------------------------------------------------------------- */
:root {
  --bg: #ede7df;
  --bg-deep: #102b3c;
  --surface: #f7f3ed;
  --surface-2: #e6ded4;
  --line: rgba(18, 44, 61, .13);
  --line-strong: rgba(18, 44, 61, .3);
  --text: #142d3e;
  --muted: rgba(20, 45, 62, .72);
  --blue: #1e6fbe;
  --cyan: #2c98b6;
  --blue-soft: #1e6fbe;
  --orange: #c2410c;
  --success: #65c7a5;
  --danger: #a94a42;
  --shell: min(1296px, calc(100vw - 144px));
  --radius: 10px;
}

body { background: var(--bg); color: var(--text); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
body::before { background: radial-gradient(circle at 78% 10%, rgba(44, 152, 182, .1), transparent 29%); }
[id] { scroll-margin-top: 94px; }
.site-header { position: sticky; background: rgba(237, 231, 223, .96); border-color: var(--line); }
.site-header.scrolled { background: rgba(237, 231, 223, .94); border-color: var(--line); box-shadow: 0 12px 28px -22px rgba(20, 45, 62, .5); }
.nav { height: 78px; }
.brand { color: var(--text); font-size: 13px; }
.brand strong { color: var(--orange); }
.brand-mark i { border-color: var(--blue); }.brand-mark i:nth-child(2) { border-color: var(--orange); }
.nav-menu > a:not(.button) { color: var(--text); font-size: 14px; font-weight: 550; }
.nav-menu > a:not(.button):hover { color: var(--orange); }
.button { background: var(--orange); border-color: var(--orange); border-radius: 0; box-shadow: none; }
.button:hover { background: #a83809; box-shadow: none; }
.text-link { color: var(--text); border-color: rgba(20,45,62,.35); }.text-link span { color: var(--orange); }
.skip-link { color: white; background: var(--orange); }

.hero { min-height: 700px; padding: 76px 0 84px; border-bottom: 1px solid var(--line); }
.hero-grid { grid-template-columns: .92fr 1.08fr; gap: 76px; }
.eyebrow { color: var(--orange); font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 11px; }
.hero-copy > .eyebrow span { background: var(--orange); }
h1 { margin-bottom: 24px; font-size: clamp(54px, 5.2vw, 76px); color: var(--text); }
h1 em, h2 em { color: var(--orange); }
.hero-lede { color: var(--muted); }
.pilot-note { color: rgba(20,45,62,.58); }.pilot-note > span { border-color: var(--cyan); box-shadow: none; }
.route-visual { padding: 18px; background: rgba(247, 243, 237, .72); border-color: var(--line-strong); box-shadow: 0 2px 4px rgba(20,45,62,.08), 0 20px 36px -24px rgba(20,45,62,.45); }
.route-visual::before { background: var(--orange); box-shadow: 0 346px 0 var(--cyan); }
.visual-topline, .visual-caption { color: rgba(20,45,62,.55); }.live-dot { color: rgba(20,45,62,.65); }.live-dot::before { box-shadow: none; }
.city-grid path { stroke: rgba(20,45,62,.1); }.source-routes path { stroke: rgba(20,45,62,.38); }.shared-route-shadow { stroke: rgba(30,111,190,.1); }
.source-node circle { fill: #f7f3ed; stroke: rgba(20,45,62,.4); }.source-node path { stroke: var(--text); }.source-node text, .drop-node text { fill: rgba(20,45,62,.68); }
.hub-node > circle:not(.pulse) { fill: #e8f3f3; stroke: var(--cyan); }.hub-node path { stroke: var(--text); }.hub-node text { fill: var(--cyan); }

.section { padding: 104px 0; }.section-heading { margin-bottom: 54px; }.section-heading > p:last-child, .audience-intro > p, .zones-copy > p, .signup-copy > p { color: var(--muted); }
h2 { color: var(--text); }

.problem { background: var(--bg-deep); color: #ede7df; }
.problem .section-heading h2, .problem .comparison-side h3 { color: #f4eee7; }.problem .section-heading h2 em { color: #62b8d1; }.problem .section-heading > p:last-child { color: rgba(237,231,223,.75); }.problem .eyebrow { color: #62b8d1; }
.comparison-side { border-color: rgba(237,231,223,.16); }.comparison-side.today { background: rgba(255,255,255,.015); }.comparison-side.smart { background: rgba(98,184,209,.09); border-color: rgba(98,184,209,.44); }
.comparison-side header { border-color: rgba(237,231,223,.15); }.comparison-side header > span, .comparison-side header p, .lane, .comparison-note { color: rgba(237,231,223,.62); }.comparison-side.smart header p { color: #70c2d8; }
.comparison-switch { color: #62b8d1; }.comparison-switch span { background: var(--bg-deep); border-color: rgba(98,184,209,.5); }
.lane b, .merge-sources b { color: #f4eee7; background: rgba(255,255,255,.04); border-color: rgba(237,231,223,.32); }.package { color: rgba(237,231,223,.68); background: rgba(255,255,255,.03); border-color: rgba(237,231,223,.16); }.lane i { background: repeating-linear-gradient(90deg, rgba(237,231,223,.38) 0 5px, transparent 5px 10px); }
.merge-lines i { background: rgba(98,184,209,.55); }.merge-hub { color: #fff; background: rgba(98,184,209,.12); border-color: #62b8d1; }.merge-hub small { color: rgba(237,231,223,.65); }.merge-arrow { color: #62b8d1; }.merge-route { color: #f4eee7; }.merge-route > span { background: #62b8d1; box-shadow: none; }.merge-route i { color: #62b8d1; }

.how { background: #f7f3ed; border-bottom-color: var(--line); }.steps::before { background: linear-gradient(90deg, transparent, var(--line-strong), var(--line-strong), transparent); }.steps li + li { border-color: var(--line); }.step-num { color: var(--orange); }.step-icon { background: #f7f3ed; border-color: var(--line-strong); }.step-icon span { border-color: var(--cyan); }.step-icon.converge::after { background: var(--orange); box-shadow: 0 0 0 6px rgba(194,65,12,.08); }.steps p { color: var(--muted); }

.audience { background: var(--bg); }.audience-list { border-color: var(--line); }.audience-list article { border-color: var(--line); }.audience-list article:hover { background: rgba(255,255,255,.28); }.audience-list article > span { color: var(--orange); }.audience-list p { color: var(--muted); }.audience-list h3 small { color: rgba(20,45,62,.58); border-color: var(--line-strong); }

.benefits { background: #dfe9e8; }.benefit-grid { border-color: var(--line); }.benefit-grid article + article { border-color: var(--line); }.benefit-mark { border-color: var(--line-strong); }.benefit-grid .index { color: var(--orange); }.benefit-grid article > p:last-child { color: var(--muted); }

.zones { background: var(--bg); }.zone-map { background: rgba(247,243,237,.65); border-color: var(--line); box-shadow: 0 2px 4px rgba(20,45,62,.06), 0 20px 34px -26px rgba(20,45,62,.42); }.map-streets path { stroke: rgba(20,45,62,.09); }.zone circle { fill: #f7f3ed; stroke: rgba(20,45,62,.32); }.zone text { fill: rgba(20,45,62,.78); }.zone .zone-status { fill: rgba(20,45,62,.5); }.active-zone circle:not(.zone-pulse) { fill: #e2eff1; stroke: var(--cyan); }.active-zone text { fill: var(--text); }.active-zone .zone-status { fill: var(--orange); }.zone-link { stroke: var(--blue); }.map-label, .zone-list small { color: rgba(20,45,62,.5); }.zone-list, .zone-list li { border-color: var(--line); }.zone-list li { color: var(--muted); }.zone-list .active b { color: var(--text); }.zone-list .active small { color: var(--orange); }.zone-list li.active > span { background: var(--orange); border-color: var(--orange); box-shadow: none; }

.pilot { background: var(--bg); }.pilot-panel { padding: 34px 50px 54px; background: var(--bg-deep); border-color: transparent; color: #ede7df; box-shadow: 0 2px 5px rgba(20,45,62,.12), 0 22px 38px -28px rgba(20,45,62,.55); }.pilot-panel h2 { color: #f4eee7; }.pilot-panel h2 em { color: #62b8d1; }.pilot-panel::after { color: rgba(98,184,209,.06); }.pilot-kicker, .pilot-offer > p:last-child { color: rgba(237,231,223,.55); }.pilot-kicker, .pilot-offer, .reference-price { border-color: rgba(237,231,223,.16); }.pilot-grid > div:first-child > p:not(.eyebrow) { color: rgba(237,231,223,.73); }.pilot-offer > strong { color: #f4eee7; }.pilot-offer > strong small, .reference-price b { color: #62b8d1; }.reference-price span small { color: rgba(237,231,223,.65); }.pilot .button { background: var(--orange); border-color: var(--orange); }

.signup { background: var(--bg-deep); color: #ede7df; }.signup h2 { color: #f4eee7; }.signup h2 em, .signup .eyebrow { color: #62b8d1; }.signup-copy > p { color: rgba(237,231,223,.72); }.contact-points { border-color: rgba(237,231,223,.16); }.contact-points p { color: rgba(237,231,223,.7); }.contact-points span { color: #62b8d1; }
.form-wrap { background: rgba(237,231,223,.055); border-color: rgba(237,231,223,.16); border-radius: var(--radius); }.field label { color: rgba(237,231,223,.86); }.field label > span { color: rgba(237,231,223,.5); }.field label > span[aria-hidden] { color: #62b8d1; }.field input, .field select { color: #f4eee7; background: rgba(237,231,223,.065); border-color: rgba(237,231,223,.2); border-radius: 7px; }.field input::placeholder { color: rgba(237,231,223,.4); }.field input:focus, .field select:focus { border-color: #62b8d1; box-shadow: 0 0 0 3px rgba(98,184,209,.1); }.consent { color: rgba(237,231,223,.64); }.demo-note { color: rgba(237,231,223,.46); }.form-status[data-state='ok'] { color: #70d1b0; }.form-status[data-state='error'] { color: #ff9b78; }.form-submit:disabled { opacity: .65; cursor: wait; transform: none; }.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.site-footer { background: #f7f3ed; border-color: var(--line); }.footer-top p, .footer-top nav a { color: var(--muted); }.footer-top nav a:hover { color: var(--orange); }.footer-bottom { color: rgba(20,45,62,.52); border-color: var(--line); }

@media (max-width: 980px) {
  :root { --shell: min(100% - 44px, 780px); }
  .hero { padding-top: 58px; }.route-visual { max-width: 760px; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 36px); }
  .site-header { position: sticky; }.nav { height: 66px; }.nav-toggle { color: var(--text); }
  .nav-menu { top: 66px; background: rgba(247,243,237,.99); border-color: var(--line); }.nav-menu > a:not(.button) { color: var(--text); border-bottom: 1px solid var(--line); }
  .hero { padding: 58px 0 54px; }.hero h1 { font-size: 49px; }.route-visual { margin-inline: 0; }.section { padding: 76px 0; }
  .comparison-side { border-color: rgba(237,231,223,.16); }.steps::before { background: var(--line-strong); }.pilot-panel { width: var(--shell); padding: 24px 22px 40px; border-radius: 0; }.pilot-grid h2 { font-size: 39px; }.form-wrap { margin: 0; padding: 24px 18px; }
}

/* Cierre cromático: la referencia modifica la composición, nunca la marca. */
:root {
  --bg: #06101d; --bg-deep: #030a13; --surface: #0a1726; --surface-2: #0d1c2d;
  --line: rgba(162,197,225,.15); --line-strong: rgba(73,179,255,.36);
  --text: #f3f8fc; --muted: #91a6ba; --blue: #318aff; --cyan: #42d7e8;
  --blue-soft: #78b7ff; --orange: #318aff;
}
body { background: var(--bg); color: var(--text); }
body::before { background: radial-gradient(circle at 74% 9%, rgba(36,115,217,.12), transparent 31%), linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px); background-size: auto, 100% 5px; }
.site-header, .site-header.scrolled { background: rgba(3,10,19,.92); border-color: var(--line); }
.brand, .nav-menu > a:not(.button) { color: var(--text); }.brand strong, .eyebrow, .nav-menu > a:not(.button):hover { color: var(--cyan); }
.brand-mark i { border-color: var(--blue); }.brand-mark i:nth-child(2) { border-color: var(--cyan); }
.button, .pilot .button { background: var(--blue); border-color: var(--blue); }.button:hover { background: #227af0; }
.text-link { color: #dbe9f4; border-color: rgba(219,233,244,.35); }.text-link span { color: var(--cyan); }
.hero, .how, .audience, .zones, .pilot, .signup { background: var(--bg); }
h1, h2 { color: var(--text); } h1 em, h2 em { color: var(--blue-soft); }.hero-copy > .eyebrow span { background: var(--cyan); }
.hero-lede, .section-heading > p:last-child, .audience-intro > p, .zones-copy > p, .signup-copy > p { color: var(--muted); }.pilot-note { color: #7790a5; }
.route-visual { background: rgba(7,21,35,.72); border-color: var(--line-strong); box-shadow: 0 35px 80px rgba(0,0,0,.25); }.route-visual::before { background: var(--blue); box-shadow: 0 346px 0 var(--cyan); }
.visual-topline, .visual-caption, .live-dot { color: #71899e; }.city-grid path { stroke: rgba(128,164,194,.1); }.source-routes path { stroke: #456078; }.shared-route-shadow { stroke: rgba(49,138,255,.15); }
.source-node circle { fill: #0e2235; stroke: #54728a; }.source-node path { stroke: #aac0d1; }.source-node text, .drop-node text { fill: #8ca4b7; }.hub-node > circle:not(.pulse) { fill: #0e3152; stroke: var(--cyan); }.hub-node path { stroke: #d6fbff; }.hub-node text { fill: var(--cyan); }
.problem, .benefits, .site-footer { background: var(--bg-deep); }
.problem .section-heading h2, .problem .comparison-side h3 { color: var(--text); }.problem .section-heading h2 em { color: var(--blue-soft); }.problem .section-heading > p:last-child { color: var(--muted); }.problem .eyebrow { color: var(--cyan); }
.comparison-side.smart { background: rgba(49,138,255,.06); border-color: var(--line-strong); }.comparison-side.smart header p { color: var(--cyan); }
.step-num, .audience-list article > span, .benefit-grid .index { color: var(--cyan); }.step-icon { background: var(--bg); border-color: var(--line-strong); }.step-icon.converge::after { background: var(--blue); box-shadow: 0 0 0 6px rgba(49,138,255,.1); }
.audience-list article:hover { background: rgba(49,138,255,.035); }.audience-list p, .benefit-grid article > p:last-child { color: var(--muted); }.benefits { color: var(--text); }
.zone-map { background: rgba(6,18,30,.5); border-color: var(--line); box-shadow: none; }.map-streets path { stroke: rgba(139,172,198,.08); }.zone circle { fill: rgba(8,24,39,.9); stroke: #36516a; }.zone text { fill: #92a9bc; }.zone .zone-status { fill: #577084; }.active-zone circle:not(.zone-pulse) { fill: #0c2a46; stroke: var(--cyan); }.active-zone text { fill: #e0faff; }.active-zone .zone-status { fill: var(--cyan); }.map-label, .zone-list small { color: #5f788c; }.zone-list .active b { color: white; }.zone-list .active small { color: var(--cyan); }.zone-list li.active > span { background: var(--cyan); border-color: var(--cyan); }
.pilot-panel { background: #0a1b2b; border-color: var(--line-strong); color: var(--text); box-shadow: none; }.pilot-panel h2 { color: var(--text); }.pilot-panel h2 em { color: var(--blue-soft); }.pilot-panel::after { color: rgba(49,138,255,.055); }.pilot-grid > div:first-child > p:not(.eyebrow) { color: var(--muted); }.pilot-offer > strong { color: white; }.pilot-offer > strong small, .reference-price b { color: var(--cyan); }
.signup h2 { color: var(--text); }.signup h2 em, .signup .eyebrow { color: var(--blue-soft); }.signup-copy > p { color: var(--muted); }
.site-footer { border-color: var(--line); }.footer-top p, .footer-top nav a { color: #71889a; }.footer-bottom { color: #4e6679; border-color: var(--line); }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .nav-toggle { color: white; }.nav-menu { background: rgba(3,10,19,.99); border-color: var(--line); }.nav-menu > a:not(.button) { color: var(--text); border-color: var(--line); }
  .route-visual { margin-inline: 0; min-width: 0; }
}

/* Chromium/Windows abre el menú nativo en una superficie separada: sin
   colores explícitos para cada opción puede combinar fondo claro y texto
   claro, aunque el control cerrado use `color-scheme: dark`. */
.field select {
  color: #f4eee7;
  background-color: rgba(237, 231, 223, .065);
}
.field select option {
  color: #e7f0f7;
  background-color: #0f1e2d;
}
.field select option[value=""] {
  color: #91a6ba;
}
.turnstile-widget {
  min-height: 65px;
  margin-top: 12px;
}
.turnstile-widget:focus-visible { outline-offset: 3px; }
.turnstile-status { min-height: 18px; margin: 7px 0 0; color: rgba(237,231,223,.58); font-size: 11px; line-height: 1.45; }
.turnstile-status[data-state='ok'] { color: #70d1b0; }
.turnstile-status[data-state='error'] { color: #ff9b78; }

.process-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 0; margin: 0; list-style: none; }
.process-flow li { padding-top: 24px; border-top: 2px solid #245886; }
.process-flow li:last-child { border-color: var(--cyan); }
.process-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.process-top span:first-child { color: var(--blue-soft); font-size: 54px; line-height: 1; font-weight: 350; letter-spacing: -.06em; }
.process-top span:last-child { color: #7d9bb2; font-size: 25px; }
.process-flow .process-label { color: var(--cyan); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.process-flow h3 { color: var(--text); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; margin-bottom: 20px; }
.process-flow li > p:last-child { color: #a6bbcd; font-size: 15px; line-height: 1.7; max-width: 34ch; margin-bottom: 0; }
@media (max-width: 720px) {
  .process-flow { grid-template-columns: 1fr; gap: 32px; }
  .process-flow li { position: relative; padding: 24px 0 0 58px; }
  .process-top { position: absolute; left: 0; top: 24px; margin: 0; }
  .process-top span:first-child { font-size: 34px; }.process-top span:last-child { display: none; }
  .process-flow h3 { font-size: 26px; margin-bottom: 12px; }
}
.audience-list .future { opacity: 1; }
.audience-list .future h3 small {
  display: inline-block;
  color: #9debf4;
  background: #102c3c;
  border: 1px solid #39758b;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 650;
}

.benefits-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 90px; align-items: start; }
.benefits-intro h2 { font-size: clamp(36px, 3.7vw, 54px); max-width: 12ch; }
.benefits-intro > p:not(.eyebrow) { color: #a6bbcd; max-width: 35ch; font-size: 16px; line-height: 1.7; margin: 26px 0; }
.pilot-caption { display: inline-flex; align-items: center; gap: 10px; color: #91a6ba; font-size: 12px; }
.pilot-caption::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.benefits-list article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 29px 0; border-top: 1px solid #294050; }
.benefits-list article:first-child { padding-top: 24px; }
.benefits-list article:last-child { padding-bottom: 0; }
.benefit-number { font-size: 17px; color: #78b7ff; font-variant-numeric: tabular-nums; line-height: 1.4; }
.benefits-list .benefit-category { color: var(--cyan); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.benefits-list h3 { font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -.025em; font-weight: 600; margin-bottom: 12px; }
.benefits-list article > div > p:last-child { color: #a6bbcd; font-size: 15px; line-height: 1.7; max-width: 46ch; margin: 0; }
@media (max-width: 800px) {
  .benefits-layout { grid-template-columns: 1fr; gap: 36px; }
  .benefits-intro h2 { max-width: 18ch; }
  .benefits-intro > p:not(.eyebrow) { margin: 20px 0; }
  .benefits-list article { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 25px 0; }
}

/* Comparación de recorridos: las conexiones son el gráfico protagonista. */
.route-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.route-case { min-width: 0; padding-top: 28px; border-top: 1px solid #354553; }
.route-case-after { border-color: var(--cyan); }
.route-case .eyebrow { font-size: 10px; line-height: 1.7; margin-bottom: 16px; }
.route-case-before .eyebrow { color: #91a6ba; }
.route-case h3 { min-height: 72px; margin-bottom: 26px; max-width: 420px; font-size: clamp(25px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.route-story { position: relative; padding-left: 88px; }
.route-story svg { width: 100%; height: 210px; display: block; overflow: visible; }
.route-origins { position: absolute; left: 0; top: 0; height: 210px; display: flex; flex-direction: column; justify-content: space-around; color: #b8c9d7; font-size: 12px; }
.separate-paths, .joining-paths { fill: none; stroke: #62798b; stroke-width: 2; }
.separate-paths { stroke-dasharray: 5 6; }
.joining-paths { stroke: #318aff; opacity: .75; }
.origin-dots { fill: #a9bfce; }.end-dots { fill: #62798b; }
.unified-path { fill: none; stroke: #42d7e8; stroke-width: 4; stroke-linecap: round; }
.consolidation-ring { fill: #0d273a; stroke: #42d7e8; stroke-width: 2; }
.parcel-symbol { fill: none; stroke: #e4faff; stroke-width: 1.5; }
.delivery-dots { fill: #42d7e8; stroke: #06101d; stroke-width: 3; }
.route-story svg text { fill: #b8c9d7; font: 13px 'Segoe UI', sans-serif; }
.operator-key, .shared-key { min-height: 50px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: #91a6ba; }
.operator-key span::before { content: ''; display: inline-block; width: 12px; margin-right: 7px; border-top: 1px dashed #91a6ba; vertical-align: middle; }
.shared-key { color: #42d7e8; font-weight: 600; }.shared-key span { width: 24px; height: 3px; background: #42d7e8; }
.route-takeaway { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: #91a6ba; font-size: 16px; line-height: 1.7; }
.route-takeaway strong { color: #d9e6ef; font-weight: 500; }
@media (max-width: 800px) {
  .route-comparison { grid-template-columns: 1fr; gap: 48px; }
  .route-case h3 { min-height: 0; margin-bottom: 18px; }
  .route-story { padding-left: 76px; }.route-origins { font-size: 11px; }
  .route-story svg, .route-origins { height: 170px; }
  .operator-key { gap: 8px 12px; }.route-takeaway { margin-top: 16px; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: clamp(40px, 12vw, 47px); line-height: 1.02; }
  .hero-benefits { display: grid; grid-template-columns: 1fr; }
  .audience-list .audience-primary h3 { font-size: 21px; }
}

/* Portada introductoria a todo el ancho, antes del hero original. */
.intro-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-height: 50vh;
  background: #06101d;
}
.intro-visual img {
  display: block;
  width: 100%;
  height: min(56.28vw, 50vh);
  max-height: 50vh;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
}
.intro-visual::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: clamp(140px, 21vw, 300px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,16,29,0) 0%, rgba(6,16,29,.28) 38%, #06101d 100%);
}
@media (max-width: 720px) {
  .intro-visual::after {
    height: 42%;
  }
}