/* =====================================================================
   H.A.C. thema 2026
   Eén gedeeld bestand dat over de stijl van elke pagina heen ligt.
   Drie ideeën:
   1. lichter: van bijna-zwart naar diep oceaanblauw
   2. zachter: afgeronde knoppen, kaarten en beelden, met vaste maten
   3. ritme: informatieve secties licht ("licht"), sfeer en verhaal donker
   ===================================================================== */

:root {
  /* donkere basis, een paar tinten lichter en blauwer dan voorheen */
  --sea:     #12233A;
  --night:   #162B46;
  --night-2: #1C3352;
  --paper:   #F5F7FA;
  --fog:     #A4B3C7;
  --line:    rgba(214, 228, 245, 0.16);
  --amber:   #2BA6DC;
  --amber-dim: rgba(43, 166, 220, 0.55);
  --cyan:    #3FB6E4;

  /* lichte secties */
  --licht:      #EEF3F8;
  --licht-kaart:#FFFFFF;
  --inkt:       #10233B;
  --inkt-2:     #3E5470;
  --inkt-acc:   #136FA0;   /* accent voor kleine tekst op licht: 4,9:1 */
  --lijn-licht: rgba(16, 35, 59, 0.10);

  /* afronding: drie vaste maten, overal dezelfde */
  --r-knop:  999px;
  --r-kaart: 18px;
  --r-klein: 12px;

  --schaduw: 0 1px 2px rgba(16,35,59,0.06), 0 8px 24px rgba(16,35,59,0.08);
}

/* ---------- achtergrond en kaart ---------- */
#earth { background: radial-gradient(130% 100% at 50% 42%, #1B3150 0%, #13253D 55%, #0D1A2C 100%); }
#earthTint { background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 58%, rgba(8,18,32,0.40) 100%); }
.hero-scrim { background: linear-gradient(100deg, rgba(14,28,47,0.82) 0%, rgba(14,28,47,0.55) 38%, rgba(14,28,47,0.04) 70%); }

/* ---------- navigatie ---------- */
nav { background: rgba(18, 35, 58, 0.84); }
.mobnav { background: rgba(18, 35, 58, 0.98); }
.lang a { border-radius: 4px; }

/* ---------- knoppen: allemaal pilvormig ---------- */
.nav-btn, .nav-r a.nav-btn, .hero-cta, .v-cta-btn, .c-send, .btn, .p-go, .ft a.ft-cta,
.mobnav-lang a, .proof span, .use, .gal-arrow {
  border-radius: var(--r-knop);
}
.hero-cta, .btn { padding-left: 32px; padding-right: 32px; }
.gal-arrow { width: 40px; height: 40px; }

/* ---------- kaarten en panelen ---------- */
.v-card { background: rgba(22, 43, 70, 0.84); border-radius: var(--r-kaart); }
.v-card.v-card-video { border-radius: var(--r-kaart); }
.v-video-wrap { background: linear-gradient(135deg, #1E3756 0%, #13253D 100%); }
.p-badge, .pvideo-badge, .pcard-new { border-radius: 0 0 var(--r-klein) 0; }

.bcard { border-radius: var(--r-kaart); }
.bc-link:focus-visible { border-radius: var(--r-kaart); }

.svc-grid { border-radius: var(--r-kaart); overflow: hidden; }
.assure { border-radius: var(--r-kaart); overflow: hidden; }
.facts { }
.catrow { border-radius: var(--r-klein); padding-left: 14px; padding-right: 14px; }
.catrow:hover { background: rgba(43,166,220,0.08); }

.pvideo, .bimg, .gal-track, .feat, .pcard, .others a, .steps, .shot, .split-media {
  border-radius: var(--r-kaart);
  overflow: hidden;
}
.blogo img { border-radius: var(--r-kaart); }
.bimg::after { background: linear-gradient(to top, rgba(18,35,58,0.85), rgba(18,35,58,0) 55%); }
.shot-cap { background: linear-gradient(transparent, rgba(18,35,58,0.92)); }
.pcard-img { background: #1E3756; }
.note { border-left: none; padding: 22px 26px; background: rgba(43,166,220,0.08); border-radius: var(--r-kaart); }
.drop { border-left: none; padding: 4px 0 4px 26px; position: relative; }
.drop::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--amber); }

/* formulier */
.c-form { border-top: none; }
.c-field { border: 1px solid var(--line); border-radius: var(--r-klein); padding: 16px 18px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04); }
.c-field:focus { border-color: var(--amber); background: rgba(255,255,255,0.07); }
.c-send { margin-top: 18px; }

/* footer */
footer.ft { background: #0F1E33; }

/* =====================================================================
   LICHTE SECTIES — voor informatie en producten
   ===================================================================== */
.licht { background: var(--licht) !important; color: var(--inkt); border-color: var(--lijn-licht) !important; }
.licht h2, .licht h3, .licht h4 { color: var(--inkt); }
.licht h2 em { color: #1B87BF; }
.licht .kicker, .licht .grp-h { color: var(--inkt-acc); }
.licht .kicker::before, .licht .grp-h::before { background: var(--inkt-acc); }
.licht p, .licht .assort-intro, .licht .svc p, .licht .a-cell p, .licht .step p, .licht .blk p { color: var(--inkt-2); }

/* diensten en borging */
.licht .svc-grid { background: transparent; border: none; gap: 14px; overflow: visible; }
.licht .svc { background: var(--licht-kaart); border-radius: var(--r-kaart); box-shadow: var(--schaduw); }
.licht .svc-n, .licht .a-glyph { color: var(--inkt-acc); }
.licht .assure { background: transparent; border: none; gap: 14px; overflow: visible; }
.licht .a-cell { background: var(--licht-kaart); border: none !important; border-radius: var(--r-kaart); box-shadow: var(--schaduw); }

/* productkaarten op merkpagina's */
.licht .pcard { background: var(--licht-kaart); border: none; box-shadow: var(--schaduw); }
.licht .pcard h3 { color: var(--inkt); }
.licht .pcard li { color: var(--inkt-2); }
.licht .pcard li::before { background: var(--inkt-acc); }
.licht .pcard-art { color: #6B7F97; }
.licht .pcard-img { background: #DCE6F0; }
.licht .pcard.more { background: rgba(19,111,160,0.06); border: 1px dashed rgba(19,111,160,0.45); box-shadow: none; }
.licht .pcard.more b { color: var(--inkt); }
.licht .pcard.more span { color: var(--inkt-2); }
.licht .pcard.more i { color: var(--inkt-acc); }
.licht .feat { background: var(--licht-kaart); border: none; box-shadow: var(--schaduw); }
.licht .feat b { color: var(--inkt); }
.licht .feat span { color: var(--inkt-2); }
.licht .feat i { color: var(--inkt-acc); }

/* stappen op de waterbezempagina */
.licht .steps { background: transparent; border: none; gap: 14px; overflow: visible; }
.licht .step { background: var(--licht-kaart); border-radius: var(--r-kaart); box-shadow: var(--schaduw); }
.licht .step-n { color: var(--inkt-acc); }
.licht .use { color: var(--inkt-2); border-color: var(--lijn-licht); background: var(--licht-kaart); }
.licht .btn-ghost { color: var(--inkt-acc); border-color: var(--inkt-acc); }
.licht .btn-ghost:hover { background: var(--inkt-acc); color: #FFFFFF; }

/* =====================================================================
   AANKOMST — het contactblok wordt de haven
   Het blok is doorzichtig en staat links; rechts blijft de kaart met
   Nederland en het aankomende schip zichtbaar.
   ===================================================================== */
.pg.contact.v-anker { background: transparent; border: none; min-height: 100vh;
  display: flex; align-items: center; }
.v-anker .contact-grid { display: block; width: 100%; max-width: 560px;
  background: rgba(18, 35, 58, 0.80); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 24px; padding: 44px 44px 40px; }
.v-anker .contact-grid > div:first-child p { margin: 18px 0 22px; }
.v-anker .big-mail { font-size: clamp(18px, 2vw, 22px); }
.v-anker .c-form { margin-top: 30px; }
@media (max-width: 860px) {
  .pg.contact.v-anker { min-height: auto; padding-top: 90px; padding-bottom: 90px; }
  .v-anker .contact-grid { padding: 30px 22px 26px; background: rgba(18, 35, 58, 0.86); }
}

/* de slogan staat al in het merklogo zelf (Shine, QLT, SPR, Qlean, CHÆRME, PWR),
   dus de losse tekstregel eronder is dubbel */
.blogo + .tagline { display: none; }