:root { --ink: #10282a; --lime: #b9ee6c; --sand: #f2eedf; --line: rgba(16, 40, 42, .16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Manrope, sans-serif; }
.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { position: absolute; z-index: 10; width: 100%; color: white; }
.nav-wrap { height: 94px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: inherit; display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: 21px; font-weight: 800; letter-spacing: 0; }
.brand-dot { color: var(--lime); }.brand-mark { width: 23px; height: 23px; display: flex; gap: 2px; align-items: end; }.brand-mark i { display: block; background: currentColor; width: 6px; border-radius: 1px; }.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 23px; }
.main-nav { display: flex; align-items: center; gap: 31px; font-size: 13px; font-weight: 600; }.main-nav a { color: inherit; text-decoration: none; }.nav-cta { border: 1px solid rgba(255,255,255,.55); padding: 10px 15px; }.nav-cta span { color: var(--lime); margin-left: 7px; }
.menu-toggle { display: none; }
.hero { min-height: 720px; overflow: hidden; position: relative; color: white; background: var(--ink); }.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,25,27,.98) 5%, rgba(13,46,47,.87) 50%, rgba(13,46,47,.45)), url('https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1800&q=85') center/cover; }.hero-grid { min-height: 660px; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; }.hero-copy { padding-top: 75px; max-width: 630px; }.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font: 500 11px/1 'DM Mono', monospace; letter-spacing: .08em; }.eyebrow span { width: 20px; height: 1px; background: currentColor; }
h1, h2 { letter-spacing: 0; margin: 0; font-weight: 700; line-height: 1.05; }h1 { font-size: clamp(44px, 5.1vw, 72px); } h2 { font-size: clamp(37px, 4.4vw, 60px); }em { font-family: Georgia, serif; font-weight: 400; }.hero-text { max-width: 480px; margin: 25px 0 30px; color: rgba(255,255,255,.73); font-size: 16px; line-height: 1.7; }.hero-actions { display: flex; gap: 28px; align-items: center; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 15px 20px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-3px); }.button-dark { background: var(--lime); color: var(--ink); }.button-dark:hover { background: white; }.text-link { font-size: 13px; font-weight: 700; text-decoration: none; color: white; }.text-link span { color: var(--lime); margin-left: 7px; }
.hero-visual { height: 100%; position: relative; }.route { position: absolute; border: 1px solid rgba(185,238,108,.55); transform: rotate(-34deg); }.route-one { width: 520px; height: 300px; border-radius: 53%; top: 177px; left: 50px; }.route-two { width: 660px; height: 360px; border-radius: 54%; top: 81px; left: 142px; }.route-three { width: 370px; height: 215px; border-radius: 50%; top: 324px; left: 136px; }.parking-card { position: absolute; z-index: 1; top: 215px; right: 25px; width: 230px; padding: 16px; color: var(--ink); background: #fffdf5; box-shadow: 16px 16px 0 rgba(185,238,108,.85); }.card-top,.card-bottom { display: flex; justify-content: space-between; align-items: center; font: 500 9px 'DM Mono',monospace; }.card-top > span:first-child { font-weight: 500; }.card-top > span:first-child span { color: #6e8d72; }.live-dot { color: #628138; }.live-dot::before { content:'●'; margin-right: 3px; }.occupancy { display: flex; align-items: baseline; justify-content: space-between; margin-top: 34px; }.occupancy span { font-size: 11px; }.occupancy strong { font-size: 39px; letter-spacing: -2px; }.meter { height: 6px; margin: 11px 0 20px; background: #e5e2d6; }.meter i { display: block; width: 68%; height: 100%; background: var(--ink); }.card-bottom { border-top: 1px solid #d9d5c8; padding-top: 10px; color: #667475; }.location-chip { position: absolute; z-index: 2; top: 450px; left: 60px; padding: 11px 15px; display: flex; gap: 8px; align-items: center; color: var(--ink); background: var(--lime); font: 11px/1.35 'DM Mono',monospace; }.location-chip b { font-size: 12px; }.location-chip strong { font-weight: 500; }.floating-number { position: absolute; top: 118px; right: 34px; display: flex; flex-direction: column; gap: 7px; }.floating-number span { color: var(--lime); font: 500 11px 'DM Mono',monospace; }.floating-number small { font: 500 9px/1.45 'DM Mono',monospace; letter-spacing: .1em; }.scroll-note { position: absolute; bottom: 31px; left: 0; right: 0; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.62); font: 10px 'DM Mono',monospace; }.scroll-note span { display: block; height: 28px; width: 1px; background: var(--lime); }
.section-pad { padding: 120px 0; }.section-intro { display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: end; }.section-intro .eyebrow { grid-column: 1/-1; }.section-intro p:last-child { margin: 0 0 4px; max-width: 290px; font-size: 14px; line-height: 1.7; }.solution-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 65px; border-top: 1px solid var(--line); }.solution-card { min-height: 330px; position: relative; padding: 28px 30px; border-right: 1px solid var(--line); }.solution-card:first-child { border-left: 1px solid var(--line); }.card-number { font: 11px 'DM Mono',monospace; color: #789092; }.solution-icon { margin: 42px 0 30px; position: relative; width: 50px; height: 42px; }.icon-grid { display: grid; grid-template-columns: repeat(2,17px); gap: 5px; }.icon-grid i { border: 2px solid var(--ink); }.icon-scan { border: 2px solid var(--ink); }.icon-scan i { position: absolute; width: 8px; height: 8px; background: var(--lime); }.icon-scan i:nth-child(1){left:7px;top:7px}.icon-scan i:nth-child(2){right:7px;top:7px}.icon-scan i:nth-child(3){left:7px;bottom:7px}.icon-pulse { border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }.icon-pulse i { position: absolute; bottom: -2px; width: 9px; background: var(--ink); }.icon-pulse i:nth-child(1){height:19px;left:9px}.icon-pulse i:nth-child(2){height:34px;left:22px;background:var(--lime);border:2px solid var(--ink)}.icon-pulse i:nth-child(3){height:26px;left:35px}.solution-card h3 { margin: 0 0 10px; font-size: 19px; }.solution-card p { max-width: 240px; color: #52676a; font-size: 13px; line-height: 1.6; }.solution-card > a { position: absolute; bottom: 24px; right: 27px; color: var(--ink); text-decoration: none; font-size: 22px; }.card-featured { background: var(--ink); color: white; }.card-featured .card-number,.card-featured p { color: rgba(255,255,255,.64); }.card-featured .icon-scan { border-color: var(--lime); }.card-featured .icon-scan i { background: white; }.card-featured > a { color: var(--lime); }
.operation { background: var(--ink); color: white; }.operation-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 630px; }.operation-image { position: relative; min-height: 490px; background: linear-gradient(0deg, rgba(9,31,33,.44), rgba(9,31,33,.05)), url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1000&q=85') center/cover; }.image-label { position: absolute; top: 29px; left: 31px; display: grid; color: white; font: 500 10px 'DM Mono',monospace; letter-spacing: .12em; }.image-label span:last-child { color: var(--lime); }.image-stamp { position: absolute; right: 28px; bottom: 27px; text-align: right; color: var(--lime); font: 500 10px/1.45 'DM Mono',monospace; letter-spacing: .1em; }.operation-copy { padding: 91px min(8vw,100px); }.operation-copy > p:not(.eyebrow) { color: rgba(255,255,255,.68); max-width: 390px; margin: 25px 0; font-size: 14px; line-height: 1.75; }.operation-copy ul { list-style: none; margin: 0 0 27px; padding: 0; font-size: 13px; }.operation-copy li { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.15); }.operation-copy li span { color: var(--lime); font: 10px 'DM Mono',monospace; padding-right: 15px; }.button-lime { background: var(--lime); color: var(--ink); }
.numbers-heading { display: flex; justify-content: space-between; align-items: baseline; }.numbers-heading > p:last-child { max-width: 330px; font-size: 13px; color: #52676a; line-height: 1.7; }.number-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 51px; border-top: 1px solid var(--line); }.number-grid div { padding: 23px 0; border-right: 1px solid var(--line); }.number-grid div:not(:first-child) { padding-left: 25px; }.number-grid div:first-child { border-left: 1px solid var(--line); padding-left: 25px; }.number-grid strong { font-size: clamp(40px,5vw,70px); letter-spacing: -3px; }.number-grid strong span { color: #8aa34d; font-size: .5em; }.number-grid p { margin: 2px 0; color: #52676a; font-size: 12px; }
.contact { color: white; background: #315a52; }.contact-inner { min-height: 470px; padding: 87px 0; position: relative; }.contact .eyebrow { color: var(--lime); }.contact h2 { max-width: 700px; }.contact-mail { display: inline-flex; gap: 12px; align-items: center; margin-top: 32px; color: var(--lime); font-size: clamp(18px,2.4vw,29px); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(185,238,108,.5); padding-bottom: 4px; }.contact-note { position: absolute; right: 0; bottom: 91px; width: 220px; color: rgba(255,255,255,.69); font-size: 12px; line-height: 1.7; }
footer { padding: 29px 0; background: var(--ink); color: white; }.footer-inner { display: flex; justify-content: space-between; align-items: center; }.footer-inner p,.footer-inner > a:last-child { font: 10px 'DM Mono',monospace; color: rgba(255,255,255,.55); text-decoration: none; }
.reveal { animation: fade-up .7s both; } @keyframes fade-up { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
@media (max-width: 720px) { .shell { width: min(100% - 40px, 1160px); }.nav-wrap { height: 74px; }.menu-toggle { z-index: 20; display: flex; flex-direction: column; gap: 6px; border: 0; padding: 10px 0 10px 10px; background: transparent; }.menu-toggle span { display:block; width: 22px; height: 1px; background: white; }.main-nav { display: none; }.main-nav.open { position: absolute; inset: 0 0 auto; padding: 96px 20px 25px; display: flex; flex-direction: column; align-items: stretch; gap: 19px; background: var(--ink); }.main-nav .nav-cta { text-align:center; }.hero { min-height: 720px; }.hero::before { background: linear-gradient(180deg, rgba(6,25,27,.92) 10%, rgba(13,46,47,.82)), url('https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1100&q=85') center/cover; }.hero-grid { min-height: 680px; display: block; }.hero-copy { padding-top: 144px; }.hero-text { font-size: 14px; }.hero-actions { gap: 20px; }.hero-visual { height: 200px; }.parking-card { transform: scale(.74); transform-origin: right bottom; top: -27px; right: 3px; }.location-chip { transform: scale(.78); transform-origin: left bottom; top: 117px; left: 0; }.floating-number,.route { display: none; }.scroll-note { bottom: 20px; }.section-pad { padding: 80px 0; }.section-intro { display: block; }.section-intro h2 { margin-bottom: 21px; }.solution-grid { grid-template-columns: 1fr; margin-top: 40px; }.solution-card { min-height: 275px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }.solution-icon { margin: 28px 0 20px; }.operation-grid { grid-template-columns: 1fr; }.operation-image { min-height: 340px; }.operation-copy { padding: 68px 0; }.numbers-heading { display: block; }.numbers-heading > p:last-child { margin-top: 20px; }.number-grid { grid-template-columns: 1fr; margin-top: 30px; }.number-grid div,.number-grid div:not(:first-child),.number-grid div:first-child { padding: 19px 20px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }.contact-inner { min-height: 420px; padding: 72px 0; }.contact-note { position: static; margin-top: 40px; }.footer-inner { gap: 19px; align-items: flex-start; flex-direction: column; }.footer-inner p { order: 3; margin: 0; } }