/* Marketing-site UI kit — BBBtriple1 original. Premium feel (smooth scroll,
   blur reveals, shader hero) in the brand's own cool/cyan language. */
.ms-page { background: var(--bg-page); color: var(--text-body); font-family: var(--font-sans); overflow-x: hidden; --ms-ease: cubic-bezier(0.5, 0.5, 0, 1); }
.ms-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.ms-wrap-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.ms-section { padding: var(--section-y) 0; position: relative; }
.ms-rel { position: relative; z-index: 1; }

/* Aurora glow (settles once, holds) */
.ms-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ms-aurora::before, .ms-aurora::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; animation: msSettle 2.4s var(--ms-ease) both; }
.ms-aurora::before { width: 60vw; height: 60vw; left: -10vw; top: -20vw; background: radial-gradient(circle, rgba(140,245,255,0.45), transparent 62%); }
.ms-aurora::after { width: 50vw; height: 50vw; right: -10vw; top: -5vw; background: radial-gradient(circle, rgba(50,151,253,0.38), transparent 60%); animation-delay: 0.15s; }
@keyframes msSettle { from { opacity: 0; transform: translateY(-40px) scale(1.25); } to { opacity: 0.5; transform: none; } }

.ms-grid-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }

/* Scroll reveal: rise + unblur + fade */
[data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(8px);
  transition: opacity 0.9s var(--ms-ease), transform 0.9s var(--ms-ease), filter 0.9s var(--ms-ease);
  transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform, filter; }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.ms-rise { opacity: 0; animation: msRise 0.95s var(--ms-ease) both; }
@keyframes msRise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .ms-aurora::before, .ms-aurora::after, .ms-rise { animation: none; opacity: 0.5; }
  .ms-rise { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}
@media print { .ms-rise, [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } }

/* Hero shader stage */
.ms-hero { position: relative; min-height: 94vh; display: flex; align-items: center; overflow: hidden;
  background: radial-gradient(60% 50% at 30% 8%, rgba(140,245,255,0.14), transparent 60%), radial-gradient(55% 45% at 82% 14%, rgba(50,151,253,0.14), transparent 60%), var(--bg-page); }
.ms-hero canvas { z-index: 0; }
.ms-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 42% at 50% 50%, rgba(6,8,10,0.42) 0%, transparent 72%),
    radial-gradient(ellipse 72% 62% at 50% 46%, transparent 0%, rgba(6,8,10,0.18) 64%, rgba(6,8,10,0.55) 100%),
    linear-gradient(to bottom, rgba(6,8,10,0.30) 0%, transparent 22%, transparent 72%, var(--bg-page) 100%); }
.ms-hero .ms-rel { z-index: 2; }

.ms-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); }
.ms-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ms-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .ms-grid-3, .ms-grid-2 { grid-template-columns: 1fr; } }
.ms-section-head { max-width: 640px; margin-bottom: var(--space-7); }
.ms-section-head h2 { margin: 14px 0 12px; }
.ms-section-head p { color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-relaxed); margin: 0; }

/* Subpage hero */
.ms-subhero { position: relative; padding: calc(104px + var(--section-y)) 0 var(--section-y); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 0%, rgba(140,245,255,0.10), transparent 60%), var(--bg-page); }
.ms-subhero h1 { font-size: var(--fs-display); margin: 18px 0 0; }

/* =====================================================================
   CHROME — BBBtriple1 original: floating pill header w/ availability chip,
   clean mobile menu, slide-in contact drawer, dark on-brand footer.
   ===================================================================== */

/* Header pill */
.ms-header { position: sticky; top: 0; z-index: 60; padding: 16px var(--gutter) 0; margin-bottom: -78px; pointer-events: none; }
.ms-pill { pointer-events: auto; max-width: var(--container-wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 62px; padding: 8px 10px 8px 20px; border-radius: var(--radius-pill);
  background: var(--glass-dark); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  transition: border-color 0.5s var(--ms-ease), box-shadow 0.5s var(--ms-ease); }
.ms-header.is-scrolled .ms-pill { border-color: var(--border-accent); box-shadow: var(--shadow-md), var(--glow-sm); }
.ms-pill-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ms-pill-left img { height: 26px; flex-shrink: 0; }
.ms-availability { display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; }
.ms-availability .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(75,214,160,0.5); animation: msPulse 2.6s var(--ms-ease) infinite; }
@keyframes msPulse { 0% { box-shadow: 0 0 0 0 rgba(75,214,160,0.45); } 70% { box-shadow: 0 0 0 7px rgba(75,214,160,0); } 100% { box-shadow: 0 0 0 0 rgba(75,214,160,0); } }
@media (max-width: 1080px) { .ms-availability { display: none; } }
.ms-nav { display: flex; align-items: center; gap: 26px; }
.ms-nav a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); cursor: pointer; transition: color 0.2s var(--ms-ease); position: relative; }
.ms-nav a:hover { color: var(--text-strong); }
.ms-nav a.active { color: var(--text-strong); }
.ms-nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px; background: var(--accent); }
.ms-nav-links { display: contents; }
@media (max-width: 820px) { .ms-nav .ms-nav-links { display: none; } }

/* Mobile menu toggle (hidden on desktop) */
.ms-burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; cursor: pointer; position: relative; }
.ms-burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: var(--text-strong); border-radius: 2px; transition: transform 0.4s var(--ms-ease); }
.ms-burger span:nth-child(1) { top: 16px; } .ms-burger span:nth-child(2) { bottom: 16px; }
body.ms-menu-open .ms-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.ms-menu-open .ms-burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 820px) { .ms-burger { display: inline-flex; align-items: center; justify-content: center; } }

.ms-menu { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.ms-menu__scrim { position: absolute; inset: 0; background: rgba(6,8,10,0.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.4s var(--ms-ease); }
.ms-menu__panel { position: absolute; top: 84px; left: var(--gutter); right: var(--gutter); padding: 16px; border-radius: var(--radius-xl);
  background: var(--surface-raised); border: 1px solid var(--border-accent); box-shadow: var(--shadow-lg), var(--glow-sm);
  transform: translateY(-12px) scale(0.98); opacity: 0; visibility: hidden; transition: transform 0.45s var(--ms-ease), opacity 0.35s var(--ms-ease), visibility 0s linear 0.45s; }
body.ms-menu-open .ms-menu { pointer-events: auto; }
body.ms-menu-open .ms-menu__scrim { opacity: 1; }
body.ms-menu-open .ms-menu__panel { transform: none; opacity: 1; visibility: visible; transition: transform 0.5s var(--ms-ease), opacity 0.35s var(--ms-ease); }
.ms-menu__a { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius-md); color: var(--text-strong); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; }
.ms-menu__a.active, .ms-menu__a:hover { background: rgba(140,245,255,0.08); color: var(--accent); }

/* Footer — dark, on-brand */
.ms-footer { position: relative; background: linear-gradient(180deg, var(--ink-900), var(--ink-1000)); border-top: 1px solid var(--border-subtle); padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; overflow: hidden; }
.ms-footer__glow { position: absolute; left: 50%; top: -30%; width: 80%; height: 60%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(140,245,255,0.10), transparent 70%); pointer-events: none; }
.ms-footer__cta { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.0; letter-spacing: -0.04em; color: var(--text-strong); margin: 0 0 clamp(2.5rem,5vw,4rem); max-width: 16em; }
.ms-footer__cta .grad { color: var(--accent); }
.ms-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 36px; border-bottom: 1px solid var(--border-subtle); }
.ms-footer-col__eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px; }
.ms-footer-contact { display: flex; flex-direction: column; gap: 6px; }
.ms-footer-contact a { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); text-decoration: none; align-self: flex-start; transition: color 0.2s; }
.ms-footer-contact a:hover { color: var(--accent); }
.ms-footer-links { display: flex; flex-direction: column; gap: 4px; }
.ms-footer-links a { font-size: 15px; font-weight: 500; color: var(--text-muted); text-decoration: none; line-height: 1.8; align-self: flex-start; cursor: pointer; transition: color 0.2s; }
.ms-footer-links a:hover { color: var(--accent); }
.ms-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; }
.ms-footer-meta img { height: 24px; }
.ms-footer-meta span { font-size: 13px; color: var(--text-faint); }
@media (max-width: 920px) { .ms-footer-grid { grid-template-columns: 1fr 1fr; } .ms-footer-col--contact { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ms-footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* =====================================================================
   100x UPGRADE LAYER — content depth, motion, looks, UX
   ===================================================================== */

/* --- Global page polish: faint film grain + smooth color rendering --- */
.ms-page::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- Skip link (a11y) --- */
.ms-skip { position: fixed; top: -60px; left: 16px; z-index: 200; padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 0.9rem; transition: top 0.25s var(--ms-ease); }
.ms-skip:focus { top: 16px; color: var(--on-accent); }

/* --- Scroll progress bar --- */
.ms-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 120; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--cyan-300), var(--blue-400)); box-shadow: 0 0 12px rgba(140,245,255,0.6); will-change: transform; }

/* --- Back to top --- */
.ms-totop { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 80;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass-dark); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-accent); color: var(--accent); box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity 0.4s var(--ms-ease), transform 0.4s var(--ms-ease), box-shadow 0.3s var(--ms-ease); }
.ms-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ms-totop:hover { box-shadow: var(--shadow-md), var(--glow-md); transform: translateY(-2px); }

/* --- Animated nav indicator (already has .active::after; add hover sweep) --- */
.ms-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1.5px; background: var(--accent);
  transition: right 0.35s var(--ms-ease); }
.ms-nav a:hover::after { right: 0; }
.ms-nav a.active::after { right: 0; }

/* --- Cursor-follow spotlight (set --mx/--my in JS) --- */
.ms-spot { position: relative; isolation: isolate; }
.ms-spot::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ms-ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(140,245,255,0.14), transparent 60%); }
.ms-spot:hover::before { opacity: 1; }
.ms-spot > * { position: relative; z-index: 1; }

/* --- Line-by-line heading reveal --- */
.ms-lines { display: block; }
.ms-lines .ln { display: block; overflow: hidden; }
.ms-lines .ln > span { display: block; transform: translateY(110%); transition: transform 0.9s var(--ms-ease); transition-delay: var(--ld, 0ms); }
.ms-lines.is-in .ln > span { transform: none; }

/* --- Scroll cue --- */
.ms-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.ms-cue__rail { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
.ms-cue__rail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--accent); animation: msCue 1.9s var(--ms-ease) infinite; }
@keyframes msCue { 0% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(280%); opacity: 0; } }
@media (max-width: 640px) { .ms-cue { display: none; } }

/* --- Trust / keyword marquee --- */
.ms-marquee { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ms-marquee__row { display: flex; width: max-content; gap: 56px; animation: msMarquee 34s linear infinite; }
.ms-marquee:hover .ms-marquee__row { animation-play-state: paused; }
.ms-marquee__item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.45rem); color: var(--text-faint); white-space: nowrap; letter-spacing: -0.02em; }
.ms-marquee__item .dot { color: var(--accent); }
@keyframes msMarquee { to { transform: translateX(-50%); } }

/* --- Pillars (Strategie / Creativiteit / Technologie) --- */
.ms-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ms-pillar { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.ms-pillar__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent); }
.ms-pillar h3 { margin: 16px 0 10px; font-size: var(--fs-h3); }
.ms-pillar p { color: var(--text-muted); margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .ms-pillars { grid-template-columns: 1fr; } }

/* --- Bento services grid --- */
.ms-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: var(--space-4); }
.ms-bento .cell { display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-card); overflow: hidden;
  transition: border-color 0.4s var(--ms-ease), box-shadow 0.4s var(--ms-ease), transform 0.4s var(--ms-ease); }
.ms-bento .cell:hover { border-color: var(--border-accent); box-shadow: var(--glow-sm); transform: translateY(-3px); }
.ms-bento .cell--lg { grid-column: span 3; grid-row: span 2; }
.ms-bento .cell--md { grid-column: span 3; }
.ms-bento .cell--sm { grid-column: span 2; }
.ms-bento .cell__ico { display: inline-flex; width: 50px; height: 50px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(140,245,255,0.10); border: 1px solid var(--border-accent); margin-bottom: 18px; }
.ms-bento .cell h3 { margin: 0 0 10px; }
.ms-bento .cell p { color: var(--text-muted); margin: 0; line-height: 1.6; }
.ms-bento .cell__list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-bento .cell__list li { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); }
.ms-bento .cell--lg { background: radial-gradient(120% 90% at 0% 0%, rgba(50,151,253,0.10), transparent 55%), var(--surface-card); }
@media (max-width: 900px) { .ms-bento { grid-template-columns: 1fr; } .ms-bento .cell--lg, .ms-bento .cell--md, .ms-bento .cell--sm { grid-column: 1 / -1; grid-row: auto; } }

/* --- Stats band --- */
.ms-statband { border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); padding: clamp(2rem, 5vw, 3.5rem);
  background: radial-gradient(90% 140% at 50% 0%, rgba(140,245,255,0.06), transparent 60%), var(--surface-inset);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ms-stat__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.ms-stat__l { margin-top: 10px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.ms-stat + .ms-stat { border-left: 1px solid var(--border-subtle); padding-left: var(--space-5); }
@media (max-width: 900px) { .ms-statband { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
  .ms-stat + .ms-stat { border-left: none; padding-left: 0; } }

/* --- Pricing / packages --- */
.ms-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.ms-price { display: flex; flex-direction: column; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-card); transition: transform 0.4s var(--ms-ease), box-shadow 0.4s var(--ms-ease), border-color 0.4s var(--ms-ease); }
.ms-price:hover { transform: translateY(-4px); border-color: var(--border-accent); box-shadow: var(--glow-sm); }
.ms-price--feat { border-color: var(--border-accent); box-shadow: var(--glow-ring); background: linear-gradient(180deg, rgba(140,245,255,0.05), transparent), var(--surface-card); }
.ms-price__tag { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-accent); margin-bottom: 18px; }
.ms-price h3 { margin: 0 0 6px; font-size: var(--fs-h3); }
.ms-price__sub { color: var(--text-muted); font-size: 0.92rem; margin: 0 0 22px; min-height: 2.6em; }
.ms-price__amt { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--text-strong); font-size: 2.4rem; line-height: 1; }
.ms-price__amt small { font-size: 0.95rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.ms-price__feats { list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-price__feats li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-body); font-size: 0.95rem; line-height: 1.45; }
.ms-price__feats svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.ms-price__cta { margin-top: auto; }
@media (max-width: 920px) { .ms-pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* --- Sub-brands --- */
.ms-brands { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.ms-brand { position: relative; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border-subtle); background: var(--surface-card); transition: border-color 0.4s var(--ms-ease), box-shadow 0.4s var(--ms-ease); }
.ms-brand:hover { border-color: var(--border-accent); box-shadow: var(--glow-sm); }
.ms-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; color: var(--text-strong); margin: 0 0 6px; }
.ms-brand__role { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ms-brand p { color: var(--text-muted); margin: 16px 0 0; line-height: 1.6; max-width: 34ch; }
@media (max-width: 760px) { .ms-brands { grid-template-columns: 1fr; } }

/* Wijzr AI-lab — clean, structured brand card */
.ms-wijzr { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle);
  background: var(--surface-card); box-shadow: var(--shadow-md); padding: clamp(1.75rem, 4vw, 3rem);
  transition: border-color var(--dur-base) var(--ease-out); }
.ms-wijzr:hover { border-color: var(--border-strong); }
.ms-wijzr__head { display: flex; align-items: center; gap: 18px; }
.ms-wijzr__mark { flex-shrink: 0; display: grid; place-items: center; width: clamp(56px, 8vw, 72px); height: clamp(56px, 8vw, 72px);
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: rgba(140,245,255,0.06); }
.ms-wijzr__mark img { width: 58%; height: auto; display: block; }
.ms-wijzr__id { display: flex; flex-direction: column; gap: 4px; margin-right: auto; min-width: 0; }
.ms-wijzr__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1; color: var(--text-strong); }
.ms-wijzr__role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ms-wijzr__tag { align-self: flex-start; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-accent); }
.ms-wijzr__desc { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; max-width: 60ch;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--border-subtle); }
.ms-wijzr__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.ms-wijzr__list li { display: flex; align-items: center; gap: 11px; font-size: 0.95rem; color: var(--text-body); }
.ms-wijzr__list li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); }
@media (max-width: 620px) {
  .ms-wijzr__head { flex-wrap: wrap; }
  .ms-wijzr__list { grid-template-columns: 1fr; }
}

/* --- Project cards (richer hover overlay + tilt) --- */
.ms-proj { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle);
  background: var(--surface-card); cursor: pointer; transform-style: preserve-3d;
  transition: border-color 0.4s var(--ms-ease), box-shadow 0.4s var(--ms-ease), transform 0.25s var(--ms-ease); }
.ms-proj:hover { border-color: var(--border-accent); box-shadow: var(--glow-md); }
.ms-proj__media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.ms-proj__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ms-ease); }
.ms-proj:hover .ms-proj__media img { transform: scale(1.06); }
.ms-proj__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px;
  background: linear-gradient(0deg, rgba(6,8,10,0.86) 0%, rgba(6,8,10,0.1) 55%, transparent 80%); opacity: 0; transition: opacity 0.4s var(--ms-ease); }
.ms-proj:hover .ms-proj__overlay { opacity: 1; }
.ms-proj__result { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--cyan-200); }
.ms-proj__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.ms-proj__bar strong { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); }
.ms-proj__bar .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }

/* --- Section eyebrow centered helper --- */
.ms-head-center { text-align: center; max-width: 680px; margin: 0 auto var(--space-7); }
.ms-head-center p { color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-relaxed); margin: 12px 0 0; }

/* --- Reduced motion: kill loops --- */
@media (prefers-reduced-motion: reduce) {
  .ms-marquee__row { animation: none; }
  .ms-cue__rail::after { animation: none; }
  .ms-lines .ln > span { transform: none; }
}

/* =====================================================================
   ONDERHOUD (maintenance) page
   ===================================================================== */
/* Why: zonder vs met onderhoud */
.ms-compare-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); }
.ms-compare-card__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.ms-compare-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ms-compare-card li { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; }
.ms-compare-card li svg { flex-shrink: 0; }
.ms-compare-card--off { background: linear-gradient(180deg, rgba(255,107,107,0.05), transparent), var(--surface-card); }
.ms-compare-card--off .ms-compare-card__label { color: var(--danger); }
.ms-compare-card--off li svg { color: var(--danger); }
.ms-compare-card--off li span { color: var(--text-muted); }
.ms-compare-card--on { border-color: var(--border-accent); box-shadow: var(--glow-sm); background: linear-gradient(180deg, rgba(140,245,255,0.05), transparent), var(--surface-card); }
.ms-compare-card--on .ms-compare-card__label { color: var(--accent); }
.ms-compare-card--on li svg { color: var(--accent); }
.ms-compare-card--on li span { color: var(--text-body); }

/* Inbegrepen: vier categorie-cards */
.ms-incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.ms-incl__card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card);
  transition: border-color 0.4s var(--ms-ease), box-shadow 0.4s var(--ms-ease), transform 0.4s var(--ms-ease); }
.ms-incl__card:hover { border-color: var(--border-accent); box-shadow: var(--glow-sm); transform: translateY(-3px); }
.ms-incl__ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(140,245,255,0.10); border: 1px solid var(--border-accent); margin-bottom: 16px; }
.ms-incl__card h3 { font-size: var(--fs-h4); margin: 0 0 14px; }
.ms-incl__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ms-incl__card li { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.95rem; }
.ms-incl__card li svg { flex-shrink: 0; color: var(--accent); }

/* Werkwijze: genummerde stappen */
.ms-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.ms-step { position: relative; padding: var(--space-7) var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); }
.ms-step__n { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); letter-spacing: -0.03em; margin-bottom: 16px; }
.ms-step h3 { font-size: var(--fs-h4); margin: 0 0 10px; }
.ms-step p { color: var(--text-muted); margin: 0; line-height: 1.6; }
@media (max-width: 760px) { .ms-steps { grid-template-columns: 1fr; } }

/* Resultaat: benefits band */
.ms-benefits { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--radius-xl); border: 1px solid var(--border-subtle);
  background: radial-gradient(110% 130% at 0% 0%, rgba(140,245,255,0.06), transparent 55%), var(--surface-inset); }
.ms-benefits__head h2 { margin: 12px 0 12px; }
.ms-benefits__head p { color: var(--text-muted); margin: 0; line-height: 1.65; max-width: 42ch; }
.ms-benefits__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ms-benefits__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text-strong); letter-spacing: -0.02em; }
.ms-benefits__list li svg { flex-shrink: 0; }
@media (max-width: 760px) { .ms-benefits { grid-template-columns: 1fr; gap: var(--space-6); } }

/* =====================================================================
   Cursor-follow marquee label + scroll parallax (mrboost-inspired)
   ===================================================================== */
.ms-cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; will-change: transform; }
.ms-cursor__card { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center;
  max-width: 230px; overflow: hidden; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-pill);
  box-shadow: var(--glow-md); clip-path: inset(50% 0 round 999px); opacity: 0;
  transition: clip-path 0.45s var(--ms-ease), opacity 0.3s var(--ms-ease); }
.ms-cursor[data-status="active"] .ms-cursor__card { clip-path: inset(0 round 999px); opacity: 1; }
.ms-cursor__txt { white-space: nowrap; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 9px 14px; animation: msCursorScroll 4.5s linear infinite; }
.ms-cursor__txt.is-dup { position: absolute; left: 100%; top: 0; }
@keyframes msCursorScroll { to { transform: translateX(-100%); } }
@media (hover: none), (pointer: coarse) { .ms-cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .ms-cursor { display: none !important; } }

/* Parallax wrapper for project media (taller than its frame so the drift never reveals edges) */
.ms-proj__parallax { position: absolute; inset: -13% 0; will-change: transform; }