/* GetContent website — app-chrome & responsive gedrag.
   Gedeeld door alle pagina-entries (index, hoe-het-werkt, opdrachten, plaatsen). */
html, body { margin: 0; }
#gc-scroll { height: 100vh; overflow-y: auto; scroll-behavior: smooth; }
[data-lucide] { stroke-width: 2; }

/* gecentreerd tekstblok: natuurlijke woordafstand, regels breken natuurlijk af */
.gc-justify { text-align: center !important; text-align-last: center !important; text-wrap: pretty; margin-left: auto; margin-right: auto; max-width: 640px; }
/* lead-tekst schaalt vloeiend mee op smal scherm i.p.v. een harde knik naar 0.95rem */
@media (max-width: 600px) { .gc-justify { font-size: clamp(0.9375rem, 4vw, 1.25rem) !important; max-width: 100%; } }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* gestaffelde scroll-reveal: directe kinderen van een .gc-stagger-container komen
   één voor één omhoog zodra de container in beeld schuift (zelfde observer als
   .reveal). Animatie i.p.v. transition zodat inline hover-transforms op kaarten
   niet conflicteren: na afloop geeft de animatie de property's gewoon terug. */
@keyframes gcRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gc-stagger > * { opacity: 0; }
.gc-stagger.in > * { opacity: 1; animation: gcRise 0.65s var(--ease-out) backwards; }
.gc-stagger.in > *:nth-child(2) { animation-delay: 80ms; }
.gc-stagger.in > *:nth-child(3) { animation-delay: 160ms; }
.gc-stagger.in > *:nth-child(4) { animation-delay: 240ms; }
.gc-stagger.in > *:nth-child(5) { animation-delay: 320ms; }
.gc-stagger.in > *:nth-child(6) { animation-delay: 400ms; }
.gc-stagger.in > *:nth-child(n+7) { animation-delay: 460ms; }
@media (prefers-reduced-motion: reduce) { .gc-stagger > * { opacity: 1 !important; animation: none !important; } }

/* eenmalige hero-entrance bij het laden: eyebrow, kop en zoekbalk-blok
   schuiven rustig na elkaar in */
.gc-hero-copy > * { animation: gcRise 0.8s var(--ease-out) backwards; }
.gc-hero-copy > *:nth-child(2) { animation-delay: 100ms; }
.gc-hero-copy > *:nth-child(3) { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .gc-hero-copy > * { animation: none !important; } }

/* subtiele coral-glow op de belangrijkste CTA's; sterker op hover.
   Alleen box-shadow (geen transform) zodat de press-feedback van de
   Button-component intact blijft. */
.gc-cta-glow { box-shadow: var(--shadow-accent); }
.gc-cta-glow:hover { box-shadow: 0 16px 40px rgba(237,110,111,0.42); }

/* header-navlinks: kleur-only hover via CSS (geen achtergrond-pill, geen
   plakkende JS-state); !important omdat de basiskleur inline staat */
.gc-nav-link { transition: color var(--dur-fast) var(--ease-out); }
.gc-nav-link:hover { color: var(--text-on-dark) !important; }

/* altijd-knipperende cursor in de opdrachtbalk */
@keyframes gcBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.gc-caret { animation: gcBlink 1.05s steps(1) infinite; }

/* organisch zwevende glas-opdrachtkaarten */
@keyframes gcFloat { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); } }
.gc-float { animation: gcFloat 7s ease-in-out infinite; animation-delay: var(--delay, 0s); }
/* Desktop: het kaart-canvas leunt van nature links (linkerkaart op 1%, rechterkaart
   op 73% + 256px vaste breedte). De cluster centreren = verschuiven met
   (0,13·breedte − 128px); als translateX-calc klopt dat op elke desktop-breedte.
   Onder 981px wordt de stage een swipe-carousel, dus daar niet toepassen. */
@media (min-width: 981px) { .gc-float-stage { transform: translateX(calc(13% - 128px)); } }
@keyframes gcLive { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(237,110,111,0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(237,110,111,0); } }
.gc-live-dot { animation: gcLive 1.8s ease-in-out infinite; }

/* device showcase — gelaagde compositie, subtiel zweven + lichte hover-scale */
@keyframes gcDevFloatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes gcDevFloatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes gcDevFloatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.gc-stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  aspect-ratio: 1040 / 560;
  /* de device-PNG's hebben veel transparante canvas-ruimte onderin; trek die
     dode band weg (percentage-marge rekent tegen de breedte en schaalt mee) */
  margin-bottom: -12%;
}
.gc-dev { position: absolute; top: 50%; }
.gc-dev-float { animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.gc-dev img {
  display: block; width: 100%; height: auto;
  /* reserveer de intrinsieke verhouding (PNG's zijn 1080×1920) zodat de box al
     hoogte heeft vóór het laden: lazy-load triggert dan betrouwbaar en de
     layout verspringt niet bij het binnenkomen van de afbeelding */
  aspect-ratio: 1080 / 1920;
  /* Geen drop-shadow: WebKit/Safari rendert filter: drop-shadow met grote blur op
     deze grote transparante PNG's als een rechthoekig blok i.p.v. de toestelvorm
     (blijft zichtbaar tot een repaint). Daarom hier bewust uitgezet. */
  transition: transform var(--dur-base) var(--ease-out);
}
.gc-dev:hover { z-index: 6; }
.gc-dev:hover img { transform: scale(1.05); }
/* statische contactschaduw op de "grond" onder elk zwevend device.
   De PNG's zijn 1080×1920-canvassen met transparante marge; de zichtbare
   onderkant ligt op ~71% (telefoons) en ~73% (laptop) van boven — de
   bottom-percentages hieronder zetten de ellips precies daar. */
.gc-dev-shadow {
  position: absolute; left: 50%; bottom: 22.5%; width: 74%; aspect-ratio: 5.5 / 1;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(18,24,38,0.20), rgba(18,24,38,0) 70%);
  pointer-events: none;
}
.gc-dev-center .gc-dev-shadow { bottom: 21%; width: 80%; }

/* links: telefoon, iets lager, achter de laptop */
.gc-dev-left { left: -1%; width: 32.4%; transform: translateY(-48%); z-index: 2; }
.gc-dev-left .gc-dev-float { animation-name: gcDevFloatA; animation-duration: 6.5s; }
/* rechts: telefoon, iets hoger, achter de laptop */
.gc-dev-right { right: -1%; width: 32.4%; transform: translateY(-54%); z-index: 2; }
.gc-dev-right .gc-dev-float { animation-name: gcDevFloatC; animation-duration: 8s; animation-delay: 1.2s; }
/* midden: laptop, dominant, voorop */
.gc-dev-center { left: 50%; width: 60%; transform: translate(-50%, -50%); z-index: 4; }
.gc-dev-center .gc-dev-float { animation-name: gcDevFloatB; animation-duration: 7.2s; animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) { .gc-dev-float { animation: none !important; } }
@media (max-width: 760px) {
  /* hero sluit op mobiel dichter aan op de zwevende kaarten (geen dode band) */
  .gc-hero { padding-bottom: 2.5rem !important; }
  .gc-stage { aspect-ratio: 360 / 320; max-width: 460px; }
  .gc-dev-center { width: 72%; }
  .gc-dev-left { left: -4%; width: 41.4%; transform: translateY(-42%); }
  .gc-dev-right { right: -4%; width: 41.4%; transform: translateY(-58%); }
  .gc-disc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) { .gc-float { animation: none; } .gc-caret { animation: none; } .gc-live-dot { animation: none; } }

/* responsive grids */
@media (max-width: 980px) {
  .gc-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gc-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gc-paths-grid { grid-template-columns: 1fr !important; }
  /* zwevende opdrachtkaarten → full-bleed horizontale swipe-carousel.
     Breekt uit de inner max-width zodat kaarten pas bij de schermrand clippen;
     ruime verticale padding zodat schaduw/scale niet wordt afgesneden. */
  .gc-float-stage {
    height: auto !important;
    display: flex;
    flex-direction: row;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 28px var(--gutter) 48px !important;
    scrollbar-width: none;
  }
  .gc-float-stage::-webkit-scrollbar { display: none; }
  .gc-float-stage .gc-floater {
    position: static !important;
    width: 80% !important;
    flex: 0 0 80%;
    max-width: 300px;
    animation: none !important;
    scroll-snap-align: start;
  }
}
@media (max-width: 760px) {
  .gc-steps-grid, .gc-cards-3, .gc-cards-2, .gc-form-2 { grid-template-columns: minmax(0, 1fr) !important; }

  /* kaarten swipebaar links↔rechts (scroll-snap carousel) */
  .gc-swipe {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    scroll-padding-left: var(--gutter);
    padding: 4px var(--gutter) 16px;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .gc-swipe::-webkit-scrollbar { display: none; }
  .gc-swipe > * {
    scroll-snap-align: start;
    flex: 0 0 84%;
    min-width: 0;
  }
}

/* iPhone-breedte: kop schaalt mee */
@media (max-width: 600px) {
  .gc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; }
  .gc-footer-brand { grid-column: 1 / -1 !important; }
}

/* dichte brandmark-textuur op donkere secties; opacity stijgt bij scrollen */
.gc-dark-pattern { position: relative; }
.gc-dark-pattern::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("../assets/logo/brandmark-pattern.svg");
  background-size: 84px;
  opacity: var(--gc-mark-opacity, 0.06);
  transition: opacity 0.25s linear;
}
.gc-dark-pattern > * { position: relative; z-index: 1; }

/* rustige USP-marquee (loopt naar rechts) */
@keyframes gcMarquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.gc-marquee { animation: gcMarquee 48s linear infinite; }
@media (prefers-reduced-motion: reduce) { .gc-marquee { animation: none; } }

/* ── Content-showcase carrousel (homepage, donkere band) ───────────────────
   Oneindige, naadloze marquee naar links. De rij bevat twee identieke sets;
   de animatie schuift precies één set (−50%) op, dus het herhaalpunt is
   onzichtbaar. Elk item draagt zijn eigen marge-rechts (i.p.v. flex-gap),
   zodat beide sets exact even breed zijn en −50% perfect aansluit. */
.gc-showcase { --gc-showcase-h: 440px; --gc-showcase-gap: 20px; }
.gc-showcase-viewport { position: relative; width: 100%; overflow: hidden; }
.gc-showcase-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: gcShowcase var(--gc-showcase-dur, 60s) linear infinite;
}
@keyframes gcShowcase { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.gc-showcase-item {
  flex: 0 0 auto;
  height: var(--gc-showcase-h);
  aspect-ratio: 9 / 16;
  margin-right: var(--gc-showcase-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-dark-raised);
  pointer-events: none;
  user-select: none;
}
.gc-showcase-item > img,
.gc-showcase-item > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* rand-fades: geen zichtbaar begin/eind van de rij */
.gc-showcase-fade { position: absolute; top: 0; bottom: 0; width: clamp(48px, 9vw, 160px); z-index: 2; pointer-events: none; }
.gc-showcase-fade.is-left  { left: 0;  background: linear-gradient(90deg,  var(--surface-dark), transparent); }
.gc-showcase-fade.is-right { right: 0; background: linear-gradient(270deg, var(--surface-dark), transparent); }

/* per breakpoint: itemhoogte (en dus -breedte via 9:16) + tussenruimte */
@media (max-width: 1200px) { .gc-showcase { --gc-showcase-h: 400px; } }
@media (max-width: 820px)  { .gc-showcase { --gc-showcase-h: 360px; --gc-showcase-gap: 16px; } }
@media (max-width: 560px)  { .gc-showcase { --gc-showcase-h: 330px; --gc-showcase-gap: 14px; } }

/* toegankelijkheid: geen beweging → statische, rustige rij */
@media (prefers-reduced-motion: reduce) { .gc-showcase-track { animation: none; } }

/* ── Keuze-modal (aanmelden: rol kiezen) ───────────────────────────────── */
/* Volledige-viewport blur + subtiele donkere overlay. Opacity op de overlay
   fadet blur én overlay samen vloeiend in/uit; de kaart schuift zacht mee. */
.gc-modal-overlay {
  opacity: 0;
  background: rgba(18, 24, 38, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.3s var(--ease-out);
  will-change: opacity;
}
.gc-modal-overlay.is-open { opacity: 1; }
.gc-modal-card {
  opacity: 0;
  transform: translateY(14px) scale(0.965);
  transition: opacity 0.3s var(--ease-out), transform 0.34s var(--ease-out);
  will-change: opacity, transform;
}
.gc-modal-overlay.is-open .gc-modal-card { opacity: 1; transform: none; }
.gc-role-option:hover { border-color: var(--accent); background: var(--surface-card); }
.gc-role-option:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--gc-coral-100); }
.gc-confirm-cancel { transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.gc-confirm-cancel:hover { border-color: var(--text-muted); background: var(--surface-sunken); }
.gc-confirm-go { transition: filter var(--dur-fast) var(--ease-out); }
.gc-confirm-go:hover { filter: brightness(0.93); }
/* verwijder-knop bij eigen opdrachten: rustig, kleurt rood op hover */
.gc-jobdelete { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.gc-jobdelete:hover { color: var(--gc-danger); border-color: var(--gc-danger); background: rgba(214,80,79,0.06); }
/* Google-inlogknop */
.gc-google-btn { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.gc-google-btn:hover { background: var(--surface-sunken); border-color: var(--text-muted); }
/* oog-knop in wachtwoordvelden */
.gc-pass-eye { transition: color var(--dur-fast) var(--ease-out); }
.gc-pass-eye:hover { color: var(--text-body); }
/* subtiele scheidingslijn met "of" tussen formulier en Google-knop */
.gc-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--text-faint); font-size: 12.5px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.gc-or::before, .gc-or::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
@media (max-width: 560px) { .gc-jobdelete-label { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .gc-modal-overlay, .gc-modal-card { transition: none; }
}

.gc-hero-bar-wrap { margin-left: -2px; }

/* account-dropdown menu-items */
.gc-menu-item { transition: background var(--dur-fast) var(--ease-out); }
.gc-menu-item:hover { background: var(--surface-sunken); }

/* ============================================================
   Universeel PageHero-systeem (alle subpagina's) — donkerblauw, warm-wit,
   coral accent, gecentreerd. Eén set hoogte/spacing/typografie/responsive. */
.gc-pagehero {
  position: relative;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  margin-top: -76px;            /* schuift onder de sticky nav, zoals de home-hero */
  overflow: hidden;
  text-align: center;
}
.gc-pagehero-inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(8.5rem, 14vw, 12rem) var(--gutter) clamp(4.5rem, 8vw, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gc-pagehero-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--text-on-dark);
  max-width: var(--hero-title-max);
  text-wrap: balance;
}
.gc-pagehero-lead {
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 56ch;
  text-wrap: pretty;
}
.gc-pagehero-cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
/* Secundaire (ghost) knop op de donkere hero legibel maken: de bundle-knop
   zet inline `color: var(--text-strong)` (donkerblauw) → onzichtbaar op donker.
   De primaire knop draagt .gc-cta-glow, dus alle andere = secundair. */
.gc-pagehero-cta button:not(.gc-cta-glow) {
  color: var(--text-on-dark) !important;
  border-color: rgba(245, 243, 239, 0.28) !important;
}
.gc-pagehero-cta button:not(.gc-cta-glow):hover {
  border-color: rgba(245, 243, 239, 0.55) !important;
  background: rgba(245, 243, 239, 0.08) !important;
}
/* compacte variant voor formulier-/utility-pagina's (kop + kaart op donker) */
.gc-pagehero.is-compact .gc-pagehero-inner {
  padding: clamp(7rem, 11vw, 9rem) var(--gutter) clamp(3.5rem, 6vw, 5.5rem);
}
.gc-pagehero.is-compact .gc-pagehero-title { font-size: clamp(2rem, 3.4vw, 2.75rem); }
/* smalle kolom onder de kop — bevat bijv. een formulierkaart, links uitgelijnd */
.gc-pagehero-body {
  width: 100%;
  max-width: 540px;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  text-align: left;
}
/* gedeelde formulierkaart (op de donkere hero) — één stijl voor alle form-pagina's */
.gc-form-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* voetnoot-link onder een formulierkaart (warm-wit muted, coral link) */
.gc-hero-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-on-dark-muted);
}
.gc-hero-foot a { color: var(--accent); font-weight: var(--fw-semibold); cursor: pointer; }
@media (max-width: 600px) {
  .gc-pagehero-title { font-size: clamp(2rem, 8.5vw, 2.75rem); }
}

/* hero: gecentreerde copy op smal scherm */
@media (max-width: 900px) {
  .gc-hero-copy { text-align: center; }
  .gc-hero-copy .gc-eyebrow { justify-content: center; }
  .gc-hero-h1 { margin-left: 0 !important; }
  .gc-hero-bar-wrap { margin-left: auto; margin-right: auto; }
  .gc-hero-pills { justify-content: center; grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .gc-hero-h1 { font-size: clamp(1.75rem, 7.4vw, 3rem) !important; }
  .gc-hero-copy .gc-eyebrow { font-size: 10px !important; }
  .gc-hero-creatorlink { font-size: 13px !important; }
  .gc-hero-pill { height: 44px !important; padding: 0 14px !important; font-size: 13px !important; }
  .gc-hero-pills { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === Live showcase ("Live op het platform") ===
   Donkere sectie met drie iPhones (mini-versies van de mobiele site). Zodra
   de sectie in beeld komt spelen alle drie de telefoons als één gestaffelde
   entrance automatisch af (.lv-in via IntersectionObserver). Geen scroll-scrub
   of kleurblend: één egaal donker vlak — geen lagen, schaduwen of randen. */
.lv-stage { background: var(--surface-dark); overflow-x: clip; }
.lv-inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.lv-head { text-align: center; padding-top: var(--section-pad-y-sm); }
.lv-head .gc-eyebrow { justify-content: center; margin-bottom: 14px; }
.lv-head h2 { font-size: var(--fs-display-lg); font-weight: var(--fw-extra); letter-spacing: var(--ls-tight); color: var(--text-on-dark); }

/* gewaaierde compositie: midden voorop en iets groter, zijkanten licht
   geroteerd en overlappend erachter. De rij schaalt via --lv-ms (JS) zodat
   alles binnen het scherm past; --lv-rowcomp compenseert de ongeschaalde
   layout-hoogte zodat er geen gat onder de waaier ontstaat. */
.lv-row { --lv-ol: clamp(16px, 1.9vw, 28px); margin-top: clamp(40px, 7vh, 72px); margin-bottom: calc(var(--lv-rowcomp, 0px) * -1); display: flex; justify-content: center; align-items: flex-end; padding-bottom: clamp(1.5rem, 4vh, 3rem); transform: scale(var(--lv-ms, 1)); transform-origin: 50% 0; }
.lv-slot { position: relative; margin: 0; transform-origin: 50% 100%; }
.lv-slot-1 { z-index: 1; transform: rotate(-7deg) translateY(10px); margin-right: calc(var(--lv-ol) * -1); }
.lv-slot-2 { z-index: 3; transform: translateY(-14px) scale(1.045); }
.lv-slot-3 { z-index: 2; transform: rotate(7deg) translateY(10px); margin-left: calc(var(--lv-ol) * -1); }

/* entrance: de drie telefoons rijzen na elkaar op, als één animatie */
@keyframes lvRise { from { opacity: 0; transform: translate3d(0, 90px, 0); } to { opacity: 1; transform: none; } }
.lv-rise { opacity: 0; will-change: transform; }
.lv-stage.lv-in .lv-rise { opacity: 1; animation: lvRise 0.9s var(--ease-out) backwards; }
.lv-stage.lv-in .lv-rise-2 { animation-delay: 140ms; }
.lv-stage.lv-in .lv-rise-3 { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) { .lv-rise { opacity: 1 !important; animation: none !important; } }

/* iPhone-frame: crème titanium-rail met zijknoppen, daarbinnen een zwarte
   bezel rond het scherm. Bewust géén drop-shadow: het donkere vlak moet
   volledig egaal blijven. */
.lv-phone {
  --lv-r: clamp(32px, 2.7vw, 40px);
  position: relative;
  width: min(clamp(215px, 17.5vw, 260px), calc((100vh - 350px) / 2.02));
  aspect-ratio: 9 / 18.4;
  border-radius: var(--lv-r);
  background: linear-gradient(160deg, #FDFCFA 0%, #F0EDE6 55%, #E2DED4 100%);
  border: 1px solid var(--gc-sand-300);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 3px;
}
.lv-bezel { height: 100%; border-radius: calc(var(--lv-r) - 3px); background: #090D15; padding: clamp(5px, 0.45vw, 7px); }
.lv-screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--lv-r) - 3px - clamp(5px, 0.45vw, 7px)); background: var(--surface-page); overflow: hidden; display: flex; flex-direction: column; }
.lv-island { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 26%; height: 12px; border-radius: 999px; background: #05070C; z-index: 5; }
.lv-homebar { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 36%; height: 4px; border-radius: 999px; background: rgba(12, 17, 27, 0.8); z-index: 6; }
/* zijknoppen op de rail */
.lv-phbtn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #E8E4DA, #D5D0C3); box-shadow: 0 0 0 0.5px rgba(148, 142, 129, 0.6); }
.lv-phbtn-action { left: -3px; top: 18%; height: 3.6%; }
.lv-phbtn-volup { left: -3px; top: 24.5%; height: 6%; }
.lv-phbtn-voldn { left: -3px; top: 32%; height: 6%; }
.lv-phbtn-power { right: -3px; top: 26.5%; height: 9%; }

/* statusbalk + mini-navbalk van de mobiele site */
.lv-mnav { flex: none; background: var(--gc-ink-800); }
.lv-status { display: flex; align-items: center; justify-content: space-between; padding: 8px 17px 0; color: var(--gc-warm-white); }
.lv-status b { font-size: 8.5px; font-weight: var(--fw-semibold); letter-spacing: 0.02em; }
.lv-status-ic { display: flex; align-items: center; gap: 3px; }
.lv-status-ic svg { width: 9px; height: 9px; }
.lv-mbrand { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px 9px; }
.lv-mlogo { font-size: 11px; font-weight: var(--fw-extra); letter-spacing: -0.02em; color: var(--text-on-dark); }
.lv-mlogo b { color: var(--accent); }
.lv-mburger { display: flex; flex-direction: column; gap: 3px; }
.lv-mburger i { width: 13px; height: 1.5px; border-radius: 2px; background: var(--gc-warm-white); }

/* scherm 1: statische opdrachtenlijst */
.lv-msub { position: relative; z-index: 2; background: var(--gc-ink-800); padding: 2px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.lv-msub b { font-size: 13.5px; font-weight: var(--fw-extra); letter-spacing: -0.01em; color: var(--text-on-dark); }
.lv-msub span { font-size: 9px; color: var(--text-on-dark-muted); }
.lv-mlist { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.lv-mjob { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 9px 11px; box-shadow: var(--shadow-xs); }
.lv-mjob-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lv-mjob-title { font-size: 10.5px; font-weight: var(--fw-bold); line-height: 1.25; color: var(--text-strong); }
.lv-mjob-badge { flex: none; font-size: 7px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-faint); }
.lv-mjob-badge.is-new { color: var(--accent); }
.lv-mjob-meta { display: block; margin-top: 3px; font-size: 9px; color: var(--text-muted); }

/* scherm 2/3: opdrachtdetail */
.lv-mdetail { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.lv-mtag { align-self: flex-start; font-size: 7.5px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-press); background: var(--accent-tint); padding: 3px 8px; border-radius: 999px; }
.lv-mtitle { font-size: 13px; font-weight: var(--fw-extra); letter-spacing: -0.01em; line-height: 1.25; color: var(--text-strong); }
.lv-mbrief { font-size: 9.5px; line-height: 1.5; color: var(--text-body); margin: 0; }
.lv-mmeta { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.lv-mmeta span { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: var(--fw-medium); color: var(--text-strong); }
.lv-mmeta svg { width: 10px; height: 10px; flex: none; color: var(--accent); }
.lv-mbtn { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 0; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: var(--fw-bold); box-shadow: 0 6px 16px rgba(237, 110, 111, 0.35); }
.lv-mbtn svg { width: 10px; height: 10px; }
.lv-mmore { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.lv-mmore i { height: 7px; border-radius: 4px; background: var(--gc-sand-100); }
.lv-mmore i:last-child { width: 62%; }

/* scherm 3: opdrachtpagina gedimd + blurred achter de permanente match-popup */
/* clip-laag met exact dezelfde afronding als het scherm. Bewust clip-path i.p.v.
   overflow:hidden: overflow klipt de filter-INPUT (dus vóór de blur), waardoor
   de "10px buiten trekken"-truc wordt weggeknipt en de blur alsnog aan de rand
   vervaagt → lichte band. clip-path klipt het geblurde resultaat ná de filter,
   zodat de fade buiten het scherm valt en de rand strak blijft. */
.lv-dim {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 round calc(var(--lv-r) - 3px - clamp(5px, 0.45vw, 7px)));
}
/* de te dimmen pagina-content: zelf geblurd (lokale ruimte, roteert mee) en
   iets buiten de clip-laag getrokken zodat de blur-fade aan de randen wordt
   weggeknipt — strakke, artefactvrije schermrand. */
.lv-dim-blur {
  position: absolute; inset: -10px;
  display: flex; flex-direction: column;
  filter: blur(4px);
}
/* egale donkere tint erover (géén backdrop-filter → geen gestippelde rand) */
.lv-mscrim {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(12, 17, 27, 0.45);
}
/* prominente match-kaart: toont de gematchte creator boven de geblurde pagina */
.lv-match {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: 78%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 15px 15px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px;
  box-shadow: 0 20px 44px -14px rgba(12, 17, 27, 0.55), 0 0 52px rgba(237, 110, 111, 0.4);
}
.lv-match-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 11px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent-press);
  font-size: 8px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase;
}
.lv-match-tag svg { width: 9px; height: 9px; }
.lv-match-av { position: relative; width: 56px; height: 56px; margin-bottom: 9px; }
.lv-match-av img {
  width: 100%; height: 100%; border-radius: 999px; object-fit: cover;
  background: var(--accent-tint);
  border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 18px -6px rgba(12, 17, 27, 0.45);
}
.lv-match-verif {
  position: absolute; right: -1px; bottom: -1px;
  width: 19px; height: 19px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--surface-card);
  display: inline-flex; align-items: center; justify-content: center;
}
.lv-match-verif svg { width: 9px; height: 9px; stroke-width: 3.5; }
.lv-match-name { font-size: 13px; font-weight: var(--fw-extra); letter-spacing: -0.01em; color: var(--text-strong); }
.lv-match-role { margin-top: 2px; font-size: 9px; color: var(--text-muted); }
.lv-match-rating {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
  font-size: 9px; font-weight: var(--fw-semibold); color: var(--text-body);
}
.lv-match-rating svg { width: 10px; height: 10px; fill: var(--accent); color: var(--accent); }
.lv-match-btn {
  margin-top: 13px; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 0; border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font-size: 10.5px; font-weight: var(--fw-bold);
  box-shadow: 0 6px 16px rgba(237, 110, 111, 0.4);
}
.lv-match-btn svg { width: 11px; height: 11px; }

/* smal scherm: zelfde compositie, iets compactere maten */
@media (max-width: 760px) {
  .lv-head { padding-top: clamp(3rem, 8vh, 4.5rem); }
  .lv-row { --lv-ol: 44px; margin-top: clamp(28px, 6vh, 52px); }
}