/*
 * Cloudsys — huisstijl 2026: donker navy, lichtblauwe accenten, bokeh-licht.
 *
 * Bovenop style.css en hub.css: daar staat de opbouw, hier de kleuren en de
 * nieuwe hero. Het beheerscherm laadt dit bestand niet.
 */
:root {
  --bg: #08122b;
  --bg-2: #0c1a3a;
  --vlak: rgba(255, 255, 255, 0.035);
  --vlak-2: rgba(255, 255, 255, 0.06);
  --rand: rgba(140, 170, 255, 0.18);
  --rand-sterk: rgba(140, 170, 255, 0.32);
  --wit: #ffffff;
  --tekst: rgba(226, 234, 255, 0.86);
  --zacht: rgba(200, 213, 245, 0.66);
  --accent: #79a6ff;
  --blauw: #2563eb;
  --blauw-2: #2f6bff;
  --groen: #34d399;

  /* De oude namen wijzen nu naar de nieuwe kleuren, zodat alles meegaat. */
  --navy: #ffffff;
  --navy-dark: var(--bg);
  --blue: var(--blauw);
  --blue-light: rgba(47, 107, 255, 0.16);
  --gray-50: var(--vlak);
  --gray-200: var(--rand);
  --gray-500: var(--zacht);
}

body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(47, 107, 255, 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(47, 107, 255, 0.10), transparent 60%),
    var(--bg);
  color: var(--tekst);
}

h1, h2, h3, .logo {
  font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
h2 { color: var(--wit); font-weight: 800; letter-spacing: -0.035em; }

/* ── Kop ── */
.site-header {
  background: rgba(8, 18, 43, 0.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.site-header.gescrold { border-bottom-color: var(--rand); background: rgba(8, 18, 43, 0.9); }
.site-header .container { padding-top: 1.35rem; padding-bottom: 1.35rem; }
.logo { font-size: 2rem; letter-spacing: -0.045em; }
.logo .cloud { color: var(--wit); }
.logo .sys { color: var(--accent); }
.nav-desktop { gap: clamp(1rem, 2vw, 2.1rem); }
.nav-desktop a { color: rgba(236, 241, 255, 0.92); font-size: 0.95rem; font-weight: 500; }
.nav-desktop a:hover, .nav-desktop a.active { color: var(--wit); }
.nav-desktop a.active::after { background: var(--accent); bottom: -6px; }
.site-header .header-cta { background: var(--wit); color: #0a1633; padding: 0.85rem 1.6rem; font-size: 0.95rem; }
.site-header .header-cta:hover { background: #dbe6ff; color: #0a1633; }
.menu-toggle { color: var(--wit); }
.nav-mobile { border-top-color: var(--rand); background: rgba(8, 18, 43, 0.97); }
.nav-mobile a { color: var(--tekst); }
.nav-mobile a.active { color: var(--accent); }

/* ── Knoppen ── */
.btn { font-size: 0.95rem; padding: 0.95rem 1.9rem; }
.btn-primary { background: var(--blauw); color: #fff; box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.75); }
.btn-primary:hover { background: var(--blauw-2); color: #fff; }
.btn-secondary { background: transparent; color: var(--wit); border-color: rgba(255, 255, 255, 0.28); }
.btn-secondary:hover { border-color: var(--wit); color: var(--wit); background: rgba(255, 255, 255, 0.05); }
.btn-on-navy:hover { background: var(--wit); color: #0a1633; }
.btn-link { color: var(--accent); }
.btn-link:hover { color: var(--wit); }

/* ── Algemeen ── */
.bg-gray { background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(140, 170, 255, 0.08); border-bottom: 1px solid rgba(140, 170, 255, 0.08); }
.bg-navy { background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #3b82f6); }
.eyebrow { color: var(--accent); }
.muted, .lead { color: var(--zacht); }

.card { background: var(--vlak); border-color: var(--rand); color: var(--tekst); }
.card-gray { background: var(--vlak); }
.card h3 { color: var(--wit); }
.card p { color: var(--zacht); }
.card-hover:hover { border-color: var(--rand-sterk); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); background: var(--vlak-2); }
.icon-box-blue { background: rgba(47, 107, 255, 0.16); color: var(--accent); }
.icon-box-navy { background: rgba(255, 255, 255, 0.07); color: var(--accent); border: 1px solid var(--rand); }
.diff-item h3 { color: var(--wit); }
.diff-item p { color: var(--zacht); }
.service-detail li { color: var(--tekst); }
.service-detail li .icon { color: var(--accent); }
.team-avatar { background: rgba(47, 107, 255, 0.18); color: var(--accent); }
.team-grid .role { color: var(--accent); }
.mission p { color: var(--zacht); }

/* Pagina-kop van de overige pagina's */
.page-hero { background: transparent; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 360px at 50% 0%, rgba(47, 107, 255, 0.22), transparent 70%);
}
.page-hero > * { position: relative; }
.page-hero h1 { color: var(--wit); font-weight: 800; letter-spacing: -0.04em; }
.page-hero p { color: var(--zacht); }

/* Formulier en contact */
.contact-detail .label { color: var(--wit); }
.contact-detail .value, .contact-detail a { color: var(--zacht); }
.contact-detail a:hover { color: var(--accent); }
.field label { color: var(--tekst); }
.field input, .field textarea { background: rgba(255, 255, 255, 0.04); border-color: var(--rand); color: var(--wit); }
.field input::placeholder, .field textarea::placeholder { color: rgba(200, 213, 245, 0.4); }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(121, 166, 255, 0.2); }
.form-success { background: rgba(47, 107, 255, 0.12); border-color: var(--rand); }
.form-success h3 { color: var(--wit); }

/* Control Hub-stukken */
.hub-tekst h3 { color: var(--wit); }
.hub-tekst p, .hub-tekst li { color: var(--zacht); }
.hub-tekst li svg { color: var(--accent); }

/* Voet */
.site-footer { background: rgba(4, 10, 26, 0.6); border-top: 1px solid var(--rand); }

/* ══ De nieuwe hero op de homepage ══════════════════════════════════════ */
.hero-nieuw {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: none;
}
.hero-nieuw::before { display: none; }
.bokeh { position: absolute; inset: -6% -4% 18% 38%; pointer-events: none; z-index: 0;
  mask-image: radial-gradient(62% 58% at 60% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(62% 58% at 60% 40%, #000 35%, transparent 78%); }
.bokeh i { position: absolute; border-radius: 50%; animation: zweef var(--duur, 18s) ease-in-out infinite alternate; will-change: transform; }
@keyframes zweef {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(var(--dx, 20px), var(--dy, -30px), 0) scale(var(--s, 1.08)); }
}
@media (prefers-reduced-motion: reduce) { .bokeh i { animation: none; } }
.hero-nieuw .container { position: relative; z-index: 1; }

.label-pil {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--rand-sterk); background: rgba(8, 18, 43, 0.5);
  color: var(--wit); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.hero-nieuw .label-pil { margin: 0; max-width: none; color: var(--wit); font-size: 0.95rem; line-height: 1.4; }
.label-pil::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15); }

.hero-nieuw h1 {
  margin: 1.6rem 0 0; max-width: none;
  font-size: clamp(2.7rem, 7vw, 5.75rem);
  font-weight: 800; line-height: 1; letter-spacing: -0.045em; word-spacing: 0.04em; color: var(--wit);
}
.hero-nieuw h1 .regel { display: block; }
.hero-nieuw h1 .accent { color: var(--accent); }
.hero-nieuw .hero-tekst {
  margin: 2rem 0 0; max-width: 36rem; text-align: left;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--tekst);
}
.hero-nieuw .hero-actions { justify-content: flex-start; align-items: flex-start; margin-top: 2.6rem; }
@media (min-width: 640px) { .hero-nieuw .hero-actions { align-items: center; } }

/* De twee kaarten onder de kop */
.hero-kaarten { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .hero-kaarten { grid-template-columns: 1fr 1fr; } }
.hkaart {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center;
  border-radius: 1.5rem; padding: 1.9rem 2rem; border: 1px solid var(--rand-sterk);
  background: rgba(12, 26, 58, 0.7); transition: transform .2s, box-shadow .2s;
}
@media (min-width: 560px) { .hkaart { grid-template-columns: 1fr auto; } }
.hkaart:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.hkaart.blauw { background: linear-gradient(135deg, #2563eb, #2f6bff); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 30px 60px -30px rgba(37, 99, 235, 0.8); }
.hkaart h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.1; margin: 0; letter-spacing: -0.045em; }
@media (min-width: 1100px) { .hkaart h2 { white-space: nowrap; } }
.hkaart p { margin: 0.6rem 0 0; color: rgba(236, 241, 255, 0.86); font-size: 1.05rem; line-height: 1.5; }
.hkaart a.meer { display: inline-flex; gap: 0.5rem; align-items: center; margin-top: 1.25rem; font-weight: 600; color: var(--wit); }
.hkaart:not(.blauw) a.meer { color: var(--accent); }
.hkaart a.meer:hover svg { transform: translateX(3px); }
.hkaart a.meer svg { transition: transform .15s; }

.codeblok {
  background: rgba(10, 28, 90, 0.55); border-radius: 1rem; padding: 1.1rem 1.4rem;
  font: 500 0.92rem/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #e6edff; white-space: pre;
}
.codeblok .k { color: #bcd0ff; }
.codeblok .f { color: #6ee7b7; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--groen); vertical-align: -0.15em; animation: knipper 1.05s steps(1) infinite; }
@keyframes knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

.koppel { width: 13rem; max-width: 100%; height: auto; }
.koppel .lijn { stroke-dasharray: 6 6; animation: stroom 1.2s linear infinite; }
@keyframes stroom { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .koppel .lijn { animation: none; } }

/* Oude hero-stijl op de andere pagina's (maatwerk, kassa, …) in de nieuwe kleuren. */
.hero:not(.hero-nieuw) {
  background: radial-gradient(900px 420px at 50% -5%, rgba(47, 107, 255, 0.28), transparent 70%), transparent;
}
.hero:not(.hero-nieuw)::before {
  background-image:
    linear-gradient(to right, rgba(140, 170, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 170, 255, .07) 1px, transparent 1px);
}
.hero:not(.hero-nieuw) h1 { color: var(--wit); font-weight: 800; letter-spacing: -0.045em; }
.hero:not(.hero-nieuw) p { color: var(--zacht); }
.hero:not(.hero-nieuw) .eyebrow { color: var(--accent); }

/* Telefoon: de bokeh zachter achter de tekst. */
@media (max-width: 700px) {
  .bokeh { inset: 0 -30% 30% 20%; opacity: .55; }
}