/* PAGE */
.page{
  padding-top: 20px;
  opacity:0;
  transition: opacity .6s ease, transform .6s ease;
}
.page[data-ready="true"]{
  opacity:1;
}
/* HERO */
.hero{
  position:relative;
  min-height: calc(100vh - 76px);
  display:flex;
  align-items:stretch;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 600px at 18% 88%, rgba(168, 120, 255, .35), transparent 60%),
    radial-gradient(800px 520px at 10% 92%, rgba(255, 140, 180, .18), transparent 62%),
    radial-gradient(900px 700px at 78% 18%, rgba(120, 200, 255, .18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items:center;
  padding: 46px 0 36px;
}
.hero-eyebrow{
  letter-spacing: .28em;
  font-size: 12px;
  color: rgba(12,17,23,.55);
  font-weight:600;
  margin-bottom: 18px;
}
.hero-title{
  margin:0 0 18px;
  font-size: clamp(42px, 5vw, 84px);
  line-height: .95;
  letter-spacing: -0.04em;
}
.hero-italic{
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-text{
  margin: 0 0 22px;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.hero-cta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
}
.btn-primary{
  background: rgba(32,86,255,.92);
  color:white;
  box-shadow: 0 12px 34px rgba(32,86,255,.22);
}
.btn-ghost{
  color: rgba(12,17,23,.88);
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
}
/* ============================================================
   HERO RIGHT CARD - CHIRURGISCHE UPDATE (WIT NAAR ZWART)
   ============================================================ */
.hero-right {
  position: relative;
  height: min(620px, 70vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo {
  position: relative;
  width: min(420px, 42vw);
  height: 100%;
  border-radius: 28px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  isolation: isolate;
}
.hero-years-num {
  font-size: clamp(120px, 18vw, 260px);
  line-height: .85;
  letter-spacing: -0.06em;
  font-weight: 700;
  color: #0c1117 !important;
  -webkit-text-stroke: 0px transparent !important;
  text-shadow: none !important;
  transition: color 0.5s ease;
}
.hero-years-label {
  margin-top: 10px;
  font-size: clamp(14px, 2.2vw, 30px);
  letter-spacing: .35em;
  text-transform: lowercase;
  color: rgba(12, 17, 23, 0.6) !important;
  transition: color 0.5s ease;
}

.hero-photo .hero-years-num {
  display: inline-block;
  transform: translateX(-4%);
}
.hero-years {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
/* SECTIONS */
.section{
  padding: 90px 0;
  background: #eef2f6;
  border-top: 1px solid rgba(12,17,23,.05);
}
/* FOOTER */
.site-footer{
  padding: 28px 0;
  background: #eef2f6;
  border-top: 1px solid rgba(12,17,23,.05);
}
.footer-inner{ color: rgba(12,17,23,.65); font-size: 14px; }
/* INTRO ANIMATION */
#intro{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background: #0b1117;
}
.intro-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
}
.intro-logo{
  display:block;
  width:auto;
  height:auto;
  transform: translateZ(0);
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.35));
}
.intro-logo--big{ width: min(44vw, 520px); }
.intro-logo--tile{ width: 64px; opacity:.95; }
.intro-stage--1{ opacity:1; }
#intro.is-2 .intro-stage--1{ opacity:0; transition: opacity .35s ease; }
#intro.is-2 .intro-stage--2{ opacity:1; transition: opacity .35s ease; }
#intro.is-3 .intro-stage--2{ opacity:0; transition: opacity .35s ease; }
#intro.is-3 .intro-stage--3{ opacity:1; transition: opacity .35s ease; }
.intro-mask{
  width: min(52vw, 620px);
  aspect-ratio: 1 / 1;
  border-radius: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  transform: translateY(10px) scale(.92);
  animation: introMaskIn .65s ease forwards;
}
@keyframes introMaskIn{
  to{ transform: translateY(0) scale(1); }
}
.intro-tile{
  width: 92px;
  height: 92px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  transform: scale(1.2);
  animation: introTileIn .5s ease forwards;
}
@keyframes introTileIn{ to{ transform: scale(1); } }
#intro.done{
  opacity:0;
  transition: opacity .55s ease;
}

/* FORCE: watermark altijd exact gecentreerd in de card */
.hero-photo .hero-years{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform: translate(-50%, -50%) !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding: 0 6% !important;
  margin: 0 !important;
}
.hero-photo .hero-years-num{
  margin: 0 !important;
  transform: translateX(-4%) !important;
}
.hero-photo .hero-years-label{
  margin: 10px 0 0 !important;
}
/* =========
   Animated glow behind the hero card (4B style)
   ========= */
.hero-photo{
  position: relative;
  isolation: isolate;
}
.hero-photo::before{
  content:"";
  position:absolute;
  inset: -26px;
  z-index: -1;
  border-radius: 40px;
  filter: blur(22px);
  opacity: .75;
  transform: translateZ(0);
  background:
    radial-gradient(420px 320px at 20% 80%, rgba(168,120,255,.45), transparent 65%),
    radial-gradient(420px 320px at 80% 30%, rgba(120,200,255,.38), transparent 70%),
    radial-gradient(520px 360px at 50% 50%, rgba(255,140,180,.18), transparent 75%);
}
.hero-photo::after{
  content:"";
  position:absolute;
  inset: -34px;
  z-index: -1;
  border-radius: 46px;
  background:
    radial-gradient(380px 260px at 30% 40%, rgba(120,200,255,.22), transparent 70%),
    radial-gradient(420px 300px at 70% 60%, rgba(168,120,255,.20), transparent 72%);
  filter: blur(26px);
  opacity: .55;
  mix-blend-mode: screen;
  transform: translate3d(0,0,0);
  animation: glowFloat 6.5s ease-in-out infinite;
max-width: 100vw; /* Voorkomt dat de gloed breder wordt dan het scherm */
    pointer-events: none;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centreert de gloed op de kaart */
}
@keyframes glowFloat{
  0%   { transform: translate3d(-8px, 10px, 0) scale(1); }
  50%  { transform: translate3d(10px, -8px, 0) scale(1.03); }
  100% { transform: translate3d(-8px, 10px, 0) scale(1); }
}

.hero-years-num{
  color: rgba(12,17,23,.85);
  text-shadow: 0 10px 30px rgba(12,17,23,.08);
}
.hero-years-label{
  color: rgba(12,17,23,.65);
}
.hero-photo .hero-years-num{
  display: inline-block;
  transform: translateX(-6%);
}