/*
 * ITdocu — vormgeving 2026 (professioneel, zakelijk).
 *
 * Bovenop site.css: daar staat de opbouw van alle onderdelen (patchpanelen,
 * netwerk, app-schermen); hier de nieuwe kleuren, letters en de hero met foto.
 * Koel en rustig in plaats van crème: donker nachtblauw, wit en de turquoise
 * van het merk als enige accent.
 */
:root {
  --grond:       #F5F7FA;
  --vlak:        #FFFFFF;
  --nacht:       #0B1620;
  --nacht-2:     #102231;
  --paneel:      #1B2A38;
  --paneel-op:   #24384A;
  --paneel-poort:#2E4457;
  --paneel-gat:  #0F1A24;
  --inkt:        #0F1B26;
  --inkt-zacht:  #3B4B59;
  --stil:        #5D6D7B;
  --flauw:       #94A3B0;
  --lijn:        #E3E8EE;
  --lijn-fijn:   #EEF2F6;
  --hover:       #F3F6F9;
  --merk:        #2FB3AA;
  --merk-diep:   #13807A;
  --merk-knop:   #179088;
  --merk-vlak:   #E7F6F5;
  --rond: 14px;
  --schaduw: 0 1px 2px rgba(15, 27, 38, .05), 0 10px 30px rgba(15, 27, 38, .07);
  --schaduw-op: 0 2px 6px rgba(15, 27, 38, .08), 0 30px 70px rgba(15, 27, 38, .22);
  --breed: 1180px;
}

body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16.5px; }
body::before { display: none; }
h1, h2, h3, .merk b { font-family: "Inter Tight", Inter, -apple-system, sans-serif; }
h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 750; letter-spacing: -.03em; font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-weight: 650; letter-spacing: -.015em; }
section { padding: 96px 0; }
.eyebrow { font-family: Inter, sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; color: var(--merk-diep); }
.lood { color: var(--inkt-zacht); }

/* ── Kopbalk: donker, over de foto ── */
.balk { background: rgba(11, 22, 32, .78); border-bottom: 1px solid rgba(255, 255, 255, .07); backdrop-filter: saturate(160%) blur(14px); }
.balk .omslag { min-height: 68px; }
.balk .merk { color: #fff; }
.balk .merk b span { opacity: .6; }
.balk nav a { color: rgba(232, 240, 246, .82); font-size: 14.5px; font-weight: 500; }
.balk nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.balk nav .knop.stil { background: var(--merk); border-color: var(--merk); color: #04201E; font-weight: 650; padding: 9px 18px; }
.balk nav .knop.stil:hover { background: #4ACCC3; border-color: #4ACCC3; color: #04201E; }

/* ── Knoppen ── */
.knop { border-radius: 10px; font-weight: 650; padding: 12px 22px; background: var(--merk-knop); border-color: var(--merk-knop);
  box-shadow: 0 8px 24px -10px rgba(23, 144, 136, .7); }
.knop:hover { background: var(--merk-diep); border-color: var(--merk-diep); }
.knop.groot { padding: 15px 26px; font-size: 16px; }
.knop.glas { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.knop.glas:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); color: #fff; }
.knop.stil { box-shadow: none; }

/* ── De hero met foto ── */
.hero-foto {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(96px, 13vw, 170px) 0 clamp(170px, 20vw, 250px);
  background:
    linear-gradient(90deg, rgba(8, 17, 26, .96) 0%, rgba(8, 17, 26, .86) 38%, rgba(8, 17, 26, .45) 70%, rgba(8, 17, 26, .25) 100%),
    linear-gradient(0deg, rgba(8, 17, 26, .9) 0%, rgba(8, 17, 26, 0) 40%),
    url("/assets/beeld/it-afdeling.jpg") center 35% / cover no-repeat,
    var(--nacht);
}
@media (max-width: 760px) {
  .hero-foto { background:
    linear-gradient(180deg, rgba(8, 17, 26, .7) 0%, rgba(8, 17, 26, .92) 70%),
    url("/assets/beeld/it-afdeling-klein.jpg") center / cover no-repeat, var(--nacht); }
}
.hero-foto .tekst { max-width: 720px; }
.pil { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; font-weight: 500; color: #E6F4F3; backdrop-filter: blur(6px); }
.pil i { width: 8px; height: 8px; border-radius: 50%; background: var(--merk); box-shadow: 0 0 0 4px rgba(47, 179, 170, .22); }
.hero-foto h1 { margin-top: 22px; font-size: clamp(38px, 5.6vw, 70px); line-height: 1.02; color: #fff; }
.hero-foto h1 span { color: var(--merk); }
.hero-foto .lood { color: rgba(226, 236, 243, .86); font-size: clamp(17px, 1.7vw, 19.5px); max-width: 560px; margin-top: 22px; }
.hero-foto .knoppen { margin-top: 34px; }
.feiten { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; color: rgba(226, 236, 243, .82); }
.feiten li { display: flex; align-items: center; gap: 8px; }
.feiten li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: rgba(47, 179, 170, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FB3AA' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Het productscherm valt half over de foto */
.productshot { padding: 0 0 20px; margin-top: clamp(-200px, -16vw, -130px); position: relative; z-index: 2; }
.productshot .toonvak {
  margin: 0; border-radius: 18px; padding: 30px 30px 18px;
  background: linear-gradient(180deg, #1C2C3B 0%, #172533 100%);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--schaduw-op);
}

/* ── Koppelingen-balk ── */
.logobalk { padding: 46px 0 34px; }
.logobalk p { margin: 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stil); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 22px; }
.logos span { font-family: "Inter Tight", Inter, sans-serif; font-size: 19px; font-weight: 750; letter-spacing: -.02em; color: #9AA8B4; white-space: nowrap; transition: color .15s; }
.logos span:hover { color: var(--inkt); }

/* ── Banden ── */
section.donker {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(47, 179, 170, .16), transparent 60%),
    linear-gradient(180deg, var(--nacht-2) 0%, var(--nacht) 100%);
}
section.getint { background: linear-gradient(180deg, #EEF8F7 0%, #F7FBFB 100%); }
section.wit { background: var(--vlak); border-top: 1px solid var(--lijn-fijn); border-bottom: 1px solid var(--lijn-fijn); }

/* ── Voet ── */
footer { background: var(--nacht) !important; }