:root {
  --hgo-ink: #173840;
  --hgo-muted: #57727a;
  --hgo-line: #d8e7ea;
  --hgo-sea: #2f8193;
  --hgo-sea-dark: #205e6c;
  --hgo-sea-deep: #164653;
  --hgo-foam: #f6fbfc;
  --hgo-sand: #f6f1e7;
}

.hgo-shell { max-width: 1040px; margin: 2rem auto; color: var(--hgo-ink); }
.hgo-shell * { box-sizing: border-box; }
.hgo-shell h1, .hgo-shell h2, .hgo-shell h3, .hgo-shell h4 { color: var(--hgo-ink); line-height: 1.15; }
.hgo-shell p { color: var(--hgo-muted); line-height: 1.65; }
.hgo-kicker { display: inline-flex; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hgo-sea-dark); margin-bottom: .65rem; }

.hgo-card, .hgo-hero, .hgo-instruction, .hgo-complete, .hgo-previous, .hgo-disclaimer {
  border: 1px solid var(--hgo-line); border-radius: 24px; background: #fff; padding: clamp(1.25rem, 3vw, 2rem);
}
.hgo-card--center { text-align: center; max-width: 720px; margin: 0 auto; }
.hgo-hero { padding: clamp(1.6rem, 4vw, 3.2rem); background: linear-gradient(145deg, #fff 0%, #f4fafb 65%, #e4f2f5 100%); overflow: hidden; position: relative; }
.hgo-hero::after { content:""; position:absolute; width:420px; height:190px; right:-110px; bottom:-100px; border-radius:50% 50% 0 0 / 70% 70% 0 0; background:rgba(47,129,147,.16); transform:rotate(-7deg); }
.hgo-hero h1 { font-size: clamp(2rem, 5vw, 4.2rem); max-width: 850px; margin: .1rem 0 1rem; letter-spacing: -.035em; }
.hgo-hero > p { max-width: 780px; font-size: 1.08rem; }
.hgo-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem; }
.hgo-meta span { background:#fff; border:1px solid var(--hgo-line); border-radius:999px; padding:.42rem .72rem; font-size:.84rem; font-weight:700; color:var(--hgo-sea-dark); }

.hgo-instruction, .hgo-complete, .hgo-previous { margin-top: 1.1rem; }
.hgo-instruction h2, .hgo-complete h2 { margin-top: 0; }
.hgo-previous { display:flex; flex-direction:column; gap:.2rem; background:#f8fbfb; }
.hgo-previous span { color:var(--hgo-muted); }

.hgo-progress-wrap { position:sticky; top:10px; z-index:20; margin:1.2rem 0; padding:.85rem 1rem; border:1px solid var(--hgo-line); border-radius:18px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); box-shadow:0 8px 25px rgba(24,64,74,.06); }
.hgo-progress-text { display:flex; justify-content:space-between; margin-bottom:.45rem; font-size:.84rem; color:var(--hgo-muted); }
.hgo-progress { height:8px; border-radius:999px; background:#eaf2f4; overflow:hidden; }
.hgo-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg, var(--hgo-sea), var(--hgo-sea-dark)); transition:width .2s ease; }

.hgo-question { margin: 0 0 1rem; border:1px solid var(--hgo-line); border-radius:22px; padding:1.25rem; background:#fff; }
.hgo-question legend { width:100%; display:flex; gap:.8rem; align-items:flex-start; font-weight:750; line-height:1.45; color:var(--hgo-ink); padding:0; margin:0 0 1rem; }
.hgo-question-number { flex:0 0 2rem; width:2rem; height:2rem; border-radius:50%; display:inline-grid; place-items:center; background:#eaf4f6; color:var(--hgo-sea-dark); font-size:.78rem; }
.hgo-options { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.55rem; }
.hgo-options label { cursor:pointer; }
.hgo-options input { position:absolute; opacity:0; pointer-events:none; }
.hgo-options span { min-height:54px; display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid #cddfe3; border-radius:14px; padding:.6rem .45rem; color:var(--hgo-muted); font-size:.84rem; font-weight:700; transition:.16s ease; background:#fbfdfd; }
.hgo-options label:hover span { border-color:#7cb3bf; transform:translateY(-1px); }
.hgo-options input:checked + span { background:var(--hgo-sea-dark); border-color:var(--hgo-sea-dark); color:#fff; box-shadow:0 7px 18px rgba(32,94,108,.17); }
.hgo-options input:focus-visible + span { outline:3px solid rgba(47,129,147,.24); outline-offset:2px; }

.hgo-submit { text-align:center; padding:1.4rem 0 .5rem; }
.hgo-submit p { max-width:700px; margin:0 auto 1rem; font-size:.9rem; }
.hgo-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; text-decoration:none !important; border:0; border-radius:999px; background:var(--hgo-sea-dark); color:#fff !important; font-weight:800; padding:.82rem 1.15rem; cursor:pointer; }
.hgo-button:hover { background:var(--hgo-sea-deep); }
.hgo-button--ghost { background:#fff; color:var(--hgo-sea-dark) !important; border:1px solid #b9d3d9; }
.hgo-button--large { padding:1rem 1.5rem; font-size:1rem; }
.hgo-button--pdf { background:#173840; }
.hgo-button--pdf:hover { background:#102b31; }
.hgo-actions { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.hgo-actions--bottom { margin:1.5rem 0; }

.hgo-ocean { position:relative; min-height:660px; margin-top:1.2rem; border-radius:30px; overflow:hidden; border:1px solid #bed9df; background:linear-gradient(180deg,#f9fcfd 0%,#eaf5f7 35%,#bbdce2 100%); display:flex; flex-direction:column; }
.hgo-ocean::before { content:""; position:absolute; width:170px; height:170px; border-radius:50%; right:7%; top:5%; background:rgba(255,255,255,.92); box-shadow:0 0 70px rgba(255,255,255,.9); }
.hgo-ocean-sky { position:relative; z-index:3; max-width:720px; padding:clamp(1.4rem,4vw,3rem); padding-bottom:clamp(1.6rem,3vw,2.4rem); }
.hgo-ocean-sky h3 { font-size:clamp(1.8rem,4vw,3rem); margin:.1rem 0 .7rem; }
.hgo-ocean-sky p { margin:0; }
.hgo-wave-stack { position:relative; z-index:2; left:auto; right:auto; bottom:auto; width:100%; height:420px; min-height:420px; margin-top:auto; display:flex; flex-direction:column; justify-content:flex-end; }
.hgo-wave-band { position:relative; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:.65rem; min-height:49px; padding:.5rem clamp(1rem,4vw,2.4rem); text-decoration:none !important; color:#fff !important; overflow:hidden; isolation:isolate; border-top:1px solid rgba(255,255,255,.28); transform:translateX(calc((100 - var(--hgo-score)) * .11%)); width:calc(100% - ((100 - var(--hgo-score)) * .08%)); }
.hgo-wave-band::before { content:""; position:absolute; inset:-18px -4% -8px; z-index:-1; border-radius:50% 48% 0 0 / 65% 68% 0 0; background:rgba(30,97,112, calc(.42 + (9 - var(--hgo-rank)) * .055)); transform:rotate(calc((var(--hgo-rank) - 4) * .45deg)); }
.hgo-wave-band:nth-child(even)::before { border-radius:44% 56% 0 0 / 72% 59% 0 0; transform:rotate(calc((4 - var(--hgo-rank)) * .5deg)); }
.hgo-wave-band.is-top { min-height:94px; padding-top:1.8rem; font-size:1.05rem; border-top:0; }
.hgo-wave-band.is-top::before {
  inset:0 -1% -1px;
  border-radius:0;
  background:rgba(22,70,83,.98);
  transform:none;
  clip-path:polygon(
    0 45%, 5% 36%, 10% 22%, 15% 11%, 20% 7%, 25% 11%, 30% 22%, 35% 37%,
    40% 48%, 45% 53%, 50% 50%, 55% 41%, 60% 28%, 65% 15%, 70% 8%, 75% 7%,
    80% 13%, 85% 25%, 90% 38%, 95% 45%, 100% 47%, 100% 100%, 0 100%
  );
}
.hgo-wave-rank { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-size:.74rem; font-weight:900; }
.hgo-wave-name { font-weight:850; text-shadow:0 1px 2px rgba(0,0,0,.12); }
.hgo-wave-score { font-weight:900; opacity:.9; }
.hgo-wave-band:hover { filter:brightness(1.05); }
.hgo-wave-band.is-selected { filter:brightness(1.1); }
.hgo-wave-band.is-selected .hgo-wave-rank { background:rgba(255,255,255,.34); }

.hgo-explain { margin-top:2rem; }
.hgo-result-details { display:block; max-width:760px; }
.hgo-result-details [hidden] { display:none !important; }
.hgo-result-card { scroll-margin-top:25px; border:1px solid var(--hgo-line); border-radius:22px; padding:clamp(1.25rem,3vw,1.7rem); background:#fff; animation:hgoDetailIn .18s ease; }
@keyframes hgoDetailIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.hgo-result-card__head { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.hgo-result-card h4 { margin:.15rem 0 .55rem; font-size:1.2rem; }
.hgo-result-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.25rem; }
.hgo-result-score { font-size:.8rem; font-weight:900; color:var(--hgo-sea-dark); }
.hgo-score-level, .hgo-result-rank { display:inline-flex; align-items:center; border-radius:999px; padding:.28rem .55rem; font-size:.72rem; font-weight:800; line-height:1; }
.hgo-score-level { background:#e7f2f4; color:var(--hgo-sea-dark); }
.hgo-score-level--high { background:#dceff1; color:#174c58; }
.hgo-score-level--mid { background:#edf4f5; color:#41656d; }
.hgo-score-level--low { background:#f2f5f5; color:#687d82; }
.hgo-result-rank { background:#f6f8f8; color:#6d7e82; }
.hgo-mini-wave { flex:0 0 95px; height:28px; border-radius:50% 50% 6px 6px / 75% 75% 6px 6px; background:linear-gradient(90deg,var(--hgo-sea-dark) 0 var(--hgo-score),#e3eef0 var(--hgo-score) 100%); transform:rotate(-4deg); }
.hgo-scale-description { margin:.35rem 0 1rem; }
.hgo-meaning { margin:1rem 0; padding:1rem 1.05rem; border-radius:16px; background:linear-gradient(145deg,#f4fafb,#edf6f7); border:1px solid #d5e8eb; }
.hgo-meaning strong { display:block; color:var(--hgo-ink); margin-bottom:.3rem; }
.hgo-meaning p { margin:0; color:#476870; line-height:1.6; }
.hgo-next { border-top:1px solid var(--hgo-line); padding-top:.8rem; display:flex; flex-direction:column; gap:.25rem; color:var(--hgo-muted); font-size:.9rem; }
.hgo-next strong { color:var(--hgo-ink); }
.hgo-disclaimer { margin-top:1.6rem; background:#fbfdfd; }
.hgo-disclaimer p { margin:.3rem 0 0; }
.hgo-notice { margin-bottom:1rem; border-radius:16px; padding:.9rem 1rem; }
.hgo-notice--error { background:#fff3f2; border:1px solid #efc9c5; color:#843b35; }

/* Dashboard: vervang de generieke Core-golven zodra er een meting is. */
.hg-wave-stage.hg-wave-stage--measured { min-height:670px; background:transparent; border:0; overflow:visible; }
.hg-wave-stage.hg-wave-stage--measured > .hg-wave,
.hg-wave-stage.hg-wave-stage--measured > .hg-wave-copy { display:none; }
.hgo-dashboard-visual { width:100%; }
.hgo-dashboard-visual .hgo-ocean { margin:0; min-height:650px; }
.hgo-dashboard-next { margin-top:1rem; border:1px solid #cfe2e6; border-radius:20px; padding:1.25rem; background:#f7fbfc; }
.hgo-dashboard-next h3 { margin:.1rem 0 .5rem; }
.hgo-dashboard-next p { margin-bottom:.8rem; }
.hgo-dashboard-next__actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.hgo-dashboard-pdf { background:#173840 !important; color:#fff !important; }

@media (max-width: 760px) {
  .hgo-shell { margin:1rem auto; }
  .hgo-options { grid-template-columns:1fr; }
  .hgo-options span { min-height:44px; justify-content:flex-start; padding:.65rem .8rem; }
  .hgo-ocean { min-height:700px; }
  .hgo-ocean-sky { padding:1.2rem; }
  .hgo-wave-stack { height:465px; min-height:465px; }
  .hgo-wave-band { grid-template-columns:28px 1fr auto; padding:.55rem .9rem; transform:none; width:100%; }
  .hgo-wave-band.is-top { min-height:96px; padding-top:1.9rem; }
  .hgo-wave-name { font-size:.87rem; }
  .hgo-wave-score { font-size:.82rem; }
  .hgo-actions .hgo-button { width:100%; }
  .hgo-result-card__head { align-items:flex-start; }
  .hgo-mini-wave { flex-basis:70px; }
  .hg-wave-stage.hg-wave-stage--measured { min-height:725px; }
  .hgo-dashboard-visual .hgo-ocean { min-height:715px; }
}

.hgo-dashboard-wave-detail {
  margin-top: 1rem;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid #cfe2e6;
  border-radius: 22px;
  background: #fff;
  scroll-margin-top: 28px;
}
.hgo-dashboard-wave-detail[hidden] { display: none !important; }
.hgo-dashboard-wave-detail__intro { margin-bottom: .85rem; }
.hgo-dashboard-wave-detail__intro .hgo-kicker { margin-bottom: .2rem; }
.hgo-dashboard-wave-detail__intro h3 { margin: 0 0 .25rem; font-size: 1.3rem; }
.hgo-dashboard-wave-detail__intro p { margin: 0; font-size: .92rem; }
.hgo-dashboard-wave-detail .hgo-result-details { max-width: none; }
.hgo-dashboard-wave-detail .hgo-result-card { border: 0; padding: .4rem 0 0; border-radius: 0; }

@media (max-width: 760px) {
  .hgo-dashboard-wave-detail { padding: 1rem; }
}

.hgo-consent{margin:0 0 20px;padding:18px;border:1px solid #c9e1e5;border-radius:14px;background:#f4f9fa;text-align:left}
.hgo-consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.hgo-consent input[type="checkbox"]{margin-top:4px;transform:scale(1.15)}
.hgo-consent p{margin:10px 0 0;font-size:.92em;color:#57727a}
.hgo-pdf-form{margin:0}