/* Quiet Instrument Panel: car-led Chicago driving scenes keep the hero about the road, not a generic city backdrop. */
.hero { --hero-parallax-x:0px; --hero-parallax-y:0px; background:#081321; }.hero:before,.map-grid { display:none; }.hero-scenes { position:absolute; z-index:-1; inset:0; overflow:hidden; background:#081321; }.hero-scene { position:absolute; inset:0; opacity:0; transition:opacity .42s cubic-bezier(.23,1,.32,1); }.hero[data-hero-theme="street"] .scene-street,.hero[data-hero-theme="map"] .scene-map,.hero[data-hero-theme="apps"] .scene-apps { opacity:1; }.scene-street { background:radial-gradient(circle at 93% 8%,#3d6173 0%,#172e42 28%,#091624 74%); }.road-surface { position:absolute; right:-9%; bottom:-17%; width:91%; height:74%; transform:perspective(220px) rotateX(55deg) translate3d(calc(var(--hero-parallax-x) * .55),calc(var(--hero-parallax-y) * .55),0); background:linear-gradient(90deg,#132536 0%,#3d5264 45%,#182a3a 46% 100%); }.road-mark { position:absolute; z-index:1; bottom:20%; width:45%; height:5px; transform-origin:right; background:linear-gradient(90deg,transparent,rgba(248,241,209,.88),transparent); box-shadow:0 0 12px rgba(248,241,209,.3); }.mark-one { right:3%; transform:rotate(18deg); }.mark-two { right:20%; transform:rotate(-7deg); }.city-glow { position:absolute; z-index:1; width:160px; height:160px; border-radius:50%; filter:blur(42px); opacity:.3; }.glow-one { right:27%; top:11%; background:#d2a55d; }.glow-two { right:3%; top:38%; background:#94d3df; }.hero-car { position:absolute; z-index:3; width:128px; height:49px; border-radius:20px 25px 12px 12px; background:linear-gradient(140deg,#b9d5e0,#315166 38%,#142839); box-shadow:0 13px 25px rgba(0,0,0,.5); }.hero-car:before { position:absolute; top:-19px; left:31px; width:58px; height:27px; content:""; transform:skewX(-21deg); border-radius:9px 13px 0 0; background:linear-gradient(105deg,#a7cad0,#294d62); }.hero-car:after { position:absolute; right:9px; bottom:12px; width:15px; height:7px; content:""; border-radius:8px; background:var(--lime); box-shadow:0 0 16px rgba(185,242,39,.82); }.hero-car i { position:absolute; bottom:-8px; width:25px; height:17px; border-radius:50%; background:#070d13; }.hero-car i:first-child { left:17px; }.hero-car i:last-child { right:17px; }.car-primary { right:23%; bottom:17%; transform:translate3d(calc(var(--hero-parallax-x) * .82),calc(var(--hero-parallax-y) * .82),0) scale(1.17); }.car-secondary { right:5%; bottom:30%; transform:translate3d(calc(var(--hero-parallax-x) * .5),calc(var(--hero-parallax-y) * .5),0) scale(.65); filter:brightness(.67); }.car-stream-a { right:40%; bottom:28%; transform:translate3d(calc(var(--hero-parallax-x) * .35),calc(var(--hero-parallax-y) * .35),0) scale(.48); filter:brightness(.56); }.car-stream-b { right:53%; bottom:37%; transform:translate3d(calc(var(--hero-parallax-x) * .25),calc(var(--hero-parallax-y) * .25),0) scale(.31); filter:brightness(.43); }.car-stream-c { right:1%; bottom:44%; transform:translate3d(calc(var(--hero-parallax-x) * .2),calc(var(--hero-parallax-y) * .2),0) scale(.26); filter:brightness(.35); }.scene-map { background:radial-gradient(circle at 90% 4%,#3e5e6f 0%,#142b3d 31%,#081421 76%); }.corridor-rail { position:absolute; top:20%; right:-9%; width:82%; height:13%; transform:translate3d(calc(var(--hero-parallax-x) * -.26),calc(var(--hero-parallax-y) * -.26),0) skewX(-19deg); border-block:5px solid #85969d; background:repeating-linear-gradient(90deg,#263c4b 0 9%,#b0bec0 9.2% 10%,#263c4b 10.2% 18%); box-shadow:0 15px 20px rgba(0,0,0,.46); }.corridor-deck { position:absolute; top:31%; right:-7%; width:77%; height:6%; transform:skewX(-19deg); background:#243b4b; box-shadow:0 11px 18px rgba(0,0,0,.47); }.corridor-road { position:absolute; right:-13%; bottom:-18%; width:101%; height:70%; transform:perspective(200px) rotateX(51deg) translate3d(calc(var(--hero-parallax-x) * .54),calc(var(--hero-parallax-y) * .54),0); background:linear-gradient(90deg,#152839,#405466 43%,#182a3a 44% 100%); }.corridor-lane { position:absolute; z-index:1; bottom:19%; width:43%; height:5px; transform-origin:right; background:linear-gradient(90deg,transparent,rgba(250,242,210,.85),transparent); }.lane-one { right:0; transform:rotate(15deg); }.lane-two { right:25%; transform:rotate(-11deg); }.car-corridor-a { right:23%; bottom:17%; transform:translate3d(calc(var(--hero-parallax-x) * .75),calc(var(--hero-parallax-y) * .75),0) scale(1.13); }.car-corridor-b { right:7%; bottom:27%; transform:translate3d(calc(var(--hero-parallax-x) * .48),calc(var(--hero-parallax-y) * .48),0) scale(.7); filter:brightness(.75); }.car-corridor-c { right:39%; bottom:29%; transform:translate3d(calc(var(--hero-parallax-x) * .3),calc(var(--hero-parallax-y) * .3),0) scale(.54); filter:brightness(.62); }.car-corridor-d { right:55%; bottom:38%; transform:translate3d(calc(var(--hero-parallax-x) * .23),calc(var(--hero-parallax-y) * .23),0) scale(.34); filter:brightness(.48); }.car-corridor-e { right:1%; bottom:42%; transform:translate3d(calc(var(--hero-parallax-x) * .18),calc(var(--hero-parallax-y) * .18),0) scale(.29); filter:brightness(.4); }.scene-apps { background:radial-gradient(circle at 93% 10%,#4b6574 0%,#193347 33%,#091522 77%); }.airport-runway { position:absolute; right:-7%; bottom:-18%; width:95%; height:72%; transform:perspective(200px) rotateX(53deg) translate3d(calc(var(--hero-parallax-x) * .5),calc(var(--hero-parallax-y) * .5),0); background:linear-gradient(90deg,#132839 0%,#44596a 44%,#182a3a 45% 100%); }.airport-arc { position:absolute; z-index:1; width:90%; height:43%; border:4px solid rgba(186,242,39,.42); border-left:0; border-bottom:0; border-radius:0 82% 0 0; transform:translate3d(calc(var(--hero-parallax-x) * -.24),calc(var(--hero-parallax-y) * -.24),0) rotate(10deg); }.arc-one { top:6%; right:-30%; }.arc-two { top:27%; right:-38%; opacity:.45; transform:translate3d(calc(var(--hero-parallax-x) * -.16),calc(var(--hero-parallax-y) * -.16),0) rotate(-1deg) scale(.78); }.airport-mark { position:absolute; z-index:1; bottom:22%; width:38%; height:5px; transform-origin:right; background:linear-gradient(90deg,transparent,rgba(255,244,205,.9),transparent); }.airport-mark-one { right:3%; transform:rotate(16deg); }.airport-mark-two { right:25%; transform:rotate(-9deg); }.airport-gate-line { position:absolute; top:24%; right:-3%; width:59%; height:2px; background:repeating-linear-gradient(90deg,#acc7ce 0 11px,transparent 11px 23px); opacity:.62; }.car-airport-a { right:23%; bottom:17%; transform:translate3d(calc(var(--hero-parallax-x) * .8),calc(var(--hero-parallax-y) * .8),0) scale(1.16); }.car-airport-b { right:5%; bottom:29%; transform:translate3d(calc(var(--hero-parallax-x) * .5),calc(var(--hero-parallax-y) * .5),0) scale(.68); filter:brightness(.73); }.car-airport-c { right:42%; bottom:28%; transform:translate3d(calc(var(--hero-parallax-x) * .32),calc(var(--hero-parallax-y) * .32),0) scale(.5); filter:brightness(.6); }.car-airport-d { right:56%; bottom:37%; transform:translate3d(calc(var(--hero-parallax-x) * .22),calc(var(--hero-parallax-y) * .22),0) scale(.33); filter:brightness(.48); }.car-airport-e { right:1%; bottom:43%; transform:translate3d(calc(var(--hero-parallax-x) * .17),calc(var(--hero-parallax-y) * .17),0) scale(.25); filter:brightness(.38); }.hero-style-control { display:flex; align-items:center; flex-wrap:wrap; gap:7px; max-width:790px; margin-top:17px; }.hero-style-label,.hero-style-status { color:rgba(255,255,255,.62); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.hero-style-label { margin-right:5px; color:var(--lime); }.hero-style-control button { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(244,242,233,.24); border-radius:100px; background:rgba(8,17,30,.58); padding:7px 10px; color:#d6dfeb; font:600 11px "IBM Plex Sans",sans-serif; cursor:pointer; }.hero-style-control button[aria-pressed="true"] { border-color:var(--lime); background:rgba(185,242,39,.13); color:#fff; }.hero-style-control button:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }.style-dot { width:7px; height:7px; border-radius:50%; }.street-dot { background:#d5ab73; }.map-dot { background:#9dc4cb; }.apps-dot { background:#cce476; }.hero-style-status { flex-basis:100%; margin-top:2px; color:rgba(255,255,255,.43); }@media (max-width:760px) { .road-surface,.corridor-road,.airport-runway { right:-42%; width:127%; }.hero-car { width:101px; height:42px; }.car-primary,.car-corridor-a,.car-airport-a { right:5%; bottom:26%; }.car-secondary,.car-corridor-b,.car-airport-b { right:-8%; bottom:37%; }.car-stream-a,.car-corridor-c,.car-airport-c { right:30%; bottom:39%; }.car-stream-b,.car-stream-c,.car-corridor-d,.car-corridor-e,.car-airport-d,.car-airport-e { display:none; }.corridor-rail { right:-39%; width:119%; }.airport-arc { right:-55%; width:125%; }.hero-style-control { max-width:100%; }.hero-style-status { display:none; } }@media (prefers-reduced-motion: reduce) { .hero-scene,.road-surface,.corridor-rail,.corridor-road,.airport-runway,.airport-arc,.hero-car { transition:none; transform:none; } }