:root {
  --keyzee-navy: #0d1b2a;
  --keyzee-blue: #a7d0e3;
  --keyzee-orange: #ff6a00;
  --keyzee-grey: #4d5b6a;
  --keyzee-white: #fff;
  --keyzee-surface: #f4f8fb;
  --kz-pad: clamp(22px, 5vw, 76px);
  --kz-max: 1440px;
}

.keyzee-page { color: var(--keyzee-navy); background: var(--keyzee-surface); }
.keyzee-page .grain { opacity: .025; }
.keyzee-header { color: var(--keyzee-white); }
.keyzee-header.scrolled { background: rgba(13,27,42,.92); border-color: rgba(255,255,255,.12); }
.keyzee-parent .brand-mark, .keyzee-footer .brand-mark { stroke: var(--keyzee-orange); }
.keyzee-header .site-nav > a:not(.nav-cta) { color: #d1dde5; }
.keyzee-nav-cta { border-color: rgba(255,255,255,.2); }
.keyzee-nav-cta span { color: var(--keyzee-orange); }
.keyzee-page a:focus-visible, .keyzee-page button:focus-visible, .keyzee-page input:focus-visible, .keyzee-page select:focus-visible, .keyzee-page textarea:focus-visible { outline: 3px solid var(--keyzee-orange); outline-offset: 4px; }

.kz-hero { min-height: 100svh; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px,5vw,90px); align-items: center; padding: 145px var(--kz-pad) 80px; overflow: hidden; color: var(--keyzee-white); background: var(--keyzee-navy); }
.kz-hero-copy { max-width: 780px; }
.kz-logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 70px; color: var(--keyzee-blue); font-size: 15px; font-weight: 700; letter-spacing: .2em; }
.kz-logo-mark { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: var(--keyzee-orange); border-radius: 11px; font-size: 24px; letter-spacing: 0; }
.kz-eyebrow, .kz-section-heading > p, .search-intro > p, .local-copy > p, .register-copy > p, .kz-closing > p { margin: 0 0 25px; color: var(--keyzee-blue); font: 500 10px "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.kz-hero h1 { margin: 0; max-width: 780px; font-size: clamp(50px, 6.2vw, 94px); font-weight: 600; line-height: .96; letter-spacing: -.06em; }
.kz-lead { max-width: 690px; margin: 34px 0 0; color: #b7c5d0; font-size: clamp(16px,1.35vw,20px); line-height: 1.65; }
.kz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 42px; }
.kz-button { display: inline-flex; align-items: center; justify-content: center; gap: 38px; min-height: 55px; padding: 0 22px; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; }
.kz-button.primary { color: white; background: var(--keyzee-orange); transition: transform .2s, background .2s; }
.kz-button.primary:hover { background: #e85f00; transform: translateY(-2px); }
.kz-button.text { min-height: auto; padding: 8px 0; color: var(--keyzee-blue); border-bottom: 1px solid rgba(167,208,227,.4); }
.kz-status { display: inline-flex; align-items: center; gap: 10px; margin-top: 55px; color: #91a3b1; font: 10px "DM Mono"; text-transform: uppercase; letter-spacing: .1em; }
.kz-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--keyzee-orange); box-shadow: 0 0 0 5px rgba(255,106,0,.12); }

.kz-product-frame { position: relative; width: min(100%,680px); aspect-ratio: 1.05; justify-self: end; color: var(--keyzee-navy); background: white; border: 9px solid rgba(255,255,255,.12); border-radius: 18px; box-shadow: 0 45px 100px rgba(0,0,0,.4); transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); overflow: hidden; }
.kz-product-frame::after { content: "CONCEPT"; position: absolute; right: 13px; bottom: 10px; color: #8e9ba5; font: 8px "DM Mono"; letter-spacing: .12em; }
.frame-top { height: 35px; display: flex; align-items: center; gap: 5px; padding: 0 11px; color: #9ba5ad; background: #edf2f5; font: 7px "DM Mono"; letter-spacing: .1em; }
.frame-top i { width: 6px; height: 6px; border-radius: 50%; background: #c6d0d6; }
.frame-top span { margin-left: auto; }
.frame-body { height: calc(100% - 35px); display: flex; }
.frame-sidebar { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 21px; padding-top: 14px; background: var(--keyzee-navy); }
.frame-sidebar b { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--keyzee-orange); border-radius: 7px; }
.frame-sidebar span { width: 17px; height: 3px; background: #607282; border-radius: 5px; }
.frame-sidebar span.active { background: var(--keyzee-blue); }
.frame-content { flex: 1; padding: clamp(18px,3vw,38px); background: var(--keyzee-surface); }
.frame-heading { display: flex; justify-content: space-between; align-items: start; }
.frame-heading div { display: flex; flex-direction: column; gap: 4px; }
.frame-heading small, .vehicle-data small { color: #778894; font: 7px "DM Mono"; letter-spacing: .12em; }
.frame-heading strong { font-size: clamp(16px,2vw,25px); }
.frame-heading em { padding: 6px 8px; color: #a74d0c; background: #fff0e6; font: normal 7px "DM Mono"; }
.vehicle-photo { position: relative; height: 42%; display: grid; place-items: center; margin-top: 20px; overflow: hidden; background: linear-gradient(150deg,#d9e6ed,#91b4c5); border-radius: 6px; }
.vehicle-photo b { position: absolute; right: 10px; bottom: 8px; padding: 5px 7px; color: white; background: rgba(13,27,42,.72); font-size: 7px; }
.car-shape { position: relative; width: 62%; height: 38%; margin-top: 11%; background: var(--keyzee-navy); border-radius: 42% 48% 12% 14%; box-shadow: inset 0 7px 0 rgba(167,208,227,.25); }
.car-shape::before { content: ""; position: absolute; left: 18%; top: -60%; width: 61%; height: 75%; background: var(--keyzee-navy); clip-path: polygon(18% 100%, 37% 0, 81% 2%, 100% 100%); }
.car-shape::after, .car-shape span::after { content: ""; position: absolute; width: 19%; aspect-ratio: 1; bottom: -34%; border: 6px solid #293a49; border-radius: 50%; background: #a7d0e3; }
.car-shape::after { left: 14%; } .car-shape span::after { right: 13%; }
.vehicle-data { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 13px; background: white; border-radius: 5px; }
.vehicle-data div { display: flex; flex-direction: column; gap: 3px; }
.vehicle-data strong { font-size: 11px; }.vehicle-data span { color: #74828d; font-size: 8px; }
.vehicle-data i { display: grid; place-items: center; width: 27px; height: 27px; color: white; background: #3c8167; border-radius: 50%; font-style: normal; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }.feature-chips span { padding: 5px 7px; color: #536570; background: #e1ebf0; border-radius: 20px; font-size: 7px; }
.frame-progress { height: 3px; margin-top: 15px; background: #dbe5ea; }.frame-progress span { display: block; width: 72%; height: 100%; background: var(--keyzee-orange); }

.kz-section { max-width: var(--kz-max); margin: auto; padding: clamp(90px,10vw,160px) var(--kz-pad); }
.kz-section-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 40px; align-items: start; margin-bottom: 75px; }
.kz-section-heading > p { color: var(--keyzee-grey); }
.kz-section-heading h2, .search-intro h2, .local-copy h2, .register-copy h2 { margin: 0; font-size: clamp(45px,6vw,84px); font-weight: 600; line-height: 1; letter-spacing: -.055em; }

.workflow-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #bfccd4; }
.workflow-step { min-height: 345px; padding: 28px 27px 28px 0; border-right: 1px solid #bfccd4; }
.workflow-step + .workflow-step { padding-left: 27px; }
.workflow-step:last-child { border-right: 0; }
.step-num { color: var(--keyzee-grey); font: 9px "DM Mono"; }
.step-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 70px; color: white; background: var(--keyzee-navy); border-radius: 13px; font-size: 20px; }
.workflow-step h3 { margin: 28px 0 12px; font-size: 21px; }.workflow-step p { margin: 0; color: #637482; font-size: 13px; line-height: 1.65; }
.accuracy-note { margin: 45px 0 0; padding: 18px 20px; color: #576975; background: #e4edf2; border-left: 3px solid var(--keyzee-orange); font-size: 12px; line-height: 1.6; }
.accuracy-note span { margin-right: 13px; color: var(--keyzee-navy); font-weight: 700; }

.capabilities { max-width: none; color: white; background: var(--keyzee-navy); }
.capabilities > * { max-width: calc(var(--kz-max) - (var(--kz-pad)*2)); margin-left: auto; margin-right: auto; }
.capabilities .kz-section-heading > p { color: var(--keyzee-blue); }
.capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.12); }
.capability-card { min-height: 330px; padding: 30px; background: #132538; }
.capability-card i { display: block; margin-top: 60px; color: var(--keyzee-blue); font-style: normal; font-size: 28px; }
.capability-card h3 { margin: 24px 0 13px; font-size: 22px; }.capability-card p { margin: 0; color: #9fafbb; font-size: 13px; line-height: 1.65; }
.capability-status { padding: 6px 8px; color: var(--keyzee-blue); border: 1px solid rgba(167,208,227,.3); font: 8px "DM Mono"; letter-spacing: .1em; }
.capability-card.release .capability-status { color: #ffb27c; border-color: rgba(255,106,0,.45); }.capability-card.vision { background: #182f44; }

.flywheel-section { max-width: none; background: white; }.flywheel-section > * { max-width: calc(var(--kz-max) - (var(--kz-pad)*2)); margin-left: auto; margin-right: auto; }
.flywheel { display: grid; grid-template-columns: repeat(4,1fr auto) 1fr; align-items: center; gap: 12px; }
.flywheel div { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: white; background: var(--keyzee-navy); }
.flywheel div span { color: var(--keyzee-blue); font: 9px "DM Mono"; }.flywheel div b { max-width: 130px; font-size: 13px; }.flywheel > i { color: var(--keyzee-orange); font-style: normal; font-size: 22px; }

.search-concept { max-width: none; display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(45px,8vw,120px); color: white; background: #0a1622; }
.search-concept > * { max-width: 100%; }.search-intro p { color: var(--keyzee-blue); }.search-intro h2 { position: sticky; top: 120px; }
.search-ui { padding: 28px; color: var(--keyzee-navy); background: var(--keyzee-surface); border-radius: 14px; }
.search-prompt, .search-response { display: grid; grid-template-columns: 70px 1fr; gap: 15px; padding: 17px; background: white; border-radius: 8px; }
.search-prompt span, .search-response span { color: var(--keyzee-grey); font: 8px "DM Mono"; }.search-prompt p, .search-response p { margin: 0; font-size: 13px; line-height: 1.55; }
.search-response { margin-top: 8px; background: #dfeef5; }.search-response span { color: #35657c; }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 18px; }
.result-grid article { padding: 15px; background: white; border: 1px solid #dbe3e8; border-radius: 7px; }.result-top { display: flex; justify-content: space-between; align-items: center; }.result-top small { color: #b04b03; font: 7px "DM Mono"; }.result-top b { font-size: 13px; }.result-grid h3 { margin: 22px 0 4px; font-size: 14px; }.result-grid article > p { margin: 0; color: #7c8b95; font-size: 9px; }.result-grid ul { min-height: 72px; margin: 15px 0; padding: 0; list-style: none; }.result-grid li { margin: 5px 0; color: #53636e; font-size: 9px; }.result-grid li::before { content: "✓"; margin-right: 5px; color: #388064; }.result-grid footer { padding-top: 11px; border-top: 1px solid #e2e7ea; }.result-grid footer b { font-size: 9px; }.result-grid footer p { margin: 4px 0 0; color: #71808a; font-size: 8px; line-height: 1.5; }.concept-note { margin: 15px 0 0; color: #788994; font-size: 9px; }

.local-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,8vw,120px); align-items: center; }
.local-map { position: relative; min-height: 500px; overflow: hidden; background: var(--keyzee-navy); border-radius: 50% 45% 53% 48%; box-shadow: inset 0 0 0 40px rgba(167,208,227,.04); }
.local-map::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(167,208,227,.26); border-radius: 48% 52% 44% 56%; transform: rotate(-15deg); }.local-map span { position: absolute; left: 55%; top: 48%; color: white; font: 9px "DM Mono"; letter-spacing: .15em; }.local-map span::before { content: ""; position: absolute; left: -18px; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--keyzee-orange); box-shadow: 0 0 0 8px rgba(255,106,0,.15); }.local-map i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--keyzee-blue); }.local-map i:nth-of-type(1) { left: 30%; top: 25%; }.local-map i:nth-of-type(2) { right: 23%; bottom: 25%; }.local-map i:nth-of-type(3) { left: 25%; bottom: 28%; }
.local-copy > p:first-child { color: var(--keyzee-grey); }.local-copy > p:last-child { max-width: 610px; margin: 34px 0 0; color: #61727e; font-size: 16px; line-height: 1.75; }

.register-section { max-width: none; display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(45px,8vw,120px); color: white; background: var(--keyzee-navy); }
.register-copy > p:first-child { color: var(--keyzee-blue); }.register-copy > p:last-child { max-width: 460px; margin: 32px 0 0; color: #aab9c5; font-size: 15px; line-height: 1.7; }
.interest-form { padding: clamp(25px,4vw,52px); color: var(--keyzee-navy); background: white; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 20px; }.form-grid label:not(.consent) { display: flex; flex-direction: column; gap: 9px; }.form-grid label > span { font-size: 11px; font-weight: 700; }.form-grid label small { color: #82909a; font-weight: 400; }.form-grid input:not([type="checkbox"]), .form-grid select, .form-grid textarea { width: 100%; padding: 13px 0; color: var(--keyzee-navy); background: transparent; border: 0; border-bottom: 1px solid #b8c4ca; border-radius: 0; font: 15px "Manrope"; }.form-grid textarea { resize: vertical; }.form-grid .wide { grid-column: 1 / -1; }.consent { display: flex; align-items: flex-start; gap: 12px; }.consent input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: var(--keyzee-orange); }.consent span { color: #536470; font-weight: 400 !important; line-height: 1.5; }.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }.interest-form .submit-button { margin-top: 30px; }.submit-button[disabled] { opacity: .65; cursor: wait; }.form-status { min-height: 22px; margin: 16px 0 0; font-size: 12px; line-height: 1.5; }.form-status.success { color: #27674e; }.form-status.error { color: #a43a24; }

.kz-closing { padding: clamp(100px,11vw,170px) var(--kz-pad); text-align: center; color: white; background: var(--keyzee-blue); background: linear-gradient(135deg,#17324a,#0d1b2a); }.kz-closing > p { color: var(--keyzee-blue); }.kz-closing h2 { margin: 30px 0 0; font-size: clamp(52px,7vw,105px); font-weight: 600; line-height: .98; letter-spacing: -.06em; }.kz-closing .kz-actions { justify-content: center; }.keyzee-footer { color: #8497a5; background: #07111b; border-color: rgba(255,255,255,.1); }.keyzee-footer .footer-brand { color: white; }

@media (max-width: 1000px) {
  .kz-hero { grid-template-columns: 1fr; padding-top: 130px; }.kz-product-frame { width: min(100%,720px); justify-self: center; transform: none; }.kz-logo { margin-bottom: 50px; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }.workflow-step:nth-child(2) { border-right: 0; }.workflow-step { border-bottom: 1px solid #bfccd4; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .flywheel { grid-template-columns: 1fr; }.flywheel > i { transform: rotate(90deg); justify-self: center; }.flywheel div { min-height: 105px; }
  .search-concept, .register-section { grid-template-columns: 1fr; }.search-intro h2 { position: static; }
}
@media (max-width: 800px) {
  .keyzee-header .site-nav { background: var(--keyzee-navy); }.keyzee-header .site-nav > a { color: white !important; }
  .kz-section-heading { grid-template-columns: 1fr; gap: 12px; }.local-section { grid-template-columns: 1fr; }.local-map { min-height: 380px; }
  .result-grid { grid-template-columns: 1fr; }.result-grid ul { min-height: auto; }.form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }
}
@media (max-width: 560px) {
  .kz-hero h1 { font-size: 48px; }.kz-product-frame { aspect-ratio: .8; }.frame-sidebar { width: 42px; }.frame-content { padding: 14px; }.vehicle-photo { height: 38%; }.frame-heading em { display: none; }
  .workflow-grid, .capability-grid { grid-template-columns: 1fr; }.workflow-step, .workflow-step + .workflow-step { min-height: 270px; padding: 27px 0; border-right: 0; }.step-icon { margin-top: 42px; }.capability-card { min-height: 285px; }
  .search-ui { padding: 13px; }.search-prompt, .search-response { grid-template-columns: 1fr; gap: 7px; }.local-map { min-height: 300px; }.interest-form { padding: 25px 20px; }
}
@media (prefers-reduced-motion: reduce) { .kz-product-frame { transform: none; } }
