.header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s;isolation:isolate}.header.is-scrolled{background:#1a1a1abf;backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);border-bottom-color:#f6f4ed20;box-shadow:0 5px 30px #00000012}.hero{min-height:100svh;background:#30312f;display:flex;align-items:center}.hero-inner{padding-top:155px;padding-bottom:25px;width:calc(100% - 96px)}.hero h1{max-width:65%;font-size:clamp(54px,6.6vw,96px)}.hero-inner>.actions{max-width:65%}.hero-bottom{margin-top:95px}.city-background{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.paint-field{position:absolute;inset:0;width:100%;height:100%}.city-drawing{position:absolute;right:-1px;bottom:0;width:58%;height:100%;opacity:.7}.city-background:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#242523e6 0%,#242523b3 34%,#24252333 60%,transparent 78%)}.city-outline,.city-windows,.city-ground{stroke-dasharray:1;stroke-dashoffset:0}.city-windows{stroke-width:.65;opacity:.6}.city-ground{opacity:.65}html{scroll-padding-top:110px}
@media(prefers-reduced-motion:no-preference){.city-outline{animation:city-rise 3.8s var(--delay) ease-in-out both}.city-windows{animation:city-rise 4s calc(var(--delay) + 2s) ease-in-out both}.city-ground{animation:city-rise 3s .3s ease-in-out both}}
@keyframes city-rise{from{stroke-dashoffset:1;opacity:0}15%{opacity:.5}to{stroke-dashoffset:0;opacity:1}}
@media(min-width:1500px){.hero-inner{padding-top:170px}.city-drawing{width:60%}}
@media(max-width:800px){.hero-inner{width:calc(100% - 40px);padding-top:145px;padding-bottom:25px}.hero h1{max-width:100%;font-size:clamp(47px,10vw,72px)}.hero-inner>.actions{max-width:100%}.city-drawing{width:100%;height:100%;right:-22%;opacity:.35}.city-background:after{background:linear-gradient(90deg,#242523e6,#24252399 60%,#24252333)}.hero-bottom{margin-top:100px}.header{padding:16px 20px}.hero-inner>p{max-width:90%}}
@media(prefers-reduced-motion:reduce){.header{transition:none}.city-outline,.city-windows,.city-ground{animation:none}}
