/* ============================================================
   DESIGN SYSTEM PORT — Refero "AI for Business" (dayos.com)
   Brutalist-editorial · light theme · flat (zero shadow/gradient)
   ============================================================ */

:root {
  color-scheme: light; /* voorkomt dark-mode forcing door in-app browsers (Telegram) */

  /* --- palette (uit Refero spec, 1:1) --- */
  --canvas:  #e5e5e5;  /* page background — NOOIT pure white bg */
  --card:    #ffffff;  /* card surface */
  --ink:     #000000;  /* primary text / filled blocks */
  --mist:    #f3f3f3;  /* secondary surface, nav pill alt */
  --ash:     #c6c6c6;  /* hairlines, borders, disabled */
  --smoke:   #979797;  /* secondary text, meta labels */
  --slate:   #444444;  /* secondary body, nav labels */
  --graphite:#2f2f2f;  /* deep code blocks */
  --mint:    #d1ffca;  /* accent — tags, link bgs (sparingly) */
  --voltage: #fff100;  /* accent — email highlights, micro dots */
  --error:   #b3261e;  /* form foutmelding */
  --error-bg:#ffe4e1;  /* form foutmelding achtergrond */

  /* --- typography --- */
  --font-display: 'Barlow Condensed', 'Anton', sans-serif;
  --font-body:    'Barlow', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Geist Mono', monospace;

  /* display: condensed 700, uppercase, lh .9, ls -.03em */
  --display-xl:  clamp(64px, 9vw, 130px);
  --display:     clamp(48px, 6vw, 80px);
  --heading-lg:  clamp(36px, 4vw, 48px);
  --heading:     40px;
  --heading-sm:  28px;
  --subheading-lg: 20px;
  --subheading:  18px;
  --body:        16px;
  --body-sm:     14px;
  --caption:     12px;

  --lh-display: .90;
  --lh-heading: 1.10;
  --ls-display: -.03em;
  --ls-heading: -.02em;

  /* --- shape (radius scale is large & deliberate) --- */
  --r-tag:  64px;   /* fully pill */
  --r-nav:  48px;   /* floating nav pill */
  --r-card: 32px;   /* 24-32 cards */
  --r-card-lg: 64px;/* top-arc / large cards */
  --r-btn:  8px;    /* filled dark CTA */
  --r-btn-ghost: 4px;
  --r-input: 8px;

  /* --- layout --- */
  --maxw: 1200px;
  --nav-h: 8rem;
  --section-gap: 80px;
  --elem-gap: 24px;
  --card-pad: 24px;
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.25;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }

::selection { background: var(--voltage); color: var(--ink); }

/* Alleen wanneer JS draait starten reveals verborgen — voorkomt flash zonder JS */
html.js [data-reveal] { opacity: 0; }
html.js .split-char { opacity: 0; }
html.js .logo-part { opacity: 0; }

/* ============ SCROLL-PROGRESS ============ */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 3px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress::after {
  content: ''; display: block; height: 100%; width: 0%;
  background: var(--ink);
}

/* ============ LOGO-STAGE (hero kubus) ============ */
.logo-stage { position: relative; }
.scan-line {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: var(--voltage);
  top: 0;
  opacity: 0;
  box-shadow: 0 0 12px rgba(255,241,0,.8);
}

/* ============ NAV LINK UNDERLINE ============ */
.nav-links a:not(.btn-dark) {
  position: relative;
}
.nav-links a:not(.btn-dark)::after {
  content: ''; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.625,.05,0,1);
}
.nav-links a:not(.btn-dark):hover::after,
.nav-links a:not(.btn-dark):focus-visible::after { transform: scaleX(1); }

/* ============ CARD HOVER ============ */
.card, .card-dark {
  transition: transform .3s cubic-bezier(.625,.05,0,1), border-color .3s;
}
.card:hover { transform: translateY(-4px); }
.card-dark:hover { transform: translateY(-4px); }

/* ============ MARQUEE PAUSE ON HOVER ============ */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============ WHATSAPP-KNOP (rechtsonder) ============ */
.wa-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
  transition: transform .25s cubic-bezier(.625,.05,0,1), background .2s;
  opacity: 0; transform: scale(.6);
}
.wa-btn.show { opacity: 1; transform: scale(1); }
.wa-btn:hover { background: #1fb959; transform: scale(1.06); }
.wa-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.wa-label {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--ash); border-radius: 12px;
  padding: 10px 14px; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.wa-label::after {
  content: ''; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: var(--card); border-right: 1px solid var(--ash); border-top: 1px solid var(--ash);
}
.wa-label.hide { display: none; }

@media (max-width: 600px) {
  .wa-btn { right: 14px; bottom: 14px; width: 56px; height: 56px; }
  .wa-label, .wa-label::after {
    /* mobiel: geen zwevend label — de knop spreekt voor zich,
       en een tooltip zou altijd half over content komen */
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 601px) {
  .wa-label, .wa-label.hide { display: block; }
  .wa-btn { opacity: 1; transform: none; }
}

/* ============ BUTTONS ============ */
.btn-dark, .btn-ghost { will-change: transform; }

/* ============ TYPE SYSTEM ============ */
.display-xl, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.display-xl { font-size: var(--display-xl); }
.display    { font-size: var(--display); }
.heading-lg { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: var(--heading-lg); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.heading    { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: var(--heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.heading-sm { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: var(--heading-sm); line-height: 1.3; letter-spacing: -.03em; }
.subheading-lg { font-size: var(--subheading-lg); line-height: 1.2; }
.subheading { font-size: var(--subheading); line-height: 1.33; }
.body-sm    { font-size: var(--body-sm); line-height: 1.3; letter-spacing: -.011em; }
.caption    { font-family: var(--font-mono); font-size: var(--caption); line-height: 1.6; letter-spacing: -.03em; }

.meta { color: var(--smoke); }
.muted { color: var(--slate); }

/* ============ COMPONENTS ============ */
/* Filled Dark Button — primaire CTA */
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: -.01em;
  border: 0; border-radius: var(--r-btn);
  padding: 16px 24px;
  transition: transform .2s cubic-bezier(.625,.05,0,1), background .2s;
}
.btn-dark:hover { background: var(--graphite); transform: translateY(-1px); }
.btn-dark:disabled { opacity: .6; cursor: wait; transform: none; }

/* Ghost Border Button */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--slate);
  font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: -.01em;
  border: 1.5px solid var(--slate); border-radius: var(--r-btn-ghost);
  padding: 14px 16px;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Text Link Button */
.btn-text {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; color: var(--ink);
  font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: -.01em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  cursor: pointer;
}
.btn-text:hover { border-bottom-color: var(--ink); }

/* Nav */
.nav-pill {
  background: var(--card);
  border-radius: var(--r-nav);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 24px;
}

/* Cards */
.card { background: var(--card); border-radius: var(--r-card); padding: var(--card-pad); }
.card-lg { border-radius: var(--r-card-lg); }
.card-dark { background: var(--ink); color: #fff; border-radius: var(--r-card); padding: var(--card-pad); }

/* Mint Tag */
.tag {
  display: inline-flex; align-items: center;
  background: var(--mint); color: var(--ink);
  border-radius: var(--r-tag);
  padding: 8px 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
}

/* Voltage Highlight */
.hl { background: var(--voltage); color: var(--ink); padding: 0 4px; }
.hl-underline { box-shadow: inset 0 -6px 0 var(--voltage); }

/* ============ FORMULIER ============ */
.form {
  display: grid; gap: 16px;
  text-align: left;
  background: var(--card);
  border-radius: var(--r-card);
  padding: 32px;
  max-width: 560px;
  margin-inline: auto;
}
.form .field { display: grid; gap: 6px; }
.form label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: -.03em;
  color: var(--slate);
}
.form input, .form textarea {
  width: 100%;
  background: var(--mist);
  border: 1px solid var(--ash);
  border-radius: var(--r-input);
  padding: 12px 14px;
  color: var(--ink);
  font-size: 16px;
  transition: border-color .15s, background .15s;
}
.form input:focus, .form textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--card);
}
.form .field-error input, .form .field-error textarea { border-color: var(--error); }
.form .error-msg { display: none; font-size: 13px; color: var(--error); }
.form .field-error .error-msg { display: block; }
.form-status { display: none; border-radius: var(--r-input); padding: 14px 16px; font-size: 15px; }
.form-status.ok { display: block; background: var(--mint); color: var(--ink); }
.form-status.err { display: block; background: var(--error-bg); color: var(--error); }
.form small { color: var(--smoke); font-size: 12px; }

/* ============ MODAL ============ */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
}
.modal.open { display: flex; }
.modal-box {
  background: var(--card); color: var(--ink);
  border-radius: var(--r-card);
  padding: 32px; max-width: 560px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  position: relative;
}
.modal-box h3 { margin-bottom: 12px; }
.modal-box p, .modal-box li { font-size: 15px; line-height: 1.5; color: var(--slate); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--mist); border: 0; border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  color: var(--slate);
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--ink); color: #fff; }

/* ============ MARQUEE ============ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { display: inline-block; animation: marquee 30s linear infinite; }

/* ============ LAYOUT ============ */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: var(--section-gap); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--elem-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--elem-gap); }
.grid-2 > *, .grid-3 > * { min-width: 0; }

.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .footer-row { gap: 10px; justify-content: center; text-align: center; }
  footer p.caption, footer a.caption { font-size: 11px; }
  .footer-row > div { justify-content: center; }
  footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ TOUCH / SAFE-AREA ============ */
/* Nav-links: voldoende raakoppervlak (ook op tablet waar ze zichtbaar zijn) */
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 8px; }
.nav-links .btn-dark { min-height: 44px; }

/* Knoppen altijd >= 44px */
.btn-dark, .btn-ghost { min-height: 44px; }

/* Footer-links: groter raakoppervlak */
footer a[data-modal] {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px;
}

/* Brand-link: groter raakoppervlak zonder visueel groter te lijken */
.brand { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 6px; }

/* Modal-close: 44px touch */
.modal-close { width: 44px; height: 44px; }

/* Inputs: min 48px touch */
.form input, .form textarea { min-height: 48px; }

/* Safe-area (iPhone notch / home-indicator) */
.nav { padding-top: env(safe-area-inset-top, 0px); }
footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.wa-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); right: calc(env(safe-area-inset-right, 0px) + 14px); }

/* ============ MOBIEL MENU ============ */
.nav-toggle {
  display: none;
  background: var(--mist); border: 1px solid var(--ash); border-radius: 12px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ink);
  transition: transform .2s, opacity .2s;
}
.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); }

.nav-links {
  display: flex; align-items: center; gap: 24px;
}

@media (max-width: 900px) {
  :root { --nav-h: 5rem; }
  .nav-toggle { display: inline-flex; }
  .nav-pill { flex-wrap: wrap; padding: 12px 16px; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ash);
    margin-top: 12px;
  }
  .nav-links a { padding: 10px 8px; font-size: 15px; }
  .nav-links .btn-dark { width: 100%; justify-content: center; }
  .nav-pill.open .nav-links { display: flex; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  :root { --section-gap: 56px; }
  .display-xl { font-size: 44px; }
  .display { font-size: 38px; }
  .heading { font-size: 28px; }
  .form { padding: 24px; }
  /* 3D render: geen perspective-vervorming op mobiel */
  .render > div { transform: none !important; min-height: 260px; }
  /* kubus past in 320px-schermen */
  .render .render-cube { width: 240px !important; height: 240px !important; }
}

/* ============ MOTION KILL SWITCH ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js [data-reveal], .split-char, .logo-part { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee-track { animation: none; }
}