/* ImageCapture.online – rootpagina's (index.html en 404.html)
   Kleuren komen uit het marketingbeeld: bandgroen #048743, fotogroen #0c301e, schermmint #acd8c2.
   Geen externe fonts of scripts: de pagina werkt onder de strikte CSP in web.config. */

:root {
  --green: #048743;
  --green-hover: #0a9a50;
  --green-deep: #0c301e;
  --green-ink: #082216;
  --mint: #acd8c2;
  --mint-soft: #d4ebdf;
  --white: #ffffff;
  --font: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --panel-w: clamp(420px, 46vw, 660px);
  --slant: 64px;
}

* { box-sizing: border-box; }

/* Lettergrootte schaalt mee met breedte én hoogte van het venster (14–17 px),
   zodat de pagina ook op 1080p met 125 % Windows-schaling zonder scrollbalk past. */
html { height: 100%; font-size: clamp(14px, 0.55vw + 0.9vh, 17px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
  background: var(--green-ink);
  -webkit-font-smoothing: antialiased;
}

/* Beeld van marketing: vult op desktop het hele scherm achter het paneel. */
.visual {
  position: fixed;
  inset: 0;
  margin: 0;
  z-index: 0;
  background: var(--green-deep);
}

.visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 0;   /* logo en band blijven altijd in beeld; de onderkant wordt bijgesneden */
}

/* Tekstpaneel met schuine rechterrand, dezelfde hoek als de band in het beeld. */
.panel {
  position: relative;
  z-index: 1;
  width: var(--panel-w);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3.5vh, 56px) calc(clamp(28px, 4vw, 64px) + var(--slant)) clamp(20px, 3.5vh, 56px) clamp(28px, 4vw, 64px);
  background: var(--green-ink);
  clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
  overflow: hidden;
}

.content { max-width: 34em; margin: auto 0; }

h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.lead {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--mint-soft);
}

.content p { margin: 0 0 1rem; }

.actions { margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }

.button {
  display: inline-block;
  padding: 0.8em 1.5em;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}

.button:hover { background: var(--green-hover); }

.link {
  color: var(--mint-soft);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.link:hover { color: var(--white); }

/* Engelse versie: visueel ondergeschikt, gescheiden door één lijn. */
.en {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.95rem;
  color: var(--mint-soft);
}

.en p { margin: 0; }

.foot {
  margin-top: 0;
  padding-top: 2rem;
  font-size: 0.85rem;
  color: var(--mint);
}

.foot p { margin: 0; }

.foot a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

.foot a:hover { color: var(--white); }

/* Eén zeshoek uit het beeld, als stille echo in de hoek van het paneel. */
.hex {
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 260px;
  height: 260px;
  color: var(--white);
  opacity: 0.1;
  pointer-events: none;
}

a:focus-visible, .button:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
}

/* Smal scherm: beeld als banner met schuine onderrand, tekst eronder. */
@media (max-width: 760px) {
  .visual {
    position: static;
    height: 44vh;
    min-height: 260px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
  }

  .visual img { object-position: 100% 0; }

  .panel {
    width: 100%;
    min-height: 0;
    padding: 24px 24px 32px;
    clip-path: none;
  }

  .hex { width: 180px; height: 180px; right: -50px; bottom: -60px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 120ms ease-out; }
}