/* Restyle van de publieke site (binnen het merk: donker paars + goud). Wordt NA style.css en luxe.css geladen en vervangt vooral:
   contrast, kleurverloop-tekst, typografie, ritme, knoppen, focus, mobiel en beweging. Interne dashboards laden dit bestand niet. */

:root {
  --text-dimmer: #8f89ab;            /* was #726d8e: haalde AA-contrast (4,5:1) niet; nu 6:1 */
  --gold-solid: #f6d98a;
  --gold-strong: #ffc857;
  --ink: #17101f;                     /* donkere tekst op heldere (goud/roze/paarse) vlakken: >= 5,9:1 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 66ch;
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.35rem, 1.7rem + 3.2vw, 4.4rem);
}

/* ---------- basis: lezen, selecteren, focus, scrollbalken ---------- */
html { color-scheme: dark; scrollbar-color: rgba(246, 217, 138, 0.35) transparent; scrollbar-width: thin; accent-color: var(--gold-strong); -webkit-text-size-adjust: 100%; }
body { font-size: var(--step-0); line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
::selection { background: rgba(246, 217, 138, 0.32); color: #fff; }
input, textarea { caret-color: var(--gold-solid); }
:focus-visible { outline: 2px solid var(--gold-solid); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .chip:focus-visible { outline-offset: 4px; border-radius: 999px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.num, .stat .num, [data-count] { font-variant-numeric: tabular-nums lining-nums; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(246, 217, 138, 0.28); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(246, 217, 138, 0.5); }

/* ---------- kleurverloop-tekst weg: effen goud (het merk blijft goud, maar leesbaar en rustiger) ---------- */
.hero h1 .grad, .section-head h2 em, .page-hero h1 em, .cta-band h2 em, .stat .num, .product-price, .balance-banner, .brand span.tag {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--gold-solid) !important;
  animation: none !important;
}
.brand span.tag { color: var(--text) !important; }
.brand span.tag::before { content: ""; }
.section-head h2 em, .page-hero h1 em, .cta-band h2 em, .hero h1 .grad { font-style: italic; font-weight: 700; }

/* ---------- kicker/eyebrow boven koppen: weg (de kop zegt het al) ---------- */
.section-head .eyebrow, .page-hero .eyebrow { display: none; }

/* ---------- knoppen: goed contrast, duidelijke tikdoelen ---------- */
.btn { min-height: 46px; letter-spacing: 0.005em; transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease; }
.btn-primary { color: var(--ink) !important; background: linear-gradient(120deg, #c898ff, #ff86c4) !important; }
.btn-primary:hover { box-shadow: 0 14px 36px -10px rgba(255, 134, 196, 0.7); }
.btn-gold { color: var(--ink); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.18); }
.btn-ghost:hover { border-color: rgba(246, 217, 138, 0.5); background: rgba(246, 217, 138, 0.07); }
.btn-lg { min-height: 54px; }
.btn:active { transform: scale(0.97); transition-duration: 0.08s; }

/* ---------- navigatie ---------- */
nav.topnav { background: rgba(8, 7, 13, 0.78); }
.navlinks a { position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.navlinks a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold-solid); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.navlinks a:hover::after, .navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.lang-switch button { min-height: 40px; }
.hamburger { width: 46px; height: 46px; }

/* ---------- ritme en structuur ---------- */
section { padding: clamp(56px, 8vw, 104px) 0; }
.section-head { margin-bottom: clamp(32px, 5vw, 60px); }
.section-head h2 { font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.018em; font-weight: 700; }
.section-head p { font-size: var(--step-0); max-width: 56ch; margin-inline: auto; }
.page-hero { padding: clamp(56px, 9vw, 104px) 0 clamp(20px, 3vw, 40px); }
.page-hero h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
.page-hero::after { margin-top: clamp(24px, 4vw, 44px); }
.hero h1 { font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.022em; }
.hero .lead { font-size: var(--step-1); max-width: 52ch; line-height: 1.6; color: #c4bfdc; }
.trust-strip span { font-size: var(--step--1); }
.hero-float { pointer-events: none; }

/* lopende tekst op regels/juridische pagina's: comfortabele regelbreedte en grotere letters */
.legal p, .legal li, .rules p, .rules li, article p, article li, .prose p, .prose li { max-width: var(--measure); line-height: 1.75; }

/* kaarten: rustiger, één consistente vorm */
.feature-card, .lux-card, .stat, .product-card, .step, .faq-list details { transition: transform 0.3s var(--ease-out), border-color 0.3s ease, background-color 0.3s ease; }
@media (hover: hover) {
  .feature-card:hover, .lux-card:hover, .product-card:hover { transform: translateY(-4px); border-color: rgba(246, 217, 138, 0.4); }
}
.faq-list details > summary { min-height: 52px; cursor: pointer; }

/* ---------- stappen: een lijn die de stappen verbindt (voortgang loopt mee met scrollen, zie motion.js) ---------- */
.steps { --p: 0; }
.steps::before { background: rgba(246, 217, 138, 0.16); opacity: 1; }
.steps::after { content: ""; position: absolute; top: 34px; left: 12%; height: 1px; width: calc(76% * var(--p)); background: var(--gold-solid); box-shadow: 0 0 12px rgba(246, 217, 138, 0.6); pointer-events: none; }
.step .step-no { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s ease, color 0.5s ease, background-color 0.5s ease; }
.step.lit .step-no { border-color: var(--gold-solid); box-shadow: 0 0 0 7px rgba(246, 217, 138, 0.12), 0 18px 36px -12px rgba(246, 217, 138, 0.7); transform: scale(1.06); }
@media (max-width: 900px) {
  .steps { padding-left: 0; }
  .steps::before, .steps::after { top: 34px; bottom: 34px; left: 50%; width: 1px; height: auto; right: auto; }
  .steps::after { height: calc((100% - 68px) * var(--p)); width: 1px; }
  .steps { grid-template-columns: 1fr; gap: 38px; }
  .step .step-no { background-color: #0f0d1a; }
}
@media (min-width: 901px) and (max-width: 1100px) { .steps::before, .steps::after { display: none; } }

/* ---------- mobiel ---------- */
@media (max-width: 700px) {
  body { font-size: 1.03rem; }
  .wrap { padding-inline: 20px; }
  .hero { padding-top: 40px; }
  .hero .ctas { gap: 12px; }
  .hero .ctas .btn { width: 100%; justify-content: center; }
  .stats { gap: 12px; }
  .footer-grid { gap: 28px; }
  .footer-col a { display: inline-block; padding: 8px 0; min-height: 40px; }
  .section-head { text-align: left; margin-inline: 0; }
  .section-head p { margin-inline: 0; }
  /* de zware achtergrond-vlekken: op telefoon kleiner, lichter en stil (batterij en soepelheid) */
  .aurora::before, .aurora::after, .aurora .blob { filter: blur(60px); animation: none !important; will-change: auto; opacity: 0.35; }
}

/* ---------- plakkende "Join Discord"-balk op mobiel (verschijnt zodra de hero uit beeld is, zie motion.js) ---------- */
.m-cta { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 20px; border-radius: 999px; font-weight: 800; color: var(--ink); background: linear-gradient(120deg, #fbeab8, #f6d98a 40%, #e0b25a 72%, #f6e0a0); box-shadow: 0 14px 40px -8px rgba(246, 217, 138, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s ease; }
.m-cta.on { transform: none; opacity: 1; }
@media (max-width: 700px) { .m-cta { display: flex; } body.has-mcta { padding-bottom: 84px; } .scroll-top, #to-top, .to-top { bottom: 84px !important; } }

/* ================== BEWEGING ================== */
/* Eén geschreven moment: de hero. Regels van de kop komen omhoog uit een masker, daarna badge, tekst en knoppen.
   Zonder JS (of met "minder beweging") is alles gewoon direct zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .hero .pill, html.js-motion .hero h1 .ln, html.js-motion .hero .lead, html.js-motion .hero .ctas, html.js-motion .hero .trust-strip { opacity: 0; }
  html.js-motion .hero h1 .ln { display: inline-block; clip-path: inset(0 0 100% 0); transform: translateY(0.5em); }
  html.js-motion.hero-go .hero .pill { animation: heroUp 0.7s var(--ease-out) 0.05s both; }
  html.js-motion.hero-go .hero h1 .ln { animation: lineIn 0.9s var(--ease-out) both; animation-delay: calc(0.12s + var(--i, 0) * 0.11s); }
  html.js-motion.hero-go .hero .lead { animation: heroUp 0.8s var(--ease-out) 0.55s both; }
  html.js-motion.hero-go .hero .ctas { animation: heroUp 0.8s var(--ease-out) 0.68s both; }
  html.js-motion.hero-go .hero .trust-strip { animation: heroUp 0.8s var(--ease-out) 0.8s both; }
  @keyframes lineIn { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(0.5em); } to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }
  @keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* scroll-onthulling: varieert per plek in plaats van overal dezelfde fade */
  html.js-motion .fade-in:not(.visible) { opacity: 0; transform: translateY(22px); }
  html.js-motion .fade-in { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  html.js-motion .cards-grid > .fade-in:not(.visible), html.js-motion .prize-grid > .fade-in:not(.visible) { transform: translateY(30px) scale(0.98); }
  html.js-motion .section-head.fade-in:not(.visible) { transform: translateY(14px); }

  /* tegel/knop-feedback */
  .btn-gold { background-size: 200% 100%; transition: transform 0.22s var(--ease-out), box-shadow 0.3s ease, background-position 0.6s var(--ease-out); }
  .btn-gold:hover { background-position: 100% 0; }

  /* cijfers: het getal krijgt een korte "tik" zodra het klaar is met tellen */
  .stat .num.done { animation: numPop 0.5s var(--ease-out); }
  @keyframes numPop { 40% { transform: scale(1.08); } }

  /* pagina-overgangen: pagina's schuiven zacht in elkaar (Chrome/Edge/Safari 18+; elders gewoon direct) */
  @view-transition { navigation: auto; }
  nav.topnav { view-transition-name: topnav; }
  ::view-transition-old(root) { animation: 0.18s ease both vtOut; }
  ::view-transition-new(root) { animation: 0.38s var(--ease-out) both vtIn; }
  @keyframes vtOut { to { opacity: 0; } }
  @keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

  /* FAQ: vloeiend open en dicht (browsers die het kunnen) */
  .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

  /* mobiel menu: paneel glijdt open */
  @media (max-width: 900px) { .nav-mid { transition: opacity 0.3s ease, transform 0.35s var(--ease-out); } }
}

/* "Minder beweging": geen verplaatsing of vloeiende overgangen; kleur- en statuswijzigingen blijven. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .step .step-no, .btn, .navlinks a::after, .m-cta { transition-duration: 0.01ms; }
  .steps::after { width: 76%; }
  @media (max-width: 900px) { .steps::after { height: calc(100% - 68px); } }
  .aurora::before, .aurora::after, .aurora .blob { animation: none !important; }
}

/* ---------- prijzen: elke prijs krijgt zijn eigen kleur en een lichtvlek die de aanwijzer volgt ---------- */
#prijzen .feature-card { --accent: 246, 217, 138; position: relative; overflow: hidden; }
#prijzen .feature-card:nth-child(2) { --accent: 140, 150, 255; }
#prijzen .feature-card:nth-child(3) { --accent: 255, 134, 196; }
#prijzen .feature-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent), 0.18), transparent 62%); }
#prijzen .feature-card:hover::before, #prijzen .feature-card:focus-within::before { opacity: 1; }
#prijzen .feature-card:hover { border-color: rgba(var(--accent), 0.55); }