/* CleverGroup one-pager. Built from Figma "CleverGroup - Design", frame Home (466:11393).
   Tokens are the CleverGroup mode of the Clever design system (get_variable_defs). */

@font-face { font-family: "PST Mail Sans"; src: url("../fonts/PSTMailSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Same baseline correction as the CleverMobi build: the Bold webfont sits 0.1em lower than Figma's PST Mail Sans Bold. */
@font-face { font-family: "PST Mail Sans"; src: url("../fonts/PSTMailSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 114.7%; descent-override: 58.84%; line-gap-override: 0%; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/MonaSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Neon"; src: url("../fonts/MonaspaceNeon-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fuzzy Bubbles"; src: url("../fonts/FuzzyBubbles-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Neon"; src: url("../fonts/MonaspaceNeon-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Colour: CleverGroup mode */
  --fg-primary: #141414;
  --fg-secondary: #3e403d;
  --fg-tertiary: #5e615c;
  --fg-white: #ffffff;
  --fg-white-secondary: rgba(255, 255, 255, 0.8);
  --fg-pale: #eaede8;
  --bg-base: #ffffff;
  --bg-accent: #eaede8;
  --brand-deep: #141414;
  --brand-mid: #5e615c;
  --brand-light: #edc600;
  --brand-pale: #eaede8;

  /* Colour: group companies (company sections and mosaic tiles) */
  --it-deep: #0f1339;  --it-light: #29b7e9;  --it-gradient: linear-gradient(95.18deg, #0f67ce 0%, #24a3e3 100%);
  --mobi-mid: #5ea306; --mobi-light: #a5ce01;
  --enable-light: #f25430;
  --prism-deep: #1b0f3b; --prism-dark: #4a1a9e; --prism-mid: #7c3aed; --prism-light: #c07cff; --prism-pale: #f3ecfe;

  --code-text: #eaede8; --code-var: #72ff99; --code-cmd: #fcff57;

  /* Typography */
  --font-display: "PST Mail Sans", "Mona Sans", system-ui, sans-serif;
  --font-body: "Mona Sans", system-ui, sans-serif;
  --font-mono: "Monaspace Neon", ui-monospace, "SFMono-Regular", monospace;
  --text-hero: clamp(2.25rem, 1.35rem + 3.6vw, 4rem);      /* 64 */
  --text-h2: clamp(2rem, 1.5rem + 1.75vw, 3rem);           /* 48 */
  --text-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem); /* 20 */

  /* Space, widths, radius, shadow */
  --gap-gutter: 72px;
  --gap-section: 96px;
  --gap-separation: 48px;
  --width-5col: 498px;
  --width-8col: 840px;
  --width-12col: 1296px;
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 32px;
  --shadow-overlay: 0 1px 4px rgba(0, 0, 0, 0.08), 0 20px 48px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.03);

  --page-gutter: var(--gap-gutter);
  --duration-fast: 160ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 1279px) { :root { --page-gutter: 48px; } }
@media (max-width: 767px)  { :root { --page-gutter: 24px; --gap-section: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--bg-base); color: var(--fg-primary); font-family: var(--font-body); font-feature-settings: "ss01" 1, "liga" 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 10; background: var(--brand-deep); color: var(--fg-white); padding: 10px 16px; border-radius: var(--radius-small); font: 700 16px/1.15 var(--font-display); }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Text styles (Figma: Desktop/Headings/H2, H5, Body Text/Large, Button/Label) */
.h2 { font: 700 var(--text-h2)/1.15 var(--font-display); letter-spacing: -0.03em; font-feature-settings: "liga" 0; color: var(--fg-primary); text-wrap: balance; }
.eyebrow { font: 700 18px/1.15 var(--font-display); letter-spacing: -0.02em; font-feature-settings: "liga" 0; color: var(--brand-mid); }
.body-lg { font: 400 var(--text-body-lg)/1.7 var(--font-body); color: var(--fg-secondary); text-wrap: pretty; }

/* Buttons (Primary, Link, Small Button) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 10px 24px; border-radius: 24px; font: 700 18px/1.15 var(--font-display); letter-spacing: -0.02em; font-feature-settings: "liga" 0; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--brand-deep); color: var(--fg-white); }
.btn-primary:hover { background: #2b2c2a; }
.btn-primary:active { transform: translateY(1px); }
.btn-link { padding: 10px 16px 10px 24px; color: var(--fg-primary); }
.btn-link img { width: 24px; height: 24px; transition: transform var(--duration-fast) var(--ease-out); }
.btn-link:hover img { transform: translateX(3px); }
.btn-link:hover { background: var(--bg-accent); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 88px; padding: 24px 36px; position: relative; z-index: 2; }
.topbar .logo img { width: 254.55px; height: 40px; }
.nav { display: flex; align-items: center; gap: 14px; }
.nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; align-items: center; height: 40px; padding: 0 14px 1px; border-radius: var(--radius-small); font: 500 16px/1.15 var(--font-display); letter-spacing: -0.01em; font-feature-settings: "liga" 0; color: var(--fg-secondary); transition: background-color var(--duration-fast) var(--ease-out); }
.nav-item:hover { background: var(--bg-accent); color: var(--fg-primary); }
.btn-small { display: flex; align-items: center; height: 40px; padding: 0 16px 1px; border-radius: var(--radius-small); background: var(--brand-deep); color: var(--fg-white); font: 700 16px/1.15 var(--font-display); letter-spacing: -0.015em; font-feature-settings: "liga" 0; transition: background-color var(--duration-fast) var(--ease-out); }
.btn-small:hover { background: #2b2c2a; }

/* Head: header text, visual and the two yellow outline blobs */
.head { position: relative; overflow-x: clip; }
.header { position: relative; display: flex; flex-direction: column; gap: var(--gap-gutter); padding: var(--gap-separation) var(--page-gutter) 0; max-width: 1440px; margin: 0 auto; }
.header-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: min(var(--width-8col), 100%); }
.hero-title { font: 500 var(--text-hero)/1.1 var(--font-display); letter-spacing: -0.03em; font-feature-settings: "liga" 0; color: var(--fg-primary); }
.hero-title span { display: block; }
@media (max-width: 1279px) { .hero-title span { display: inline; } .hero-title { text-wrap: balance; } }
.hero-visual { position: relative; z-index: 1; width: 100%; aspect-ratio: 1296 / 580; border-radius: var(--radius-large); overflow: hidden; background: var(--brand-pale); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; }
.show-sm, .blob-right.blob-sm { display: none; }
.blob-right { position: absolute; z-index: 2; width: 522px; height: 588px; right: -270px; top: 165px; transform: scaleX(-1); pointer-events: none; }
.blob-left { position: absolute; z-index: 2; width: 358px; height: 404px; left: -101px; top: 840px; transform: rotate(-104deg); pointer-events: none; }

/* Points: section intro */
.content { padding-top: var(--gap-section); }
.intro { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(var(--width-8col), calc(100% - 2 * var(--page-gutter))); margin: 0 auto; text-align: center; }

/* Company rows (Figma: Solution) */
.companies { display: flex; flex-direction: column; gap: var(--gap-section); padding-top: var(--gap-section); }
.company { width: min(var(--width-12col), calc(100% - 2 * var(--page-gutter))); margin: 0 auto; }
.company-row { display: flex; align-items: center; gap: 72px; padding-left: 114px; min-height: 580px; }
.company.is-flipped .company-row { flex-direction: row-reverse; justify-content: flex-end; }
.company-info { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: var(--width-5col); flex: 0 1 var(--width-5col); }
.company-logo { height: 32px; width: auto; }
.company-text { display: flex; flex-direction: column; gap: 20px; }
.company-visual { position: relative; flex: 0 0 var(--width-5col); width: var(--width-5col); height: 580px; }
.company-image { position: absolute; inset: 0; border-radius: var(--radius-large); overflow: hidden; background: var(--bg-accent); }
.company-image .crop { position: absolute; }
.tile { position: absolute; display: flex; align-items: center; justify-content: center; width: 144px; height: 128px; border-radius: 16px; background: var(--bg-base); box-shadow: var(--shadow-overlay); }
.tile img { width: 64px; height: 64px; }
.tile.br48 { right: -72px; bottom: 48px; }
.tile.br72 { right: -72px; bottom: 72px; }
.tile.tl48 { left: -72px; top: 48px; }

/* Image crops, values from the Figma IMG frames */
.crop-it { left: 50%; top: 50%; width: 534px; height: 580px; transform: translate(-50%, -50%); overflow: hidden; }
.crop-it img { position: absolute; width: 167.25%; height: 100.31%; left: -43.87%; top: -0.13%; }
.crop-mobi { inset: 0; }
.crop-mobi img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.crop-enable { inset: 0; }
.crop-enable img { width: 100%; height: 100%; object-fit: cover; }
.glow { position: absolute; left: 187px; top: -236px; width: 370px; height: 370px; mix-blend-mode: multiply; pointer-events: none; }
.glow img { position: absolute; inset: -34.59%; width: 169.18%; height: 169.18%; }
.enable-dot { position: absolute; left: 441px; top: 550px; width: 56px; height: 44px; }

/* CleverPrism visual: built from the system's own pieces (deep brand tile, filled blobs, code tile type) */
.prism-art { position: absolute; inset: 0; background: linear-gradient(160deg, var(--prism-deep) 0%, #2a1460 100%); }
.prism-art .pb { position: absolute; width: 520px; height: 580px; }
.prism-art .pb path { fill: var(--prism-mid); opacity: 0.55; }
.prism-art .pb.b1 { left: -250px; top: 330px; transform: rotate(180deg); }
.prism-art .pb.b2 { left: 250px; top: -380px; }
.prism-art .pb.b2 path { fill: var(--prism-light); opacity: 0.22; }
.prism-chat { position: absolute; left: 40px; right: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; }
.bubble { max-width: 340px; padding: 16px 20px; border-radius: 16px; font: 400 17px/1.5 var(--font-body); }
.bubble.you { align-self: flex-end; background: rgba(255, 255, 255, 0.1); color: var(--code-text); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--bg-base); color: var(--fg-primary); box-shadow: var(--shadow-overlay); border-bottom-left-radius: 4px; }
.bubble .who { display: block; margin-bottom: 6px; font: 500 12px/1.15 var(--font-mono); letter-spacing: -0.01em; opacity: 0.6; }
.bubble.ai .who { color: var(--prism-mid); opacity: 1; }
.bubble .ok { color: var(--prism-mid); white-space: nowrap; }

/* Careers */
.careers { display: flex; flex-direction: column; align-items: center; gap: var(--gap-separation); padding-top: var(--gap-section); }
.careers .intro { gap: 32px; padding-top: var(--gap-separation); }
.careers .intro-text { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mosaic { position: relative; width: 100%; height: 520px; overflow-x: clip; overflow-y: visible; }
.mosaic-images { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 20px; padding: 0 var(--gap-gutter); }
.col { display: flex; flex-direction: column; gap: 20px; width: 320px; flex: 0 0 320px; }
.m { position: relative; overflow: hidden; border-radius: var(--radius-medium); background: var(--bg-accent); }
.m > img.ph { position: absolute; object-fit: cover; }
.m .blob { position: absolute; width: 520px; height: 580px; }
.m-orange { background: var(--enable-light); }
.m-blue { background: var(--it-gradient); display: flex; align-items: center; justify-content: center; }
.m-green { background: var(--mobi-light); }
.m-yellow { background: var(--brand-light); }
.m-purple { background: var(--prism-mid); }
.mosaic .c6 { display: none; }
.m-code { background: var(--brand-deep); }
.pill { display: flex; align-items: center; gap: 8px; padding: 8px 20px 8px 12px; border-radius: 32px; background: var(--it-deep); color: var(--fg-white); font: 700 24px/1.15 var(--font-display); letter-spacing: -0.03em; font-feature-settings: "liga" 0; }
.pill img { width: 32px; height: 32px; }
.code { position: absolute; left: 24px; top: 24px; width: 272px; font: 300 20px/1.25 var(--font-mono); letter-spacing: -0.01em; color: var(--code-text); font-feature-settings: "liga" 0; }
.code { white-space: pre; }
.code .c { color: var(--code-cmd); }
.code-line { display: block; min-height: 1.25em; }
.code-line.dim { color: rgba(234, 237, 232, 0.55); }
.code-line.status { text-align: right; color: var(--code-var); }
.code-line.is-spinning { color: rgba(234, 237, 232, 0.6); }
.code-line.is-spinning::before { content: var(--spin, "✶") " "; color: var(--code-cmd); }
.code-caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--code-var); animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.iso { display: flex; align-items: center; gap: 12px; padding-left: 44px; height: 100%; font: 700 24px/1.15 var(--font-display); letter-spacing: -0.03em; font-feature-settings: "liga" 0; }
.iso img { width: 32px; height: 32px; }
.m .glow2 { position: absolute; left: -152px; top: -260px; width: 370px; height: 370px; mix-blend-mode: multiply; }
.m .glow2 img { position: absolute; inset: -34.59%; width: 169.18%; height: 169.18%; }

/* Bottom: CTA and footer */
.bottom { margin-top: var(--gap-section); }
.cta { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: var(--gap-section) var(--page-gutter); background: var(--brand-light); }
.cta .intro { position: relative; z-index: 1; gap: 32px; }
.cta .intro-text { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta .blob-r { position: absolute; width: 754px; height: 792px; left: calc(50% + 362px); top: 128px; }
.cta .blob-l { position: absolute; width: 520px; height: 580px; left: calc(50% - 866px); top: -274px; transform: rotate(180deg); }
.cta-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; font: 500 16px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-secondary); }
.cta-contact a, .cta-contact span { padding-block: 8px; }
.cta-contact a { text-decoration: underline; text-decoration-color: rgba(20, 20, 20, 0.35); text-underline-offset: 3px; }
.cta-contact a:hover { text-decoration-color: currentColor; color: var(--fg-primary); }

.footer { display: flex; flex-direction: column; align-items: center; gap: 128px; padding: 72px var(--page-gutter); background: var(--brand-deep); color: var(--fg-white-secondary); }
.footer-content { display: flex; gap: 72px; align-items: flex-start; width: min(var(--width-12col), 100%); }
.footer-logo, .footer-spacer { flex: 1 0 0; }
.footer-logo img { width: 229.091px; height: 36px; }
.footer-list { flex: 1 0 0; display: flex; flex-direction: column; gap: 17px; }
.footer-list h2 { font: 700 16px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--fg-pale); opacity: 0.5; font-feature-settings: "liga" 0; }
.footer-list ul { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; font: 500 16px/1.15 var(--font-display); letter-spacing: -0.01em; font-feature-settings: "liga" 0; }
.footer-list li { white-space: nowrap; }
.footer-list a { transition: color var(--duration-fast) var(--ease-out); }
.footer-list a:hover { color: var(--fg-white); }
.lozenge { display: inline-block; margin-left: 8px; padding: 3px 5px; border-radius: 4px; background: var(--brand-light); color: var(--fg-primary); font: 500 12px/1.15 var(--font-mono); letter-spacing: -0.01em; vertical-align: 1px; }
.footer-end { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--width-12col), 100%); min-height: 16px; }
.footer-end .eindhoven { display: flex; align-items: center; gap: 8px; font: 500 12px/1.15 var(--font-mono); letter-spacing: -0.01em; color: var(--fg-pale); }
.footer-end .eindhoven span { opacity: 0.5; }
.footer-end .eindhoven img { width: 16px; height: 16px; }
.footer-end .made { position: absolute; left: 50%; transform: translateX(-50%); font: 500 14px/1.15 var(--font-display); letter-spacing: -0.01em; }
.footer-end .made a { opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-out); }
.footer-end .made a:hover { opacity: 0.9; }
.footer-end .copy { font: 500 12px/1.15 var(--font-mono); letter-spacing: -0.01em; color: var(--fg-pale); opacity: 0.5; }

/* Tablet */
@media (max-width: 1279px) {
  .blob-right { z-index: 0; top: 330px; }
  .blob-left { display: none; }
  .company-row { padding-left: 0; justify-content: center; gap: 56px; }
  .company.is-flipped .company-row { justify-content: center; }
  .company-visual { flex-basis: 420px; width: 420px; height: 520px; }
  .tile.br48, .tile.br72 { right: -24px; } .tile.tl48 { left: -24px; }
  .prism-chat { top: 40px; bottom: auto; transform: none; }
  .footer-spacer { display: none; }
  .footer-content { flex-wrap: wrap; gap: 48px; }
  .footer-logo { flex-basis: 100%; }
}
@media (max-width: 1279px) { .intro .body-lg { text-wrap: balance; } }
@media (max-width: 1100px) { .header-text { width: min(720px, 100%); } }
/* Phone helpers */
@media (max-width: 767px) {
  .hide-sm, .blob-right:not(.blob-sm) { display: none; } .show-sm { display: inline; } .blob-right.blob-sm { display: block; } }
/* Small tablet and phone: stack the company rows, image first */
@media (max-width: 959px) {
  .topbar { padding: 16px var(--page-gutter); height: 72px; }
  .blob-right { width: 300px; height: 338px; right: -190px; top: auto; bottom: -40px; }
  .company-row, .company.is-flipped .company-row { flex-direction: column-reverse; align-items: stretch; gap: 40px; min-height: 0; }
  .company-info { width: 100%; flex-basis: auto; }
  .company-visual { width: 100%; flex-basis: auto; height: auto; aspect-ratio: 16 / 10; }
  .crop-it { inset: 0; width: auto; height: auto; transform: none; }
  .crop-it img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 62% 35%; }
  .enable-dot { display: none; }
  .tile { width: 112px; height: 100px; } .tile img { width: 48px; height: 48px; }
  .tile.br48, .tile.br72, .tile.tl48 { left: auto; top: auto; right: 16px; bottom: -24px; }
  .prism-chat { left: 32px; right: 32px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .bubble { max-width: 380px; font-size: 18px; }
  .footer-end { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-end .made { position: static; transform: none; }
}
@media (max-width: 767px) {
  .nav ul { display: none; }
  .topbar .logo img { width: 203.6px; height: 32px; }
  .hero-visual { aspect-ratio: 4 / 3; border-radius: 24px; }
  .company-visual { aspect-ratio: 1 / 1; }
  .prism-chat { left: 20px; right: 20px; transform: translateY(-62%); }
  .bubble { font-size: 15px; padding: 12px 16px; max-width: 280px; }
  .btns { flex-direction: column; align-items: flex-start; gap: 4px; }
  .btn-link { padding-left: 0; }
  .btn-link:hover { background: none; }
  .careers .btns, .cta .btns { align-items: center; }
  .mosaic { height: 420px; }
  .footer { gap: 72px; }
  .footer-content { flex-direction: column; gap: 40px; }
}

/* ---------- Careers mosaic below 1280 ----------
   Columns: c1 photo+orange (text-free), c2 Eindhoven, c3 Claude terminal, c4 pinball, c5 ISO, c6 photo+purple (text-free).
   E = left edge of the first whole column. Edges show nothing or at least ~60 px, only text-free columns bleed. */
@media (max-width: 1279px) {
  .mosaic .c6 { display: flex; }
  .mosaic-images { left: 0; }
  .mosaic-images .c1 { order: 0; }
}
@media (min-width: 1128px) and (max-width: 1279px) {            /* whole: Eindhoven, pinball, terminal */
  .mosaic-images .c2 { order: 1; } .mosaic-images .c4 { order: 2; } .mosaic-images .c3 { order: 3; } .mosaic-images .c6 { order: 4; } .mosaic-images .c5 { order: 5; }
  .mosaic-images { transform: translateX(calc((100vw - 1000px) / 2 - 412px)); }
}
@media (min-width: 1128px) and (max-width: 1159px) { .mosaic-images { transform: translateX(-392px); } }
@media (min-width: 768px) and (max-width: 1127px) {             /* whole: pinball, terminal */
  .mosaic-images .c4 { order: 1; } .mosaic-images .c3 { order: 2; } .mosaic-images .c6 { order: 3; } .mosaic-images .c2 { order: 4; } .mosaic-images .c5 { order: 5; }
  .mosaic-images { transform: translateX(calc((100vw - 660px) / 2 - 412px)); }
}
@media (min-width: 768px) and (max-width: 819px) { .mosaic-images { transform: translateX(-392px); } }
@media (max-width: 767px) {                                      /* scaled .8; whole: pinball */
  .mosaic-images .c4 { order: 1; } .mosaic-images .c6 { order: 2; } .mosaic-images .c3 { order: 3; } .mosaic-images .c2 { order: 4; } .mosaic-images .c5 { order: 5; }
  .mosaic-images { transform-origin: top left; transform: translateX(calc((100vw - 256px) / 2 - 330px)) scale(0.8); }
}
@media (max-width: 407px) { .mosaic-images { transform: translateX(-314px) scale(0.8); } }

/* ---------- Pinball tile (js/pinball-teaser.js starts the CleverMobi pinball game, js/pinball/pinball.js) ---------- */
.m-pinball { overflow: visible; isolation: isolate; background: none; }
.pinball-tile {
  position: absolute; inset: 0; padding: 0; border: 0; border-radius: inherit; overflow: hidden; cursor: pointer;
  background: var(--bg-accent); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.35s;
}
.pinball-tile .ph { position: absolute; object-fit: cover; }
.pinball-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0); }
.m-pinball.is-in .pinball-tile::after { animation: pinball-chase 1.6s linear infinite; }
.pinball-tile:hover, .pinball-tile:focus-visible { transform: perspective(800px) rotateY(-7deg) rotateX(3deg) scale(1.03); box-shadow: 0 22px 44px rgba(20, 20, 20, 0.3); outline: none; }
.pinball-tile:focus-visible::after { box-shadow: inset 0 0 0 4px #14e1ff, 0 0 0 4px var(--brand-deep); animation: none; }
@keyframes pinball-chase {
  0%, 100% { box-shadow: inset 0 0 0 4px #7c3aed, inset 0 0 28px rgba(124, 58, 237, 0.5); }
  25% { box-shadow: inset 0 0 0 4px #edc600, inset 0 0 28px rgba(237, 198, 0, 0.55); }
  50% { box-shadow: inset 0 0 0 4px #29b7e9, inset 0 0 28px rgba(41, 183, 233, 0.55); }
  75% { box-shadow: inset 0 0 0 4px #a5ce01, inset 0 0 28px rgba(165, 206, 1, 0.55); }
}
.pinball-tile__label {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 10px; border-radius: 999px; background: #fff; color: var(--fg-primary);
  font: 700 15px/1 var(--font-display); white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.pinball-tile__label i { width: 9px; height: 9px; border-radius: 50%; background: #ff2d95; box-shadow: 0 0 8px #ff2d95; animation: pinball-blink 1s steps(2) infinite; }
@keyframes pinball-blink { 50% { opacity: 0.15; } }
.pinball-loader {
  position: fixed; z-index: 2147483001; left: 0; top: 0; translate: -50% -50%; scale: 0.92; opacity: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 12px; border-radius: 999px; overflow: hidden;
  background: #fff; color: var(--fg-primary); font: 700 15px/1 var(--font-display);
  white-space: nowrap; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--brand-light); pointer-events: none;
  transition: opacity 0.2s, scale 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); font-variant-numeric: tabular-nums;
}
.pinball-loader.is-on { opacity: 1; scale: 1; }
.pinball-loader.is-done { opacity: 0; scale: 1.06; }
.pinball-loader i { width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(20, 20, 20, 0.15); border-top-color: #7c3aed; border-right-color: #29b7e9; animation: pinball-spin 0.7s linear infinite; }
.pinball-loader__text { min-width: 9.5ch; }
.pinball-loader b { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--pb-progress, 0) * 100%); background: linear-gradient(90deg, #7c3aed, #29b7e9, #a5ce01, #edc600); transition: width 0.25s ease-out; }
@keyframes pinball-spin { to { transform: rotate(360deg); } }

/* ---------- Motion: playful, but only on reveal and hover ---------- */
/* Hero: brand-coloured marker under the key words, drawn in after load; thicker on hover. */
.hl { color: inherit; background-color: transparent; background-image: linear-gradient(var(--hlc), var(--hlc)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.7s var(--ease-out); }
.hl-it { --hlc: rgba(41, 183, 233, 0.45); }
.hl-net { --hlc: rgba(165, 206, 1, 0.5); background-image: linear-gradient(90deg, rgba(165, 206, 1, 0.55), rgba(242, 84, 48, 0.5)); }
.hl-prism { --hlc: rgba(192, 124, 255, 0.55); }
.is-ready .hl { background-size: 100% 0.2em; }
.is-ready .hl-net { transition-delay: 0.25s; } .is-ready .hl-prism { transition-delay: 0.5s; }
.hero-title:hover .hl { background-size: 100% 0.42em; transition-delay: 0s; transition-duration: 0.3s; }
/* Hero blob draws itself. */
.blob-right, .blob-left { transition: opacity 1.2s var(--ease-out), clip-path 1.6s var(--ease-out); }
.js .blob-right, .js .blob-left { clip-path: inset(0 0 100% 0); }
.is-ready .blob-right, .is-ready .blob-left { clip-path: inset(0 0 0 0); }

/* Reveal on scroll */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .company .company-image { transform: scale(0.94); opacity: 0; transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out); }
.js .company.is-in .company-image { transform: none; opacity: 1; }
.js .company .tile { opacity: 0; scale: 0.6; rotate: -8deg; transition: opacity 0.4s 0.35s, scale 0.6s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), rotate 0.6s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.js .company.is-in .tile { opacity: 1; scale: 1; rotate: 0deg; }
/* Company rows: hover the row, the photo zooms a little and the tile hops. */
.company-image > .crop img, .company-image .prism-chat { transition: transform 0.9s var(--ease-out); }
.company-row:hover .company-image > .crop img { transform: scale(1.04); }
.company-row:hover .tile img { animation: tile-hop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes tile-hop { 0% { transform: none; } 30% { transform: translateY(-8px) rotate(-6deg); } 55% { transform: translateY(0) rotate(4deg); } 75% { transform: rotate(-2deg); } 100% { transform: none; } }
.company-logo { transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.company-row:hover .company-logo { transform: translateX(4px); }
/* Prism chat: the bubbles appear one by one when the row comes in. */
.js .company .bubble { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.js .company.is-in .bubble.you { opacity: 1; transform: none; transition-delay: 0.6s; }
.js .company.is-in .bubble.ai { opacity: 1; transform: none; transition-delay: 1.5s; }
/* Mosaic: columns drift a little with the scroll. */
.mosaic .col { translate: 0 var(--py, 0px); }

/* Footer: blinking caret in the lozenge, a heart that beats and sends hearts up when clicked. */
.lozenge .caret { animation: caret-blink 1s steps(1) infinite; }
.heart-btn { display: inline-flex; padding: 4px; margin: -4px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.footer-end .eindhoven img { transform-origin: 50% 60%; }
.footer :focus-visible { outline-color: var(--brand-light); }
.footer-end .eindhoven span { transition: opacity var(--duration-fast) var(--ease-out); }
.footer-end .eindhoven:has(.heart-btn:hover, .heart-btn:focus-visible) span { opacity: 0.8; }
.footer-end .eindhoven:hover img, .heart-btn:focus-visible img { animation: heart-beat 900ms ease-in-out infinite; }
@keyframes heart-beat { 0%, 100% { scale: 1; } 15% { scale: 1.35; } 30% { scale: 1; } 45% { scale: 1.25; } }
.float-heart { position: fixed; z-index: 90; width: 16px; height: 16px; pointer-events: none; animation: heart-float 1400ms ease-out forwards; }
@keyframes heart-float { to { translate: var(--dx, 0px) -140px; opacity: 0; scale: 1.8; rotate: var(--rot, 0deg); } }
/* Easter egg: type "clever" anywhere. */
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -24px; width: 12px; height: 16px; border-radius: 60% 20% 60% 20%; background: var(--c); animation: confetti-fall var(--t, 2.4s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards; }
@keyframes confetti-fall { to { translate: var(--dx, 0px) 110vh; rotate: var(--rot, 540deg); } }
.egg-bubble { position: fixed; left: 50%; top: 18vh; z-index: 96; translate: -50% 0; padding: 14px 26px 16px; border-radius: 40px; background: var(--brand-deep); color: var(--fg-white); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); font: 700 26px/1.1 var(--font-display); letter-spacing: -0.03em; pointer-events: none; animation: egg-pop 2600ms cubic-bezier(0.34, 1.7, 0.5, 1) forwards; }
@keyframes egg-pop { 0% { scale: 0.3; opacity: 0; } 12% { scale: 1; opacity: 1; } 85% { scale: 1; opacity: 1; } 100% { scale: 0.8; opacity: 0; } }
/* CTA blobs breathe slowly. */
.cta .blob-r { animation: drift 14s ease-in-out infinite alternate; }
.cta .blob-l { animation: drift-l 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-24px, -18px) rotate(-6deg); } }
@keyframes drift-l { from { transform: rotate(180deg); } to { transform: rotate(186deg) translate(20px, 12px); } }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .company .company-image, .js .company .tile, .js .company .bubble { opacity: 1 !important; transform: none !important; scale: 1 !important; rotate: 0deg !important; transition: none !important; }
  .js .blob-right, .js .blob-left { clip-path: none; }
  .hl { background-size: 100% 0.2em; transition: none; }
  .m-pinball.is-in .pinball-tile::after { animation: none; box-shadow: inset 0 0 0 4px var(--brand-light); }
  .pinball-tile, .pinball-tile:hover { transition: none; transform: none; }
  .pinball-tile__label i, .lozenge .caret, .cta .blob-r, .cta .blob-l, .code-caret { animation: none; }
  .company-row:hover .tile img { animation: none; }
  .mosaic .col { translate: none; }
}