/* AI Vindbaarheidsscan: landingspagina (/ai-vindbaarheidsscan) en rapport (/ai-vindbaarheidsscan/rapport/...).
   Bovenop style.css. Mobiel eerst. */

/* ---------- Hero en startformulier ---------- */
.as-hero { padding-bottom: 3rem; }
.as-hero h1 { max-width: 15ch; }
.as-hero .lead { max-width: 58ch; }
.as-hero__vraag { font-family: var(--ff-display); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); line-height: 1.3; color: var(--c-roze); max-width: 34ch; }

.as-start { margin-top: 2rem; max-width: 640px; }
.as-start__label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.5rem; }
.as-start__rij { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .as-start__rij { grid-template-columns: 1fr auto; } }
.as-start input,
.as-veld input {
  width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.95rem 1.3rem;
}
.as-start input:focus,
.as-veld input:focus { outline: 2px solid var(--c-goud); outline-offset: 2px; border-color: var(--c-goud); }
.as-start .btn { justify-content: center; white-space: normal; }
.as-start__noot { margin-top: 0.9rem; font-size: 0.85rem; color: var(--text-mute); }
.as-start__fout, .as-scan__fout { margin-top: 0.75rem; font-size: 0.92rem; color: #9b3d2e; }
.as-start__fout[hidden], .as-scan__fout[hidden] { display: none; }

/* ---------- Scan-kaart ---------- */
.as-scan-sectie { padding-top: 0; }
.as-scan-sectie[hidden] { display: none; }
.as-scan {
  max-width: 760px; background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg); position: relative; z-index: 2;
}
.as-scan__balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.as-scan__voortgang { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-goud); }
.as-scan__site { font: inherit; font-size: 0.82rem; color: var(--text-mute); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.as-scan__site strong { color: var(--text-soft); font-weight: 500; }
.as-scan__site span { border-bottom: 1px solid currentColor; margin-left: 0.3rem; }
.as-scan__track { height: 6px; border-radius: 999px; background: var(--c-ivoor-diep); overflow: hidden; margin-bottom: 1.6rem; }
.as-scan__fill { height: 100%; width: 0; background: var(--c-goud); border-radius: inherit; transition: width var(--t-fast); }

.as-scan__kop { font-family: var(--ff-display); font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem); font-weight: 600; line-height: 1.15; outline: none; }
.as-scan__opties { display: grid; gap: 0.7rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .as-scan__opties { grid-template-columns: repeat(2, 1fr); } }
.as-optie {
  font: inherit; text-align: left; display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.4rem;
  padding: 0.95rem 1.15rem; background: var(--c-ivoor); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.as-optie::before { content: ''; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--c-grijs); background: var(--c-card); }
.as-optie:hover { border-color: var(--c-goud); }
.as-optie:focus-visible { outline: 2px solid var(--c-goud); outline-offset: 3px; }
.as-optie[aria-checked="true"] { background: #fbf3e4; border-color: var(--c-goud); box-shadow: inset 0 0 0 1px var(--c-goud); }
.as-optie[aria-checked="true"]::before { border-color: var(--c-goud); background: radial-gradient(circle, var(--c-goud) 45%, var(--c-card) 50%); }

.as-scan__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.as-scan__nav[hidden] { display: none; }
[data-volgende][hidden] { display: none; } /* .btn zet display, dus hidden expliciet afdwingen */
.as-scan__vorige { font: inherit; font-size: 0.9rem; color: var(--text-soft); background: none; border: 0; padding: 0.4rem 0; cursor: pointer; }
.as-scan__vorige:disabled { visibility: hidden; }
.as-scan__nav .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.as-contact[hidden], .as-laden[hidden] { display: none; }
.as-contact__intro { margin-top: 0.75rem; color: var(--text-soft); max-width: 56ch; }
.as-veld { display: block; margin-top: 1.1rem; }
.as-veld span { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; }
.as-veld input { border-radius: var(--radius-md); }
.as-vink { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--text-soft); cursor: pointer; }
.as-vink input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--c-donker); }
.as-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.as-contact__privacy { margin-top: 1rem; font-size: 0.82rem; color: var(--text-mute); }
.as-contact__privacy a { border-bottom: 1px solid currentColor; }
.as-contact__knop { margin-top: 1.4rem; width: 100%; justify-content: center; white-space: normal; }
@media (min-width: 640px) { .as-contact__knop { width: auto; } }

.as-laden { text-align: center; padding: 1rem 0; }
.as-laden__ring { width: 56px; height: 56px; margin: 0 auto 1.2rem; border-radius: 50%; border: 4px solid var(--c-ivoor-diep); border-top-color: var(--c-goud); animation: as-draai 0.9s linear infinite; }
.as-laden__stap { margin-top: 0.8rem; color: var(--text-soft); }
.as-laden__noot { margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-mute); }
@keyframes as-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .as-laden__ring { animation-duration: 3s; } }

/* ---------- Overige blokken landingspagina ---------- */
.as-eerlijk { max-width: 680px; }
.as-eerlijk p { color: var(--text-soft); margin-bottom: 1.2rem; }
#over .about__visual { max-width: 420px; }
#over .about__text a { color: var(--c-roze); border-bottom: 1px solid currentColor; }

/* ---------- Rapport ---------- */
.rp-hero { padding-bottom: 3rem; }
.rp-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); overflow-wrap: anywhere; }
.rp-score { display: grid; gap: 1.5rem; align-items: center; margin-top: 2rem; background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: var(--shadow-md); max-width: 860px; }
@media (min-width: 720px) { .rp-score { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.rp-ring { position: relative; width: 168px; height: 168px; margin: 0 auto; }
.rp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-ring__getal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 3rem; font-weight: 600; line-height: 1; }
.rp-ring__getal small { font-family: var(--ff-body); font-size: 0.8rem; font-weight: 400; color: var(--text-mute); margin-top: 0.3rem; }
.rp-score__naam { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-goud); }
.rp-score__oordeel { font-family: var(--ff-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; line-height: 1.2; margin-top: 0.4rem; }
.rp-score__tekst { color: var(--text-soft); margin-top: 0.6rem; }
.rp-balken { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.rp-balk__kop { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.rp-balk__kop strong { font-weight: 500; }
.rp-balk__track { height: 8px; border-radius: 999px; background: var(--c-ivoor-diep); overflow: hidden; margin-top: 0.35rem; }
.rp-balk__fill { height: 100%; border-radius: inherit; background: var(--c-goud); }
.rp-balk__fill--laag { background: var(--c-roze); }

.rp-kansen { display: grid; gap: 1rem; counter-reset: kans; max-width: 860px; }
.rp-kans { background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.3rem 1.4rem 1.3rem 4rem; position: relative; }
.rp-kans::before { counter-increment: kans; content: counter(kans); position: absolute; left: 1.2rem; top: 1.15rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--c-donker); color: var(--c-ivoor); display: flex; align-items: center; justify-content: center; font-family: var(--ff-display); font-size: 1.1rem; font-weight: 600; }
.rp-kans h3 { font-family: var(--ff-display); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.rp-kans p { color: var(--text-soft); font-size: 0.95rem; margin-top: 0.5rem; }
.rp-kans__label { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-sage); border: 1px solid currentColor; border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 0.5rem; }
.rp-kans--snel { border-color: var(--c-goud); box-shadow: inset 0 0 0 1px var(--c-goud); }

.rp-cta { background: var(--c-donker); color: var(--c-ivoor); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.75rem); max-width: 860px; }
.rp-cta h2 { color: var(--c-ivoor); font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); }
.rp-cta p { color: rgba(250, 246, 240, 0.78); margin-top: 0.8rem; max-width: 56ch; }
.rp-cta .btn { margin-top: 1.4rem; white-space: normal; }
.rp-cta__zacht { display: inline-block; margin-top: 1rem; font-size: 0.9rem; color: var(--c-goud); border-bottom: 1px solid currentColor; }
.rp-cta--licht { background: var(--c-card); color: var(--text); border: 1px solid var(--border); }
.rp-cta--licht h2 { color: var(--text); }
.rp-cta--licht p { color: var(--text-soft); }
.rp-cta--licht .rp-cta__zacht { color: var(--c-roze); }
.rp-links { display: grid; gap: 0.75rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .rp-links { grid-template-columns: repeat(2, 1fr); } }
.rp-link { display: block; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--c-ivoor); transition: border-color var(--t-fast); }
.rp-link:hover { border-color: var(--c-goud); }
.rp-link strong { display: block; font-family: var(--ff-display); font-size: 1.2rem; font-weight: 600; }
.rp-link span { font-size: 0.85rem; color: var(--text-mute); }

.rp-onderdeel { background: var(--c-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); max-width: 860px; }
.rp-onderdeel + .rp-onderdeel { margin-top: 1.25rem; }
.rp-onderdeel__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.rp-onderdeel__kop h3 { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600; }
.rp-onderdeel__score { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 600; color: var(--c-goud); }
.rp-onderdeel__intro { color: var(--text-mute); font-size: 0.92rem; margin-top: 0.2rem; }
.rp-controles { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.2rem; }
.rp-controle { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.rp-controle__icoon { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-top: 0.1rem; }
.rp-controle--ok .rp-controle__icoon { background: #e6efe3; color: #4f6b4a; }
.rp-controle--fout .rp-controle__icoon { background: #f6e3df; color: #9b3d2e; }
.rp-controle--info .rp-controle__icoon { background: var(--c-ivoor-diep); color: var(--text-soft); font-style: italic; font-family: Georgia, serif; }
.rp-controle strong { font-weight: 500; }
.rp-controle p { font-size: 0.9rem; color: var(--text-soft); margin-top: 0.2rem; }

.rp-disclaimer { max-width: 760px; font-size: 0.9rem; color: var(--text-soft); background: var(--c-ivoor-diep); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; }
.rp-disclaimer strong { color: var(--text); }
.rp-onbereikbaar { max-width: 760px; background: #fbf3e4; border: 1px solid var(--c-goud); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; margin-top: 2rem; }
.rp-onbereikbaar p + p { margin-top: 0.6rem; }
.rp-onbereikbaar a { border-bottom: 1px solid currentColor; }