/* prodparker.com homepage - stijl.
   Op 2026-08-18 uit de inline <style> van index.html gehaald zodat de CSP
   zonder 'unsafe-inline' kan draaien. Inhoud verder ongewijzigd. */
    :root{
      /* Parker / beats */
      --bg:#07070f; --bg2:#0c0c1a; --white:#ede8ff; --muted:#9a97b4;
      --p-blue:#7ec8e3; --p-blue2:#b5e3f5;
      /* Muffin */
      --m-grey:#171c27; --m-grey2:#111622; --m-cyan:#67e8ff; --m-purple:#b86cff; --m-white:#f8fbff; --m-muted:#9aa7bd;
      /* gele "Free download"-badge (kwam van AUTO-BOUNCE, staat nu op Muffin) */
      --badge-bolt:#ffe227; --badge-ink:#0a0a0d;
      --spring: cubic-bezier(.3,1.36,.44,1);
      --ease: cubic-bezier(.22,.61,.24,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: 'Space Mono', monospace;
      overflow: hidden;
    }
    ::selection { background: rgba(126,200,227,.45); color: #fff; }

    /* ————— atmosphere ————— */
    #field {
      position: fixed; inset: 0;
      z-index: 0;
      display: block;
      width: 100%; height: 100%;
    }
    .vignette {
      position: fixed; inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(4,4,10,.6) 100%),
        radial-gradient(100% 100% at 50% 100%, transparent 55%, rgba(4,4,10,.5) 100%);
    }
    .grain {
      position: fixed; inset: 0;
      z-index: 60;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
      opacity: .05;
    }

    /* ————— layout ————— */
    .wrap {
      position: relative;
      z-index: 10;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      padding: clamp(18px, 3vh, 40px) clamp(18px, 3.5vw, 56px);
      gap: clamp(14px, 2.4vh, 30px);
      max-width: 1500px;
      margin: 0 auto;
    }

    /* ————— identity header ————— */
    .id {
      display: flex;
      align-items: center;
      gap: 22px;
      flex-shrink: 0;
      opacity: 0;
      animation: rise .8s var(--spring) .12s forwards;
    }
    .mark svg { height: 52px; width: auto; display: block; }
    .mark .lp1, .mark .lp2 {
      fill: #fff;
      stroke: #fff;
      stroke-width: 14;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      fill-opacity: 0;
      animation: logoDraw 1s var(--ease) .35s forwards, logoFill .6s ease 1.25s forwards;
    }
    .mark .lp2 { animation-delay: .55s, 1.45s; }
    @keyframes logoDraw { to { stroke-dashoffset: 0; } }
    @keyframes logoFill { to { fill-opacity: 1; } }
    .id-text { display: flex; flex-direction: column; gap: 4px; }
    .eyebrow {
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: clamp(30px, 5vw, 50px);
      letter-spacing: .015em;
      line-height: .92;
      text-transform: uppercase;
      white-space: nowrap;
    }
    h1 .grad {
      background-color: var(--white);
      background-image:
        radial-gradient(circle 34px at 10px 8px, var(--p-blue) 0 40%, rgba(126,200,227,0) 74%);
      background-size: 200% 100%;
      background-position: 0% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: glint 1.25s cubic-bezier(.55,.06,.35,.95) 1.6s 1;
    }
    @keyframes glint { from { background-position: 0% 0%; } to { background-position: -200% 0%; } }
    .tagline {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(.8rem, 1.15vw, .92rem);
      font-weight: 300;
      color: var(--muted);
      letter-spacing: .01em;
      line-height: 1.6;
    }
    .tagline strong { color: var(--white); font-weight: 500; }

    /* ————— gates ————— */
    .gates {
      flex: 1;
      display: flex;
      gap: clamp(12px, 1.6vw, 22px);
      min-height: 0;
    }
    .gate {
      position: relative;
      flex: 1;
      border-radius: 18px;
      overflow: hidden;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: clamp(18px, 2.4vw, 34px);
      transition: flex .65s var(--spring), transform .5s var(--ease), box-shadow .5s var(--ease);
      opacity: 0;
      animation: rise .85s var(--spring) forwards;
      will-change: flex;
      outline-offset: 4px;
    }
    .gate:nth-child(1) { animation-delay: .4s; }
    .gate:nth-child(2) { animation-delay: .55s; }
    .gate:nth-child(3) { animation-delay: .7s; }
    @media (pointer: fine) {
      .gate:hover, .gate:focus-visible { flex: 1.55; }
    }

    .g-arrow {
      position: absolute;
      top: clamp(14px, 2vw, 24px);
      right: clamp(16px, 2.2vw, 26px);
      width: 34px; height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .45s var(--spring), background .3s, border-color .3s;
      border: 1px solid transparent;
    }
    .g-arrow svg { width: 15px; height: 15px; display: block; }
    .gate:hover .g-arrow { transform: rotate(45deg) scale(1.12); }

    .g-chip {
      width: clamp(46px, 5vw, 62px);
      height: clamp(46px, 5vw, 62px);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      flex-shrink: 0;
      transition: transform .45s var(--spring);
    }
    .gate:hover .g-chip { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
    .g-word {
      line-height: .95;
      margin-bottom: 10px;
      transition: transform .45s var(--ease);
      transform-origin: left bottom;
    }
    .gate:hover .g-word { transform: scale(1.04); }
    .g-sub {
      font-size: clamp(.66rem, .95vw, .78rem);
      line-height: 1.6;
      letter-spacing: .02em;
      max-width: 340px;
      margin-bottom: 18px;
    }
    .g-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: .66rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 700;
      padding: 11px 20px;
      border-radius: 999px;
      width: fit-content;
      transition: gap .3s var(--ease), transform .3s, box-shadow .3s;
    }
    .gate:hover .g-cta { gap: 16px; transform: translateY(-2px); }
    .g-cta svg { width: 13px; height: 13px; }

    /* — gate 1 · BEATS — */
    .gate-beats {
      background: linear-gradient(175deg, #120b26 0%, #0a0716 55%, #07050f 100%);
      border: 1px solid rgba(126,200,227,.3);
      box-shadow: 0 20px 60px -30px rgba(126,200,227,.45);
    }
    .gate-beats:hover { box-shadow: 0 30px 90px -30px rgba(126,200,227,.7); border-color: rgba(126,200,227,.55); }
    .gate-beats::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(90% 70% at 80% 10%, rgba(126,200,227,.28), transparent 60%);
      transition: opacity .5s;
      opacity: .7;
    }
    .gate-beats:hover::before { opacity: 1; }
    /* equalizer strip */
    .gate-beats::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 34%;
      background: repeating-linear-gradient(90deg,
        rgba(126,200,227,.5) 0 5px, transparent 5px 16px,
        rgba(126,200,227,.45) 16px 21px, transparent 21px 34px);
      -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 90%);
      mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 90%);
      animation: eqSlide 9s linear infinite;
      opacity: .5;
      transition: opacity .5s;
      pointer-events: none;
    }
    .gate-beats:hover::after { opacity: .9; }
    @keyframes eqSlide { to { background-position: 340px 0; } }
    .gate-beats .g-chip {
      background: rgba(126,200,227,.14);
      border: 1px solid rgba(126,200,227,.45);
    }
    .gate-beats .g-chip svg { height: 55%; width: auto; }
    .gate-beats .g-word {
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 125;
      font-weight: 900;
      font-size: clamp(38px, 4.6vw, 66px);
      letter-spacing: .01em;
      background: linear-gradient(115deg, var(--white) 0%, var(--p-blue2) 55%, var(--p-blue) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .gate-beats .g-sub { color: var(--muted); }
    .gate-beats .g-cta {
      color: var(--p-blue2);
      border: 1px solid rgba(126,200,227,.4);
      background: rgba(126,200,227,.05);
    }
    .gate-beats:hover .g-cta { box-shadow: 0 0 26px rgba(126,200,227,.4); }
    .gate-beats .g-arrow { border-color: rgba(126,200,227,.4); color: var(--p-blue2); background: rgba(126,200,227,.1); }

    /* — gate 2 · MUFFIN — */
    .gate-muffin {
      background: linear-gradient(175deg, #1a2130 0%, #12161f 55%, #0d1119 100%);
      border: 1px solid transparent;
      background-clip: padding-box;
      box-shadow: 0 20px 60px -30px rgba(103,232,255,.3);
    }
    .gate-muffin::before {
      content: '';
      position: absolute; inset: -1px;
      border-radius: 18px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(103,232,255,.65), rgba(184,108,255,.55) 60%, rgba(103,232,255,.2));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
    }
    .gate-muffin:hover { box-shadow: 0 30px 90px -30px rgba(103,232,255,.5); }
    .gate-muffin::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(60% 50% at 20% 15%, rgba(103,232,255,.14), transparent 60%),
        radial-gradient(60% 50% at 85% 80%, rgba(184,108,255,.14), transparent 60%),
        linear-gradient(rgba(154,167,189,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154,167,189,.05) 1px, transparent 1px);
      background-size: auto, auto, 34px 34px, 34px 34px;
      -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 100%);
      mask-image: radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 100%);
      transition: opacity .5s;
      opacity: .8;
      pointer-events: none;
    }
    .gate-muffin:hover::after { opacity: 1; }
    .gate-muffin .g-chip {
      background: rgba(103,232,255,.08);
      border: 1px solid rgba(103,232,255,.35);
      overflow: hidden;
      position: relative;
    }
    .gate-muffin .g-chip img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; display: block; }
    .gate-muffin .g-chip .m-hover { opacity: 0; }            /* abrupt frame swap on hover */
    .gate-muffin:hover .g-chip .m-default { opacity: 0; }
    .gate-muffin:hover .g-chip .m-hover { opacity: 1; }
    .gate-muffin .g-word {
      font-family: 'Chillax', sans-serif;
      font-weight: 600;
      font-size: clamp(36px, 4.4vw, 60px);
      color: var(--m-white);
      letter-spacing: -.036em;
    }
    .gate-muffin .g-word .m-grad { color: var(--m-white); }
    .gate-muffin .g-sub { color: var(--m-muted); }
    .gate-muffin .g-cta {
      color: var(--m-grey2);
      background: linear-gradient(120deg, var(--m-cyan), #9fd7ff);
      border: 1px solid transparent;
    }
    .gate-muffin:hover .g-cta { box-shadow: 0 0 30px rgba(103,232,255,.45); }
    .gate-muffin .g-arrow { border-color: rgba(103,232,255,.4); color: var(--m-cyan); background: rgba(103,232,255,.08); }

    /* — gate 2 · MUFFIN · coming-soon state — */
    .gate.is-soon { pointer-events: none; cursor: default; }
    .gate.is-soon > *:not(.soon-overlay) {
      filter: grayscale(.94) brightness(.72) contrast(.96);
      opacity: .48;
    }
    .gate-muffin.is-soon {
      background: linear-gradient(175deg, #161b26 0%, #10141e 55%, #0c0f17 100%);
      box-shadow: 0 20px 60px -34px rgba(12,16,24,.8);
    }
    .gate-muffin.is-soon::before {
      background: linear-gradient(135deg, rgba(154,167,189,.30), rgba(154,167,189,.12) 60%, rgba(154,167,189,.05));
    }
    .gate-muffin.is-soon::after { opacity: .22; filter: grayscale(1); }
    .soon-overlay {
      position: absolute; inset: 0; z-index: 8;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 11px;
      background: radial-gradient(85% 70% at 50% 48%, rgba(5,8,14,.42), transparent 78%);
    }
    .soon-ribbon {
      position: relative; overflow: hidden; display: inline-block;
      transform: rotate(-5deg);
      font-family: 'Space Grotesk', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
      font-weight: 700;
      font-size: clamp(14px, 1.4vw, 19px);
      line-height: 1.6;
      letter-spacing: .22em;
      white-space: nowrap;
      color: #0d1119;
      background: linear-gradient(118deg, var(--m-cyan) 0%, #9fd7ff 42%, var(--m-purple) 100%);
      padding: 12px 22px 12px 26px;
      border-radius: 13px;
      border: 1px solid rgba(248,251,255,.55);
      box-shadow: 0 14px 44px -10px rgba(103,232,255,.6), 0 6px 24px -6px rgba(184,108,255,.5), inset 0 1px 0 rgba(255,255,255,.5);
      animation: soonFloat 4.2s ease-in-out infinite;
      cursor: default;
    }
    .soon-ribbon::after {
      content: '';
      position: absolute; inset: -2px;
      background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
      transform: translateX(-130%);
      animation: soonShine 3.6s var(--ease) infinite;
    }
    .soon-sub {
      display: block;
      transform: rotate(-5deg);
      font-family: 'Space Grotesk', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
      font-size: 10.5px;
      line-height: 1.6;
      font-weight: 700;
      letter-spacing: .3em; text-indent: .3em;
      text-transform: uppercase;
      color: var(--m-cyan);
      opacity: .9;
    }
    @keyframes soonShine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
    @keyframes soonFloat { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-5px); } }
    @media (prefers-reduced-motion: reduce) {
      .soon-ribbon, .soon-ribbon::after { animation: none !important; }
    }

    .g-badge {
      position: absolute;
      top: clamp(50px, 6vw, 66px);
      right: clamp(14px, 2vw, 22px);
      background: var(--badge-ink);
      color: var(--badge-bolt);
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: 6px;
      transform: rotate(6deg);
      animation: pulseBadge 2.4s ease-in-out infinite;
    }
    @keyframes pulseBadge {
      0%,100% { transform: rotate(6deg) scale(1); }
      50%     { transform: rotate(6deg) scale(1.06); }
    }

    /* ————— socials + footer ————— */
    .socials {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
      opacity: 0;
      animation: rise .8s var(--spring) .95s forwards;
    }
    .socials-label {
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-right: 6px;
    }
    .socials a {
      width: 40px; height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(154,151,180,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      transition: color .3s, border-color .3s, transform .3s var(--spring), background .3s;
    }
    .socials a:hover {
      color: var(--white);
      border-color: rgba(126,200,227,.6);
      background: rgba(126,200,227,.12);
      transform: translateY(-4px) rotate(-4deg);
    }
    .socials a svg { width: 17px; height: 17px; display: block; }
    footer {
      font-size: .64rem;
      letter-spacing: .08em;
      color: var(--muted);
      flex-shrink: 0;
      opacity: 0;
      animation: rise .8s var(--spring) 1.08s forwards;
      display: flex;
      justify-content: center;
      text-align: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    footer a { color: var(--p-blue); text-decoration: none; }
    footer a:hover { text-decoration: underline; }
    .footer-legal { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

    /* De cookiebalk staat als volle balk onderaan (consent.css). Op desktop
       staat .wrap vast op 100dvh, dus daar moet het scherm meekrimpen; op
       mobiel scrollt de pagina en volstaat de body-padding uit consent.css. */
    @media (min-width: 881px) {
      html.ck-open .wrap { height: calc(100dvh - var(--ck-h, 0px)); }
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(26px); filter: blur(5px); }
      to   { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    /* ————— responsive ————— */
    @media (max-width: 880px) {
      body { overflow: auto; }
      .wrap { height: auto; min-height: 100dvh; }
      /* body heeft hier height:100% met border-box, dus padding-bottom rekt de
         pagina niet op. De ruimte voor de cookiebalk moet daarom in .wrap. */
      html.ck-open .wrap { padding-bottom: calc(clamp(18px, 3vh, 40px) + var(--ck-h, 0px)); }
      .id { flex-direction: column; align-items: flex-start; gap: 14px; }
      .gates { flex-direction: column; }
      .gate { min-height: 250px; flex: none; }
      .gate:hover { flex: none; }
      .g-badge { right: 14px; top: 42px; }
      .socials { flex-wrap: wrap; }
      footer { flex-direction: column; }
    }

    /* ————— reduced motion ————— */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001s !important;
        animation-delay: 0s !important;
        transition-duration: .001s !important;
      }
      .id, .gate, .socials, footer { opacity: 1 !important; animation: none !important; }
      .mark .lp1, .mark .lp2 { animation: none !important; stroke-dashoffset: 0; fill-opacity: 1; }
      h1 .grad { animation: none !important; background-position: 0% 0%; }
      .grain { display: none; }
    }
    /* ===== card media (added: hub-card previews) ===== */
    .gate > .g-chip, .gate > .g-word, .gate > .g-sub, .gate > .g-cta{position:relative;z-index:3}
    .gate .g-arrow{z-index:6}
    .g-badge{z-index:6}
    .g-media{position:absolute;left:0;right:0;top:0;height:56%;overflow:hidden;z-index:1}
    .g-media::after{content:'';position:absolute;inset:0;pointer-events:none}
    .g-media .topscrim{position:absolute;left:0;right:0;top:0;height:56px;pointer-events:none;z-index:4}
    .gate-beats .g-media::after{background:linear-gradient(to bottom,transparent 46%,#0a0716 96%)}
    .gate-beats .g-media .topscrim{background:linear-gradient(to bottom,rgba(7,5,15,.66),transparent)}
    .gate-muffin .g-media::after{background:linear-gradient(to bottom,transparent 46%,#12161f 96%)}
    .gate-muffin .g-media .topscrim{background:linear-gradient(to bottom,rgba(13,17,25,.72),transparent)}

    /* Beats — BeatStars-style widget */
    .bs{position:absolute;inset:0;background:linear-gradient(180deg,#0a0f1e,#080b16);display:flex;flex-direction:column}
    .bs-top{display:flex;align-items:center;gap:9px;padding:11px 12px 9px}
    .bs-logo{font-family:'Archivo',sans-serif;font-weight:900;font-size:11px;letter-spacing:.02em;color:#eef}
    .bs-cart{margin-left:auto;font-size:9px;color:#8fa;opacity:.85;border:1px solid rgba(126,200,227,.3);border-radius:6px;padding:2px 7px}
    .bs-feat{display:flex;gap:10px;padding:4px 12px 10px;align-items:center}
    .bs-art{width:52px;height:52px;border-radius:8px;flex:none;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,#2b2350,#0b0a1c);border:1px solid rgba(255,255,255,.08)}
    .bs-art::before{content:'';position:absolute;inset:0;background:conic-gradient(from 200deg at 60% 40%,rgba(126,200,227,.5),transparent 40%,rgba(126,200,227,.4) 70%,transparent)}
    .bs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#12c2e0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(18,194,224,.6)}
    .bs-play svg{width:9px;height:9px;fill:#04141a;margin-left:1px}
    .bs-featmeta{flex:1;min-width:0}
    .bs-title{font-family:'Archivo',sans-serif;font-weight:900;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
    .bs-tags{display:flex;gap:5px;margin-top:5px}
    .bs-tag{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#bcd;border:1px solid rgba(126,200,227,.28);border-radius:4px;padding:2px 6px}
    .bs-wave{display:flex;align-items:flex-end;gap:2px;height:26px;padding:0 12px 2px;opacity:.9}
    .bs-wave i{flex:1;background:linear-gradient(180deg,#7ec8e3,#5a7fd6);border-radius:1px;height:30%;transform-origin:bottom;animation:bsWave 1.1s ease-in-out infinite}
    @keyframes bsWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
    .bs-rows{margin-top:auto;padding:6px 8px 12px;display:flex;flex-direction:column;gap:5px}
    .bs-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
    .bs-row .th{width:22px;height:22px;border-radius:5px;flex:none;background:linear-gradient(135deg,#241d45,#0d0b20);border:1px solid rgba(255,255,255,.08)}
    .bs-rt{flex:1;min-width:0}
    .bs-rn{font-size:10px;color:#e7e3fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bs-rm{font-size:8px;color:#8a86a5;letter-spacing:.04em}
    .bs-price{font-size:9px;color:#b5e3f5;font-weight:700}
    .bs-add{font-size:8px;font-weight:700;letter-spacing:.05em;color:#04141a;background:#12c2e0;border-radius:5px;padding:3px 7px}

    /* Muffin — UI simulation */
    .ms{position:absolute;inset:0;background:#0f1420;overflow:hidden}
    .ms-view{position:absolute;inset:0;overflow:hidden;opacity:0;will-change:opacity}
    .ms-list{opacity:1}
    .ms-list img{position:absolute;top:0;left:50%;height:238%;width:auto;max-width:none;transform:translate(-50%,0);transform-origin:top center;will-change:transform;filter:saturate(1.04)}
    .ms-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:2% 50%;filter:saturate(1.04)}
    .ms-play{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid rgba(150,200,230,.9);box-shadow:0 0 10px rgba(140,190,225,.45);opacity:0;pointer-events:none;will-change:transform,opacity}
    .ms-playhead{position:absolute;left:0;top:0;width:2px;height:18px;border-radius:1px;background:linear-gradient(180deg,rgba(216,234,248,.98),rgba(150,186,214,.8));box-shadow:0 0 5px rgba(150,192,222,.6);opacity:0;pointer-events:none;will-change:left,top,height,opacity}
    .ms-rate{background:radial-gradient(120% 100% at 50% 32%,#1b2637,#0e1420);display:flex;align-items:center;justify-content:center}
    .ms-rate-inner{text-align:center;transform:translateY(-4%)}
    .ms-rate-title{display:block;font-family:'Chillax',sans-serif;color:#d3ecf7;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
    .ms-stars{display:flex;gap:9px;justify-content:center}
    .ms-stars svg{width:32px;height:32px;fill:#39435a;transform-origin:center;transition:fill .18s ease, transform .22s var(--spring)}
    .ms-stars svg.on{fill:#ffc02e;transform:scale(1.16)}
    .ms .cursor{position:absolute;left:0;top:0;width:22px;height:22px;z-index:6;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));will-change:transform}

    @media (max-width:880px){
      .gate{min-height:470px}
      .g-media{height:150px}
    }

    /* — muffin waitlist —
       De Muffin-tegel is uitgeschakeld zolang er geen formulier is. Zodra
       waitlist.js een Kit-ID heeft, zet die .has-waitlist erop en wordt de
       tegel weer een knop die het venster opent. */
    .gate.is-soon.has-waitlist { pointer-events: auto; cursor: pointer; }
    .gate.is-soon.has-waitlist > *:not(.soon-overlay) {
      transition: filter .45s var(--ease), opacity .45s var(--ease);
    }
    .gate.is-soon.has-waitlist:hover > *:not(.soon-overlay),
    .gate.is-soon.has-waitlist:focus-visible > *:not(.soon-overlay) {
      filter: grayscale(.5) brightness(.88) contrast(.98);
      opacity: .74;
    }
    .soon-cta {
      margin-top: 6px;
      font-family: 'Space Mono', monospace;
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 700;
      color: #0d1119;
      background: linear-gradient(120deg, var(--m-cyan), #9fd7ff);
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 11px 20px;
      cursor: pointer;
      transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    }
    .gate:hover .soon-cta { transform: translateY(-2px); box-shadow: 0 0 30px rgba(103,232,255,.45); }
    .soon-cta[hidden] { display: none; }
    /* De tegel zelf is de knop, dus daar hoort de focus-ring. */
    .gate.has-waitlist:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 4px; }

    .wl-modal {
      position: fixed; inset: 0; z-index: 9000;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      overflow: auto;
      background: rgba(4,4,10,.8);
      opacity: 0;
      transition: opacity .2s var(--ease);
    }
    .wl-modal.is-in { opacity: 1; }
    .wl-modal[hidden] { display: none; }
    .wl-panel {
      position: relative;
      width: min(100%, 460px);
      background: linear-gradient(175deg, #141a26 0%, #0e131d 60%, #0b0f17 100%);
      border: 1px solid rgba(103,232,255,.28);
      border-radius: 18px;
      padding: 30px;
      box-shadow: 0 30px 80px -30px rgba(0,0,0,.9);
      transform: translateY(10px);
      transition: transform .2s var(--ease);
    }
    .wl-modal.is-in .wl-panel { transform: none; }
    .wl-close {
      position: absolute; top: 14px; right: 14px;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      border: 1px solid rgba(154,167,189,.3);
      background: transparent;
      color: var(--m-muted);
      font-family: 'Space Mono', monospace;
      font-size: 15px; line-height: 1;
      cursor: pointer;
      transition: color .2s, border-color .2s, background .2s;
    }
    .wl-close:hover { color: var(--m-white); border-color: rgba(103,232,255,.5); background: rgba(103,232,255,.08); }
    .wl-close:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; }
    .wl-eyebrow {
      font-family: 'Space Mono', monospace;
      font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--m-cyan); opacity: .9;
      margin-bottom: 12px;
    }
    .wl-title {
      font-family: 'Chillax', sans-serif;
      font-weight: 600; font-size: 1.5rem; line-height: 1.2;
      color: var(--m-white);
      margin-bottom: 10px;
    }
    .wl-panel .wl-sub {
      font-family: 'DM Sans', sans-serif;
      font-size: .88rem; line-height: 1.65;
      color: var(--m-muted);
      margin-bottom: 20px;
    }
    .wl-label {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .wl-row { display: flex; flex-direction: column; gap: 10px; }
    .wl-input {
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      color: var(--m-white);
      background: rgba(5,9,20,.65);
      border: 1px solid rgba(154,167,189,.35);
      border-radius: 12px;
      padding: 14px 16px;
      width: 100%;
      transition: border-color .2s, background .2s;
    }
    .wl-input::placeholder { color: #6f7a8d; }
    .wl-input:hover { border-color: rgba(154,167,189,.6); }
    .wl-input:focus { outline: none; border-color: var(--m-cyan); background: rgba(5,9,20,.9); }
    .wl-input:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; }
    .wl-input:disabled { opacity: .55; cursor: not-allowed; }
    .wl-submit {
      font-family: 'Space Mono', monospace;
      font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
      color: #0d1119;
      background: linear-gradient(120deg, var(--m-cyan), #9fd7ff);
      border: 1px solid transparent;
      border-radius: 12px;
      padding: 15px 20px;
      cursor: pointer;
      transition: box-shadow .3s var(--ease), transform .2s var(--ease), opacity .2s;
    }
    .wl-submit:hover { box-shadow: 0 0 30px rgba(103,232,255,.4); transform: translateY(-1px); }
    .wl-submit:active { transform: translateY(1px); }
    .wl-submit:focus-visible { outline: 2px solid var(--m-white); outline-offset: 3px; }
    .wl-submit:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
    .wl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
    .wl-msg {
      font-family: 'Space Mono', monospace;
      font-size: .68rem; line-height: 1.55; letter-spacing: .02em;
      color: var(--m-muted);
      margin-top: 14px;
    }
    .wl-msg:empty { display: none; }
    .wl-msg.is-ok { color: var(--m-cyan); }
    .wl-msg.is-err { color: #ff8f8f; }
    .wl-fine {
      font-family: 'Space Mono', monospace;
      font-size: .6rem; line-height: 1.6; letter-spacing: .04em;
      color: var(--m-muted); opacity: .8;
      margin-top: 14px;
    }
    .wl-fine a { color: var(--m-cyan); text-decoration: underline; text-underline-offset: 2px; }
    .wl-fine a:hover { color: var(--m-white); }
    .wl-form.is-done .wl-fine { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .wl-modal, .wl-panel { transition: none; }
    }
  

/* 2026-08-18: vervangt inline style-attributen (CSP). */
.svg-sprite{display:none}

/* ===== 2026-08-30: Muffin als hoofdactie, Beats secundair =====
   Muffin blijft de eerste tegel in de markup; deze regels maken hem ook
   visueel het grootste blok. Beats staat in .gates-secondary, een kleinere
   rij eronder. Tot 2026-09-06 stond AUTO-BOUNCE daar naast Beats; sinds die
   tegel weg is vult Beats de rij alleen. */
.gates-secondary {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 22px);
  min-height: 0;
  /* Zelfde overgang als .gate: de hover op Beats laat deze wrapper groeien,
     niet de tegel zelf, dus de animatie moet hier zitten. */
  transition: flex .65s var(--spring);
  will-change: flex;
}
.gates-secondary .gate { flex: 1; }

@media (min-width: 881px) {
  /* Met twee tegels staan Muffin en Beats weer naast elkaar in plaats van
     onder elkaar (2026-09-06). Met drie tegels was een liggende Muffin-balk
     met een rij eronder logischer; met twee wordt Beats dan zo breed en laag
     dat het wordmerk over de BeatStars-widget valt. */
  .gate-muffin { flex: 2.2 1 0; }
  .gates-secondary { flex-direction: row; flex: 1 1 0; }
  @media (pointer: fine) {
    /* 2026-09-08: de hover-animatie op Beats hersteld. Tot 2026-08-30 waren
       alle tegels directe kinderen van .gates en gold .gate:hover{flex:1.55}.
       Sinds Beats in .gates-secondary zit deed die regel niets meer: Beats is
       het enige kind, dus groeien binnen de eigen wrapper levert geen breedte
       op. De hover moet daarom op de wrapper staan.

       Beats groeit met de oude factor 1,55: 1 -> 1.55. Muffin niet, zie
       hieronder.

       WAAROM MUFFIN OP 2.5 STAAT EN NIET HOGER (2026-09-08c)

       De Beats-kaart kan door min-width:auto niet smaller dan zijn eigen
       inhoud: de BeatStars-widget en het woordmerk. Gemeten vloer: 217px bij
       een venster van 900px, 308px bij 1280 en 341px vanaf 1440. Muffin loopt
       daar tegenaan, en dat is een harde muur midden in de animatie.

       Stond Muffin op 3.41, dan vroeg de hover om 1034px terwijl er maar 976
       beschikbaar was. De laatste 58px van de beweging bestond niet, inclusief
       de hele overshoot van de spring. Resultaat: bij het beginnen met hoveren
       klapte de kaart tegen de muur zonder na te veren, terwijl het loslaten
       wel netjes uitveerde, want die kant heeft ruimte zat.

       cubic-bezier(.3,1.36,.44,1) piekt op 1,0431 van de afstand. De eindstand
       plus die 4,31% moet dus onder de vloer van Beats blijven, anders wordt
       precies de naveer eraf gesneden. De krapste verhouding zit bij 900px.
       Gemeten met 2.5 (breedte van Muffin in px):

         venster   rust M/B    Beats-vloer   eind   piek   ruimte over
         900        580/243     217           600    601    4
         1100       708/297     265           734    735    6
         1280       824/346     308           854    855    7
         1440       927/390     341           961    962   14
         1680       961/405     341           996    997   28

       Verhoog 2.5 dus niet zonder die vloer opnieuw te meten; 2.6 en hoger
       schaaft bij 900 tot 1280px de top van de naveer er weer af. En zet geen
       min-width:0 op de Beats-kaart om meer ruimte te maken: bij 283px valt de
       rechterkant weg en leest het woordmerk als BEAT.

       Gevolg dat bewust geaccepteerd is: de hover op Beats verschuift de grens
       125px en die op Muffin ~33px. Niet even sterk, maar allebei vloeiend.

       :hover op de wrapper kan omdat Beats het enige kind is en de wrapper dus
       precies de tegel is. :focus-within vangt de toetsenbordfocus, die op de
       <a> binnenin landt en niet op de wrapper. */
    .gate-muffin:hover, .gate-muffin:focus-visible { flex: 2.5 1 0; }
    .gates-secondary:hover, .gates-secondary:focus-within { flex: 1.55 1 0; }
  }
  /* iets rustiger opmaak voor de secundaire tegels dan de hoofdtegel */
  .gates-secondary .gate { padding: clamp(14px, 1.8vw, 24px); }
}

/* Muffin krijgt de duidelijkste CTA: groter woordmerk en grotere knop dan
   voorheen, om als hoofdactie op de pagina te lezen. */
.gate-muffin .g-word { font-size: clamp(38px, 5vw, 72px); }
.gate-muffin .g-cta {
  font-size: .74rem;
  padding: 14px 26px;
}