/* quilyx.com interim homepage, "Maalstroom" (design handoff 15 July 2026, ported 17 July 2026).
   Dark brand-navy single page; values transcribed from the high-fidelity design component.
   Deviations from the export are deliberate; the complete list lives in the build-notes
   comment at the top of templates/index.html. */

@font-face {
  font-family: "Raleway";
  src: url("/assets/fonts/raleway-vf.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #0C0C4C;
  --navy-deep: #080830;
  --blauw: #3B7CFF;
  --blauw-text: #5B8DFF;  /* AA-safe blauw for small text on tile grounds */
  --paars: #9336FF;
  --rood: #FF4040;
  --oranje: #FF6D24;
  --geel: #FFCE00;
  --groen: #10AD7C;
  --ink: #FFFFFF;
  --ink-90: rgba(255, 255, 255, .9);
  --ink-82: rgba(255, 255, 255, .82);
  --ink-74: rgba(255, 255, 255, .74);
  --ink-72: rgba(255, 255, 255, .72);
  --ink-68: rgba(255, 255, 255, .68);
  --ink-60: rgba(255, 255, 255, .6);
  --ink-55: rgba(255, 255, 255, .55);  /* AA floor for small muted text on navy */
  --hair: rgba(255, 255, 255, .1);
  --hair-strong: rgba(255, 255, 255, .14);
  --tile: rgba(255, 255, 255, .035);
  --tile-hover: rgba(255, 255, 255, .06);
  --panel-ink: #0C0C4C;
  --panel-muted: #4a4a66;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(56px, 8vw, 104px);
  --mono: "Courier New", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: "Raleway", system-ui, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--ink); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--geel);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  color: var(--navy);
  padding: .6rem 1rem;
  border-radius: 0 0 6px 0;
  z-index: 20;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: clamp(600px, 94vh, 1000px);
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
}

/* The canvas layer clips its own overflow so the copy below may overhang the
   section edge (the export clipped the CTAs; the wrap-level clip fixes that
   while keeping the composition). The poster is the no-JS and no-WebGL
   fallback; when WebGL is available, hero-boot.js suppresses it before first
   paint (html.js-webgl) so the hero opens as calm deep water and the canvas
   fades in without a poster flash. is-dead restores the poster if the boot
   fails after the early detect. */
.hero-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: url("/assets/img/maalstroom-poster.png") center / cover no-repeat var(--navy-deep);
}
html.js-webgl .hero-canvas { background-image: none; }
html.js-webgl .hero-canvas.is-dead {
  background: url("/assets/img/maalstroom-poster.png") center / cover no-repeat var(--navy-deep);
}
.hero-canvas canvas {
  position: absolute;
  left: 0;
  top: -18%;
  width: 100%;
  height: 118%;
  display: block;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-canvas.is-live canvas { opacity: 1; }

.hero-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  background: linear-gradient(to top, #080830 5%, rgba(8, 8, 48, .8) 32%, rgba(8, 8, 48, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-blend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(12, 12, 76, 0), #0C0C4C);
  z-index: 1;
  pointer-events: none;
}

/* Small screens, 2 August 2026, second pass on the founder's read of the first
   one. The defect he reported ("on mobile the maalstroom goes through the
   coming soon") is a veil problem, not a position problem, and the first pass
   over-corrected it into a position fix.

   What the numbers say. hero.js sizes the mark at markFraction .52 of the
   SMALLER canvas dimension, so on a portrait canvas it is .52 of the width:
   about 195px across at 375, against 519px at 1440. That is why the mark reads
   as bigger and more present on a phone even though it is smaller in pixels.
   At 1440 the blades actually overlap the pill by 29px and it looks right,
   because the veil there is .66 and the tips arrive as dimmed water. At 375 the
   original overlap was 54px, a quarter of the whole mark, under a veil of only
   .31. The mark was never the problem; the copy climbs into it because every
   line wraps, and the scrim was tuned for a desktop hero.

   So: restore the veil to its desktop strength at the copy (.66 behind the
   pill, about .72 behind the title) and lift the canvas only enough that the
   blade tips kiss the pill in the same proportion they do at 1440, roughly a
   twentieth of the mark rather than a quarter. The water keeps running through
   the copy, which is the effect the design is after. The canvas keeps its
   height, so the mark is not resized and hero.js is untouched.

   Scoped to phone widths on purpose: measured at 600 and 768 the original is
   healthy (veil .74 and .79 behind the pill, mark 274px clear of it). */
@media (max-width: 560px) {
  /* Third pass, founder rule: the gap between the wordmark in the header and
     the top of the mark must equal the gap between the bottom of the mark and
     the pill. Derived rather than eyeballed, and expressed as a formula so it
     survives every phone height instead of only the one it was tuned on.

     Measured at 375: the wordmark ends at y=49, the pill starts 406px above the
     bottom of the hero, and the mark is .52 of the canvas width, so 195px
     across. Equal gaps put its centre at (49 + (h - 406)) / 2. The canvas is
     118% of the hero and the mark sits in its middle, so the canvas top is that
     centre minus 59% of the hero, which reduces to -9% of the hero minus
     178.5px. At a hero of 763 that lands on -247px, gaps of 56.5px on both
     sides; at 876 it lands on -257px, gaps of 113px on both sides. */
  .hero-canvas canvas { top: calc(-9% - 178.5px); }

  .hero-scrim {
    height: 100%;
    background: linear-gradient(to top,
      #080830 6%,
      rgba(8, 8, 48, .88) 30%,
      rgba(8, 8, 48, .66) 53%,
      rgba(8, 8, 48, 0) 92%);
  }
}

.hero-top {
  position: relative;
  z-index: 2;
  padding-top: clamp(20px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.hero-top img { height: clamp(28px, 3.4vw, 38px); width: auto; display: block; }

.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-90);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
}
.lang-link img { display: block; width: 28px; height: 14px; border-radius: 2px; }
.lang-link:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }

.hero-copy-outer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  transform: translateY(clamp(48px, 7vw, 84px));
}
.hero-copy { max-width: 1000px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 7px 15px 7px 13px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.hero-pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--groen);
}
.hero-pill-text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-90);
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -.022em;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
}

.hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-82);
  max-width: 54ch;
  margin: 0 0 clamp(28px, 4vw, 38px);
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 11px;
  padding: 15px 26px;
  transition: background .2s ease, border-color .2s ease;
}
.btn-primary { color: var(--navy); background: #fff; }
.btn-primary:hover { background: #EDEDF7; }
.btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .36); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* entrance animation, motion-safe only */
@media (prefers-reduced-motion: no-preference) {
  @keyframes qxRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes qxPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
  }
  .rise { animation: qxRise .7s both; }
  .rise-1 { animation-delay: .05s; }
  .rise-2 { animation-delay: .13s; }
  .rise-3 { animation-delay: .3s; }
  .rise-4 { animation-delay: .38s; }
  .hero-pill-dot { animation: qxPulse 1.9s ease-in-out infinite; }
}

/* -------------------------------------------------------------- sections */

.section { padding-block: var(--pad-y); }
.section-rule { border-top: 1px solid var(--hair); }
.section-diensten { padding-block: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 40px); }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0;
}
h2.kicker { margin-bottom: clamp(24px, 3.4vw, 40px); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.section-head .kicker { margin-bottom: 14px; }
.kicker + .section-title { margin-top: 14px; }
.section-title + .hero-lead { margin-top: 18px; }
.section-title {
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1.06;
  margin: 0;
}

/* ------------------------------------------------------------- diensten */

.dienst-rows { display: flex; flex-direction: column; gap: 14px; }

.dienst {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
  background: var(--tile);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px);
  transition: border-color .2s ease, background .2s ease;
}
.dienst:hover { border-color: rgba(255, 255, 255, .26); background: var(--tile-hover); }
.dienst-blauw { border-left: 3px solid var(--blauw); }
.dienst-groen { border-left: 3px solid var(--groen); }
.dienst-oranje { border-left: 3px solid var(--oranje); }

.dienst-name {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex: 0 0 280px;
}
.dienst-index {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
}
.dienst-blauw .dienst-index { color: var(--blauw-text); }
.dienst-groen .dienst-index { color: var(--groen); }
.dienst-oranje .dienst-index { color: var(--oranje); }
.dienst-name h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.dienst p {
  flex: 1 1 320px;
  margin: 0;
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  line-height: 1.6;
  color: var(--ink-72);
}

.dienst-note {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-55);
  margin: 22px 0 0;
  max-width: 88ch;
}

/* --------------------------------------------------------------- verder */

.verder-head { text-align: center; }
.verder-head .kicker { margin-bottom: clamp(20px, 3vw, 30px); }
.verder-wordmark {
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 8rem);
  line-height: .92;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 clamp(24px, 3.4vw, 40px);
}

.verder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.verder-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.verder-letter { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.verder-bar { width: 100%; height: 2px; opacity: .5; }
.verder-word {
  font-size: clamp(.82rem, 1.15vw, .98rem);
  font-weight: 600;
  color: var(--ink-90);
  line-height: 1.25;
}
.verder-word-en { font-weight: 400; font-style: italic; color: var(--ink-60); }
.vc-blauw .verder-letter { color: var(--blauw); }   .vc-blauw .verder-bar { background: var(--blauw); }
.vc-paars .verder-letter { color: var(--paars); }   .vc-paars .verder-bar { background: var(--paars); }
.vc-rood .verder-letter { color: var(--rood); }     .vc-rood .verder-bar { background: var(--rood); }
.vc-oranje .verder-letter { color: var(--oranje); } .vc-oranje .verder-bar { background: var(--oranje); }
.vc-geel .verder-letter { color: var(--geel); }     .vc-geel .verder-bar { background: var(--geel); }
.vc-groen .verder-letter { color: var(--groen); }   .vc-groen .verder-bar { background: var(--groen); }

.verder-line {
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-68);
  max-width: 60ch;
  margin: clamp(26px, 3.4vw, 40px) auto 0;
}

/* ------------------------------------------------------------- products */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.product {
  background: var(--tile);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(26px, 3vw, 34px);
}
.product-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.accent-bar { width: 34px; height: 4px; border-radius: 2px; }
.bar-paars { background: var(--paars); }
.bar-geel { background: var(--geel); }
.bar-groen { background: var(--groen); }
.product-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 4px 9px;
}
.tag-paars { background: var(--paars); color: #fff; }
.tag-geel { background: var(--geel); color: var(--navy); }
.product h3 { font-size: clamp(1.2rem, 1.9vw, 1.4rem); font-weight: 700; margin: 0 0 10px; }
.product p {
  font-size: clamp(.98rem, 1.4vw, 1.06rem);
  line-height: 1.6;
  color: var(--ink-72);
  margin: 0;
}

/* ------------------------------------------------------------- pointers */

.pointer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.pointer { display: flex; flex-direction: column; }
.pointer .accent-bar { margin-bottom: 18px; }
.pointer h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin: 0 0 12px; }
.pointer p {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.62;
  color: var(--ink-74);
  margin: 0 0 20px;
}
.pointer a {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.pointer a:hover { text-decoration-thickness: 2.5px; }

/* ------------------------------------------------------------- gegevens */

.gegevens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ledger { margin: 0; }
.ledger-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--hair-strong);
}
.ledger-row:last-child { border-bottom: 1px solid var(--hair-strong); }
.ledger dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.ledger dd { margin: 0; font-size: 16px; font-weight: 500; }
.ledger .num { font-variant-numeric: tabular-nums; }
.ledger a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.cert-panels { display: flex; flex-wrap: wrap; gap: 18px; }
.cert {
  flex: 1 1 200px;
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.cert-center { justify-content: center; }
.cert img { display: block; }
.cert-sna img { height: 96px; width: auto; }
.cert-nvidia img { width: 150px; max-width: 80%; height: auto; }
.cert-name { font-weight: 800; color: var(--panel-ink); font-size: 15px; line-height: 1.3; }
.cert-sub { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--panel-muted); }

/* --------------------------------------------------------------- footer */

.site-footer { padding-block: clamp(48px, 6vw, 72px); border-top: 1px solid var(--hair); }
.footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
}
.footer-note {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  color: var(--ink-60);
  font-size: 14px;
}
.footer-meta a { color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; }
.footer-meta a:hover { color: #fff; }
/* Phone widths: the no-cookies sentence nearly fills the row, so whether the
   Blog link dangled beside it depended on language and device width (founder
   report 3 August 2026, English site). The sentence gets its own row; the
   links always start a fresh line. */
@media (max-width: 560px) {
  .footer-meta span { flex-basis: 100%; }
}
.footer-logo { height: 30px; width: auto; display: block; opacity: .85; }
.footer-legal {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-legal p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-55); }

/* ------------------------------------------------- 404 page (static/404.html) */

.brandrule {
  height: 3px;
  background: linear-gradient(
    to right,
    var(--blauw) 0 16.66%,
    var(--paars) 16.66% 33.33%,
    var(--rood) 33.33% 50%,
    var(--oranje) 50% 66.66%,
    var(--geel) 66.66% 83.33%,
    var(--groen) 83.33% 100%
  );
}

.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.page-top {
  border-bottom: 1px solid var(--hair);
  padding-block: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.page-top img { height: 33px; width: auto; display: block; }
.page-top a { display: inline-flex; }
.page-top-nav {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  border-bottom: 2px solid transparent;
  padding-block: .25rem;
}
.page-top-nav:hover { border-bottom-color: var(--blauw); }
.main-404 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--pad-y);
}