/* ===== effects ===== */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),#7cc4f5);z-index:200}
header{transition:height .3s,box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px rgba(8,43,102,.14)}
header.scrolled .nav{height:56px}
.nav{transition:height .3s}
nav a:not(.btn){position:relative}
nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--blue);transition:width .3s}
nav a:not(.btn):hover::after{width:100%}

/* hero: slow zoom + staggered entrance + floating shapes */
.hero{position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(8,43,102,.92) 0%,rgba(8,43,102,.65) 55%,rgba(8,43,102,.25) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../images/residence-facade.jpg) center/cover;animation:kb 22s ease-in-out infinite alternate;transform:translateY(var(--py,0))}
@keyframes kb{from{scale:1}to{scale:1.12}}
.hero .wrap>*{opacity:0;transform:translateY(28px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .wrap>*:nth-child(1){animation-delay:.15s}
.hero .wrap>*:nth-child(2){animation-delay:.35s}
.hero .wrap>*:nth-child(3){animation-delay:.55s}
.hero .wrap>*:nth-child(4){animation-delay:.75s}
@keyframes up{to{opacity:1;transform:none}}
.hero .orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:float 9s ease-in-out infinite;pointer-events:none}
.hero .o1{width:320px;height:320px;right:6%;top:18%}
.hero .o2{width:140px;height:140px;right:22%;bottom:14%;animation-delay:-4s;background:rgba(124,196,245,.08)}
@keyframes float{50%{transform:translateY(-26px)}}

/* buttons: shine sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.btn:hover::after{left:140%;transition:left .7s}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.left{transform:translateX(-50px)}
.reveal.right{transform:translateX(50px)}
.reveal.in{opacity:1;transform:none}

/* cards / tiles */
.card{transform-style:preserve-3d;will-change:transform}
.tile figcaption{transform:translateY(8px);opacity:.9;transition:.4s}
.tile:hover figcaption{transform:none;opacity:1}
.feature img{transition:transform .8s}
.feature:hover img{transform:scale(1.04)}
.feature>img{transform-origin:center}
.step::before{transition:.4s}
.step:hover::before{opacity:1;transform:translateX(6px)}
.stats b{background:linear-gradient(90deg,#fff,#7cc4f5);-webkit-background-clip:text;background-clip:text;color:transparent}
#lb.open img{animation:zoomin .35s ease}
@keyframes zoomin{from{opacity:0;transform:scale(.92)}}


nav a.active:not(.btn){color:var(--blue)}
nav a.active:not(.btn)::after{width:100%}
.tile:focus-visible,.filters button:focus-visible,.burger:focus-visible,#lb button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#lb .nav-btn{top:50%;right:auto;left:18px;transform:translateY(-50%);font-size:3rem;padding:0 12px}
#lb .nav-btn.next{left:auto;right:18px}
#lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:.95rem;opacity:.85}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#ok{display:none;font-weight:600}
#ok.ok{color:#0a7a3d}#ok.err{color:#b3261e}
form button[disabled]{opacity:.6;cursor:wait}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.hero .wrap>*{opacity:1!important;transform:none!important}
}

@media(max-width:900px){
  .hero .orb{display:none}
  section{padding:64px 0}
  .about,.feature,.cwrap{grid-template-columns:1fr}
  .grid,.cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .burger{display:block}
  nav ul{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid var(--line)}
  nav ul.open{display:flex}
}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
@media(max-width:520px){.grid,.steps{grid-template-columns:1fr}.feature .txt{padding:30px 22px}}