/* DutchRemoteSupport – gedeelde look voor alle pagina's */
/* ===== Nieuwe look: navy + oranje, serif koppen ===== */
:root { --accent: #145cff; --accent-soft: #7fa8ff; --ink: #0e1b3d; --navy: #0e1b3d; }
h1, h2, .hero-visual h3 {
  font-family: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.06; }
h1 span { color: inherit; }
.eyebrow, .eyebrow2 { text-transform: none; letter-spacing: 0; font-size: 13px; }
.eyebrow::before { background: var(--blue); animation: none; }
.btn:not(.secondary):not(.ghost) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn:not(.secondary):not(.ghost):hover { background: #0c4de5; border-color: #0c4de5; }
.hero { background: #f6f8fc; }
.hero::before, .hero::after { display: none; }

/* Chat in de hero */
.hero-visual {
  background: var(--ink);
  border-radius: 22px;
  padding: 26px 26px 22px;
  box-shadow: 0 30px 60px rgba(14, 27, 61, 0.25);
  animation: riseIn 0.8s cubic-bezier(.2,.7,.2,1) 0.2s backwards;
  gap: 22px;
}
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  font-size: 13px; color: #cfd8f0;
}
.chat-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.msg {
  max-width: 84%; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; border-radius: 16px;
  animation: msgIn 0.45s cubic-bezier(.2,.8,.2,1) backwards;
}
.msg.klant { align-self: flex-start; background: #1d2f5e; color: #e8eeff; border-bottom-left-radius: 4px; }
.msg.agent { align-self: flex-end; background: var(--accent); color: #fff; font-weight: 500; border-bottom-right-radius: 4px; }
.hero-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 16px; }
.hero-stat { background: none; padding: 0; backdrop-filter: none; animation: none; }
.hero-stat strong { font-size: 20px; }
.hero-stat span { font-size: 11px; line-height: 1.3; display: block; }

/* Besparing: vlak en rustig */
.savings-box { background: var(--ink); box-shadow: none; border-radius: 22px; }
.savings-box::before, .savings-box::after, .savings-shine { display: none; }
.savings-figure { background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,0.18); border-radius: 0; backdrop-filter: none; }
.save-num { background: none; color: var(--accent-soft); -webkit-text-fill-color: var(--accent-soft); font-family: Charter, "Iowan Old Style", Georgia, serif; }
.savings-copy h2 span { color: var(--accent-soft); }
.savings-copy h2 { font-family: Charter, "Iowan Old Style", Georgia, serif; }
.savings-copy .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 860px) {
  .savings-figure { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 22px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .msg { animation: none !important; } }


@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Iconen (vervangen emoji's) */
.ic {
  width: 1.15em; height: 1.15em;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em; flex-shrink: 0;
}
.ic-t { margin-right: 0.45em; }
.step-icon, .sector b { color: var(--blue); }
.step-icon .ic { width: 1.2em; height: 1.2em; }
.mobile-btn .ic { width: 26px; height: 26px; }
.msg .ic { display: none; }

/* Alle pagina's: koppen, hero en afsluiter in dezelfde stijl */
.page-hero h1 span { color: inherit !important; }
.page-hero h1 { letter-spacing: -0.02em; font-weight: 700; }
.page-hero .eyebrow::before { background: var(--blue); }
.cta { background: var(--ink); }
.cta h2, .cta-inner h2 { font-family: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing: -0.02em; }
.section-head h2, .why-copy h2, .compare h2, .content-section h2 { font-family: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.eyebrow, .eyebrow2, .page-hero .eyebrow, .section-head .eyebrow2 { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
.nav-cta { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 700; }
.nav-cta:hover { background: #0c4de5 !important; }

/* Hero-kaart op pagina's zonder chat (o.a. Over ons) */
.hero h1 span, .hero-copy h1 span { color: inherit !important; }
.hero-visual h3 { color: #fff !important; font-size: 24px; margin-bottom: 10px; }
.hero-visual p { color: #cfd8f0 !important; opacity: 1; }
.hero-visual .hero-stat { background: none !important; border: 0 !important; padding: 0 !important; text-align: left !important; box-shadow: none !important; }
.hero-visual .hero-stat strong { color: #fff !important; font-size: 20px; }
.hero-visual .hero-stat span { color: #cfd8f0 !important; opacity: 1; font-size: 11px; }

.savings-card { background: var(--ink) !important; }
.savings-card .big { color: #fff; }