/* Premium polish — IT Live light + animations + brand */

/* Hero: geen override — achtergrond en overlay worden via style.css + hero-bg afbeelding gezet */
.hero{position:relative;overflow:hidden}

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

/* Stats counter pulse */
.hero-stat strong,.stat-card strong{transition:transform .2s}
.hero-stat:hover strong{transform:scale(1.08)}
.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(26,115,232,.2)}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,115,232,.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{outline:none;border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(26,115,232,.25)}
button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Section reveal — alleen voor JS-gestuurde .is-visible klasse, nooit automatisch */
@keyframes section-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.section-reveal.is-visible{animation:section-in .45s cubic-bezier(.4,0,.2,1) both}

/* 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)}

/* Subtle hint fade — respecteert reduced-motion voorkeur */
.hero-content > p:last-child{opacity:.9}
@media(prefers-reduced-motion:no-preference){
  .hero-content > p:last-child{animation:fade-pulse 5s ease-in-out infinite}
  @keyframes fade-pulse{0%,100%{opacity:.85}50%{opacity:1}}
}

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

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

/* Globale safeguard: geen beweging voor gebruikers die dat prefereren */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* === GLOBAL UX IMPROVEMENTS === */

/* 1. Pricing / tier / plan cards lift */
.pricing-card,.tier-card,.plan-card{transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s}
.pricing-card:hover,.tier-card:hover,.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1);border-color:var(--primary)}

/* 2. FAQ / accordion hover highlight */
.faq-item,.acc-item{transition:all .2s}
.faq-item:hover,.acc-item:hover{background:rgba(26,115,232,.04);border-radius:8px}

/* 3. Table row hover */
table tbody tr{transition:background .15s}
table tbody tr:hover{background:rgba(26,115,232,.04)}

/* 4. Badge / chip micro-animation */
.badge,.chip,.tag,.label-pill{transition:transform .15s,box-shadow .15s}
.badge:hover,.chip:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* 5. Section separator gradient */
.section-divider{background:linear-gradient(90deg,transparent,var(--primary),transparent);height:1px;border:none;opacity:.15;margin:32px 0}

/* 6. Smooth anchor scroll */
html{scroll-behavior:smooth}
:target{scroll-margin-top:80px}

/* 7. Loading skeleton shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}

/* 8. Improved scrollbar (webkit) */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#64748b}

/* 9. Selection color */
::selection{background:rgba(26,115,232,.2);color:inherit}

/* 10. Print — hide non-essential */
@media print{nav,.nav,header nav,.hero-cta,.footer-social,.chat-widget{display:none !important}}

/* 11. Card-link / read-more arrow bounce */
.card-link,.read-more{transition:color .2s,gap .2s}
.card-link:hover,.read-more:hover{color:var(--primary)}
.card-link i,.read-more i{transition:transform .2s cubic-bezier(.4,0,.2,1)}
.card-link:hover i,.read-more:hover i{transform:translateX(4px)}

/* 12. Section-label badge pulse on visible */
.section-label{transition:box-shadow .2s}
.section-head:hover .section-label{box-shadow:0 0 0 3px rgba(26,115,232,.12)}

/* 13. Hero badge glow */
.hero-badge{transition:box-shadow .3s,transform .2s}
.hero-badge:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(26,115,232,.25)}

/* 14. Service/content tags */
.service-tag,.content-tag{transition:background .15s,border-color .15s,transform .15s}
.service-card:hover .service-tag{border-color:rgba(26,115,232,.3);background:rgba(26,115,232,.06)}

/* 15. Form submit button loading state */
button[type="submit"]:disabled{opacity:.65;cursor:not-allowed;transform:none !important}

/* 16. Sticky mobile bottom CTA bar — progressive enhance */
@media(max-width:640px){
  .sticky-cta-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;padding:.75rem 1rem;z-index:9000;display:flex;gap:.5rem;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
}

/* 17. Step connector line color transition */
.step:hover ~ .step::before,.step:focus ~ .step::before{border-color:rgba(26,115,232,.3)}

/* 18. Tooltip-style title on .service-tag hover */
.service-tag{cursor:default}

/* 19. Hero stats bar — slight separator */
.hero-stats{border-top:1px solid rgba(255,255,255,.15);padding-top:1.25rem;margin-top:1.25rem}

/* 20. Link underline animation on non-btn anchors */
main a:not(.btn-primary):not(.btn-dark):not(.btn-outline):not(.card-link):not([class*="btn"]):not([class*="tag"]):not([class*="chip"]):not([class*="badge"]):not(nav a){transition:color .15s}
main a:not(.btn-primary):not(.btn-dark):not(.btn-outline):not(.card-link):not([class*="btn"]):not([class*="tag"]):not([class*="chip"]):not([class*="badge"]):not(nav a):hover{color:var(--primary)}

/* === PREMIUM POLISH v2 === */

/* 21. Smooth page-enter fade */
@keyframes itl-pageEnter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
body{animation:itl-pageEnter .35s ease both}

/* 22. Better focus styles for accessibility */
:focus-visible{outline:2.5px solid #1a73e8;outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

/* 23. Scroll-driven reveal — modern browsers only */
@keyframes itl-fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@supports (animation-timeline: scroll()){
  .reveal-on-scroll{animation:itl-fadeInUp .6s ease both;animation-timeline:view();animation-range:entry 0% entry 30%}
}

/* 24. Extended print styles */
@media print{
  .nav-sidebar,.nav-sidebar-overlay,footer .social-links,.chat-widget{display:none !important}
  body{font-size:12pt}
  a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#666}
}

/* 25. Better mobile tap targets (min 44px) */
@media(hover:none){
  button,a,[role="button"],input[type="checkbox"],input[type="radio"]{min-height:44px;min-width:44px}
  nav a{padding-top:.75rem !important;padding-bottom:.75rem !important}
}

/* 26. Comprehensive reduced-motion fallback */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  body{animation:none !important}
}

/* 27. Text selection color (also defined above as item 9 — kept here as canonical) */
::selection{background:rgba(26,115,232,.2);color:inherit}