/* =========================================================
   Fresher – subtle typography polish & load animations
   Loaded after styles.css. Animations play once on load;
   no continuous looping effects.
   ========================================================= */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---------- Typography ---------- */
.hero-description{color:#23354f}
.button,.header-quote,.form-button{font-family:Montserrat,Lato,Arial,sans-serif;font-weight:700;letter-spacing:0}
.trust-bar strong{color:#0a2348}

/* ---------- Banner: settles in once on load ---------- */
.hero{background-image:none}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:#ecf6f8 url('dekstop-banner.png') center/100% 100% no-repeat;
}
@media(max-width:900px){.hero:before{background-size:auto 100%;background-position:57% center}}
@media(max-width:600px){.hero:before{background-position:61% center}}
.anim .hero:before{animation:bannerIn 1.8s var(--ease) both}
.anim .hero-wash{animation:fade 1.2s ease both}
@keyframes bannerIn{from{opacity:0;transform:scale(1.08);filter:blur(6px)}to{opacity:1;transform:scale(1);filter:blur(0)}}

/* ---------- Entrance (once, staggered) ---------- */
@keyframes fade{from{opacity:0}}
@keyframes up{from{opacity:0;translate:0 18px}}
@keyframes down{from{opacity:0;translate:0 -14px}}
@keyframes logoIn{from{opacity:0;scale:.92}}

.anim .site-header{animation:down .8s var(--ease) .1s both}
.anim .eyebrow{animation:up .8s var(--ease) .35s both}
.anim h1{animation:up .8s var(--ease) .45s both}
.anim .title-rule{animation:fade .8s ease .6s both}
.anim .hero-description{animation:up .8s var(--ease) .65s both}
.anim .product-benefits{animation:up .8s var(--ease) .75s both}
.anim .hero-actions{animation:up .8s var(--ease) .85s both}
.anim .brand-hero{animation:logoIn 1.2s var(--ease) .5s both}
.anim .trust-bar{animation:up .9s var(--ease) 1s both}

/* ---------- Gentle hover states ---------- */
.main-nav a,.main-nav button{transition:color .25s ease}
.main-nav button:after{content:"";position:absolute;bottom:0;left:0;right:0;height:calc(3 * var(--u));min-height:2px;background:#009db5;scale:0 1;transition:scale .35s var(--ease)}
.main-nav button:hover:after{scale:1 1}
@media(max-width:900px){.main-nav button:after{display:none}}

.button,.header-quote,.form-button{transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.button svg,.header-quote svg,.form-button svg{transition:translate .3s var(--ease)}
.button:hover svg,.header-quote:hover svg,.form-button:hover svg{translate:4px 0}
.header-quote:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,140,170,.28)}
.button-secondary:hover{background:#f2fcfd}

.benefit-icon,.trust-icon{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product-benefits li:hover .benefit-icon,.trust-bar li:hover .trust-icon{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,150,180,.18)}

/* ---------- Dialog & form ---------- */
.info-dialog[open]{animation:up .35s var(--ease)}
.info-dialog[open]::backdrop{animation:fade .3s ease}
.request-form input,.request-form select,.request-form textarea{transition:border-color .2s,box-shadow .2s}
.request-form input:focus,.request-form select:focus,.request-form textarea:focus{outline:none;border-color:#00a3bb;box-shadow:0 0 0 3px rgba(0,163,187,.15)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}