/* SmartIsolatie — Professional polish layer
   Refined typography, calmer palette, more whitespace, subtler shadows. */

:root{
  --si-bg:#fbfcfd;
  --si-surface:#ffffff;
  --si-surface-2:#f4f7fb;
  --si-text:#0b1a2b;
  --si-muted:#5b6b7e;
  --si-line:#e6ecf3;
  --si-line-strong:#d3dde8;
  --si-primary:#0b3a82;
  --si-primary-2:#1758c0;
  --si-accent:#0e7a3a;
  --si-accent-2:#0b6230;
  --si-shadow-sm:0 1px 2px rgba(11,26,43,.04), 0 1px 1px rgba(11,26,43,.03);
  --si-shadow:0 6px 20px rgba(11,26,43,.06), 0 2px 6px rgba(11,26,43,.04);
  --si-shadow-lg:0 24px 60px rgba(11,26,43,.10);
  --si-radius:16px;
  --si-radius-sm:10px;
}

html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  background: var(--si-bg) !important;
  color: var(--si-text) !important;
  font-feature-settings: "cv11","ss01","ss03";
  letter-spacing: -0.005em;
}

/* Typography */
h1,h2,h3,h4,.brand-name,.section-title{
  font-family: "Manrope","Inter",sans-serif !important;
  letter-spacing: -0.022em !important;
  color: var(--si-text) !important;
}
/* Always white text on dark hero / dark bands */
.hero, .hero *, .band, .band *, .si-trust-band, .si-trust-band *{ color:#fff !important; }
.hero .eyebrow, .band .band-item span, .si-trust-band .si-trust-item span{ color: rgba(255,255,255,.85) !important; }
.hero p{ color: rgba(255,255,255,.88) !important; }
.hero .brand-name span[style]{ color:#fff !important; }
/* Make the brand text in footer stay light too */
.footer .brand-name, .footer .brand-name *{ color:#fff !important; }
h1{font-weight:800 !important}
h2,h3{font-weight:700 !important}
.lead{ color: var(--si-muted) !important; font-size:17px !important; }
.kicker{
  color: var(--si-primary) !important;
  letter-spacing:.14em !important;
  font-size:12px !important;
  font-weight:700 !important;
}

/* Container slightly tighter */
.container{ width: min(1200px, calc(100% - 40px)) !important; }

/* Header — refined */
.header{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--si-line) !important;
  box-shadow: none !important;
}
.nav{ min-height:74px !important; }
.brand-name{ font-size:22px !important; font-weight:800 !important; }
.brand-name .thin{ font-weight:500 !important; color:var(--si-muted) !important; }
.brand-name span[style]{ color: var(--si-text) !important; }
.logo{
  width:38px !important; height:38px !important;
  border-radius:10px !important;
  background: linear-gradient(135deg, var(--si-primary), var(--si-primary-2)) !important;
  box-shadow: 0 4px 12px rgba(11,58,130,.25) !important;
  font-size:14px !important;
  letter-spacing:.02em;
}
.nav-links{ gap:6px !important; }
.nav-links a{
  font-weight:500 !important;
  font-size:14.5px !important;
  color:#3a4a5e !important;
  padding:8px 12px !important;
  border-radius:8px !important;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{ background: var(--si-surface-2) !important; color: var(--si-text) !important; }
.nav-cta{
  background: var(--si-text) !important;
  color:#fff !important;
  font-weight:600 !important;
  padding:10px 18px !important;
  min-height:auto !important;
  border-radius:10px !important;
  box-shadow: none !important;
  margin-left:8px;
  transition: transform .15s ease, background .15s ease;
}
.nav-cta:hover{ background: var(--si-primary) !important; }

/* Hero — calmer, more editorial */
.hero{
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(23,88,192,.35), transparent 60%),
    radial-gradient(900px 400px at 0% 100%, rgba(14,122,58,.18), transparent 60%),
    linear-gradient(180deg, #08172e 0%, #0b2a5c 100%) !important;
  padding: 88px 0 96px !important;
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.hero h1{
  font-size: clamp(36px, 5vw, 58px) !important;
  line-height: 1.05 !important;
  letter-spacing:-0.03em !important;
  max-width: 880px;
  margin: 18px 0 18px !important;
}
.hero p{
  font-size: 18px !important;
  max-width: 660px !important;
  color: rgba(255,255,255,.78) !important;
  line-height:1.6 !important;
}
.eyebrow{
  background: rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  font-weight:600 !important;
  font-size:12.5px !important;
  letter-spacing:.02em;
  padding:7px 12px !important;
  color: rgba(255,255,255,.9);
}
.hero-actions{ margin-top: 28px !important; gap:10px !important; }

/* Sections rhythm */
.section{ padding: 72px 0 !important; }

/* Cards */
.card, .form-card, .offer-summary, .product-card{
  background: var(--si-surface) !important;
  border: 1px solid var(--si-line) !important;
  border-radius: var(--si-radius) !important;
  box-shadow: var(--si-shadow-sm) !important;
  padding: 28px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.product-card:hover{
  border-color: var(--si-line-strong) !important;
  box-shadow: var(--si-shadow) !important;
  transform: translateY(-2px);
}
.card h2, .form-card h2, .offer-summary h2, .offer-summary h3{
  font-size: 22px !important;
  margin-bottom: 8px !important;
}
.card h3, .product-card h3{ font-size: 19px !important; font-weight:700 !important; margin: 4px 0 8px !important; }
.section-title{
  font-size: clamp(28px, 3.4vw, 40px) !important;
  margin: 6px 0 12px !important;
  letter-spacing:-0.025em !important;
}

/* Card icons — flatter and on-brand */
.card-icon{
  width:44px !important; height:44px !important;
  border-radius:10px !important;
  background: var(--si-surface-2) !important;
  color: var(--si-primary) !important;
  font-size:15px !important;
  font-weight:700 !important;
  box-shadow: none !important;
  border:1px solid var(--si-line) !important;
}

/* Buttons */
.btn, .small-btn{
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  min-height: 44px !important;
  padding: 11px 18px !important;
  letter-spacing:-0.005em;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary, .small-primary{
  background: var(--si-accent) !important;
  color:#fff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 10px rgba(14,122,58,.18) !important;
}
.btn-primary:hover{ background: var(--si-accent-2) !important; }
.btn-secondary, .small-secondary{
  background:#fff !important;
  color: var(--si-text) !important;
  border:1px solid var(--si-line-strong) !important;
  box-shadow: none !important;
}
.btn-secondary:hover{ background: var(--si-surface-2) !important; }

/* Notice */
.notice{
  background: var(--si-surface-2) !important;
  border:1px solid var(--si-line) !important;
  color:#324860 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size:14.5px;
}

/* Trust band */
.band, .si-trust-band{
  background: linear-gradient(135deg, #0b1a2b 0%, #11305f 100%) !important;
  border-radius: 20px !important;
  padding: 36px !important;
  box-shadow: var(--si-shadow-lg) !important;
}
.band strong, .si-trust-band strong{ letter-spacing:-0.02em; }
.band-item, .si-trust-item{
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
.band-item strong{ font-size:15px !important; color:#fff !important; }
.band-item span{ color: rgba(255,255,255,.7); font-size:14px; }

/* Forms */
label{ font-weight:600 !important; font-size:14px !important; color:#33475b !important; margin-bottom:6px !important; }
input, select, textarea{
  border-radius: 10px !important;
  border:1px solid var(--si-line-strong) !important;
  padding: 12px 14px !important;
  font-size:15px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--si-primary-2) !important;
  box-shadow: 0 0 0 4px rgba(23,88,192,.12) !important;
}

/* Tables */
th{ background: var(--si-surface-2) !important; color: var(--si-text) !important; font-weight:600 !important; font-size:13.5px !important; text-transform:uppercase; letter-spacing:.04em; }
th, td{ padding: 14px 16px !important; }
.table-wrap{ border-radius: 12px !important; border-color: var(--si-line) !important; }

/* Cart */
.cart-item{
  background:#fff !important;
  border:1px solid var(--si-line) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Footer */
.footer{
  background:#0b1a2b !important;
  border-top: none !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 80px !important;
}
.footer h4{ color:#fff !important; font-weight:700 !important; font-size:14px !important; text-transform:uppercase; letter-spacing:.08em; }
.footer a{ color: rgba(255,255,255,.65) !important; font-size:14px !important; margin:6px 0 !important; transition: color .15s ease; }
.footer a:hover{ color:#fff !important; }
.footer-grid{ padding: 56px 0 36px !important; }
.disclaimer-box{
  background: rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 12px !important;
  margin-top: 0 !important;
}

/* Cookie banner refinement */
.cookie-banner{
  background:#0b1a2b !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px !important;
  padding: 16px 18px !important;
}
.cookie-accept{ background: var(--si-accent) !important; border-radius:10px !important; }
.cookie-close{ background: rgba(255,255,255,.10) !important; border-radius:10px !important; }

/* Misc cleanup */
.topbar{ display:none !important; }
*:focus-visible{ outline: 2px solid var(--si-primary-2); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 720px){
  .hero{ padding: 64px 0 72px !important; }
  .section{ padding: 56px 0 !important; }
  .band, .si-trust-band{ padding: 24px !important; }
}

/* ============ Rolling ticker bar (site-wide) ============ */
#si-ticker{
  position:relative;z-index:200;
  background:linear-gradient(90deg,#06205a 0%,#0b3d91 50%,#1565d8 100%);
  color:#fff;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.01em;border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 10px rgba(6,32,90,.18);
}
#si-ticker .si-tk-track{overflow:hidden;white-space:nowrap;padding:9px 0;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
#si-ticker .si-tk-run{display:inline-block;white-space:nowrap;padding-left:100%;animation:si-tk-scroll 38s linear infinite;will-change:transform}
#si-ticker .si-tk-run:hover{animation-play-state:paused}
#si-ticker .si-tk-sep{display:inline-block;margin:0 22px;color:#a3ff3d;opacity:.85;font-size:8px;vertical-align:middle}
#si-ticker strong{color:#a3ff3d;font-weight:800}
@keyframes si-tk-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (max-width:640px){
  #si-ticker{font-size:12px}
  #si-ticker .si-tk-run{animation-duration:28s}
  #si-ticker .si-tk-sep{margin:0 14px}
}
@media (prefers-reduced-motion: reduce){
  #si-ticker .si-tk-run{animation-duration:120s}
}

/* ============ Merken-disclaimer (auto-injected) ============ */
#si-brand-disclaimer{
  background:#f4f7fb;border-top:1px solid #dbe5ef;
  padding:18px 0;margin-top:0;
  font-family:Inter,system-ui,sans-serif;
}
#si-brand-disclaimer p{
  margin:0;color:#56657a;font-size:12.5px;line-height:1.6;
  max-width:920px;
}
#si-brand-disclaimer strong{color:#0a2f6e}
#si-brand-disclaimer sup{font-size:9px;vertical-align:super;color:#6b7a90}