/* Accentkleur + CTA's — versie Youri.
   Mint uit Youri's staal (#8adad8 → #6bd0c9), feller gemaakt. CTA's zoals de iOS-focusknoppen:
   in rust donker glas met een fijne lichte rand; bij hover licht (bleek mint) met een gloeiende mint rand.
   Alleen voor Youri's pagina's; de gedeelde stijl blijft ongemoeid. */
:root {
  --accent: #4ff0de;
  --accent-rgb: 79, 240, 222;
  --accent-ink: #0d1716;
}

/* live-bolletjes: fel, met gloed */
.hdr__cta-dot { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .9), 0 0 0 0 rgba(var(--accent-rgb), .55); animation-name: pulse-mint; }
@keyframes pulse-mint { 70% { box-shadow: 0 0 8px rgba(var(--accent-rgb), .9), 0 0 0 9px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 8px rgba(var(--accent-rgb), .9), 0 0 0 0 rgba(var(--accent-rgb), 0); } }
.eq i { background: var(--accent); }

/* ---------- CTA's ---------- */
html .hdr__cta, html .hall__btn--solid, html .st__next, html .st-fab, html .st__btn--solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(24, 24, 24, .52); color: #f7f7f7; border: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 30px rgba(0, 0, 0, .3);
  transition: background .35s cubic-bezier(.2, .8, .2, 1), color .35s, box-shadow .45s cubic-bezier(.2, .8, .2, 1);
}
/* hover / focus: licht, met gloeiende mint rand (zoals "Sleep" in de iOS-referentie) */
html .hdr__cta:hover, html .hall__btn--solid:hover, html .st__next:hover, html .st-fab:hover, html .st__btn--solid:hover,
html .hdr__cta:focus-visible, html .hall__btn--solid:focus-visible, html .st__next:focus-visible, html .st-fab:focus-visible, html .st__btn--solid:focus-visible {
  background: linear-gradient(180deg, #f3fffd 0%, #d9f6f2 100%); color: var(--accent-ink); outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 1.5px rgba(var(--accent-rgb), .95),
              0 0 12px 2px rgba(var(--accent-rgb), .75), 0 0 34px 6px rgba(var(--accent-rgb), .38), 0 10px 30px rgba(0, 0, 0, .3);
}
html .st-fab { position: fixed; }
html .hall__btn--solid { padding: 15px 24px; border-radius: 999px; font: 700 15px/1 Aeonik, sans-serif; text-decoration: none; }   /* ook op pagina's zonder hero-stijl */
html .hdr__cta .hdr__cta-dot, html .st-fab .hdr__cta-dot, html .hall__btn .hdr__cta-dot { display: none; }
html .st__next[aria-disabled="true"] { opacity: .45; }
html .st__next[aria-disabled="true"]:hover { background: rgba(24, 24, 24, .52); color: #f7f7f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html .st { --st-accent: var(--accent); }
.st__done-mark { color: var(--accent-ink); box-shadow: 0 0 26px rgba(var(--accent-rgb), .5); }

/* footer: "Start a project" met het mint lampje */
.ftr__go { display: inline-flex; align-items: center; gap: .45em; font-weight: inherit; }
.ftr__go .hdr__cta-dot { width: .32em; height: .32em; }

/* scroll-cue */
.cue__line::after { box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }
.cue__go { text-shadow: 0 0 12px rgba(var(--accent-rgb), .45); }

@media (prefers-reduced-motion: reduce) { html .hdr__cta, html .hall__btn--solid, html .st__next, html .st-fab, html .st__btn--solid { transition: none; } }

/* gsm: de zwevende knop is de CTA; de header-knop blijft verborgen (zoals voorheen) */
@media (max-width: 480px) { html .hdr__cta { display: none; } }
@media (min-width: 481px) { html .st-fab { display: none; } }   /* zwevende knop enkel op gsm (stond ook op desktop midden op de fold) */

/* ---------- Backline-knop in de header (op de plek van RISE) ---------- */
.hdr__bl span { display: inline-block; transition: transform .3s var(--ease); }
.hdr__bl:hover span { transform: translate(2px, -2px); }

/* ---------- ADE 2026 in de header: klein logo + data, naar het ADE-blok in de footer (verdwijnt na 25/10) ---------- */
.hdr__ade { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 5px; border: 1px solid var(--line-2); border-radius: 99px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: border-color .3s, background .3s, color .3s; }
.hdr__ade[hidden] { display: none; }
.hdr__ade img { display: block; height: 26px; width: auto; border-radius: 99px 0 0 99px; }
.hdr__ade:hover, .hdr__ade:focus-visible { border-color: #ffff00; color: #ffff00; outline: none; }
@media (max-width: 1180px) { .hdr__ade { padding-right: 5px; } .hdr__ade span { display: none; } }

/* ---------- Lightdesk: klein blok linksonder (vervangt het geweven label rechts, 12/10) ----------
   Verschijnt pas na de eerste schermhoogte en wijkt voor de footer (js/ftr-ade.js zet .is-on). */
.ld-dock { position: fixed; left: var(--gutter, 24px); bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px;
  background: #161616; border: 1px solid var(--line-2); border-radius: 4px; color: var(--fg); text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .3s; }
.ld-dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ld-dock__sw { width: 34px; height: 34px; border-radius: 2px; flex: none;   /* halftone zoals de hero */
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 1.2px, transparent 1.6px) 0 0 / 5px 5px, #0b0b0c;
  -webkit-mask-image: radial-gradient(circle at 30% 70%, #000 30%, rgba(0, 0, 0, .35) 90%); mask-image: radial-gradient(circle at 30% 70%, #000 30%, rgba(0, 0, 0, .35) 90%);
  animation: ld-drift 6s linear infinite; }
@keyframes ld-drift { to { background-position: 10px -10px, 0 0; } }
.ld-dock__t { display: grid; gap: 3px; line-height: 1; }
.ld-dock__t b { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ld-dock__t i { font-size: 12px; font-style: italic; font-synthesis: style; color: var(--mute); }
.ld-dock__go { font-size: 13px; color: var(--mute); transition: transform .3s var(--ease), color .3s; }
.ld-dock:hover, .ld-dock:focus-visible { border-color: var(--fg); outline: none; }
.ld-dock:hover .ld-dock__go { transform: translate(2px, -2px); color: var(--accent); }
body[data-page="fx"] .ld-dock, body[data-page="lightdesk"] .ld-dock { display: none; }   /* niet op Lightdesk zelf */
@media (max-width: 600px) { .ld-dock { display: none; } }   /* gsm: Lightdesk staat in het menu, onderaan zit de zwevende Start-knop */
@media (prefers-reduced-motion: reduce) { .ld-dock, .hdr__bl span { transition: none; } .ld-dock__sw { animation: none; } }