/* SEO agency microsite — layered on top of the rank & rent style.css.
   Extra token: --accent (bright highlight, only used on dark backgrounds or as a fill). */

:root { --accent: #a3e635; --accent-ink: #1a2e05; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* accent button (dark backgrounds) */
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 28px -10px var(--accent); }
.btn--accent:hover { background: #fff; border-color: #fff; color: var(--brand-ink); }
.btn .icon--sm { margin-right: -2px; }

/* ---------- hero without photo: gradient + grid ---------- */
.hero--agency {
  padding: 84px 0 92px;
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--brand-ink);
}
.hero--agency::before {
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 75%);
}
.hero--agency h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: -.032em; line-height: 1.06; }
.hl { color: var(--accent); position: relative; white-space: nowrap; }
.hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .12em; border-radius: 99px; background: var(--accent); opacity: .35; }
.hero--agency .hero__checks .icon { color: var(--accent); }
.hero--agency .card--form { border-top: 0; border-radius: 18px; scroll-margin-top: 100px; }
.hero--agency .card--form { position: relative; overflow: hidden; padding-top: 33px; }
.hero--agency .card--form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.field input::placeholder { color: #9aa6b5; }

/* ---------- SERP mock ---------- */
.serp-wrap { position: relative; padding: 22px 10px 30px; }
.serp-wrap::before { content: ""; position: absolute; inset: 0 30px; border-radius: 28px; background: linear-gradient(135deg, var(--brand-tint), color-mix(in srgb, var(--accent) 22%, #fff)); transform: rotate(-3deg); z-index: -1; }
.serp { position: relative; background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: grid; gap: 6px; }
.serp__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: .95rem; box-shadow: 0 2px 6px rgba(16,28,45,.06); margin-bottom: 8px; }
.serp__bar .icon { color: var(--ink-soft); }
.serp__item { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px; border-radius: 12px; }
.serp__item--ours { background: var(--brand-tint); box-shadow: inset 0 0 0 2px var(--brand); }
.serp__favicon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-soft); }
.serp__item--ours .serp__favicon { background: var(--brand-strong); color: var(--accent); }
.serp__url { font-size: .78rem; color: var(--ink-soft); }
.serp__title { font-weight: 700; color: var(--brand-strong); font-size: 1.02rem; line-height: 1.3; margin: 2px 0 4px !important; }
.serp__desc { font-size: .86rem; color: var(--ink-soft) !important; line-height: 1.45; margin: 0 !important; }
.serp__item--ghost div { display: grid; gap: 7px; padding-top: 3px; }
.sk { display: block; height: 8px; border-radius: 99px; background: #edf0f4; }
.sk--title { height: 11px; background: #e1e6ed; }
.float-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: .88rem; box-shadow: var(--shadow-lg); white-space: nowrap; }
.float-chip--top { top: 0; right: 0; background: var(--brand-ink); color: var(--accent); }
.float-chip--bottom { bottom: 6px; left: 0; background: #fff; color: var(--ink); }
.float-chip--bottom .icon { color: var(--ok); }

/* ---------- services ---------- */
.card--service { transition: transform .18s, box-shadow .18s; }
.card--service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card--service .card__icon { background: linear-gradient(135deg, var(--brand-tint), color-mix(in srgb, var(--accent) 25%, #fff)); }

/* ---------- comparison table ---------- */
.compare td, .compare th { text-align: center; vertical-align: middle; white-space: normal !important; }
.compare tbody th { text-align: left; font-weight: 600; }
.compare thead th:first-child { background: var(--brand-ink); }
.compare thead th:last-child { background: var(--brand-strong); }
.compare td:last-child { background: var(--brand-tint); font-weight: 700; color: var(--brand-dark); }
.mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
.mark .icon { stroke-width: 3; }
.mark--yes { background: #dcf5e7; color: var(--ok); }
.mark--no { background: #fde6e6; color: #c23b3b; }
.mark--part { background: #fdf1d8; color: #b7791f; }

/* ---------- dark section glow ---------- */
.section--glow { position: relative; overflow: hidden; background: radial-gradient(50% 80% at 100% 0%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 70%), var(--brand-ink); }
.section--glow .steps__num { background: var(--accent); color: var(--accent-ink); }

/* ---------- results dashboard ---------- */
.dash { background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.dash__head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--bg-soft); font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.dash__dots { display: inline-flex; gap: 6px; }
.dash__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6dce4; }
.dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.dash__stat { padding: 20px 18px; display: grid; gap: 2px; }
.dash__stat + .dash__stat { border-left: 1px solid var(--line); }
.dash__stat strong { font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.dash__stat:first-child strong { color: var(--ok); }
.dash__stat span { font-size: .82rem; color: var(--ink-soft); line-height: 1.35; }
.dash__chart { padding: 6px 18px 16px; }
.dash__chart svg { width: 100%; height: 170px; }
.dash__grid path { stroke: var(--line); stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.dash__months { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-soft); margin-top: 6px; }

/* ---------- areas ---------- */
.area-lead { color: var(--ink-soft); font-size: 1.06rem; margin: 14px auto 0; max-width: 40em; }
#werkgebied h2 { margin-top: 0; }
.chips--center { justify-content: center; margin-top: 28px !important; }
.chips span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .95rem; }
.chips span .icon { color: var(--brand-strong); }

/* ---------- CTA band ---------- */
.cta-band--agency { background: radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(120deg, var(--brand-strong), var(--brand-ink)); }

/* ---------- footer ---------- */
.footer-contact-list li { display: flex; align-items: center; gap: 9px; }
.footer-bottom { margin-top: 48px; }
section[id] { scroll-margin-top: 90px; }

/* ---------- mobile ---------- */
.callbar__scan { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 1000px) {
  .hero--agency { padding: 56px 0 64px; }
  .serp-wrap { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 680px) {
  .hero--agency { padding: 40px 0 48px; }
  .hl { white-space: normal; }
  .serp-wrap { padding: 26px 0 34px; }
  .serp-wrap::before { inset: 0 10px; }
  .serp { padding: 12px; }
  .dash__stats { grid-template-columns: 1fr 1fr 1fr; }
  .dash__stat { padding: 14px 10px; }
  .dash__stat strong { font-size: 1.4rem; }
  .compare th, .compare td { padding: 12px 8px; font-size: .86rem; }
  .compare thead th { font-size: .68rem; letter-spacing: .03em; }
}

/* ---------- fixes after first visual pass ---------- */
.card .form-title { font-size: 1.35rem; color: var(--ink); }
.prose .eyebrow, .section-head .eyebrow:not(.eyebrow--light), #werkgebied .eyebrow { color: var(--brand-strong); }
.prose .eyebrow + h2 { margin-top: 0 !important; }
.nav__links .btn, .nav__links .btn:hover { color: #fff; background: var(--brand-strong); }
.hero--agency {
  background:
    radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    var(--brand-ink);
}
.cta-band--agency { background: radial-gradient(50% 120% at 100% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(120deg, var(--brand-strong), var(--brand-ink)); }

.legal td { white-space: normal !important; }
.legal h2 { margin-top: 40px; }
.legal .table-wrap { margin: 16px 0; }