@font-face{font-family:Thmanyah;src:url("assets/thmanyah-sans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Thmanyah;src:url("assets/thmanyah-sans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--cream:#fff6ed;--ink:#211915;--orange:#f05a28;--warm:#ff8a3d;--peach:#ffe0cc;--line:#dfcabb;--width:1120px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font:400 1.0625rem/1.55 Thmanyah,Arial,sans-serif}
button{font:inherit;color:inherit}
a{color:inherit}
button:not(:disabled){cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid currentColor;outline-offset:5px}
.wrap{width:min(var(--width),calc(100% - 3rem));margin-inline:auto}
.header{display:flex;align-items:center;justify-content:space-between;min-height:91px;border-bottom:1px solid var(--line)}
.header a{display:block}
.logo{object-fit:contain;width:156px;height:auto}
.language{background:none;border:1px solid var(--line);min-height:44px;padding:.35rem .85rem;font-weight:700}
.language:hover{background:var(--peach)}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.16}
h1{font-size:clamp(3.3rem,6.3vw,5.25rem);line-height:1.06}
h1 span{display:block}
html[lang=en] h1{font-size:clamp(3.15rem,6.1vw,5.1rem);max-width:12ch}
h2{font-size:clamp(2.15rem,5vw,4.15rem)}
h3{font-size:clamp(1.28rem,2vw,1.65rem)}
.hero{display:grid;grid-template-columns:.87fr 1.13fr;align-items:center;gap:clamp(12px,3vw,46px);min-height:535px;padding-block:48px}
.hero-copy{position:relative;z-index:2}
.hero-copy p{max-width:29ch;font-size:clamp(1.1rem,2.1vw,1.45rem);margin-block:1.25rem}
.action{display:inline-flex;align-items:center;justify-content:center;gap:1.4rem;background:var(--orange);color:var(--ink);font-weight:700;min-height:51px;padding:.62rem 1.3rem;border:0;text-decoration:none}
.action:hover{background:var(--warm)}
.action:disabled{cursor:wait;opacity:.75}
.hero-device{position:relative;isolation:isolate;text-align:center;align-self:center;padding:1.2rem 0 .4rem}
.hero-device img{position:relative;margin:auto;width:100%;aspect-ratio:1.52;object-fit:contain;filter:drop-shadow(0 15px 11px #21191532)}
.bay-outline{position:absolute;inset:22% 8% 11%;transform:skewX(-15deg);z-index:-1;border-inline:2px solid #dd8259;border-bottom:2px solid #dd8259}
.bay-outline i{position:absolute;bottom:13%;height:15px;border-inline-start:2px solid #dd8259}
.bay-outline i:first-child{inset-inline-start:8%}.bay-outline i:last-child{inset-inline-end:8%}
.hero-device figcaption{position:relative;font-size:.94rem;margin-top:.4rem}
.demo-zone{background:var(--ink);color:var(--cream);scroll-margin-top:12px}
.demo-inner{padding-block:clamp(37px,7vw,86px)}
.eyeline{color:var(--warm);font-weight:700;margin-bottom:.5rem}
.section-intro>p:last-child{margin-top:.65rem}
.demo-layout{display:grid;grid-template-columns:minmax(310px,.85fr) minmax(0,1fr);align-items:center;gap:clamp(26px,7vw,90px);margin-top:1.7rem}
.lot{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;direction:ltr;border:1px solid #9b8577;padding:.65rem;background:#2d231d}
.spot{border:1px solid #b79b87;background:#2d231d;color:var(--cream);font-weight:700;min-height:63px;font-size:1.25rem}
.spot:not(:disabled):hover{background:#46342a}
.spot.occupied{background:repeating-linear-gradient(135deg,#332923,#332923 8px,#41342d 8px,#41342d 10px);color:#d4bfb3}
.spot.selected,.spot.selected:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.lane{grid-column:1/-1;text-align:center;line-height:1.2;border-block:1px dashed #9d7f6e;color:var(--peach);font-size:1.45rem}
.legend{display:flex;gap:.85rem;flex-wrap:wrap;margin-block:.65rem;font-size:.85rem}
.legend>span{display:inline-flex;align-items:center;gap:.32rem}
.legend i{width:12px;height:12px;border:1px solid #b79b87}
.legend .selected-key{background:var(--orange);border-color:var(--orange)}
.legend .taken-key{background:#6a5346}
.demo-status{min-height:1.7rem;margin-block:.7rem}
.reset{min-height:44px;border:0;background:none;color:var(--cream);text-decoration:underline;margin-inline-start:.55rem}
.demo-device{text-align:center;background:var(--peach);padding:1.05rem 1rem .75rem;color:var(--ink)}
.demo-device img{width:100%;aspect-ratio:1.56;object-fit:contain}
.demo-device figcaption{border-top:1px solid #d3a891;padding-top:.5rem;font-weight:700}
.arrival-scene{margin-top:.65rem}
.arrival-road{height:94px;position:relative;overflow:hidden;background:#39302b;direction:ltr;border:1px solid #695349;border-radius:8px}
.arrival-road::before{content:"";position:absolute;inset:74% 33% auto 0;border-top:2px dashed #c49a83}
.road-bay{position:absolute;top:8px;bottom:8px;right:2%;width:31%;border:1px solid #edbc9f;color:var(--cream);font-weight:700}
.road-bay bdi{position:absolute;top:1px;right:5px;font-size:.82rem}
.road-gate{position:absolute;left:67%;top:36%;height:39%;width:5px;background:var(--cream);border-top:8px solid var(--orange);transform-origin:bottom;transition:transform .28s ease;z-index:3}
.road-car{position:absolute;top:61%;left:16%;transform:translate(-50%,-50%);width:clamp(49px,18vw,72px);height:19px;border-radius:7px 11px 5px 5px;background:#ff8038;border:1px solid #a33c13;transition:left .72s ease-in-out;z-index:2}
.road-car::before{content:"";position:absolute;left:15%;bottom:72%;width:64%;height:16px;background:#ff8038;clip-path:polygon(0 100%,19% 7%,62% 0,100% 100%)}
.car-window{position:absolute;left:27%;bottom:100%;width:42%;height:9px;background:#302621;clip-path:polygon(0 100%,19% 0,65% 0,100% 100%)}
.car-wheel{position:absolute;bottom:-5px;width:12px;height:12px;border:2px solid #18130f;border-radius:50%;background:#e5b38f}
.car-wheel-rear{left:12%}
.car-wheel-front{right:13%}
.road-car::after{content:"";position:absolute;right:1px;top:3px;width:6px;height:4px;border-radius:2px;background:#fff5d2}
.arrival-scene[data-stage=approaching] .road-car,.arrival-scene[data-stage=opening] .road-car{left:50%}
.arrival-scene[data-stage=entering] .road-car,.arrival-scene[data-stage=parked] .road-car{left:82%}
.arrival-scene[data-stage=entering] .road-gate,.arrival-scene[data-stage=parked] .road-gate{transform:rotate(90deg)}
#arrival-status{min-height:1.45rem;margin-top:.3rem;font-size:.9rem}
.app-screen{background:var(--cream);color:var(--ink);padding:1rem;border-radius:18px}
.app-top{display:flex;align-items:center;gap:.5rem;min-height:42px;margin-bottom:.7rem;font-size:1.25rem}
.app-location,.success-card{background:var(--ink);color:var(--cream);border-radius:14px;padding:.85rem}
.app-location span{display:block;color:#f5d7c6}
.app-screen .lot{margin-top:.7rem;border-radius:10px}
.app-screen .spot{border-radius:5px;min-height:50px}
.app-screen .legend i{border-color:#825e4b}
.bay-tile{display:grid;place-items:center;min-width:63px;min-height:63px;border-radius:14px;background:var(--orange);color:var(--ink);font-size:1.55rem;line-height:1;font-weight:700}
.confirm-summary{padding:.7rem;border:1px solid var(--line);border-radius:11px;background:#fff}
.success-card{display:grid;justify-items:center;gap:.75rem;padding:1.2rem;text-align:center}
.success-card>span{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--ink);font-size:1.6rem;font-weight:700}
.success-card .bay-tile{min-width:81px;min-height:76px;font-size:2rem}
.confirm-summary{margin:.7rem 0 0}
.confirm-summary div{display:flex;justify-content:space-between;gap:.5rem;font-size:.95rem}
.confirm-summary div+div{border-top:1px solid var(--line);margin-top:.35rem;padding-top:.35rem}
.confirm-summary dd{margin:0;font-weight:700;text-align:end}
.app-screen .demo-status:empty{min-height:0;margin:0}
.app-screen .action{width:100%;margin-top:.5rem;border-radius:9px}
.app-screen .reset{display:block;margin-inline:auto;color:var(--ink)}
.video-section{display:grid;grid-template-columns:1fr minmax(210px,360px);align-items:center;gap:2rem;padding-block:clamp(36px,7vw,86px);border-bottom:1px solid var(--line)}
.video-section p{margin-top:.8rem}
.player{position:relative;display:grid;place-items:center;background:var(--ink);aspect-ratio:9/16;overflow:hidden}
.player video{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}
.play{position:relative;width:70px;height:70px;border:0;border-radius:50%;background:var(--orange);color:var(--ink);font-size:1.4rem;padding-inline-start:6px}
#video-fallback{position:absolute;bottom:.5rem;background:var(--cream);padding:.3rem .55rem}
.how,.team{padding-block:clamp(38px,7vw,84px);border-bottom:1px solid var(--line)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:1.6rem 0 0;padding:0}
.steps p{margin-top:.5rem}
.step-image{height:185px;background:var(--peach);display:grid;place-items:center;margin-bottom:.9rem;overflow:hidden}
.step-image img{height:100%;max-height:185px;width:100%;object-fit:contain;padding:12px}
#team-list{list-style:none;margin:1.3rem 0;padding:0;border-top:1px solid var(--line)}
#team-list li{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.linkedin{display:inline-flex;gap:.35rem;align-items:center;color:#635045;font-size:.9rem;white-space:nowrap}
.linkedin span{font-weight:700;color:var(--ink);border:1px solid #8d6956;padding:0 .2rem;line-height:1.2}
.contact{margin-top:1.4rem}
.contact h3{margin-bottom:.55rem}
.email{display:inline-block;overflow-wrap:anywhere;text-underline-offset:.2em}
.footer{display:flex;justify-content:space-between;align-items:center;padding-block:1.3rem;gap:1rem}
.footer-mark{width:28px;height:auto;flex:none}
@media(max-width:690px){
 .wrap{width:calc(100% - 2rem)}
 .header{min-height:68px}
 .logo{width:140px}
 .hero{grid-template-columns:1fr;gap:6px;min-height:0;padding-block:30px 16px}
 h1,html[lang=en] h1{font-size:clamp(2.65rem,10.5vw,4.35rem)}
 .hero-copy p{margin-block:.65rem .85rem}
 .hero-device{width:min(100%,390px);margin-inline:auto;padding-top:.55rem}
 .hero-device img{max-height:255px}
 .demo-layout,.video-section{grid-template-columns:1fr}
 .demo-layout{gap:1rem}
 .demo-device{order:-1}
 .demo-device img{max-height:185px}
 .video-section{gap:1.1rem}
 .player{width:min(100%,345px);margin-inline:auto}
 .steps{display:block}
 .steps li{display:grid;grid-template-columns:minmax(95px,36%) 1fr;column-gap:.85rem;align-content:center;padding-block:.8rem;border-top:1px dashed #cf8e72}
 .steps li h3{align-self:end;margin-bottom:.3rem}
 .steps li p{margin:0}
 .step-image{grid-row:span 2;height:107px;margin:0}
 .step-image img{max-height:107px;padding:5px}
 #team-list li{grid-template-columns:1fr auto;column-gap:.55rem;row-gap:.2rem}
 #team-list li p{grid-column:1}
 #team-list li .linkedin{grid-column:2;grid-row:1/3}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.road-car,.road-gate{transition:none}}
@media(max-width:420px){
 html[lang=en] h1{font-size:clamp(2.3rem,9.2vw,2.75rem);max-width:none;text-wrap:balance}
 html[lang=en] .hero{padding-block-start:22px}
 html[lang=en] .hero-copy p{font-size:1rem;max-width:34ch}
}