/* Tweede restyle-ronde (zelfde merk: donker paars + goud). Laadt NA refresh.css.
   Doel: minder "standaard sjabloon". Links uitgelijnde, redactionele opbouw, grote cijfers i.p.v. kaartjes,
   getekende iconen i.p.v. emoji, een bento bij de prijzen, rijen i.p.v. kaartenrij bij events. */

:root { --line: rgba(246, 217, 138, 0.2); --line-soft: rgba(255, 255, 255, 0.09); }

/* ---------- iconen (SVG-sprite in index.html) ---------- */
.ic, .big-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-sm { width: 1.05em; height: 1.05em; stroke: var(--gold-solid); vertical-align: -0.16em; margin-right: 0.25em; }
.big-ic { stroke: var(--gold-solid); width: 56px; height: 56px; stroke-width: 1.3; }

/* ---------- navigatie: de dubbele "Join Discord" in de balk (alleen voor mobiel) verbergen ---------- */
@media (min-width: 901px) {
  .navlinks .nav-join-mobile { display: none; }
}
@media (min-width: 901px) and (max-width: 1280px) {
  .navlinks a { padding-inline: 11px; font-size: 0.88rem; }
}

/* ---------- koppen: links, groot, strak ---------- */
.section-head { text-align: left; max-width: none; margin: 0 0 clamp(36px, 5vw, 64px); display: grid; gap: 14px 56px; }
.section-head h2 { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 4rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 18ch; }
.section-head p { margin: 0; max-width: 52ch; font-size: var(--step-1); line-height: 1.6; color: #c4bfdc; }
@media (min-width: 1000px) {
  .section-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
  .section-head h2 { grid-column: 1; }
  .section-head p { grid-column: 2; padding-bottom: 0.5rem; }
}
.page-hero { text-align: left; }
.page-hero h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5rem); line-height: 1.03; letter-spacing: -0.028em; max-width: 16ch; }
.page-hero p { margin-inline: 0; max-width: 58ch; font-size: var(--step-1); }

/* ---------- hero ---------- */
.hero { text-align: left; padding: clamp(36px, 7vw, 112px) 0 clamp(40px, 6vw, 80px); }
.hero .pill { margin-bottom: 26px; }
.hero h1 { font-size: clamp(2.7rem, 1.2rem + 4.8vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; text-align: left; margin-bottom: 26px; }
.hero .lead { margin-inline: 0; text-align: left; max-width: 50ch; }
.hero .ctas { justify-content: flex-start; }
.trust-strip { justify-content: flex-start; margin-inline: 0; gap: 8px 26px; }
.trust-strip > span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-solid); margin-right: 10px; vertical-align: 0.1em; }
.hero-float { display: none !important; }
@media (min-width: 1000px) {
  .hero .wrap > :not(.stats) { max-width: 700px; }
  .hero::before { -webkit-mask-image: radial-gradient(ellipse 55% 75% at 78% 40%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 55% 75% at 78% 40%, #000 15%, transparent 72%); }
}

/* prijs-tokens (hero-art) */
.hero-art { position: relative; width: min(100%, 420px); height: 240px; margin: 0 0 8px; pointer-events: none; z-index: 1; }
.token { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(246, 217, 138, 0.42);
  background: radial-gradient(circle at 30% 24%, rgba(246, 217, 138, 0.3), rgba(23, 16, 31, 0.92) 66%);
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation: tokenFloat 7s ease-in-out infinite; }
.token .ic { width: 46%; height: 46%; stroke: var(--gold-solid); stroke-width: 1.3; }
.token small { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dimmer); white-space: nowrap; }
.t-coin { width: 140px; height: 140px; left: 4%; top: 0; }
.t-bolt { width: 104px; height: 104px; left: 44%; top: 74px; animation-delay: -2.4s; animation-duration: 8s; }
.t-gift { width: 90px; height: 90px; left: 72%; top: 6px; animation-delay: -4.6s; animation-duration: 6.4s; }
.orbit { position: absolute; inset: -6% 2% -10% 2%; border-radius: 50%; border: 1px dashed rgba(246, 217, 138, 0.16); animation: orbitSpin 90s linear infinite; }
@keyframes tokenFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@media (min-width: 1000px) {
  .hero-art { position: absolute; z-index: 1; right: max(24px, calc(50% - 590px)); top: clamp(80px, 11vw, 150px); width: 440px; height: 440px; margin: 0; }
  .t-coin { width: 230px; height: 230px; left: 12%; top: 0; }
  .t-bolt { width: 156px; height: 156px; left: 58%; top: 196px; }
  .t-gift { width: 132px; height: 132px; left: 0; top: 262px; }
  .token small { font-size: 0.86rem; bottom: -30px; }
  .orbit { inset: -4% -2% -6% -2%; }
}
/* meebewegen met scrollen (alleen waar de browser het kan; geen JS nodig) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-art .token { translate: 0 0; animation: tokenFloat 7s ease-in-out infinite, tokenParallax linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 640px; }
    .t-coin { --dist: 50px; } .t-bolt { --dist: 110px; } .t-gift { --dist: 80px; }
    .t-bolt, .t-gift { animation-delay: -2.4s, 0s; }
  }
}
@keyframes tokenParallax { to { translate: 0 calc(var(--dist, 60px) * -1); } }

/* ---------- cijfers: grote typografie in plaats van kaartjes ---------- */
.stats { max-width: none; margin-top: clamp(44px, 6vw, 84px); background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; gap: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); overflow: visible; }
.stat { background: none !important; border: 0 !important; border-radius: 0; backdrop-filter: none; padding: 26px 20px 4px 0; text-align: left; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line-soft) !important; }
.stat:hover { transform: none; }
.stat .num { font-family: var(--serif); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.stat .lbl { margin-top: 10px; font-size: var(--step--1); color: #c4bfdc; max-width: 18ch; }
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 6px 0; }
  .stat, .stat + .stat { padding: 18px 12px 14px 0; border-left: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line-soft) !important; }
}

/* ---------- ticker ---------- */
.ticker-item { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- prijzen: bento, één groot en twee kleine ---------- */
.prize-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "robux nitro" "robux gift"; gap: 20px; }
.prize-card { text-align: left; padding: 30px 30px 28px; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-content: center; }
.prize-card .big-ic { grid-row: 1 / 4; width: 60px; height: 60px; align-self: start; margin-top: 4px; }
.prize-card h3 { font-size: 1.6rem; margin: 0 0 6px; }
.prize-card p { margin: 0 0 14px; font-size: 1rem; color: #c4bfdc; }
.prize-card .tag-row { justify-content: flex-start; }
.p-robux { grid-area: robux; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 48px); min-height: 380px; position: relative;
  background: radial-gradient(520px 340px at 90% 0%, rgba(246, 217, 138, 0.22), transparent 70%), linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); }
.p-robux .big-ic { position: absolute; top: clamp(24px, 3.4vw, 44px); right: clamp(24px, 3.4vw, 44px); width: clamp(110px, 16vw, 190px); height: clamp(110px, 16vw, 190px); stroke-width: 0.9; opacity: 0.95; }
.p-robux h3 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem); letter-spacing: -0.02em; }
.p-robux p { max-width: 34ch; font-size: var(--step-1); }
.p-nitro { grid-area: nitro; background: radial-gradient(360px 200px at 100% 0%, rgba(176, 108, 255, 0.24), transparent 70%), linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); }
.p-gift { grid-area: gift; background: radial-gradient(360px 200px at 100% 0%, rgba(255, 134, 196, 0.2), transparent 70%), linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)); }
@media (max-width: 860px) {
  .prize-grid { grid-template-columns: 1fr; grid-template-areas: "robux" "nitro" "gift"; }
  .p-robux { min-height: 300px; }
}
@media (max-width: 520px) {
  .prize-card { grid-template-columns: 1fr; }
  .prize-card .big-ic { grid-row: auto; margin-bottom: 14px; }
  .p-robux .big-ic { position: static; margin-bottom: auto; }
}

/* ---------- "waarom": lijst met haarlijnen i.p.v. vier gelijke kaarten ---------- */
#waarom .cards-grid { grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 6vw, 88px); }
#waarom .feature-card { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 30px 0 38px; display: grid; grid-template-columns: 56px 1fr; column-gap: 22px; align-content: start; overflow: visible; }
#waarom .feature-card::before, #waarom .feature-card::after { display: none; }
#waarom .feature-card:hover { transform: none; border-color: var(--gold-solid); }
#waarom .feature-card .icon { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin: 0; background: rgba(246, 217, 138, 0.08); border: 1px solid var(--line); box-shadow: none; color: var(--gold-solid); transition: background-color 0.3s ease, transform 0.4s var(--ease-out); }
#waarom .feature-card:hover .icon { background: rgba(246, 217, 138, 0.16); transform: rotate(-6deg) scale(1.05); }
#waarom .feature-card .icon .ic { width: 26px; height: 26px; }
#waarom .feature-card h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.2; margin: 2px 0 8px; }
#waarom .feature-card p { font-size: var(--step-0); line-height: 1.65; color: #c4bfdc; }
@media (max-width: 860px) { #waarom .cards-grid { grid-template-columns: 1fr; } }

/* ---------- events: rijen met haarlijnen ---------- */
#events .event-grid { display: block; max-width: none; margin: 0; border-top: 1px solid var(--line); }
#events .event-card { display: grid; grid-template-columns: 76px minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.9fr); align-items: center; gap: 12px 30px; padding: 26px 6px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: none; box-shadow: none; overflow: visible; transition: background-color 0.3s ease; }
#events .event-card::before { display: none; }
#events .event-card:hover { transform: none; background: linear-gradient(90deg, rgba(246, 217, 138, 0.06), transparent 80%); }
#events .event-top { height: 64px; width: 64px; border-radius: 20px; background: rgba(246, 217, 138, 0.08); border: 1px solid var(--line); display: grid; place-items: center; }
#events .event-top .big-ic { width: 30px; height: 30px; stroke-width: 1.5; transition: transform 0.4s var(--ease-out); }
#events .event-card:hover .event-top .big-ic { transform: scale(1.18) rotate(-6deg); }
#events .event-body { display: contents; }
#events .event-body h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.15; transition: color 0.3s ease; }
#events .event-card:hover h3 { color: var(--gold-solid); }
#events .event-body p { font-size: var(--step-0); color: #c4bfdc; }
#events .event-body .tag-row { padding: 0; margin: 0; }
@media (max-width: 960px) {
  #events .event-card { grid-template-columns: 64px 1fr; gap: 8px 18px; padding: 22px 0; }
  #events .event-top { grid-row: 1 / 2; }
  #events .event-body p, #events .event-body .tag-row { grid-column: 1 / -1; }
}

/* ---------- eerlijk spel ---------- */
.split h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.06; letter-spacing: -0.025em; }
.split .eyebrow, .cta-band .eyebrow, .merch-banner .eyebrow { display: none; }
.check-list li::before { content: ""; background: var(--gold-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317101f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.500 4.500 4.500L19 7'/%3E%3C/svg%3E") center / 15px no-repeat; }

/* ---------- merch ---------- */
.merch-banner .emoji { animation: none; filter: none; }
.merch-banner .big-ic { width: 96px; height: 96px; stroke-width: 1; }

/* ---------- FAQ: haarlijnen, grotere vragen ---------- */
.faq-list { max-width: none; gap: 0; border-top: 1px solid var(--line); }
.faq-item, .faq-item[open] { background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.faq-item[open] { border-bottom-color: var(--line); }
.faq-item summary { padding: 24px 4px; font-family: var(--serif); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
.faq-item summary:hover { color: var(--gold-solid); }
.faq-a { padding: 0 4px 26px; font-size: var(--step-0); color: #c4bfdc; max-width: 70ch; }
@media (min-width: 1000px) { #faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 64px; align-items: start; } #faq .section-head { display: block; position: sticky; top: 110px; margin: 0; } #faq .section-head h2 { max-width: 12ch; } #faq .faq-list { grid-column: 2; } #faq .wrap > div[style] { grid-column: 2; } }

/* ---------- afsluitende CTA ---------- */
.cta-band { text-align: left; padding: clamp(36px, 6vw, 84px); border-radius: 28px; border-color: rgba(246, 217, 138, 0.34);
  background: linear-gradient(125deg, rgba(246, 217, 138, 0.2), rgba(246, 217, 138, 0) 42%), radial-gradient(560px 300px at 100% 100%, rgba(176, 108, 255, 0.34), transparent 70%), radial-gradient(420px 240px at 0% 100%, rgba(255, 95, 174, 0.18), transparent 70%), var(--bg-soft); }
.cta-band h2 { font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4.2rem); line-height: 1.04; letter-spacing: -0.028em; margin: 0 0 16px; max-width: 14ch; }
.cta-band p { margin: 0; max-width: 46ch; font-size: var(--step-1); color: #d6d1ea; }
.cta-band .ctas { justify-content: flex-start; margin-top: 30px; }
@media (min-width: 1000px) {
  .cta-band { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: end; column-gap: 48px; }
  .cta-band .ctas { grid-column: 2; grid-row: 1 / 4; margin: 0; flex-direction: column; align-items: stretch; align-self: end; min-width: 240px; }
}

/* ---------- eerste indruk bij laden: tokens glijden in (één geschreven moment) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .hero-art .token { opacity: 0; }
  html.js-motion.hero-go .hero-art .token { opacity: 1; transition: opacity 0.9s var(--ease-out) 0.35s; }
}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  .token, .orbit { animation: none !important; }
}

/* zekerheid tegen zijwaarts scrollen op telefoons (Safari negeert overflow-x:hidden op body vaak) */
html { overflow-x: clip; }
.aurora { overflow: hidden; max-width: 100vw; }
@media (max-width: 999px) { .hero-art { margin-left: clamp(20px, 3.5vw, 28px); } }
.hero p.lead { margin: 0 0 36px; }

/* ---------- team-rij en knoppen onder secties: links uitgelijnd ---------- */
.team-preview-row { justify-content: flex-start; }
.mini-avatar { width: clamp(56px, 7vw, 88px); height: clamp(56px, 7vw, 88px); margin-left: calc(clamp(56px, 7vw, 88px) * -0.26); border-width: 4px; }
section .wrap > div[style*="text-align:center"] { text-align: left !important; }
.faq-list { margin: 0; width: 100%; }

/* mobiel: de tokens als compact rijtje, zodat kop en knop meteen in beeld staan */
@media (max-width: 700px) {
  .hero-art { height: 92px; margin-bottom: 18px; width: calc(100% - 40px); }
  .t-coin { width: 88px; height: 88px; left: 0; top: 2px; }
  .t-bolt { width: 66px; height: 66px; left: 82px; top: 22px; }
  .t-gift { width: 56px; height: 56px; left: 142px; top: 6px; }
  .token small { display: none; }
  .orbit { display: none; }
  .hero h1 { font-size: clamp(2.45rem, 11.2vw, 3rem); }
}
@media (max-width: 700px) {
  .stats { column-gap: 22px; }
  .stat, .stat + .stat, .stat:nth-child(even) { padding: 18px 0 14px; border-left: 0 !important; }
}

/* juridische callouts: geen dikke zijstreep; een egale omlijnde tint */
.legal .callout { border: 1px solid rgba(246, 217, 138, 0.38); background: rgba(246, 217, 138, 0.06); }

/* iconen die motion.js in plaats van emoji zet */
.ic-inline { width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: 0.35em; stroke: var(--gold-solid); }
.feature-card .icon .ic, .partner-card .icon .ic { width: 26px; height: 26px; margin: 0; stroke: var(--gold-solid); }
.feature-card .icon, .partner-card .icon { display: grid; place-items: center; font-size: 0; }
.event-top .ic { width: 34px; height: 34px; margin: 0; }
.btn .ic-inline { stroke: currentColor; }
.page-hero .pill { display: none; }
.emoji .ic-inline, .shop-empty .ic-inline, .account-card .emoji .ic-inline { width: 3rem; height: 3rem; margin: 0; stroke-width: 1.3; }