/* Premium polish — layg.nl light + animations + brand */

/* Smooth gradient hero with brand fallback */
.hero{background:linear-gradient(135deg,#fafbff 0%,#f0f7ff 100%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(circle,rgba(13,148,136,.08) 0%,transparent 60%);animation:hero-float 20s ease-in-out infinite;z-index:0}
@keyframes hero-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(5deg)}}

/* Cards lift + soft shadow */
.service-card,.portal-card,.stat-card,.feature-card{transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}
.service-card:hover,.portal-card:hover,.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(15,23,42,.08)}

/* Stats counter pulse */
.hero-stat strong,.stat-card strong{transition:transform .2s}
.hero-stat:hover strong,.stat-card:hover strong{transform:scale(1.08);color:var(--primary)}

/* Premium buttons with glow */
.btn-primary,.btn-dark{transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(13,148,136,.2)}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,148,136,.35)}
.btn-primary:active,.btn-dark:active{transform:translateY(0)}

.btn-outline{transition:all .2s cubic-bezier(.4,0,.2,1)}
.btn-outline:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(255,255,255,.25)}

/* Header subtle shadow + smooth scroll */
#site-header{transition:all .2s}
#site-header:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}

/* Smooth focus ring */
input:focus,select:focus,textarea:focus,button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,148,136,.2)}

/* Section reveal on scroll */
section{animation:section-in .6s ease both}
@keyframes section-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Logo subtle hover */
.logo,.site-logo{transition:transform .2s}
.logo:hover,.site-logo:hover{transform:scale(1.04)}

/* Sticky CTA on hero stats hover */
.hero-stat{transition:transform .15s,box-shadow .2s;cursor:default}
.hero-stat:hover{transform:translateY(-3px)}

/* Image hover zoom in cards */
.service-card img,.portal-card img{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.service-card:hover img,.portal-card:hover img{transform:scale(1.05)}

/* Tooltip-style hint with fade */
.hero-content > p:last-child{animation:fade-pulse 4s infinite}
@keyframes fade-pulse{0%,100%{opacity:.8}50%{opacity:1}}

/* Footer cleanup */
footer{transition:background .3s}

/* Modal/dialog smooth (if used) */
.modal,.layg-modal{backdrop-filter:blur(8px);animation:fade-in .2s}
@keyframes fade-in{from{opacity:0}to{opacity:1}}