:root {
  color-scheme: light;
  --ink: #152c40;
  --ink-2: #39576c;
  --muted: #708392;
  --line: #dce6ec;
  --paper: #f5f8fa;
  --white: #fff;
  --green: #174e68;
  --green-dark: #11354b;
  --green-soft: #e6f3f7;
  --lime: #f6c36d;
  --gold: #e9a648;
  --orange: #dc8256;
  --red: #b54e43;
  --shadow: 0 24px 70px rgba(16, 47, 70, .12);
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 3px solid rgba(210, 163, 81, .72); outline-offset: 3px; }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(250, 251, 247, .93); border-bottom: 1px solid rgba(227, 234, 230, .8); backdrop-filter: blur(16px); }
.nav-wrap { width: min(1240px, calc(100% - 48px)); height: 82px; margin: auto; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #f4f8eb; background: linear-gradient(145deg, #1d594b, #123b35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 7px 16px rgba(18,59,53,.16); }
.brand-mark svg { width: 25px; height: 25px; }
.brand-name { font: 800 16px/1.05 Outfit, sans-serif; letter-spacing: .105em; }
.brand-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .21em; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 27px; margin-left: auto; }
.nav-links a { color: #536b66; font-size: 13px; font-weight: 600; transition: color .18s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-select { border: 0; background: transparent; color: #5d736e; padding: 9px 2px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mobile-menu { display: none; }

.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; border: 1px solid transparent; padding: 0 20px; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(22, 72, 62, .17); }
.btn-primary:hover { background: #103c35; box-shadow: 0 11px 23px rgba(23, 75, 66, .21); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-outline { border-color: #cbd8d1; background: rgba(255,255,255,.56); color: var(--ink); }
.btn-outline:hover { background: #fff; border-color: #aebfb5; }
.btn-soft { background: var(--green-soft); color: var(--green); }
.btn-small { min-height: 36px; border-radius: 8px; padding: 0 12px; font-size: 11px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); background: #fff; border-radius: 9px; display: inline-grid; place-items: center; cursor: pointer; }
.btn-icon:hover { background: var(--green-soft); }

.page-shell { min-height: 70vh; }
.container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(239,184,95,.15); }
.section { padding: 82px 0; }
.section-sm { padding: 56px 0; }
.section-heading { max-width: 620px; margin-bottom: 33px; }
.section-heading h2 { margin: 12px 0 10px; font: 800 clamp(27px, 3vw, 40px)/1.12 Outfit, sans-serif; letter-spacing: -.04em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.display { margin: 16px 0 18px; font: 800 clamp(39px, 6.3vw, 73px)/.99 Outfit, sans-serif; letter-spacing: -.065em; }
.display em { color: #b66b42; font-style: normal; }
.lead { max-width: 520px; color: #607873; font-size: 16px; line-height: 1.72; }
.accent-line { width: 40px; height: 3px; border-radius: 4px; background: var(--gold); }

.hero { overflow: hidden; position: relative; padding: 54px 0 75px; background: radial-gradient(ellipse at 79% 45%, rgba(219,235,196,.54), transparent 39%), linear-gradient(115deg, #fbfcf8 0%, #f5f7ef 100%); }
.hero::before { content: ""; position: absolute; width: 720px; height: 720px; right: -145px; top: -325px; border: 1px solid rgba(22,72,62,.09); border-radius: 50%; box-shadow: 0 0 0 67px rgba(22,72,62,.024), 0 0 0 135px rgba(22,72,62,.018); }
.hero::after { content: ""; position: absolute; width: 210px; height: 210px; left: -115px; bottom: -150px; border-radius: 50%; background: rgba(217,236,164,.32); filter: blur(2px); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.03fr .97fr; gap: 70px; align-items: center; min-height: 455px; }
.hero-copy { padding: 22px 0 30px; }
.hero-copy .lead { margin: 0 0 27px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: #688079; font-size: 11px; font-weight: 600; }
.avatar-stack { display: flex; padding-left: 7px; }
.avatar-stack span { width: 24px; height: 24px; margin-left: -7px; border: 2px solid var(--paper); border-radius: 50%; display: grid; place-items: center; background: #d6a877; color: white; font-size: 8px; font-weight: 800; }
.avatar-stack span:nth-child(2) { background: #789488; }
.avatar-stack span:nth-child(3) { background: #d1875e; }
.avatar-stack span:nth-child(4) { background: #a6b66a; }
.hero-art { min-height: 410px; position: relative; display: grid; place-items: center; }
.art-orbit { position: absolute; width: min(100%, 450px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(23,75,66,.14); background: radial-gradient(circle at 50% 52%, #f1eddc 0 37%, transparent 37.3%); }
.art-orbit::before, .art-orbit::after { content: ""; position: absolute; border: 1px dashed rgba(23,75,66,.19); border-radius: 50%; inset: 26px; }
.art-orbit::after { inset: 73px; border-style: solid; opacity: .55; }
.road { width: 61%; height: 61%; position: absolute; transform: rotate(-28deg); border: 22px solid #cedbcf; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
.road::after { content: ""; position: absolute; top: -12px; right: 12%; width: 5px; height: 118px; border-radius: 3px; background: repeating-linear-gradient(to bottom, #f7f8f3 0 11px, transparent 11px 19px); transform: rotate(16deg); }
.rider-card { z-index: 2; position: relative; width: 255px; padding: 20px; border: 1px solid #fff; border-radius: 25px; background: rgba(255,255,255,.9); box-shadow: 0 26px 60px rgba(23,58,55,.16); transform: rotate(3deg); }
.rider-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; font-weight: 700; }
.online-dot { display: inline-flex; align-items: center; gap: 5px; color: #548468; }
.online-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #70ae7a; }
.rider-portrait { position: relative; height: 165px; margin: 14px 0; overflow: hidden; border-radius: 17px; background: #e8eee4; }
.portrait-sun { position: absolute; top: 23px; right: 31px; width: 48px; height: 48px; background: #eac77d; border-radius: 50%; }
.portrait-body { position: absolute; bottom: -10px; left: 58px; width: 135px; height: 105px; border-radius: 56px 56px 16px 16px; background: #214e43; transform: rotate(-8deg); }
.portrait-head { position: absolute; z-index: 1; left: 100px; top: 40px; width: 55px; height: 63px; background: #b87951; border-radius: 47% 48% 45% 45%; transform: rotate(-7deg); }
.portrait-hair { position: absolute; z-index: 2; left: 97px; top: 31px; width: 60px; height: 26px; border-radius: 45px 44px 20px 20px; background: #303c33; transform: rotate(-8deg); }
.helmet { position: absolute; z-index: 3; left: 91px; top: 26px; width: 72px; height: 28px; border-radius: 45px 45px 8px 8px; background: #df8148; transform: rotate(-8deg); }
.bag { position: absolute; right: 17px; bottom: 15px; z-index: 4; width: 55px; height: 64px; border: 6px solid #d6e9aa; border-radius: 10px; background: #426f59; transform: rotate(-6deg); }
.bag::after { content: "T"; display: grid; place-items: center; height: 100%; color: #eef6d8; font: 800 21px Outfit; }
.rider-card-bottom { display: flex; align-items: center; justify-content: space-between; }
.rider-name { font: 800 13px Outfit; }
.rider-route { color: var(--muted); margin-top: 4px; font-size: 10px; }
.route-arrow { width: 35px; height: 35px; border-radius: 12px; display: grid; place-items: center; background: #f0f4e7; color: var(--green); font-size: 18px; }
.floating-stat { z-index: 3; position: absolute; padding: 13px 16px; border-radius: 13px; background: white; box-shadow: 0 12px 32px rgba(23,58,55,.12); }
.floating-stat strong { display: block; font: 800 19px Outfit; letter-spacing: -.04em; }
.floating-stat small { color: var(--muted); font-size: 9px; font-weight: 600; }
.stat-one { left: 1%; top: 90px; transform: rotate(-4deg); }
.stat-two { right: -1%; bottom: 83px; transform: rotate(3deg); }
.mini-bars { display: flex; align-items: end; gap: 4px; height: 21px; margin-top: 4px; }
.mini-bars i { width: 5px; border-radius: 3px; background: #9fbd86; }
.mini-bars i:nth-child(1) { height: 8px; }.mini-bars i:nth-child(2) { height: 12px; }.mini-bars i:nth-child(3) { height: 10px; }.mini-bars i:nth-child(4) { height: 17px; }.mini-bars i:nth-child(5) { height: 21px; background: var(--orange); }

.platform-strip { padding: 19px 0; border-top: 1px solid #eaeee7; border-bottom: 1px solid #eaeee7; background: #fbfcf8; }
.platform-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.platform-label { color: #879690; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.platforms { display: flex; align-items: center; gap: clamp(18px, 4vw, 52px); flex-wrap: wrap; }
.platform-mark { display: flex; align-items: center; gap: 7px; color: #425a54; font: 800 14px Outfit; }
.platform-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: white; background: #d97751; font-size: 10px; }
.platform-mark:nth-child(2) .platform-icon { background: #80a560; }.platform-mark:nth-child(3) .platform-icon { background: #443d68; }.platform-mark:nth-child(4) .platform-icon { background: #dfb14d; }

.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.benefit-card { min-height: 196px; padding: 24px 21px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.88); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.benefit-card:hover { transform: translateY(-4px); border-color: #cfded2; box-shadow: 0 16px 34px rgba(20,55,49,.08); }
.icon-box { width: 40px; height: 40px; display: grid; place-items: center; color: var(--green); border-radius: 12px; background: #eff4e7; font-size: 17px; }
.benefit-card h3 { margin: 22px 0 8px; font: 800 15px Outfit; letter-spacing: -.02em; }
.benefit-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.process-section { background: #eff3eb; }
.process-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: start; }
.process-intro { position: sticky; top: 125px; }
.process-intro h2 { max-width: 390px; margin: 15px 0; font: 800 clamp(31px, 4vw, 48px)/1.08 Outfit; letter-spacing: -.055em; }
.process-intro p { max-width: 400px; color: var(--muted); line-height: 1.8; font-size: 14px; }
.steps-list { border-top: 1px solid #d8e1d8; }
.step-item { display: grid; grid-template-columns: 50px 1fr; gap: 17px; padding: 21px 0; border-bottom: 1px solid #d8e1d8; }
.step-number { color: #86a48e; font: 700 12px Outfit; }
.step-item h3 { margin: 0 0 6px; font: 800 14px Outfit; }
.step-item p { margin: 0; color: #6b817a; font-size: 12px; line-height: 1.65; }
.ready-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: white; background: radial-gradient(circle at 90% 0%, rgba(118,158,113,.23), transparent 31%), linear-gradient(120deg, #123b35, #17483e); box-shadow: 0 18px 42px rgba(18,59,53,.15); }
.ready-card h2 { max-width: 530px; margin: 0 0 8px; font: 800 clamp(22px,3vw,32px)/1.12 Outfit; letter-spacing: -.035em; }
.ready-card p { margin: 0; color: #bad0c4; font-size: 12px; }
.ready-card .btn { flex: 0 0 auto; background: var(--lime); color: var(--green-dark); }

.site-footer { padding: 52px 0 24px; color: #c7d6cc; background: #102f2b; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 45px; padding-bottom: 35px; }
.site-footer .brand-mark { background: #d9e8ad; color: var(--green); }
.site-footer .brand-sub { color: #a8bdb2; }
.footer-copy { max-width: 270px; margin: 17px 0 0; color: #a9c1b4; font-size: 11px; line-height: 1.8; }
.footer-col h3 { margin: 7px 0 17px; color: #f1f5eb; font: 700 11px Outfit; letter-spacing: .07em; }
.footer-col a { display: block; margin: 10px 0; color: #afc4b9; font-size: 11px; }
.footer-note { display: block; margin: 10px 0; color: #afc4b9; font-size: 11px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { padding-top: 19px; border-top: 1px solid rgba(222,239,225,.14); display: flex; justify-content: space-between; gap: 20px; color: #95ada1; font-size: 10px; }

.inner-hero { padding: 51px 0 40px; }
.inner-hero h1 { max-width: 730px; margin: 14px 0 12px; font: 800 clamp(34px,5vw,56px)/1.05 Outfit; letter-spacing: -.055em; }
.inner-hero p { max-width: 650px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; padding-bottom: 80px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 30px rgba(23,58,55,.035); }
.panel-pad { padding: 27px; }
.panel h2 { margin: 0 0 8px; font: 800 21px Outfit; letter-spacing: -.035em; }
.panel-intro { margin: 0 0 23px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-aside { padding: 22px; }
.form-aside h3 { margin: 0 0 14px; font: 800 13px Outfit; }
.form-aside p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.aside-list { display: grid; gap: 12px; margin-top: 20px; }
.aside-list div { display: flex; gap: 10px; align-items: flex-start; color: #546d65; font-size: 11px; line-height: 1.5; }
.check-mark { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 800; }
.progress-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 25px; }
.progress-seg { height: 4px; border-radius: 9px; background: #e7ece8; }
.progress-seg.active { background: var(--green); }
.progress-caption { display: flex; justify-content: space-between; margin-bottom: 11px; color: var(--muted); font-size: 10px; font-weight: 700; }
.progress-caption strong { color: var(--green); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 15px; row-gap: 14px; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { display: block; margin-bottom: 6px; color: #405b54; font-size: 11px; font-weight: 700; }
.inline-check { display: flex; align-items: center; align-self: end; gap: 6px; margin-bottom: 11px; color: #6d8177; font-size: 9px; font-weight: 600; }
.inline-check input { accent-color: var(--green); }
.required { color: var(--orange); }
.input, .select, .textarea { width: 100%; min-height: 44px; border: 1px solid #dbe4de; border-radius: 9px; outline: none; background: #fbfcfa; color: var(--ink); padding: 11px 12px; font-size: 12px; transition: border .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { border-color: #769b83; background: white; box-shadow: 0 0 0 3px rgba(42,111,88,.09); }
.input::placeholder, .textarea::placeholder { color: #a2b0a9; }
.textarea { min-height: 105px; resize: vertical; }
.hint { margin: 6px 0 0; color: #8a9991; font-size: 10px; line-height: 1.55; }
.check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.choice { min-height: 45px; display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid #e0e8e3; border-radius: 9px; background: #fcfdfa; color: #4b625b; font-size: 11px; font-weight: 600; }
.choice input, .consent input { accent-color: var(--green); }
.upload-card { min-height: 91px; padding: 14px; border: 1px dashed #b8cbbd; border-radius: 10px; background: #f8faf6; }
.upload-card label { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.upload-symbol { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: #e9f1e6; color: var(--green); font-size: 15px; }
.upload-copy strong { display: block; color: #405b54; font-size: 11px; }
.upload-copy small { display: block; margin-top: 4px; color: #82948b; font-size: 9px; }
.upload-card input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid #edf0ed; }
.form-actions .right-actions { display: flex; gap: 9px; margin-left: auto; }
.callout { margin: 17px 0; padding: 14px 16px; border: 1px solid #e8e3cb; border-radius: 10px; background: #fbf8ea; color: #746641; font-size: 11px; line-height: 1.7; }
.agreement-copy { color: #526b63; font-size: 12px; line-height: 1.85; }
.agreement-copy h3 { margin: 20px 0 5px; color: var(--ink); font: 800 13px Outfit; }
.consent { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #dce7df; border-radius: 9px; background: #f7faf6; color: #536d64; font-size: 11px; line-height: 1.6; }
.demo-notice { padding: 12px 15px; border-radius: 9px; color: #6d664e; background: #f6f1de; border: 1px solid #ece4c4; font-size: 10px; line-height: 1.6; }
.success-panel { text-align: center; padding: 51px 25px; }
.success-icon { width: 60px; height: 60px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 22px; color: var(--green); background: #eaf2e7; font-size: 27px; }
.reference-code { width: fit-content; margin: 19px auto; padding: 13px 20px; border: 1px dashed #b9cdbd; border-radius: 10px; color: var(--green); background: #f7faf5; font: 800 18px Outfit; letter-spacing: .08em; }

.auth-wrap { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1.04fr .96fr; }
.auth-art { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 45px; color: #f4f8ec; background: radial-gradient(circle at 78% 12%, rgba(127,166,112,.25), transparent 33%), linear-gradient(145deg, #153f38, #102f2b); }
.auth-art::after { content: ""; position: absolute; z-index: -1; width: 470px; height: 470px; right: -190px; bottom: -260px; border: 1px solid rgba(217,236,164,.17); border-radius: 50%; box-shadow: 0 0 0 45px rgba(217,236,164,.04), 0 0 0 95px rgba(217,236,164,.025); }
.auth-art-content { width: min(490px,100%); }
.auth-art h1 { max-width: 450px; margin: 18px 0 15px; font: 800 clamp(33px,4.4vw,55px)/1.08 Outfit; letter-spacing: -.055em; }
.auth-art p { max-width: 390px; color: #adc3b7; line-height: 1.8; font-size: 14px; }
.auth-art .eyebrow { color: var(--lime); }
.auth-art-graphic { margin-top: 47px; width: min(360px, 85%); padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.055); }
.graphic-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.graphic-row:last-child { border: 0; }
.graphic-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; color: var(--green-dark); background: var(--lime); font-size: 12px; font-weight: 800; }
.graphic-lines { flex: 1; }.graphic-lines i { display: block; height: 5px; width: 88px; margin: 5px 0; border-radius: 5px; background: rgba(255,255,255,.7); }.graphic-lines i:last-child { width: 55px; background: rgba(255,255,255,.28); }
.graphic-status { width: 45px; height: 17px; border-radius: 9px; background: rgba(213,233,154,.18); }
.auth-main { display: grid; place-items: center; padding: 48px 25px; }
.auth-card { width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 8px; font: 800 25px Outfit; letter-spacing: -.045em; }
.auth-card > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.auth-card .field { margin-bottom: 14px; }
.demo-credentials { margin-top: 18px; padding: 13px; border-radius: 9px; background: #f5f7f1; color: #61766d; font-size: 10px; line-height: 1.7; }
.demo-credentials strong { color: var(--green); }

.dashboard { display: grid; grid-template-columns: 230px minmax(0,1fr); min-height: calc(100vh - 82px); background: #f3f5f1; }
.dash-side { position: sticky; top: 82px; height: calc(100vh - 82px); padding: 24px 15px; border-right: 1px solid #e0e8e2; background: #fbfcf9; }
.dash-label { padding: 0 11px; color: #9aa9a0; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.dash-nav > .dash-label { margin-top: 14px; padding: 7px 11px 2px; }
.dash-nav { display: grid; gap: 5px; margin: 12px 0 25px; }
.dash-nav button { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 8px; padding: 11px; background: transparent; color: #667b72; text-align: left; cursor: pointer; font-size: 11px; font-weight: 700; }
.dash-nav button:hover, .dash-nav button.active { background: #eaf2e9; color: var(--green); }
.dash-nav .nav-glyph { width: 19px; text-align: center; font-size: 14px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; color: #996833; background: #f6ead5; font-size: 9px; }
.dash-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid #e9eeea; }
.dash-user .avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--green); font-size: 10px; font-weight: 800; }
.dash-user strong { display: block; font-size: 10px; }.dash-user small { color: #82938a; font-size: 9px; }
.dash-main { min-width: 0; padding: 26px clamp(20px,3vw,44px) 50px; }
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.dash-top h1 { margin: 0; font: 800 25px Outfit; letter-spacing: -.04em; }
.dash-top p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.dash-top-actions { display: flex; gap: 9px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 19px; }
.kpi-card { padding: 17px; border: 1px solid #e2e9e3; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(21,55,46,.025); }
.kpi-top { display: flex; justify-content: space-between; color: #819188; font-size: 10px; font-weight: 600; }
.kpi-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: #edf4eb; }
.kpi-card strong { display: block; margin-top: 10px; font: 800 25px Outfit; letter-spacing: -.045em; }
.kpi-card small { color: #8a9a91; font-size: 9px; }
.dashboard-panel { overflow: hidden; border: 1px solid #e1e8e2; border-radius: 15px; background: white; box-shadow: 0 8px 25px rgba(21,55,46,.035); }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 16px; border-bottom: 1px solid #edf0ed; }
.panel-toolbar h2 { margin: 0; font: 800 14px Outfit; }
.panel-toolbar p { margin: 4px 0 0; color: #82928a; font-size: 9px; }
.toolbar-actions { display: flex; gap: 8px; }
.search-box { width: 205px; position: relative; }
.search-box input { width: 100%; min-height: 35px; border: 1px solid #e0e7e1; border-radius: 8px; padding: 0 10px 0 29px; outline: none; background: #fbfcfa; font-size: 10px; }
.search-box::before { content: "⌕"; position: absolute; left: 10px; top: 6px; color: #809088; font-size: 16px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { padding: 11px 13px; color: #8a9991; background: #fafbf9; text-align: left; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
td { padding: 12px 13px; border-top: 1px solid #eff2ef; color: #50665d; font-size: 10px; }
tr:hover td { background: #fcfdfa; }
.person-cell { display: flex; align-items: center; gap: 9px; min-width: 146px; }
.person-cell .person-avatar { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--green); background: #e9f0e7; font-size: 9px; font-weight: 800; }
.person-cell strong { display: block; color: #2c4840; font-size: 10px; }
.person-cell small { display: block; margin-top: 3px; color: #98a59d; font-size: 8px; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 5px 8px; white-space: nowrap; font-size: 9px; font-weight: 700; }
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-new { color: #47766b; background: #e9f3ed; }.pill-review { color: #946a35; background: #fbf1db; }.pill-docs { color: #79709b; background: #efecf7; }.pill-approved { color: #38764f; background: #e8f3e8; }.pill-rejected { color: #a85c51; background: #f8eae7; }
.status-select { max-width: 126px; min-height: 30px; border: 1px solid #e2e8e3; border-radius: 7px; padding: 0 6px; color: #52685e; background: white; font-size: 9px; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; color: #89978f; font-size: 9px; }
.filter-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.filter-chip { flex: 0 0 auto; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #829188; cursor: pointer; font-size: 9px; font-weight: 700; }
.filter-chip.active { border-color: #dce9df; background: #eff5ed; color: var(--green); }
.detail-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(15,40,35,.44); backdrop-filter: blur(4px); }
.detail-modal { width: min(760px,100%); max-height: min(88vh,850px); overflow-y: auto; border-radius: 16px; background: #fff; box-shadow: 0 30px 90px rgba(10,35,30,.28); }
.modal-header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: start; padding: 21px 23px; border-bottom: 1px solid #edf0ed; background: white; }
.modal-header h2 { margin: 0; font: 800 19px Outfit; }.modal-header p { margin: 5px 0 0; color: #82928a; font-size: 10px; }
.modal-body { padding: 22px; }
.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.detail-item { padding: 12px; border: 1px solid #edf0ed; border-radius: 9px; background: #fbfcfa; }
.detail-item small { display: block; margin-bottom: 6px; color: #8b9991; font-size: 9px; }.detail-item strong { color: #40594f; font-size: 11px; }
.note-item { padding: 10px 0; border-top: 1px solid #edf0ed; color: #5e746a; font-size: 10px; line-height: 1.6; }.note-item small { display: block; margin-bottom: 4px; color: #9aa69f; font-size: 8px; }
.modal-section { margin-top: 22px; }.modal-section h3 { margin: 0 0 10px; font: 800 12px Outfit; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inbox-list { display: grid; }.inbox-item { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 17px; border-top: 1px solid #edf0ed; }.inbox-item h3 { margin: 0 0 5px; font: 800 11px Outfit; }.inbox-item p { margin: 0; color: #73867c; font-size: 10px; line-height: 1.65; }.inbox-meta { color: #9aa69e; font-size: 9px; }.inbox-status { min-width: 120px; }
.empty-state { padding: 38px 15px; text-align: center; color: #91a096; font-size: 11px; }
.pipeline-filters { flex-wrap: wrap; justify-content: flex-start; }
.filter-select { width: 165px; display: grid; gap: 5px; color: #819188; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.filter-select .select { min-height: 34px; padding: 7px 9px; font-size: 10px; text-transform: none; }
.view-toggle { display: flex; gap: 3px; padding: 3px; border-radius: 8px; background: #f1f4f0; }
.view-toggle button { border: 0; border-radius: 6px; padding: 7px 10px; color: #84938b; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.view-toggle button.active { color: var(--green); background: #fff; box-shadow: 0 1px 4px rgba(30,55,45,.1); }
.pipeline-board { display: grid; grid-auto-columns: minmax(210px, 1fr); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding: 13px; background: #f6f8f5; }
.pipeline-column { min-height: 170px; border: 1px solid #e6ece7; border-radius: 10px; background: #f0f3ef; }
.pipeline-column-head { display: flex; justify-content: space-between; align-items: center; padding: 11px; color: #4e665b; font-size: 10px; font-weight: 800; }
.pipeline-column-head span { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; color: #7a8c82; background: #e1e8e1; font-size: 9px; }
.pipeline-card { display: grid; gap: 9px; margin: 0 7px 8px; padding: 11px; border: 1px solid #e8ede9; border-radius: 9px; background: #fff; box-shadow: 0 3px 8px rgba(23,58,55,.035); }
.pipeline-person { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.pipeline-person strong { display: block; color: #294b40; font-size: 10px; }.pipeline-person small { display: block; margin-top: 3px; color: #94a39a; font-size: 8px; }
.pipeline-meta { color: #7a8d83; font-size: 9px; }
.pipeline-empty { padding: 15px 9px; color: #a2afa7; text-align: center; font-size: 9px; }
.queue-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.queue-list { display: grid; }
.queue-row { display: grid; grid-template-columns: minmax(150px,1.1fr) minmax(100px,1fr) 135px; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid #edf0ed; }
.queue-row .person-cell { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.queue-row .person-cell strong { display: block; color: #345349; font-size: 10px; }.queue-row .person-cell small { display: block; margin-top: 3px; color: #9aa59e; font-size: 8px; }
.queue-detail { color: #788a81; font-size: 9px; }
.fleet-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 5px; }
.fleet-tab { flex: 0 0 auto; border: 1px solid #e0e8e1; border-radius: 8px; padding: 8px 11px; background: white; color: #6e8177; cursor: pointer; font-size: 9px; font-weight: 700; }
.fleet-tab.active { border-color: #cfe0d2; color: var(--green); background: #edf4ec; }
.fleet-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.fleet-module { position: relative; display: grid; justify-items: start; gap: 8px; min-height: 145px; padding: 16px; border: 1px solid #e1e9e2; border-radius: 11px; background: white; text-align: left; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.fleet-module:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(20,55,49,.08); }
.fleet-module .module-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: #edf4eb; font-size: 13px; font-weight: 800; }
.fleet-module strong { color: #35554a; font: 800 12px Outfit; }.fleet-module b { position: absolute; right: 15px; top: 16px; color: #587c62; font: 800 17px Outfit; }.fleet-module small { color: #84948b; font-size: 9px; line-height: 1.5; }.fleet-module i { color: #528066; font-size: 9px; font-style: normal; font-weight: 700; }
.module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
.analytics-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.chart-card { padding: 18px; border: 1px solid #e1e9e2; border-radius: 11px; background: white; }
.chart-card h3 { margin: 0 0 15px; font: 800 12px Outfit; }
.chart-row { display: grid; grid-template-columns: 100px 1fr 23px; align-items: center; gap: 9px; margin: 10px 0; color: #71847b; font-size: 9px; }
.chart-row b { color: #4a6759; font-size: 9px; text-align: right; }
.chart-track { height: 7px; overflow: hidden; border-radius: 5px; background: #edf1ec; }.chart-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7eaa83,#d5e99a); }
.table-sub { display:block; max-width:200px; margin-top:4px; color:#97a49d; font-size:8px; white-space:normal; }
.toast { position: fixed; right: 22px; bottom: 20px; z-index: 80; max-width: min(420px,calc(100% - 44px)); padding: 13px 17px; border-radius: 10px; color: white; background: #173f38; box-shadow: 0 12px 35px rgba(16,50,42,.22); font-size: 11px; animation: slide-up .2s ease-out; }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.legal-layout { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 22px; align-items: start; padding-bottom: 75px; }
.legal-content { padding: 28px; }.legal-content section { padding: 17px 0; border-bottom: 1px solid #edf0ed; }.legal-content section:last-child { border: 0; }.legal-content h2 { margin: 0 0 7px; font: 800 14px Outfit; }.legal-content p { margin: 0; color: #647a71; font-size: 12px; line-height: 1.8; }
.track-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: start; padding-bottom: 80px; }
.timeline { display: grid; gap: 0; }.timeline-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; min-height: 58px; }.timeline-item:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: -1px; width: 1px; background: #dce7de; }.timeline-dot { z-index: 1; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #dce7de; border-radius: 50%; color: #91a298; background: white; font-size: 8px; }.timeline-item.done .timeline-dot { border-color: #cfe1ce; color: #fff; background: #57866a; }.timeline-item strong { display: block; margin: 3px 0 4px; color: #476258; font-size: 11px; }.timeline-item small { color: #94a199; font-size: 9px; }
.dashboard-welcome { padding: 22px; margin-bottom: 18px; border-radius: 13px; color: white; background: linear-gradient(120deg,#1e5949,#17453f); }.dashboard-welcome h2 { margin: 0 0 5px; font: 800 18px Outfit; }.dashboard-welcome p { margin: 0; color: #c0d5c8; font-size: 11px; }
.contact-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.privacy-grid { display:grid; grid-template-columns: 1fr 1fr; gap:15px; }
.privacy-panel { padding:21px; border:1px solid var(--line); border-radius:13px; background:white; }
.privacy-panel h3 { margin:0 0 7px; font:800 13px Outfit; }
.privacy-panel p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }

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

@media (max-width: 1000px) {
  .nav-wrap { gap: 18px; }.nav-links { gap: 15px; }.nav-links a { font-size: 11px; }
  .hero-grid { gap: 35px; }.benefit-grid { grid-template-columns: repeat(2,1fr); }
  .process-grid { gap: 38px; }.footer-grid { gap: 25px; }
  .dashboard { grid-template-columns: 194px minmax(0,1fr); }.dash-side { padding-inline: 10px; }.kpi-grid { grid-template-columns: repeat(2,1fr); }.fleet-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .container, .nav-wrap { width: min(100% - 34px, 560px); }
  .nav-wrap { height: 70px; }.nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; margin: 0; padding: 15px 20px 20px; border-bottom: 1px solid var(--line); background: #fbfcf9; box-shadow: 0 14px 25px rgba(22,48,40,.08); }
  .nav-links.open { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.nav-links a { padding: 5px; font-size: 13px; }
  .nav-actions { margin-left: auto; }.nav-actions > .btn { min-height: 38px; padding: 0 12px; font-size: 11px; }.lang-select { display: none; }
  .mobile-menu { display: inline-grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
  .hero { padding: 32px 0 38px; }.hero-grid { grid-template-columns: 1fr; gap: 10px; }.hero-copy { padding: 14px 0 0; }.display { max-width: 510px; font-size: clamp(43px,12vw,65px); }.lead { font-size: 14px; }
  .hero-art { min-height: 335px; margin-top: 4px; }.art-orbit { width: min(88vw,350px); }.rider-card { width: 225px; padding: 16px; }.rider-portrait { height: 142px; }.stat-one { left: 1%; top: 54px; }.stat-two { right: 0; bottom: 49px; }
  .platform-row { display: block; }.platform-label { margin-bottom: 14px; }.platforms { justify-content: space-between; gap: 15px; }.platform-mark { font-size: 11px; }.platform-icon { width: 19px; height: 19px; font-size: 9px; }
  .section { padding: 59px 0; }.section-sm { padding: 42px 0; }.section-heading h2 { font-size: 31px; }
  .benefit-grid { gap: 10px; }.benefit-card { min-height: 170px; padding: 17px 14px; }.benefit-card h3 { margin-top: 15px; font-size: 13px; }.benefit-card p { font-size: 10px; }
  .process-grid { grid-template-columns: 1fr; gap: 24px; }.process-intro { position: static; }.process-intro h2 { font-size: 37px; }.ready-card { display: block; padding: 24px; }.ready-card .btn { margin-top: 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }.footer-grid > div:first-child { grid-column: 1/-1; }.footer-bottom { flex-direction: column; gap: 8px; }
  .inner-hero { padding: 40px 0 26px; }.inner-hero h1 { font-size: 39px; }.inner-hero p { font-size: 13px; }
  .form-layout, .legal-layout, .track-layout { grid-template-columns: 1fr; gap: 13px; padding-bottom: 54px; }.panel-pad { padding: 20px; }.form-aside { order: 2; }.form-grid { grid-template-columns: 1fr 1fr; gap: 12px; }.field.full { grid-column: 1/-1; }
  .auth-wrap { grid-template-columns: 1fr; }.auth-art { padding: 43px 25px 34px; }.auth-art h1 { font-size: 39px; }.auth-art-graphic { display: none; }.auth-main { padding: 27px 17px 48px; }.auth-card { padding: 25px; }
  .dashboard { grid-template-columns: 1fr; min-height: calc(100vh - 70px); }.dash-side { position: sticky; top: 70px; z-index: 10; width: 100%; height: auto; padding: 8px 14px; border-right: 0; border-bottom: 1px solid #e0e8e2; }.dash-side .dash-label, .dash-side .dash-user { display: none; }.dash-nav { display: flex; gap: 4px; overflow-x: auto; margin: 0; }.dash-nav button { width: auto; flex: 0 0 auto; padding: 10px; }.dash-nav .nav-glyph { display: none; }.nav-badge { margin-left: 5px; }.dash-main { padding: 21px 15px 38px; }.dash-top { align-items: flex-start; }.dash-top h1 { font-size: 22px; }.dash-top-actions { flex-direction: column; }.dash-top-actions .btn { min-height: 34px; font-size: 10px; }.kpi-grid { gap: 8px; }.kpi-card { padding: 12px; }.kpi-card strong { font-size: 21px; }.kpi-top { font-size: 9px; }.panel-toolbar { align-items: flex-start; flex-direction: column; }.toolbar-actions { width: 100%; }.search-box { flex: 1; width: auto; }.filter-row { width: 100%; }.queue-grid, .module-grid, .analytics-grid { grid-template-columns: 1fr; }.queue-row { grid-template-columns: 1fr 120px; }.queue-detail { display:none; }.pipeline-board { grid-auto-columns: minmax(220px, 80vw); }.pipeline-filters { align-items: stretch; }.filter-select { width: calc(50% - 8px); }.fleet-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns: 1fr 1fr; }.modal-actions { grid-template-columns: 1fr; }.detail-overlay { padding: 10px; }.modal-body { padding: 16px; }.modal-header { padding: 17px; }
  .privacy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 14px; }.brand-mark { width: 38px; height: 38px; }.nav-actions { gap: 7px; }.nav-actions > .btn { padding: 0 10px; }
  .hero-actions .btn { flex: 1; }.hero-proof { flex-wrap: wrap; }.platforms { gap: 10px; }.platform-mark { gap: 4px; font-size: 10px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }.form-grid { grid-template-columns: 1fr; }.field.full { grid-column: auto; }.check-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }.form-actions .right-actions { margin: 0; }.form-actions .btn { flex: 1; }.detail-grid { grid-template-columns: 1fr 1fr; }
}

/* TIJAN LOGIX operations workspace refresh. Scoped to the team dashboard only. */
body:has(.dashboard) { background: #f3f6f3; }
body:has(.dashboard) .site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: #e5ebe6;
  box-shadow: 0 3px 16px rgba(20, 45, 37, .035);
}
body:has(.dashboard) .nav-wrap { width: min(100% - 56px, 1600px); height: 76px; }
body:has(.dashboard) .dashboard { grid-template-columns: 258px minmax(0, 1fr); background: #f3f6f3; }
body:has(.dashboard) .dash-side {
  display: flex;
  flex-direction: column;
  top: 76px;
  height: calc(100vh - 76px);
  padding: 26px 16px 20px;
  border: 0;
  background: linear-gradient(180deg, #173f37 0%, #12362f 100%);
  color: #f4f7f1;
}
body:has(.dashboard) .dash-side .dash-label { color: #89a79a; letter-spacing: .14em; }
body:has(.dashboard) .dash-nav { gap: 5px; margin: 11px 0 24px; }
body:has(.dashboard) .dash-nav > .dash-label { margin: 15px 0 3px; padding: 7px 11px 3px; }
body:has(.dashboard) .dash-nav button {
  min-height: 43px;
  border-radius: 11px;
  padding: 10px 11px;
  color: #c6d6ce;
  font-size: 11px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
body:has(.dashboard) .dash-nav button:hover { transform: translateX(2px); background: rgba(255,255,255,.075); color: #fff; }
body:has(.dashboard) .dash-nav button.active {
  color: #f5f8e9;
  background: rgba(217,236,164,.13);
  box-shadow: inset 3px 0 #d9eca4;
}
body:has(.dashboard) .dash-nav .nav-glyph { color: #a9c7b6; }
body:has(.dashboard) .dash-nav button.active .nav-glyph { color: #e1f0b5; }
body:has(.dashboard) .dash-side .nav-badge {
  color: #e9f2d3;
  background: rgba(255,255,255,.12);
}
body:has(.dashboard) .dash-user { gap: 11px; padding: 17px 8px 2px; border-color: rgba(255,255,255,.14); }
body:has(.dashboard) .dash-user .avatar { width: 38px; height: 38px; border-radius: 13px; color: #183d34; background: #d9eca4; }
body:has(.dashboard) .dash-user strong { color: #f3f7f1; font-size: 11px; }
body:has(.dashboard) .dash-user small { color: #9cb5a9; font-size: 10px; }
body:has(.dashboard) .dash-main { padding: 34px clamp(24px, 3.5vw, 58px) 64px; }
body:has(.dashboard) .dash-top { margin-bottom: 22px; }
body:has(.dashboard) .dash-top h1 { color: #183a32; font-size: clamp(25px, 2.1vw, 31px); letter-spacing: -.045em; }
body:has(.dashboard) .dash-top p { color: #74847b; font-size: 12px; }
body:has(.dashboard) .online-dot { color: #357957; }
body:has(.dashboard) .dash-top-actions { gap: 10px; }
body:has(.dashboard) .dash-top-actions .btn { min-height: 39px; border-radius: 10px; font-size: 11px; }
body:has(.dashboard) .dashboard-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 29px 32px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 21px;
  background: radial-gradient(circle at 88% 25%, rgba(217,236,164,.18), transparent 27%), linear-gradient(112deg, #174b40, #215b4d 72%, #2a6954);
  box-shadow: 0 16px 32px rgba(19, 67, 55, .13);
}
body:has(.dashboard) .dashboard-welcome::after {
  position: absolute;
  z-index: -1;
  width: 210px;
  height: 210px;
  right: -74px;
  top: -112px;
  border: 1px solid rgba(234,245,206,.21);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(234,245,206,.045), 0 0 0 52px rgba(234,245,206,.035);
  content: "";
}
body:has(.dashboard) .dashboard-welcome h2 { margin-bottom: 7px; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.035em; }
body:has(.dashboard) .dashboard-welcome p { color: #c4d9ce; font-size: 12px; }
body:has(.dashboard) .kpi-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
body:has(.dashboard) .kpi-card {
  min-width: 0;
  padding: 17px 16px 16px;
  border: 1px solid #e5ebe6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(23,55,45,.035);
  transition: transform .18s ease, box-shadow .18s ease;
}
body:has(.dashboard) .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(23,55,45,.08); }
body:has(.dashboard) .kpi-top { align-items: center; gap: 7px; color: #73837a; font-size: 10px; line-height: 1.35; }
body:has(.dashboard) .kpi-icon { flex: 0 0 31px; width: 31px; height: 31px; border-radius: 10px; color: #28604b; background: #edf4e9; }
body:has(.dashboard) .kpi-card strong { margin: 14px 0 2px; color: #183a32; font-size: 28px; }
body:has(.dashboard) .kpi-card small { color: #89968f; font-size: 9px; }
body:has(.dashboard) .dashboard-panel { border-color: #e4eae5; border-radius: 18px; box-shadow: 0 7px 24px rgba(22,52,43,.045); }
body:has(.dashboard) .panel-toolbar { padding: 18px 20px; border-color: #edf0ed; }
body:has(.dashboard) .panel-toolbar h2 { color: #1c3c33; font-size: 15px; }
body:has(.dashboard) .panel-toolbar p { font-size: 10px; }
body:has(.dashboard) th { color: #77877e; background: #f7f9f7; }
body:has(.dashboard) td { color: #435b50; }
body:has(.dashboard) tr:hover td { background: #fafcf9; }
body:has(.dashboard) .dash-main .input,
body:has(.dashboard) .dash-main .select,
body:has(.dashboard) .dash-main .textarea,
body:has(.dashboard) .search-box input { border-color: #dfe7e1; border-radius: 10px; background: #fbfcfb; }
body:has(.dashboard) .dash-main .input:focus,
body:has(.dashboard) .dash-main .select:focus,
body:has(.dashboard) .dash-main .textarea:focus,
body:has(.dashboard) .search-box input:focus { border-color: #83a591; box-shadow: 0 0 0 3px rgba(93,139,112,.12); }

@media (max-width: 1240px) {
  body:has(.dashboard) .dashboard { grid-template-columns: 228px minmax(0,1fr); }
  body:has(.dashboard) .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body:has(.dashboard) .dashboard { grid-template-columns: 200px minmax(0,1fr); }
  body:has(.dashboard) .dash-main { padding-inline: 23px; }
  body:has(.dashboard) .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  body:has(.dashboard) .nav-wrap { width: calc(100% - 30px); height: 68px; }
  body:has(.dashboard) .dashboard { grid-template-columns: minmax(0,1fr); min-height: calc(100vh - 68px); }
  body:has(.dashboard) .dash-side {
    position: sticky;
    top: 68px;
    z-index: 15;
    width: 100%;
    height: auto;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  body:has(.dashboard) .dash-side .dash-label,
  body:has(.dashboard) .dash-side .dash-user { display: none; }
  body:has(.dashboard) .dash-nav { display: flex; gap: 7px; overflow-x: auto; margin: 0; padding: 1px 0 3px; scrollbar-width: none; }
  body:has(.dashboard) .dash-nav::-webkit-scrollbar { display: none; }
  body:has(.dashboard) .dash-nav button { flex: 0 0 auto; width: auto; min-height: 39px; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.08); font-size: 10px; }
  body:has(.dashboard) .dash-nav button.active { border-color: rgba(217,236,164,.25); box-shadow: inset 0 -2px #d9eca4; }
  body:has(.dashboard) .dash-nav .nav-glyph { display: inline-block; width: auto; }
  body:has(.dashboard) .dash-side .nav-badge { min-width: 18px; height: 18px; margin-left: 1px; }
  body:has(.dashboard) .dash-main { padding: 24px 16px 42px; }
  body:has(.dashboard) .dash-top { align-items: flex-start; margin-bottom: 18px; }
  body:has(.dashboard) .dash-top h1 { font-size: 22px; }
  body:has(.dashboard) .dash-top-actions { flex-direction: row; flex-wrap: wrap; }
  body:has(.dashboard) .dash-top-actions .btn { min-height: 35px; padding-inline: 10px; font-size: 10px; }
  body:has(.dashboard) .dashboard-welcome { padding: 22px 20px; border-radius: 17px; }
  body:has(.dashboard) .dashboard-welcome h2 { max-width: 28ch; font-size: 19px; }
  body:has(.dashboard) .kpi-grid { gap: 9px; }
  body:has(.dashboard) .kpi-card { padding: 13px; border-radius: 13px; }
  body:has(.dashboard) .kpi-card strong { font-size: 23px; }
}
@media (max-width: 420px) {
  body:has(.dashboard) .nav-wrap { width: calc(100% - 22px); }
  body:has(.dashboard) .nav-wrap > div > span { display: none; }
  body:has(.dashboard) .dash-main { padding-inline: 12px; }
  body:has(.dashboard) .dash-top { flex-direction: column; }
  body:has(.dashboard) .dashboard-welcome { padding: 20px 17px; }
  body:has(.dashboard) .kpi-card { padding: 12px 10px; }
  body:has(.dashboard) .kpi-top { font-size: 9px; }
  body:has(.dashboard) .kpi-icon { flex-basis: 27px; width: 27px; height: 27px; }
  body:has(.dashboard) .panel-toolbar { padding: 15px; }
}

/* Brand palette: midnight navy, clear teal and warm amber. */
body:not(:has(.dashboard)) .site-header { background: rgba(255,255,255,.95); border-bottom-color: #dfe8ed; }
body:not(:has(.dashboard)) .brand-mark { background: linear-gradient(145deg, #1a607a, #12364e); }
body:not(:has(.dashboard)) .btn-primary { background: #164f68; box-shadow: 0 9px 20px rgba(18,67,90,.18); }
body:not(:has(.dashboard)) .btn-primary:hover { background: #103e56; box-shadow: 0 12px 24px rgba(18,67,90,.24); }
body:not(:has(.dashboard)) .btn-outline { border-color: #c7d6e0; background: rgba(255,255,255,.78); }
body:not(:has(.dashboard)) .btn-outline:hover { border-color: #91b4c3; }
body:not(:has(.dashboard)) .hero {
  color: #f7fbfd;
  background: radial-gradient(circle at 79% 47%, rgba(37,168,180,.28), transparent 34%), linear-gradient(118deg, #102d43 0%, #12465f 62%, #17647a 100%);
}
body:not(:has(.dashboard)) .hero::before { border-color: rgba(198,237,238,.19); box-shadow: 0 0 0 67px rgba(198,237,238,.035), 0 0 0 135px rgba(198,237,238,.022); }
body:not(:has(.dashboard)) .hero::after { background: rgba(246,195,109,.22); }
body:not(:has(.dashboard)) .hero .eyebrow { color: #8fe2df; }
body:not(:has(.dashboard)) .hero .eyebrow-dot { background: #f4bd62; box-shadow: 0 0 0 4px rgba(244,189,98,.17); }
body:not(:has(.dashboard)) .hero .display { color: #f8fbfc; }
body:not(:has(.dashboard)) .hero .display em { color: #f5c36d; }
body:not(:has(.dashboard)) .hero .lead { color: #c7dbe5; }
body:not(:has(.dashboard)) .hero .hero-proof { color: #bfd3dd; }
body:not(:has(.dashboard)) .hero .hero-actions .btn-primary { color: #17334a; background: #f5bf64; box-shadow: 0 10px 23px rgba(7,28,41,.22); }
body:not(:has(.dashboard)) .hero .hero-actions .btn-primary:hover { background: #ffd07e; }
body:not(:has(.dashboard)) .hero .hero-actions .btn-outline { color: #f4fafc; border-color: rgba(222,240,245,.38); background: rgba(255,255,255,.06); }
body:not(:has(.dashboard)) .hero .hero-actions .btn-outline:hover { background: rgba(255,255,255,.13); border-color: rgba(222,240,245,.6); }
body:not(:has(.dashboard)) .hero .avatar-stack span { border-color: #16465e; }
body:not(:has(.dashboard)) .art-orbit { border-color: rgba(178,229,230,.3); background: radial-gradient(circle at 50% 52%, #dceff2 0 37%, transparent 37.3%); }
body:not(:has(.dashboard)) .art-orbit::before,
body:not(:has(.dashboard)) .art-orbit::after { border-color: rgba(23,105,127,.25); }
body:not(:has(.dashboard)) .road { border-color: #85c8cc; border-left-color: transparent; border-bottom-color: transparent; }
body:not(:has(.dashboard)) .road::after { background: repeating-linear-gradient(to bottom, #f5fbfc 0 11px, transparent 11px 19px); }
body:not(:has(.dashboard)) .rider-card { border-color: rgba(255,255,255,.9); box-shadow: 0 28px 64px rgba(5,26,41,.28); }
body:not(:has(.dashboard)) .rider-portrait { background: linear-gradient(145deg, #d9edf2, #c7e1e7); }
body:not(:has(.dashboard)) .portrait-sun { background: #f5c36d; }
body:not(:has(.dashboard)) .portrait-body { background: #174f68; }
body:not(:has(.dashboard)) .portrait-hair { background: #183147; }
body:not(:has(.dashboard)) .helmet { background: #1b9ba8; }
body:not(:has(.dashboard)) .bag { border-color: #f5c36d; background: #22798a; }
body:not(:has(.dashboard)) .bag::after { color: #fff7df; }
body:not(:has(.dashboard)) .platform-strip { border-color: #e1e9ee; background: #fff; }
body:not(:has(.dashboard)) .platform-mark { color: #3e596d; }
body:not(:has(.dashboard)) .icon-box { color: #17647b; background: #e4f2f5; }
body:not(:has(.dashboard)) .benefit-card { border-color: #e0e8ed; box-shadow: 0 8px 22px rgba(21,53,73,.025); }
body:not(:has(.dashboard)) .benefit-card:hover { border-color: #b6d7de; box-shadow: 0 16px 34px rgba(21,71,92,.09); }
body:not(:has(.dashboard)) .process-section { background: #edf3f6; }
body:not(:has(.dashboard)) .steps-list,
body:not(:has(.dashboard)) .step-item { border-color: #d9e4ea; }
body:not(:has(.dashboard)) .step-number { color: #258a9d; }
body:not(:has(.dashboard)) .step-item p { color: #667e8c; }
body:not(:has(.dashboard)) .ready-card {
  background: radial-gradient(circle at 91% 0%, rgba(35,173,184,.28), transparent 32%), linear-gradient(120deg, #102f46, #155671);
  box-shadow: 0 18px 42px rgba(16,51,73,.18);
}
body:not(:has(.dashboard)) .ready-card p { color: #c1d8e2; }
body:not(:has(.dashboard)) .ready-card .btn { color: #17334a; background: #f5c36d; }
body:not(:has(.dashboard)) .site-footer { color: #c5d5df; background: #102c42; }
body:not(:has(.dashboard)) .site-footer .brand-mark { color: #17334a; background: #f5c36d; }
body:not(:has(.dashboard)) .site-footer .brand-sub { color: #9cb4c2; }
body:not(:has(.dashboard)) .footer-copy { color: #a9c0cc; }
body:not(:has(.dashboard)) .footer-col h3 { color: #eef5f8; }

/* Keep the operations workspace in the same navy and teal brand family. */
body:has(.dashboard) .dash-side { background: linear-gradient(180deg, #153e55 0%, #102f46 100%); }
body:has(.dashboard) .dash-nav button.active { color: #effafb; background: rgba(84,196,204,.14); box-shadow: inset 3px 0 #72d2d4; }
body:has(.dashboard) .dash-nav button:hover { background: rgba(255,255,255,.08); }
body:has(.dashboard) .dash-nav .nav-glyph { color: #a9d0d8; }
body:has(.dashboard) .dash-nav button.active .nav-glyph { color: #93e0df; }
body:has(.dashboard) .dash-side .nav-badge { color: #e1f4f3; background: rgba(87,193,202,.18); }
body:has(.dashboard) .dash-user .avatar { color: #15384c; background: #f5c36d; }
body:has(.dashboard) .dashboard-welcome {
  background: radial-gradient(circle at 88% 25%, rgba(82,208,209,.23), transparent 28%), linear-gradient(112deg, #133d56, #17617a 72%, #1a7987);
  box-shadow: 0 16px 32px rgba(17,64,83,.16);
}
body:has(.dashboard) .dashboard-welcome::after { border-color: rgba(196,239,238,.24); box-shadow: 0 0 0 24px rgba(196,239,238,.05), 0 0 0 52px rgba(196,239,238,.035); }
body:has(.dashboard) .kpi-icon { color: #17647b; background: #e5f3f5; }
body:has(.dashboard) .dash-main .btn-primary { background: #164f68; }
body:has(.dashboard) .dash-main .btn-primary:hover { background: #103e56; }
@media (max-width: 760px) {
  body:has(.dashboard) .dash-nav button.active { box-shadow: inset 0 -2px #72d2d4; }
}

/* Editorial typography and rider vehicle photography for the public homepage. */
.ride-options { background: #f1f6f8; }
.ride-options-heading { max-width: 690px; margin: 0 0 28px; }
.ride-options-heading h2 { margin: 12px 0 10px; font: 800 clamp(30px, 4vw, 48px)/1.08 Outfit, sans-serif; letter-spacing: -.045em; }
.ride-options-heading p { max-width: 610px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.ride-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ride-type-card { position: relative; isolation: isolate; min-height: 345px; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background-color: #12334a; background-size: cover; background-position: center; box-shadow: 0 18px 42px rgba(17,47,67,.14); transition: transform .22s ease, box-shadow .22s ease; }
.ride-type-card:hover { transform: translateY(-4px); box-shadow: 0 25px 48px rgba(17,47,67,.2); }
.ride-type-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9,31,47,.91) 0%, rgba(12,40,58,.76) 42%, rgba(12,40,58,.08) 100%), linear-gradient(0deg, rgba(9,31,47,.3), transparent 55%); }
.ride-type-bike { background-image: url("/assets/ride-motorcycle.jpg"); }
.ride-type-car { background-image: url("/assets/ride-car.jpg"); }
.ride-type-content { width: min(100%, 405px); padding: 30px; color: #f5f9fb; }
.ride-type-content h3 { margin: 0 0 10px; font: 800 clamp(24px, 2.8vw, 34px)/1.08 Outfit, sans-serif; letter-spacing: -.04em; }
.ride-type-content p { max-width: 350px; margin: 0; color: #d1e0e8; font-size: 14px; line-height: 1.7; }
.ride-type-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; color: #f5c36d; font-size: 13px; font-weight: 800; }
.ride-type-cta span { transition: transform .18s ease; }
.ride-type-card:hover .ride-type-cta span { transform: translateX(4px); }
@media (max-width: 760px) {
  .ride-options { padding: 64px 0; }
  .ride-type-grid { grid-template-columns: 1fr; gap: 13px; }
  .ride-type-card { min-height: 295px; border-radius: 18px; }
  .ride-type-content { padding: 24px; }
}

/* Keep the larger, dedicated operations navigation usable as modules grow. */
body:has(.dashboard) .dash-side { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(146,203,211,.35) transparent; }
body:has(.dashboard) .dash-nav { flex: 1 0 auto; }
body:has(.dashboard) .dash-user { flex: 0 0 auto; }
body:has(.dashboard) .dash-nav > .dash-label { color: rgba(193,221,231,.6); }
body:has(.dashboard) .dashboard-welcome {
  background: linear-gradient(90deg, rgba(14,43,61,.96) 0%, rgba(18,63,83,.86) 52%, rgba(18,63,83,.28) 100%), url("/assets/ride-car.jpg") 72% 48% / cover;
  border: 1px solid rgba(255,255,255,.12);
}
body:has(.dashboard) .fleet-card-grid { gap: 14px; }
body:has(.dashboard) .fleet-module { border-color: #d9e8ed; background: linear-gradient(150deg, #fff 35%, #f2f8fa); }
body:has(.dashboard) .fleet-module:hover { border-color: #93cbd1; box-shadow: 0 16px 34px rgba(17,77,96,.12); }
@media (max-width: 760px) {
  body:has(.dashboard) .dash-side { display: block; overflow: visible; }
  body:has(.dashboard) .dash-nav { flex: initial; }
}