/* ── Reset ──────────────────────────────────────────────────── */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,abbr,em,img,
ins,kbd,q,s,small,strike,strong,sub,sup,b,u,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,figure,figcaption,footer,header,menu,nav,output,section,
summary,time,mark,audio,video {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;
  vertical-align: baseline;
}
*, *::before, *::after { box-sizing: border-box; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ── Base ───────────────────────────────────────────────────── */
html { font-size: 24pt; scroll-behavior: smooth; scroll-padding-top: 5.25rem; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: #1D1D1F;
  background: #FFFFFF;
  line-height: 1;
  min-height: 100vh;
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-text-size-adjust: none;
}

a { color: inherit; text-decoration: underline; transition: color 0.25s ease; }
a:hover { text-decoration: none; }
strong { color: inherit; font-weight: bolder; }
em { font-style: italic; }
img { max-width: 100%; display: block; }

/* ── Background orbs ────────────────────────────────────────── */
.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-orb-wrap { position: absolute; will-change: transform; }

.bg-orb {
  border-radius: 50%;
  filter: blur(100px);
}

/* Links, boven */
.bg-orb-wrap--a { top: 5vh; left: -12vw; }
.bg-orb--a {
  width: 50vw; height: 50vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.17) 0%, transparent 70%);
  animation: orb-float-a 22s ease-in-out infinite;
}

/* Rechts, upper-mid */
.bg-orb-wrap--b { top: 90vh; right: -10vw; }
.bg-orb--b {
  width: 34vw; height: 34vw; max-width: 440px; max-height: 440px;
  background: radial-gradient(circle, rgba(100, 220, 190, 0.13) 0%, transparent 70%);
  animation: orb-float-b 30s ease-in-out infinite;
  animation-delay: -6s;
}

/* Links, midden */
.bg-orb-wrap--c { top: 180vh; left: -14vw; }
.bg-orb--c {
  width: 55vw; height: 55vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(170, 140, 255, 0.11) 0%, transparent 70%);
  animation: orb-float-c 28s ease-in-out infinite;
  animation-delay: -14s;
}

/* Rechts, lower-mid */
.bg-orb-wrap--d { top: 270vh; right: -8vw; }
.bg-orb--d {
  width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.15) 0%, transparent 70%);
  animation: orb-float-a 18s ease-in-out infinite;
  animation-delay: -9s;
}

/* Links, onder */
.bg-orb-wrap--e { top: 360vh; left: -10vw; }
.bg-orb--e {
  width: 44vw; height: 44vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, rgba(100, 220, 190, 0.12) 0%, transparent 70%);
  animation: orb-float-b 24s ease-in-out infinite;
  animation-delay: -3s;
}

/* Groot, intensief, onderaan */
.bg-orb-wrap--f { top: 460vh; left: 5vw; }
.bg-orb--f {
  width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.28) 0%, rgba(100, 220, 190, 0.18) 40%, transparent 70%);
  animation: orb-float-c 36s ease-in-out infinite;
  animation-delay: -7s;
}

/* Rechts, midden */
.bg-orb-wrap--g { top: 130vh; right: -12vw; }
.bg-orb--g {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(90, 170, 255, 0.14) 0%, transparent 70%);
  animation: orb-float-b 26s ease-in-out infinite;
  animation-delay: -11s;
}

/* ── Voorgrond orbs ──────────────────────────────────────────── */
.fg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orb-wrap--fg {
  position: absolute;
  top: 0;
  will-change: transform;
}
.bg-orb-wrap--fg1 { left: 16%; }
.bg-orb-wrap--fg2 { left: 50%; }
.bg-orb-wrap--fg3 { left: 76%; }

.bg-orb--fg { border-radius: 50%; }
.bg-orb--fg1 {
  width: 90px; height: 90px;
  background: radial-gradient(circle, rgba(110, 185, 255, 0.42) 0%, transparent 70%);
  filter: blur(20px);
}
.bg-orb--fg2 {
  width: 65px; height: 65px;
  background: radial-gradient(circle, rgba(100, 220, 185, 0.38) 0%, transparent 70%);
  filter: blur(16px);
}
.bg-orb--fg3 {
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(170, 145, 255, 0.32) 0%, transparent 70%);
  filter: blur(24px);
}

@keyframes orb-float-a {
  0%,100% { transform: translate(0,0) scale(1); }
  30%     { transform: translate(35px, 45px) scale(1.04); }
  65%     { transform: translate(-20px, 25px) scale(0.97); }
}

@keyframes orb-float-b {
  0%,100% { transform: translate(0,0) scale(1); }
  35%     { transform: translate(-45px, 35px) scale(1.05); }
  70%     { transform: translate(25px, -25px) scale(0.96); }
}

@keyframes orb-float-c {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(50px, -40px) scale(1.03); }
  75%     { transform: translate(-25px, 30px) scale(0.98); }
}

/* ── Nav ────────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  height: 3rem;
}

.nav-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 5rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .logo {
  display: block;
  text-decoration: none;
  line-height: 0;
}

nav .logo img {
  height: 1.75rem;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

nav .nav-contact {
  font-size: 0.583em;
  font-weight: 400;
  color: #1D1D1F;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  height: auto;
  display: inline-block;
  min-width: 2.6rem;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
nav .nav-contact:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .nav-links { gap: 0.75rem; }
}

nav .nav-back {
  font-size: 0.583em;
  font-weight: 400;
  color: #1D1D1F;
  text-decoration: none;
}
nav .nav-back:hover { text-decoration: underline; }

/* ── Wrapper & Main ─────────────────────────────────────────── */
.site-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  padding: 2.25rem 0 0.75rem;
  padding-top: calc(2.25rem + 3rem);
}

.site-main {
  background: transparent;
  width: 100%;
}

/* ── Inner content container ────────────────────────────────── */
.inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 5rem;
  position: relative;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: #1D1D1F;
  color: #FFFFFF;
  padding: 0;
  width: calc(38rem / 9);
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-family: inherit;
  font-size: 0.625em;
  font-weight: 400;
  text-decoration: none;
  border-radius: 0;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  transition: color 0.25s ease, background-color 0.25s ease;
  transform-origin: top center;
  opacity: 0;
}
button.btn { font-size: 0.625em; }

.btn--2 { width: calc(38rem * 2 / 9); }
.btn--3 { width: calc(38rem / 3); }

/* ── Dividers ───────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid #1D1D1F;
  display: block;
  width: 100%;
}

/* ── Section spacing ────────────────────────────────────────── */
section { position: relative; }
section + section { padding-top: 4rem; }

/* ── Scroll animaties ───────────────────────────────────────── */
/* Text elements: fast fade-out, moderate fade-in */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
[data-reveal].visible {
  opacity: 1;
  transition: opacity 0.6s ease-out 0.12s;
}
[data-reveal][data-delay="1"].visible { transition-delay: 0.22s; }
[data-reveal][data-delay="2"].visible { transition-delay: 0.29s; }
[data-reveal][data-delay="3"].visible { transition-delay: 0.36s; }
[data-reveal][data-delay="4"].visible { transition-delay: 0.43s; }

/* Image/visual elements: fast fade-out, slow fade-in, starts later */
[data-reveal-img] {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
[data-reveal-img].visible {
  opacity: 1;
  transition: opacity 1.2s ease-out 0.3s;
}

/* ── Button flip-in animatie (scharnier aan bovenkant) ──────── */
@keyframes btn-flipin {
  from {
    transform: perspective(500px) rotateX(-90deg);
    opacity: 0;
  }
  to {
    transform: perspective(500px) rotateX(0deg);
    opacity: 1;
  }
}

[data-reveal].visible .btn {
  animation: btn-flipin 0.65s cubic-bezier(0, 0, 0.2, 1) 0.25s both;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-img] { opacity: 1; transition: none; }
  .btn { opacity: 1; }
  [data-reveal].visible .btn { animation: none; }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: #f5f5f7;
  padding: 0.825rem 0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.07), 0 -1px 4px rgba(0,0,0,0.05);
}

.footer-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.footer-logo {
  display: block;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}

.footer-logo img {
  height: 1.25rem;
  width: auto;
  display: block;
  opacity: 0.7;
}

.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  justify-content: flex-end;
}

.footer-meta li {
  font-size: 0.45em;
  color: #6e6e73;
  white-space: nowrap;
}

.footer-meta a {
  color: inherit;
  text-decoration: none;
}

.footer-meta a:hover {
  color: #1D1D1F;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 736px) {
  html { font-size: 18pt; }
  section + section { padding-top: 2.5rem; }
}

@media (max-width: 480px) {
  html { font-size: 15pt; }
  .inner, .nav-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .footer-inner { padding-left: 1.5rem; padding-right: 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .footer-meta { justify-content: flex-start; }
}

@media (max-width: 360px) {
  html { font-size: 13pt; }
}