/* QuantumSafe by ConsultingExperts — site styles
   Brand: pure red #FF0000, black, warm blush backgrounds, light Helvetica/Arial type. */

:root {
  --red: #ff0000;
  --red-dark: #b80000;
  --red-text: #db0000;   /* brand red, deepened just enough for WCAG AA on small text and buttons */
  --red-fill: #db0000;   /* red surfaces with white text on them (buttons) */
  --ink: #0a0a0a;
  --ink-2: #2b2b2b;
  --muted: #5d5656;
  --blush: #fff3f2;
  --blush-2: #ffe9e8;
  --line: #f0dcda;
  --white: #ffffff;
  /* Semantic roles: these are what dark mode swaps */
  --bg: #ffffff;          /* page background */
  --surface: #ffffff;     /* cards, panels, inputs */
  --text: #0a0a0a;        /* main text */
  --band: #0a0a0a;        /* the black sections and footer */
  --input-border: #dccbc9;
  --header-bg: rgba(255, 255, 255, .94);
  --radius: 4px;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .06);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 300; letter-spacing: -.025em; }
h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 300; letter-spacing: -.02em; }
h3 { font-size: 22px; font-weight: 500; }
h4 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.accent { color: var(--red); font-weight: 500; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); font-weight: 300; max-width: 62ch; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-text); margin-bottom: 18px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* Sections sit close together: 40% of the original 64-120px padding */
.section { padding: clamp(26px, 3.6vw, 48px) 0; position: relative; }
.section--blush { background: var(--blush); }
.section--dark { background: var(--band); color: var(--white); }
.section--dark .lead, .section--dark .muted { color: #cfc6c5; }
.section--red { background: var(--red); color: var(--white); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius);
  font: 500 16px/1 var(--font); text-decoration: none; cursor: pointer;
  background: var(--red-fill); color: var(--white); border: 1px solid var(--red-fill);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn::after { content: "→"; transition: transform .2s; }
.btn:hover::after { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--white { background: var(--white); color: var(--red-text); border-color: var(--white); }
.btn--white:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.link-arrow { color: var(--red-text); font-weight: 500; text-decoration: none; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.brand img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 12px; text-decoration: none; font-size: 15px; color: var(--ink-2);
  border-radius: var(--radius); position: relative;
}
.nav-links a:hover { color: var(--red-text); }
.nav-links a[aria-current="page"] { color: var(--red-text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--red);
}
.nav-links .nav-cta a { background: var(--red-fill); color: var(--white); padding: 10px 18px; margin-left: 8px; }
.nav-links .nav-cta a:hover { background: var(--red-dark); color: var(--white); }
.nav-links .nav-cta a::after { display: none; }
.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--text);
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }
@media (max-width: 1140px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 4px; font-size: 17px; }
  .nav-links a[aria-current="page"]::after { left: 4px; right: auto; width: 24px; bottom: 6px; }
  .nav-links .nav-cta a { margin: 10px 0 0; text-align: center; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; background: var(--blush); overflow: hidden; }
/* Fixed banner height, so the arc's step (at 50%) always sits in the same place. Sub-pages use 600px. */
.hero .container { position: relative; z-index: 2; min-height: 780px; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 72px; }
/* Keep hero copy clear of the arc, which starts at 50% + 160px */
.hero-copy { max-width: min(620px, calc(50vw + 120px - var(--gutter))); }
.hero h1 { margin-bottom: 24px; }
/* The brand arc: the left half of a large red circle with a stepped offset, as in the Teams/LinkedIn
   backgrounds. Only the left edge curves; the red runs on past the right edge of the screen (the hero
   clips it), so on wide screens it never closes into a circle. --d is the circle's diameter. */
.arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.arc::before, .arc::after {
  --d: 1500px;
  content: ""; position: absolute; background: var(--red);
  height: var(--d); width: calc(var(--d) + 100vw);
  border-radius: calc(var(--d) / 2) 0 0 calc(var(--d) / 2);
}
/* The circle's centre (the step between the two halves) sits halfway down the banner */
.arc::before, .arc::after { top: calc(50% - var(--d) / 2); }
.arc::before { left: calc(50% + 160px); clip-path: inset(0 0 50% 0); }
.arc::after  { left: calc(50% + 260px); clip-path: inset(50% 0 0 0); }
/* Two soft glows, measured from the brand background (QS_1280x720_Teams.png). They are not boxes but
   bands about 230px wide that follow the curve of the arc: rings around the same centre as each half
   of the circle. Glow 1 rings the upper arc above the step, strongest against the arc; glow 2 rings
   the lower arc below the step, fainter and slightly stronger at its outer edge. Both fade away from
   the step (the mask). The step sits halfway down; circle centres are at 50% + 910px and 50% + 1010px. */
.arc .glow {
  --r: 750px; --band: 230px; --cy: 50%; --cx1: calc(50% + 910px); --cx2: calc(50% + 1010px);
  --g1: rgba(255, 0, 0, .187); --g1-out: rgba(255, 0, 0, .065);
  --g2: rgba(255, 0, 0, .058); --g2-out: rgba(255, 0, 0, .088);
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--cx1) 100%, transparent var(--r), var(--g1) var(--r), var(--g1-out) calc(var(--r) + var(--band)), transparent calc(var(--r) + var(--band)))
      0 0 / 100% var(--cy) no-repeat,
    radial-gradient(circle at var(--cx2) 0, transparent var(--r), var(--g2) var(--r), var(--g2-out) calc(var(--r) + var(--band)), transparent calc(var(--r) + var(--band)))
      0 100% / 100% calc(100% - var(--cy)) no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25), #000 var(--cy), rgba(0, 0, 0, .25) calc(var(--cy) + 270px), transparent calc(var(--cy) + 390px));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .25), #000 var(--cy), rgba(0, 0, 0, .25) calc(var(--cy) + 270px), transparent calc(var(--cy) + 390px));
}
/* Entrance: the two halves slide in from the right, one after the other, then the glow fades in.
   Runs once per page load; skipped for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .arc::before { animation: arc-in 1s cubic-bezier(.16, 1, .3, 1) both; }
  .arc::after  { animation: arc-in 1s .18s cubic-bezier(.16, 1, .3, 1) both; }
  .arc .glow   { animation: glow-in 1.2s .6s ease-out both; }
}
@keyframes arc-in  { from { transform: translateX(55vw); } to { transform: none; } }
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 960px) {
  .arc::before, .arc::after { --d: 900px; }
  .hero .container { min-height: 600px; }
  .arc::before { left: 62%; }
  .arc::after { left: calc(62% + 60px); }
  .arc { opacity: .14; }
  .arc .glow { display: none; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--blush); overflow: hidden; }
/* Every sub-page banner has the same height, with its text centred vertically */
.page-hero .container {
  position: relative; z-index: 2; min-height: 600px;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 56px; padding-bottom: 56px;
}
/* Keep heading and intro clear of the arc, which starts at 50% + 300px */
.page-hero .container > * { max-width: min(680px, calc(50vw + 260px - var(--gutter))); }
/* 1040px circle (about 15% larger than 900px): less of the curve fits in the 600px banner, so it
   reads as a bolder, flatter arc instead of a tall half-circle. Glow centres = left edge + radius. */
.page-hero .arc::before, .page-hero .arc::after { --d: 1040px; }
.page-hero .arc::before { left: calc(50% + 300px); }
.page-hero .arc .glow { --r: 520px; --band: 160px; --cx1: calc(50% + 820px); --cx2: calc(50% + 880px); }
.page-hero .arc::after { left: calc(50% + 360px); }
@media (max-width: 960px) {
  .page-hero .container { min-height: 460px; }
  .page-hero .arc::before { left: 70%; }
  .page-hero .arc::after { left: calc(70% + 40px); }
}
/* Phones: a full-colour stepped arc in the top-right corner of the banner, from the top edge of the
   banner down to the bottom of the heading (--arc-end, measured by main.js; 300px if the script
   doesn't run). As on desktop, each half is part of a real circle (radius --r) that runs on past the
   right edge of the screen and is cut off there. The step sits exactly halfway (--s); the upper half
   reaches 84px into the screen, the lower half 62px. The glow rings the same circles. Banner text
   starts near the top; only the label and heading narrow to make room for the arc. */
@media (max-width: 640px) {
  .hero .container, .page-hero .container {
    min-height: 0; justify-content: flex-start; padding-top: 36px; padding-bottom: 48px;
  }
  .hero .hero-copy > .eyebrow, .page-hero .container > .eyebrow { max-width: calc(100vw - var(--gutter) - 96px); }
  .hero .hero-copy > h1, .page-hero .container > h1 {
    max-width: calc(100vw - var(--gutter) - 96px);   /* ends 12px left of the arc */
    /* The longest heading word ("quantumveiligheid") is 7.7 font-sizes wide; shrink the heading on
       narrow phones so it always fits beside the arc: 34px from 375px wide, 27px at 320px. */
    font-size: min(34px, calc((100vw - 112px) / 7.7));
  }
  .hero, .page-hero {
    --s: calc(var(--arc-end, 300px) / 2);
    /* As on desktop, the circle is larger than the space it sits in (1.8x, the desktop proportion),
       so the top of the banner and the bottom of the heading cut it off with straight lines */
    --r: calc(var(--s) * 1.8);
    --band: 80px;
  }
  :root .hero .arc, :root .page-hero .arc { opacity: 1; }
  .hero .arc::before, .hero .arc::after, .page-hero .arc::before, .page-hero .arc::after {
    height: var(--r); clip-path: none; border-radius: 0;
  }
  .hero .arc::before, .page-hero .arc::before {
    top: calc(var(--s) - var(--r)); left: calc(100% - 84px); width: calc(var(--r) + 84px);
    border-top-left-radius: var(--r);
  }
  .hero .arc::after, .page-hero .arc::after {
    top: var(--s); left: calc(100% - 62px); width: calc(var(--r) + 62px);
    border-bottom-left-radius: var(--r);
    clip-path: inset(0 0 calc(var(--r) - var(--s)) 0);   /* straight cut at the bottom of the heading */
  }
  .hero .arc .glow, .page-hero .arc .glow {
    display: block;
    --r: calc(var(--s) * 1.8); --band: 80px;
    background:
      radial-gradient(circle at calc(100% - 84px + var(--r)) 100%, transparent var(--r), var(--g1) var(--r), var(--g1-out) calc(var(--r) + var(--band)), transparent calc(var(--r) + var(--band)))
        0 0 / 100% var(--s) no-repeat,
      radial-gradient(circle at calc(100% - 62px + var(--r)) 0, transparent var(--r), var(--g2) var(--r), var(--g2-out) calc(var(--r) + var(--band)), transparent calc(var(--r) + var(--band)))
        0 var(--s) / 100% calc(100% - var(--s)) no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), #000 var(--s), rgba(0, 0, 0, .35) calc(var(--s) * 1.7), transparent calc(var(--s) * 2.2));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35), #000 var(--s), rgba(0, 0, 0, .35) calc(var(--s) * 1.7), transparent calc(var(--s) * 2.2));
  }
}

/* ---------- Product screenshots (Technology page) ---------- */
.product-shot { margin: clamp(24px, 3vw, 36px) auto 0; max-width: 1000px; }
.product-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.product-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 34px); position: relative; transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
.card .link-arrow { margin-top: auto; padding-top: 16px; }
.card-num { font-size: 14px; font-weight: 600; color: var(--red-text); letter-spacing: .08em; margin-bottom: 18px; }
.section--dark .card { background: #151515; border-color: #2a2a2a; color: var(--white); }
.section--dark .card p { color: #cfc6c5; }
.icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--blush-2); color: var(--red);
  display: grid; place-items: center; margin-bottom: 20px;
}
.icon svg { width: 24px; height: 24px; }

/* ---------- Stats ---------- */
.stat { border-left: 2px solid var(--red); padding: 4px 0 4px 20px; }
.stat-value { font-size: clamp(36px, 4.4vw, 54px); font-weight: 300; line-height: 1; letter-spacing: -.02em; margin-bottom: 10px; }
.stat-label { color: var(--muted); font-size: 15px; }
.section--dark .stat-label { color: #cfc6c5; }

/* ---------- Quote ---------- */
.quote {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; line-height: 1.35; margin: 0;
  padding-left: 28px; border-left: 3px solid var(--red);
}
.quote cite { display: block; font-size: 15px; font-style: normal; color: var(--muted); margin-top: 16px; }

/* ---------- Lists ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 0 0 12px 30px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 14px;
  background: url("../img/vignet.svg") center / contain no-repeat;
}

/* ---------- Service journey ---------- */
.journey { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.journey-step {
  display: grid; grid-template-columns: 80px 1fr 1.2fr; gap: 24px; align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background .2s, padding .2s;
}
.journey-step:hover { background: var(--surface); padding-left: 16px; padding-right: 16px; }
.journey-step .n { font-size: 14px; font-weight: 600; color: var(--red-text); letter-spacing: .08em; }
.journey-step h3 { margin: 0; font-weight: 400; }
.journey-step p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .journey-step { grid-template-columns: 48px 1fr; }
  .journey-step p { grid-column: 2; }
}

/* ---------- Service detail ---------- */
.service {
  display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(24px, 5vw, 72px);
  padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); scroll-margin-top: 90px;
}
.service:first-of-type { border-top: 0; }
.service-title .card-num { margin-bottom: 10px; }
.service-title h3 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 300; }
.service-title .tag {
  display: inline-block; margin-top: 8px; font-size: 13px; padding: 6px 12px; border-radius: 99px;
  background: var(--blush-2); color: var(--red-dark); font-weight: 500;
}
.aar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aar div { border-top: 2px solid var(--text); padding-top: 14px; }
.aar div:last-child { border-top-color: var(--red); }
.aar h4 { margin-bottom: 8px; }
.aar p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; }
  .aar { grid-template-columns: 1fr; }
}

/* ---------- Timeline ---------- */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 34px 44px; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--red);
}
.timeline li.done::before { background: var(--red); }
.timeline .when { font-size: 14px; font-weight: 600; color: var(--red-text); letter-spacing: .06em; text-transform: uppercase; }
.timeline h3 { margin: 4px 0 6px; font-size: 20px; }
.timeline p { margin: 0; color: var(--muted); }

/* Horizontal milestone strip */
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; gap: 24px; }
.milestones::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: rgba(255, 255, 255, .25); }
.milestone { position: relative; padding-top: 36px; }
.milestone::before {
  content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--band); border: 3px solid var(--red);
}
.milestone .year { font-size: clamp(30px, 3.4vw, 42px); font-weight: 300; line-height: 1; margin-bottom: 10px; }
.milestone p { margin: 0; color: #cfc6c5; font-size: 15px; }
.section--blush .milestones::before { background: var(--line); }
.section--blush .milestone::before { background: var(--blush); }
.section--blush .milestone p { color: var(--muted); }
@media (max-width: 860px) {
  .milestones { grid-template-columns: 1fr 1fr; }
  .milestones::before { display: none; }
}

/* ---------- Mosca calculator ---------- */
.mosca { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.mosca-row { margin-bottom: 26px; }
.mosca-row label { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; margin-bottom: 8px; }
.mosca-row label output { color: var(--red-text); font-weight: 600; white-space: nowrap; }
.mosca-row small { display: block; color: var(--muted); margin-top: 4px; font-size: 14px; }
.mosca input[type="range"] { width: 100%; margin: 0; accent-color: var(--red); }
.mosca-bar { display: flex; height: 40px; border-radius: var(--radius); overflow: hidden; background: var(--blush); margin: 10px 0 8px; position: relative; }
.mosca-bar .x { background: var(--text); }
.mosca-bar .y { background: #8a8282; }
.mosca-bar .z-mark { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--red); }
.mosca-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--muted); }
.mosca-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; background: var(--c); }
.mosca-result { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius); font-weight: 500; }
.mosca-result.risk { background: var(--red-fill); color: var(--white); }
/* "Within margin": solid green, as bold as the red "at risk" box. A brighter shade of the
   ConsultingExperts green (#215732) that still gives white text 5:1 contrast. */
.mosca-result.ok { background: #1b7f40; color: var(--white); }
.formula { font-size: clamp(26px, 3vw, 38px); font-weight: 300; letter-spacing: .02em; margin: 8px 0 24px; }
.formula b { color: var(--red); font-weight: 500; }

/* ---------- Algorithm chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; font-size: 15px; background: var(--surface); }
.chips.strong li { background: var(--band); color: var(--white); border-color: var(--band); }
.section--dark .chips li { background: transparent; color: var(--white); border-color: #3a3a3a; }
.section--dark .chips.strong li { background: var(--red); border-color: var(--red); }

/* ---------- Media ---------- */
.video-frame { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ink); box-shadow: var(--shadow); }
.video-frame video { width: 100%; height: auto; }

/* ---------- Team ---------- */
.person { display: flex; gap: 18px; align-items: flex-start; }
.avatar {
  width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--white); font-weight: 500; font-size: 20px; letter-spacing: .02em;
}
.person:nth-child(odd) .avatar { background: var(--red-fill); }
.person h3 { margin: 0 0 2px; font-size: 20px; }
.person .role { color: var(--muted); font-size: 15px; margin-bottom: 6px; }
.person a { color: var(--red-text); text-decoration: none; font-size: 15px; }
.card .card-mail { font-size: 19px; }
.nowrap { white-space: nowrap; }
.person a:hover { text-decoration: underline; }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; font: 16px var(--font); padding: 13px 14px; border: 1px solid var(--input-border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form textarea { min-height: 140px; resize: vertical; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--red); color: var(--white); position: relative; overflow: hidden; }
.cta-band .container { position: relative; z-index: 1; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { margin: 0; max-width: 720px; }
.cta-band::after {
  content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%; right: -520px; top: -300px;
  background: radial-gradient(circle at 30% 50%, rgba(0, 0, 0, .14), transparent 60%);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--band); color: #cfc6c5; padding: 64px 0 32px; font-size: 15px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
/* Footer logo on a white band that runs in from the page edge and eases into the black,
   with a red line underneath that fades the same way */
/* Text wordmark, styled like the logo: light "Quantum", bold red "Safe" */
.site-footer a.footer-logo {
  display: inline-block; margin-bottom: 18px; color: var(--white);
  font-size: 30px; font-weight: 300; letter-spacing: -.01em; line-height: 1;
}
.site-footer a.footer-logo span { color: var(--red); font-weight: 500; }
.site-footer a.footer-logo:hover { color: var(--white); }
/* The QuantumSafe pages use the logo itself (the dark-background version, since the footer is always dark) */
.site-footer a.footer-logo img { display: block; height: 44px; width: auto; }
/* IBM Silver Partner mark (white "reversed" version, as IBM prescribes on dark backgrounds).
   The PNG has IBM's required clear space (the height of the "I") built in as transparent margin;
   the visible mark is 38px tall: above IBM's 32px web minimum and smaller than the QuantumSafe logo.
   The negative margin lines the visible mark up with the text above; the margin overlaps empty gutter. */
.site-footer .partner-mark { display: block; height: 88px; width: auto; margin: -8px 0 0 -25px; }
.site-footer h4 { color: var(--white); font-size: 13px; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #cfc6c5; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid #2a2a2a; margin-top: 56px; padding-top: 24px; font-size: 14px; color: #8f8686; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Misc ---------- */
.note { font-size: 14px; color: var(--muted); }
.source { font-size: 13px; color: var(--muted); margin-top: 14px; }
.source a { color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--red-fill); color: var(--white); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.post-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post-card-media { aspect-ratio: 16 / 9; background: var(--blush); overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-media--empty { display: grid; place-items: center; background: var(--blush-2); }
.post-card-media--empty .post-card-mark { width: 44px; height: auto; object-fit: contain; }
.post-card:hover .post-card-media--empty .post-card-mark { transform: none; }
.post-card-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }
.post-card-body h3 { margin-bottom: 10px; }
.post-card-body p { color: var(--muted); }
.post-card-body .link-arrow { margin-top: auto; }
.post-card--featured { grid-column: 1 / -1; flex-direction: row; }
.post-card--featured .post-card-media { flex: 1.3; aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card-body { flex: 1; justify-content: center; padding: clamp(28px, 4vw, 52px); }
.post-card--featured h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 300; }
.post-meta { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.page-hero .post-meta { margin: 20px 0 0; }
.post-back { display: inline-block; margin-bottom: 22px; color: var(--red-text); text-decoration: none; font-weight: 500; font-size: 15px; }
.post-back:hover { text-decoration: underline; }
.page-hero--post h1 { font-size: clamp(34px, 5vw, 58px); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card--featured { flex-direction: column; }
  .post-card--featured .post-card-media { min-height: 0; aspect-ratio: 16 / 9; }
}

.post-body { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.post-body > * { margin: 0 0 1.2em; }
.post-body h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 400; color: var(--text); margin-top: 1.6em; }
.post-body h3 { font-size: 22px; color: var(--text); margin-top: 1.4em; }
.post-body h4 { font-size: 16px; color: var(--text); margin-top: 1.4em; }
.post-body a { color: var(--red-text); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li { margin-bottom: .4em; }
.post-body li::marker { color: var(--red); }
.post-body blockquote { margin-left: 0; padding-left: 24px; border-left: 3px solid var(--red); font-size: 21px; font-weight: 300; color: var(--text); }
.post-body blockquote p { margin: 0; }
.post-body code { background: var(--blush); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.post-body hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.post-media { margin: 2em 0; }
.post-media img, .post-media video { width: 100%; height: auto; border-radius: var(--radius); background: var(--ink); }
.post-media figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; text-align: center; }
.post-embed { position: relative; aspect-ratio: 16 / 9; }
.post-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.post-share { max-width: 720px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; gap: 20px; align-items: center; font-size: 15px; }
.post-share span { color: var(--muted); }
.post-share a { color: var(--red-text); text-decoration: none; font-weight: 500; }
.post-share a:hover { text-decoration: underline; }

/* ---------- Prose pages (privacy statement) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 400; margin: 1.8em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; margin: 1.4em 0 .4em; }
.prose p, .prose li { color: var(--ink-2); }
.prose a { color: var(--red-text); }
.prose .check-list { margin: 0 0 1em; }
.facts { list-style: none; padding: 0; margin: 0 0 1em; }
.facts li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.footer-bottom a { color: #8f8686; }
.footer-bottom a:hover { color: var(--white); }
/* Blanks still to be filled in; deploy.sh refuses to publish while any remain */
.fill { background: #fff1a8; color: #5a4600; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* Contact form: hidden honeypot field and result message */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: 14px 16px; border-radius: var(--radius); font-weight: 500; }
.form-status.ok { background: #e3f4e6; color: #1d6b31; }
.form-status.error { background: var(--blush-2); color: var(--red-dark); }

/* Click-to-load video placeholder (blog) */
.embed-load {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); cursor: pointer;
  background: radial-gradient(circle at 75% 30%, rgba(255, 0, 0, .55), transparent 55%), var(--ink);
  color: var(--white); display: flex; align-items: center; justify-content: center; gap: 18px; font: 500 20px var(--font);
}
.embed-play { width: 68px; height: 68px; border-radius: 50%; background: var(--red); position: relative; flex: none; transition: transform .2s; }
.embed-play::after { content: ""; position: absolute; left: 27px; top: 21px; border-left: 22px solid var(--white); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.embed-load:hover .embed-play { transform: scale(1.08); }
.embed-text { display: flex; flex-direction: column; text-align: left; }
.embed-text small { font-size: 13px; font-weight: 400; color: #cfc6c5; margin-top: 4px; }
.post-embed figcaption { position: absolute; left: 0; right: 0; bottom: -30px; }
.post-media.post-embed { margin-bottom: 3.2em; }

/* Language switch (EN / NL) */
.nav-links .nav-lang a { font-size: 13px; font-weight: 600; letter-spacing: .06em; border: 1px solid var(--line); padding: 6px 10px; margin-left: 6px; }
.nav-links .nav-lang a:hover { border-color: var(--red); }
@media (max-width: 1140px) { .nav-links .nav-lang a { display: inline-block; margin: 8px 0 0; padding: 8px 14px; } }

/* On black backgrounds the bright brand red already has enough contrast (4.95:1) */
.section--dark .eyebrow, .section--dark .card-num, .section--dark .link-arrow { color: var(--red); }
.section--dark .source, .section--dark .source a { color: #a89f9e; }

/* Words are never hyphenated or split. Headings are sized so the longest words (Dutch compounds)
   fit; overflow-wrap only breaks a word that is wider than the whole line, as a last resort. */
h1, h2, h3, .card h3, .stat-value { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 400px) {
  h1 { font-size: 34px; }
  .milestones { grid-template-columns: 1fr; }
  /* Room for long Dutch compounds and e-mail addresses on small phones, so no word is split */
  .card, .panel { padding: 20px 16px; }
  .card h3 { font-size: 20px; }
  .check-list li { font-size: 16px; }
  .card .card-mail { font-size: 17px; }
}

/* Buttons may wrap on very narrow screens instead of widening the page */
.btn { max-width: 100%; text-align: left; }
.split > *, .grid > * { min-width: 0; }
p, li { overflow-wrap: break-word; }

/* ---------- Dark mode ----------
   Set by assets/js/theme.js (follows the system setting, or the visitor's choice via the switch).
   Warm near-black backgrounds keep the blush character; the black sections and footer stay the
   darkest layer so they still read as bands. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141112;
  --surface: #1c1718;
  --text: #f3eceb;
  --ink-2: #ddd3d2;
  --muted: #a89f9e;
  --blush: #1a1415;
  --blush-2: #2a1c1d;
  --line: #322829;
  --band: #080707;
  --input-border: #45393a;
  --header-bg: rgba(20, 17, 18, .92);
  --red-text: #ff3a3a;   /* lifted for contrast on dark backgrounds */
  --red-fill: #d40000;
  --red-dark: #ff6161;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .btn { color: #fff; }
[data-theme="dark"] .btn:hover, [data-theme="dark"] .nav-links .nav-cta a:hover { background: #c40000; border-color: #c40000; color: #fff; }
[data-theme="dark"] .btn--ghost { color: var(--text); }
[data-theme="dark"] .btn--ghost:hover { background: var(--text); color: var(--bg); }
[data-theme="dark"] .btn--white, [data-theme="dark"] .cta-band .btn--white { background: #fff; color: #c40000; border-color: #fff; }
[data-theme="dark"] .section--dark .card { background: #151112; border-color: #2a2223; }
[data-theme="dark"] .post-body code { background: var(--blush-2); }
[data-theme="dark"] .fill { background: #5a4600; color: #fff1a8; }
[data-theme="dark"] .arc { opacity: .9; }
[data-theme="dark"] .arc .glow { --g1: rgba(255, 0, 0, .4); --g1-out: rgba(255, 0, 0, .14); --g2: rgba(255, 0, 0, .12); --g2-out: rgba(255, 0, 0, .18); }
@media (max-width: 960px) { [data-theme="dark"] .arc { opacity: .22; } }
@media (max-width: 640px) { [data-theme="dark"] .arc { opacity: .18; } }
/* The logo mark's black half gets a light outline (in the dark logo file); bullets do the same */
[data-theme="dark"] .check-list li::before { background-image: url("../img/vignet-dark.svg"); }
[data-theme="dark"] .post-card-mark { content: url("../img/vignet-dark.svg"); }

/* Logo: light and dark versions side by side, CSS shows the right one */
.brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }

/* Theme switch (sun / moon) */
.theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin-left: 6px;
  background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--text); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--red-text); color: var(--red-text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-tools { display: flex; align-items: center; gap: 4px; }
@media (max-width: 1140px) { .nav-tools { margin-left: auto; } }
@media (min-width: 1141px) { .nav-links { margin-left: auto; } .nav { gap: 12px; } }
[data-theme="dark"] .avatar { background: #0a0a0a; box-shadow: inset 0 0 0 1.5px #f3eceb; }
[data-theme="dark"] .person:nth-child(odd) .avatar { box-shadow: none; }
.nav-links a { white-space: nowrap; }