.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,48px);
  transition:padding .4s var(--ease),background .4s;
}
.nav.is-scrolled{padding-top:12px;padding-bottom:12px;background:rgba(38,41,44,.96)}
.nav__logo img{height:44px;width:auto}
.nav__links{display:flex;align-items:center;gap:34px;font-size:15px;color:#fff}
.nav__links a{opacity:.85;transition:opacity .45s}
.nav__links a:hover{opacity:1}
.nav__cta{opacity:1!important;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.5);transition:background .3s}
.nav__cta:hover{background:rgba(255,255,255,.15)}
.nav__burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.nav__burger span{width:24px;height:1.5px;background:#fff;transition:transform .3s}

.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--night)}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 60%;
  translate:0 var(--py,0px);will-change:translate;
  animation:zoom 20s ease-out both,sunrise 1.6s cubic-bezier(.4,0,.2,1) both;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,41,44,.55) 0%,rgba(38,41,44,.25) 45%,rgba(38,41,44,.6) 80%,var(--night) 100%)}
.hero__inner{
  position:relative;z-index:1;width:min(1160px,100% - 48px);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:var(--fade,1);translate:0 var(--lift,0px);
}
.hero__kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:22px;animation:up 1s var(--ease) .2s both}
.hero h1{font-size:clamp(46px,8vw,104px);font-weight:200;margin-bottom:40px;text-shadow:0 2px 30px rgba(0,0,0,.25);animation:up 1.1s var(--ease) .35s both}
.hero .btn{animation:up 1s var(--ease) .55s both}
.hero__scroll{
  position:absolute;z-index:1;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  opacity:calc(var(--fade,1) * .75);translate:0 var(--lift,0px);
}
.hero__scroll i{width:1px;height:44px;background:linear-gradient(#fff,transparent);animation:drip 2s ease-in-out infinite}

@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes sunrise{from{filter:brightness(.12) saturate(.6)}to{filter:brightness(1) saturate(1)}}
@keyframes up{from{opacity:0;transform:translateY(24px)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.footer{background:transparent;border-top:1px solid rgba(255,255,255,.12);color:#cfd0cd;padding:80px 0 34px;font-size:14px}
.footer__top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:44px}
.footer__top p{text-align:right;color:#92948f}
.footer__contact{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;margin-bottom:10px;font-family:var(--f-title);font-size:20px}
.footer__top .footer__contact a{color:#fff;transition:color .3s}
.footer__top .footer__contact a:hover{color:var(--sun)}
.footer__logo{height:64px;width:auto}
.footer__bottom{margin-top:34px;color:#727470;font-size:13px}
.footer__nav{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;gap:24px 60px;padding:28px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.footer__nav nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.footer__nav a{color:#fff;opacity:.8;padding:2px 0;transition:opacity .3s,color .3s}
.footer__nav a:hover{opacity:1;color:var(--sun)}
.nav__links a[aria-current=page]{opacity:1}
.nav__links a[aria-current=page]:not(.nav__cta){color:var(--sun)}

.mobile-cta{display:none}

@media (max-width:960px){
  .footer__nav{grid-template-columns:1fr}
  .footer__top p{text-align:left}
  .footer__contact{justify-content:flex-start}
}
@media (max-width:760px){
  .nav__logo img{height:36px}
  .nav__logo,.nav__burger{position:relative;z-index:2}
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:28px;
    font-family:var(--f-title);font-size:28px;font-weight:300;
    background:rgba(38,41,44,.97);opacity:0;pointer-events:none;transition:opacity .35s;
  }
  .nav.is-open .nav__links{opacity:1;pointer-events:auto}
  .nav.is-open .nav__burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
  .nav.is-open .nav__burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

  .mobile-cta{
    display:flex;position:fixed;right:16px;bottom:16px;z-index:40;
    padding:12px 18px;font-size:14px;color:#fff;
    background:rgba(38,41,44,.85);border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 24px rgba(0,0,0,.35);background:rgba(38,41,44,.96);
    transform:translateY(140%);transition:transform .4s var(--ease);
  }
  .mobile-cta.is-shown{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hero__img,.hero__inner{translate:none}
  .hero__inner{opacity:1}
}

.footer__brand{display:flex;align-items:center;gap:20px}
.footer__rge{width:56px;height:56px;object-fit:contain}