html{scroll-behavior:smooth;scroll-padding-top:84px}
body{padding-bottom:56px}
@media(min-width:768px){body{padding-bottom:0}}
:focus-visible{outline:3px solid #E6A23C;outline-offset:2px}

/* buttons */
.btn-primary,.btn-outline,.btn-wa,.btn-light{display:inline-flex;align-items:center;gap:.55rem;border-radius:.75rem;padding:.8rem 1.4rem;font-weight:600;transition:transform .2s,background-color .2s,box-shadow .2s,color .2s}
.btn-primary{background:#1677C8;color:#fff;box-shadow:0 6px 16px -6px rgba(22,119,200,.6)}
.btn-primary:hover{background:#123B63;transform:translateY(-2px)}
.btn-outline{border:2px solid #123B63;color:#123B63}
.btn-outline:hover{background:#123B63;color:#fff;transform:translateY(-2px)}
.btn-wa{background:#128C7E;color:#fff}
.btn-wa:hover{background:#0b6b60;transform:translateY(-2px)}
.btn-light{background:#fff;color:#123B63}
.btn-light:hover{background:#F4F9FC;transform:translateY(-2px)}

/* nav */
.nav-link{display:inline-flex;align-items:center;border-radius:.5rem;padding:.55rem .9rem;font-weight:600;color:#172B3A;transition:color .2s,background-color .2s}
.nav-link:hover,.nav-link.active{color:#1677C8;background:#F4F9FC}
.mega{visibility:hidden;opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s,visibility .2s}
.has-mega:hover .mega,.has-mega:focus-within .mega{visibility:visible;opacity:1;transform:translate(-50%,0)}
#site-nav.scrolled{box-shadow:0 8px 24px -12px rgba(18,59,99,.25)}
.mobile-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;border-top-width:0}
.mobile-menu>div{overflow:hidden}
.mobile-menu.open{grid-template-rows:1fr;border-top-width:1px}
.m-link{display:block;padding:.75rem 0;font-weight:600;color:#123B63;border-bottom:1px solid #eef2f6}

/* forms */
.field{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.75rem 1rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.field:focus{outline:none;border-color:#1677C8;box-shadow:0 0 0 3px rgba(22,119,200,.2)}
.field.invalid{border-color:#c0392b}
.field-err{margin-top:.25rem;min-height:1rem;font-size:.8rem;color:#c0392b}

/* faq */
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-panel>div{overflow:hidden}
.faq-item.open .faq-panel{grid-template-rows:1fr}
.faq-icon{transition:transform .3s}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* cards and images */
.zoom{overflow:hidden}
.zoom img{transition:transform .6s ease}
.zoom:hover img{transform:scale(1.05)}
.card-lift{transition:transform .25s,box-shadow .25s}
.card-lift:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(18,59,99,.35)}

/* scroll reveal (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* subtle background movement */
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(24px,-18px,0)}}
.drift{animation:drift 14s ease-in-out infinite}
.hero-grid{background-image:radial-gradient(rgba(22,119,200,.12) 1px,transparent 1px);background-size:22px 22px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}