/* 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
   2026-07-30: GEEN transform meer op body. Met animation-fill-mode "both" bleef de
   eindstand transform:translateY(0) permanent staan; een body met transform wordt de
   containing block voor position:fixed, waardoor ALLE zwevende elementen (chat-widget,
   WhatsApp-knop) niet vast bleven staan maar met de pagina meescrolden.
   Alleen opacity animeren geeft dezelfde fade zonder dat neveneffect. */
@keyframes itl-pageEnter{from{opacity:0}to{opacity:1}}
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}

/* LCP-KOP-DIRECT-ZICHTBAAR-20260919 — de kopregel en intro bovenaan begonnen op opacity:0 en vlogen
   pas na 0,15 s in (0,8 s). Google meet de "grootste zichtbare inhoud" (LCP) pas vanaf het moment dat
   hij zichtbaar is: dat werd 3,6 s op mobiel, en het grootste element dat Lighthouse vond was zelfs
   het chat-icoontje van 40 px. De beweging blijft, maar de tekst is vanaf de eerste frame zichtbaar. */
@keyframes revealUpZichtbaar { from { transform: translateY(18px); } to { transform: translateY(0); } }
.hero-content h1, .hero-content p { opacity: 1 !important; animation-name: revealUpZichtbaar !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .hero-content h1, .hero-content p { animation: none !important; } }
/* HERO-PRICES-MOBILE-20260923f */
.hero-price-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-top:1.1rem;max-width:42rem}
.hero-price-card{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .75rem;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);text-decoration:none!important;color:#fff!important;text-shadow:none!important;min-height:4.1rem;justify-content:center;transition:background .15s,border-color .15s,transform .15s}
.hero-price-card:hover{background:rgba(255,255,255,.12);border-color:rgba(245,197,66,.45);transform:translateY(-2px)}
.hps-label{font-size:.68rem;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:rgba(226,232,240,.72)!important}
.hps-price{font-size:clamp(.92rem,1.4vw,1.05rem);font-weight:800;letter-spacing:-.02em;color:#fde68a!important;line-height:1.2}
.hero-pill-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.85rem;max-width:40rem}
.hero-pill-row a{display:inline-flex;align-items:center;padding:.38rem .75rem;border-radius:999px;font-size:.76rem;font-weight:650;color:#e2e8f0!important;text-decoration:none!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.hero-hint-line{margin:.15rem 0 0!important;font-size:.82rem!important;color:rgba(148,163,184,.95)!important}
.hero-stats,.hero-live-badge,.hero-thumb-grid,.hero-sector-pills{display:none!important}
.hero .hero-cta-main.btn-primary,.hero a.hero-strategie-cta{display:inline-flex;align-items:center;gap:.55rem;min-height:3.05rem;padding:.9rem 1.55rem!important;border-radius:999px!important;background:linear-gradient(135deg,#f5c542,#e8a317 55%,#d4920f)!important;color:#0b1220!important;font-weight:750!important;border:0!important;text-shadow:none!important}
.hero a.hero-cta-sec.btn-outline{display:inline-flex;align-items:center;gap:.45rem;min-height:3.05rem;padding:.85rem 1.35rem!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.28)!important;color:#f8fafc!important;text-shadow:none!important}
@media (max-width:1100px){.hero-price-strip{grid-template-columns:repeat(3,minmax(0,1fr));max-width:100%}}
@media (max-width:980px){
  .hero{min-height:auto!important}
  .hero-visual,.hero-mockup{display:none!important}
  .hero-content{max-width:100%!important;padding:3rem 0 1.25rem!important}
  .hero-content h1{font-size:clamp(1.85rem,7.5vw,2.6rem)!important}
  .hero-btns--primary{flex-direction:column;width:100%;gap:.65rem!important}
  .hero .hero-cta-main,.hero a.hero-cta-sec{width:100%;justify-content:center;min-height:3.15rem}
  .hero-price-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hero-badge{white-space:normal!important;font-size:.65rem!important;line-height:1.3}
  .hero-content h1{font-size:clamp(1.7rem,8.2vw,2.15rem)!important}
  .hero-price-card:last-child{grid-column:1/-1}
  .hps-price{font-size:.95rem}
}
@media (max-width:400px){.hero-price-strip{grid-template-columns:1fr}.hero-price-card:last-child{grid-column:auto}}

/* IMPROVE4-20260923 */
.hero-price-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;margin-top:1.15rem;max-width:44rem}
.hero-price-card{display:flex;flex-direction:column;gap:.18rem;padding:.72rem .7rem;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);text-decoration:none!important;color:#fff!important;text-shadow:none!important;min-height:4.15rem;justify-content:center;transition:background .15s,border-color .15s,transform .15s;backdrop-filter:blur(6px)}
.hero-price-card:hover{background:rgba(255,255,255,.14);border-color:rgba(253,230,138,.55);transform:translateY(-2px)}
.hps-label{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(226,232,240,.78)!important}
.hps-price{font-size:clamp(.94rem,1.5vw,1.08rem);font-weight:800;letter-spacing:-.02em;color:#fde68a!important;line-height:1.15}
.hero-cta-zone .btn-primary,.hero-strategie-cta{box-shadow:0 10px 28px rgba(245,197,66,.28)}
.hero-cta-zone .btn-outline{border-width:1.5px}
@media (max-width:1100px){.hero-price-strip{grid-template-columns:repeat(3,minmax(0,1fr));max-width:100%}}
@media (max-width:720px){
  .hero-price-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-top:.95rem}
  .hero-price-card{min-height:3.7rem;padding:.62rem .58rem}
  .hps-price{font-size:.92rem}
  .hero-cta-zone{gap:.65rem}
}
@media (max-width:400px){
  .hero-price-strip{grid-template-columns:1fr 1fr}
  .hero-price-card:nth-child(5){grid-column:1/-1}
}
/* Convert strip under fold */
.home-convert,.home-convert__btn{transition:transform .15s,box-shadow .15s}
.home-convert__btn:hover{transform:translateY(-2px)}