/* prodparker.com /beats/ - stijl.
   Op 2026-08-18 uit de inline <style> van beats/index.html gehaald zodat de
   CSP zonder 'unsafe-inline' kan draaien. Inhoud verder ongewijzigd. */
    :root {
      --bg:      #050509;
      --bg2:     #0b0b16;
      --panel:   #0d0d1b;
      --blue:    #7ec8e3;
      --blue2:   #b5e3f5;
      --white:   #f0ecff;
      --muted:   #9794b4;
      --border:  rgba(126,200,227,0.18);
      --border2: rgba(126,200,227,0.14);
      --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 { scroll-behavior: smooth; scroll-padding-top: 90px; }
    ::selection { background: rgba(126,200,227,.45); color: #fff; }

    body {
      background: var(--bg);
      color: var(--white);
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 100;
      overflow-x: hidden;
    }

    /* ————— atmosphere ————— */
    .grain {
      position: fixed; inset: -50%;
      width: 200%; height: 200%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 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: .045;
      pointer-events: none;
      z-index: 2000;
      animation: grainShift 1.2s steps(4) infinite;
    }
    @keyframes grainShift {
      0% { transform: translate(0,0); }
      25% { transform: translate(-2%,1%); }
      50% { transform: translate(1%,-2%); }
      75% { transform: translate(-1%,2%); }
      100% { transform: translate(2%,-1%); }
    }

    .orb {
      position: fixed;
      border-radius: 50%;
      filter: blur(130px);
      pointer-events: none;
      z-index: 0;
    }
    .orb-a {
      width: 700px; height: 700px;
      top: -360px; left: -320px;
      background: radial-gradient(circle, rgba(126,200,227,0.14) 0%, transparent 72%);
      animation: drift 14s ease-in-out infinite alternate;
    }
    .orb-b {
      width: 550px; height: 550px;
      bottom: -220px; right: -220px;
      background: radial-gradient(circle, rgba(126,200,227,0.12) 0%, transparent 72%);
      animation: drift 10s ease-in-out infinite alternate-reverse;
    }
    @keyframes drift {
      from { transform: translate(0,0); }
      to   { transform: translate(50px, 35px); }
    }

    #progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px; width: 0%;
      background: linear-gradient(to right, var(--blue), var(--blue2), var(--blue));
      z-index: 400;
      box-shadow: 0 0 12px rgba(126,200,227,.7);
    }

    /* ————— NAV ————— */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 300;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 52px;
      transition: background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
      border-bottom: 1px solid transparent;
    }
    nav.scrolled {
      padding: 13px 52px;
      background: rgba(5,5,9,0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom-color: rgba(126,200,227,0.14);
    }
    .nav-left { display: flex; align-items: center; gap: 16px; }
    .back-hub {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      margin-left: -6px;
    }
    .back-hub svg {
      height: 27px;
      width: auto;
      display: block;
      opacity: .5;
      transition: opacity .3s;
      transform-origin: right center;
    }
    .back-hub:hover svg {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(126,200,227,.55));
      animation: hubWave .65s var(--ease) 1;
    }
    @keyframes hubWave {
      0%   { transform: rotate(0deg); }
      32%  { transform: rotate(14deg); }
      68%  { transform: rotate(-10deg); }
      100% { transform: rotate(0deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .back-hub:hover svg { animation: none; }
    }
    .nav-logo svg { height: 36px; width: auto; display: block; transition: opacity .3s, transform .3s; }
    .nav-logo:hover svg { opacity: .75; transform: scale(1.04); }
    .nav-links { display: flex; gap: 36px; list-style: none; }
    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-family: 'Space Mono', monospace;
      transition: color 0.3s;
      position: relative;
      padding: 4px 0;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 100%; height: 1px;
      background: linear-gradient(to right, var(--blue2), var(--blue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease);
    }
    .nav-links a:hover, .nav-links a.active { color: var(--white); }
    .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
    .nav-cta {
      display: inline-block;
      padding: 10px 24px;
      background: transparent;
      border: 1px solid rgba(126,200,227,0.45);
      color: var(--muted);
      text-decoration: none;
      border-radius: 3px;
      font-size: 0.68rem;
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: border-color .3s, color .3s, transform .2s, box-shadow .3s;
    }
    .nav-cta:hover {
      transform: translateY(-2px);
      border-color: rgba(126,200,227,0.8);
      color: var(--white);
      box-shadow: 0 0 24px rgba(126,200,227,.35);
    }

    /* ————— COMPACT HERO + PLAYER ————— */
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 140px 52px 0;
      z-index: 1;
      overflow: visible;
    }
    .hero-bg {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 620px;
      z-index: 0;
      overflow: hidden;
    }
    .hero-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 30%;
      display: block;
      filter: brightness(0.42) saturate(0.55) contrast(1.05);
      animation: kenburns 26s ease-in-out infinite alternate;
      transform-origin: 50% 40%;
    }
    @keyframes kenburns {
      from { transform: scale(1); }
      to   { transform: scale(1.09); }
    }
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(to top, var(--bg) 4%, rgba(5,5,9,0.55) 40%, rgba(5,5,9,0.35) 100%),
        radial-gradient(90% 60% at 50% 10%, rgba(126,200,227,.14), transparent 65%);
    }
    .hero > *:not(.hero-bg) { position: relative; z-index: 2; }

    /* intro-volgorde: logo en naam starten samen op 0.25s — logo (0.25s–1.55s),
       naam per letter (0.25s–1.08s) → slagzin (1.65s) → eyebrow (2.1s) →
       glow streak (2.75s) → autoscroll (~3.6s) */
    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      opacity: 0;
      animation: fadeUp 0.5s 2.1s forwards;
    }
    .hero-eyebrow-line { width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--blue)); }
    .hero-eyebrow-line.rev { background: linear-gradient(to left, transparent, var(--blue)); }
    .hero-eyebrow span {
      font-family: 'Space Mono', monospace;
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--blue);
      text-shadow: 0 0 18px rgba(126,200,227,.5);
    }

    .hero-name-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
      margin-bottom: 20px;
    }
    .ltr {
      display: inline-block;
      opacity: 0;
      transform: translateY(.35em);
      animation: ltrIn .35s var(--spring) forwards;
      animation-delay: calc(.25s + var(--i) * .04s);
    }
    /* De transform op elke letter breekt background-clip:text van de ouder, dus
       draagt elke letter zelf een uitsnede van dezelfde doorlopende gradient.
       De uitsnede wordt in JS uitgelijnd (alignNameGradient). */
    .hero-title .grad .ltr {
      background-image: linear-gradient(115deg, var(--white) 0%, var(--blue2) 48%, var(--blue) 100%);
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    @keyframes ltrIn {
      to { opacity: 1; transform: translateY(0); }
    }
    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: clamp(44px, 6.5vw, 84px);
      line-height: 0.92;
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }
    .hero-title .grad {
      background: linear-gradient(115deg, var(--white) 0%, var(--blue2) 48%, var(--blue) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 34px rgba(126,200,227,.3));
    }
    .hero-title .plain { color: var(--white); }
    .hero-inline-logo {
      height: calc(clamp(44px, 6.5vw, 84px) * 1.15);
      width: auto;
      flex-shrink: 0;
      display: block;
      filter: drop-shadow(0 0 26px rgba(126,200,227,.35));
      animation: logoFloat 7s ease-in-out infinite;
    }
    .hero-inline-logo .lg {
      fill: #fff;
      stroke: #fff;
      stroke-width: 14;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      fill-opacity: 0;
      animation: logoDraw .8s var(--ease) .25s forwards, logoFill .5s ease .9s forwards;
    }
    .hero-inline-logo .lg-b { animation-delay: .4s, 1.05s; }
    @keyframes logoDraw { to { stroke-dashoffset: 0; } }
    @keyframes logoFill { to { fill-opacity: 1; } }
    @keyframes logoFloat {
      0%,100% { transform: translateY(0) rotate(0.001deg); }
      50%     { transform: translateY(-7px) rotate(0.001deg); }
    }

    .hero-desc {
      position: relative;
      font-size: 1.02rem;
      color: var(--muted);
      max-width: 520px;
      line-height: 1.7;
      margin-bottom: 40px;
      font-weight: 300;
      opacity: 0;
      animation: fadeUp 0.6s 1.65s forwards;
      font-family: 'DM Sans', sans-serif;
    }
    .hero-desc strong { color: var(--blue2); font-weight: 400; }
    .hero-desc::after {
      content: '';
      position: absolute;
      top: -10px; bottom: -10px; left: 0;
      width: 34%;
      background: linear-gradient(100deg, transparent, rgba(181,227,245,.5) 45%, rgba(240,236,255,.85) 50%, rgba(181,227,245,.5) 55%, transparent);
      transform: translateX(-160%) skewX(-18deg);
      filter: blur(4px);
      mix-blend-mode: screen;
      opacity: 0;
      animation: descStreak .27s linear 2.75s 1;
      pointer-events: none;
    }
    /* linear = geen afremmen; de streak houdt één constante snelheid vast.
       Aanloop links (-160%) en uitloop rechts (354%) liggen even ver van de tekst,
       en de opacity-ramps zijn symmetrisch (12% / 88%) zodat hij precies opdoemt
       vlak voor de tekst en pas uitdooft zodra hij er helemaal voorbij is. */
    @keyframes descStreak {
      0%   { opacity: 0; transform: translateX(-160%) skewX(-18deg); }
      12%  { opacity: 1; }
      88%  { opacity: 1; }
      100% { opacity: 0; transform: translateX(354%) skewX(-18deg); }
    }

    /* ————— PLAYER (direct in hero) ————— */
    /* fade op een wrapper i.p.v. de iframe-container zelf, en geen backdrop-filter:
       Safari op iPad rendert cross-origin iframes niet betrouwbaar in zo'n compositing-laag */
    .player-reveal {
      width: 100%;
      max-width: 1024px;
      opacity: 0;
      animation: fadeUp 0.8s 2.2s forwards;
    }
    .player-console {
      width: 100%;
      position: relative;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(13,13,27,.92), rgba(5,5,9,.9));
      padding: 18px;
      box-shadow: 0 40px 90px -40px rgba(126,200,227,.45);
      text-align: left;
    }
    .console-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 2px 6px 14px;
      flex-wrap: wrap;
    }
    .console-status {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .console-ticks { display: flex; gap: 5px; }
    .console-ticks i {
      width: 3px; height: 12px;
      background: rgba(151,148,180,.35);
      border-radius: 2px;
    }
    .console-ticks i:nth-child(2) { background: var(--blue2); height: 16px; }
    .console-ticks i:nth-child(4) { background: var(--blue); height: 9px; }
    .console-ticks i:nth-child(6) { background: var(--blue2); height: 14px; }
    .player-console .corner {
      position: absolute;
      width: 18px; height: 18px;
      border: 2px solid rgba(126,200,227,.6);
      pointer-events: none;
    }
    .corner-tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
    .corner-tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
    .corner-bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
    .corner-br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
    .player-console iframe {
      border: none;
      display: block;
      width: 100%;
      max-width: 100%;
      border-radius: 6px;
      background: #0a0a14;
    }

    /* slim license hint under player */
    .player-footnote {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      flex-wrap: wrap;
      margin: 30px 0 0;
      opacity: 0;
      animation: fadeUp 0.8s 2.35s forwards;
    }
    .player-footnote span {
      font-family: 'Space Mono', monospace;
      font-size: 0.64rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .player-footnote a {
      color: var(--blue);
      text-decoration: none;
      border-bottom: 1px solid rgba(126,200,227,.3);
      transition: border-color .3s;
      font-family: 'Space Mono', monospace;
      font-size: 0.64rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .player-footnote a:hover { border-color: var(--blue); }
    .fn-dot { color: var(--blue2) !important; }

    .hero-tail { height: 90px; }

    /* ————— MARQUEE (single track divider) ————— */
    .marquee-wrap {
      overflow: hidden;
      padding: 22px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg2);
      position: relative;
      z-index: 1;
    }
    .marquee-track {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: baseline;
    }
    .marquee-track span {
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 125;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.14em;
      padding: 0 22px;
      color: var(--white);
      text-transform: uppercase;
    }
    .marquee-track .ap { color: var(--blue2); }
    .marquee-track .ab { color: var(--blue); }

    /* ————— SECTIONS ————— */
    section {
      position: relative;
      z-index: 1;
      padding: 110px 52px;
    }
    .s-head { position: relative; margin-bottom: 56px; }
    .s-ghost {
      position: absolute;
      top: -60px; right: 0;
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 125;
      font-weight: 900;
      font-size: clamp(120px, 20vw, 260px);
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(126,200,227,.13);
      pointer-events: none;
      user-select: none;
      z-index: 0;
    }
    .s-title {
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      font-size: clamp(44px, 7vw, 88px);
      line-height: 0.96;
      letter-spacing: 0.015em;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
    }
    .s-title em {
      font-style: normal;
      color: var(--blue2);
      padding-right: .04em;
    }

    /* ————— BUTTONS ————— */
    .btn-primary {
      display: inline-block;
      padding: 16px 40px;
      background: linear-gradient(135deg, var(--blue), var(--blue2));
      color: var(--bg);
      font-weight: 700;
      text-decoration: none;
      border-radius: 3px;
      font-size: 0.76rem;
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: transform 0.2s, box-shadow 0.3s;
      box-shadow: 0 0 28px rgba(126,200,227,0.38);
      position: relative;
      overflow: hidden;
      will-change: transform;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0; left: -80%;
      width: 55%; height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
      transform: skewX(-20deg);
      transition: left .55s var(--ease);
    }
    .btn-primary:hover { box-shadow: 0 0 56px rgba(126,200,227,0.65); }
    .btn-primary:hover::before { left: 130%; }

    /* ————— PRICING ————— */
    #pricing { background: var(--bg2); }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      max-width: 980px;
      margin-bottom: 36px;
    }
    .price-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 40px 32px;
      background: linear-gradient(180deg, rgba(126,200,227,0.04), rgba(5,5,9,.2));
      display: flex;
      flex-direction: column;
      transition: border-color 0.3s, transform 0.35s var(--spring), box-shadow .35s;
      position: relative;
      overflow: hidden;
      will-change: transform;
    }
    .price-card:hover {
      border-color: rgba(126,200,227,0.4);
      transform: translateY(-6px);
      box-shadow: 0 30px 60px -30px rgba(126,200,227,.35);
    }
    @property --spin {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .price-card--exclusive {
      background: linear-gradient(180deg, rgba(126,200,227,0.1), rgba(5,5,9,.3));
      border: 1px solid transparent;
      background-clip: padding-box;
    }
    .price-card--exclusive::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 10px;
      padding: 1px;
      background: conic-gradient(from var(--spin), var(--blue) 0%, var(--blue) 30%, rgba(126,200,227,.15) 55%, var(--blue2) 80%, var(--blue) 100%);
      -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;
      animation: spinBorder 5s linear infinite;
      pointer-events: none;
    }
    @keyframes spinBorder { to { --spin: 360deg; } }
    .price-badge {
      display: inline-block;
      align-self: flex-start;
      font-family: 'Space Mono', monospace;
      font-size: 0.56rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--blue2);
      border: 1px solid rgba(126,200,227,0.4);
      border-radius: 999px;
      padding: 5px 12px;
      margin-bottom: 20px;
    }
    .price-card--exclusive .price-badge {
      color: var(--bg);
      background: linear-gradient(135deg, var(--blue2), var(--blue));
      border-color: transparent;
      font-weight: 700;
    }
    .price-tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .price-amount {
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 120;
      font-weight: 900;
      font-size: 4.4rem;
      line-height: 1;
      background: linear-gradient(135deg, var(--blue2), var(--blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }
    .price-tier {
      font-family: 'Space Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 26px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--border);
    }
    .price-features {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 30px;
      flex: 1;
    }
    .price-features li {
      font-size: 0.86rem;
      color: var(--muted);
      font-weight: 300;
      padding-left: 20px;
      position: relative;
      line-height: 1.5;
    }
    .price-features li::before {
      content: '▸';
      position: absolute;
      left: 0;
      color: var(--blue2);
      font-size: 0.62rem;
      top: 4px;
    }
    .pricing-note {
      font-size: 0.76rem;
      color: var(--muted);
      font-family: 'Space Mono', monospace;
      max-width: 680px;
      line-height: 1.9;
    }
    .pricing-note a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(126,200,227,.3); transition: border-color .3s; }
    .pricing-note a:hover { border-color: var(--blue); }

    /* ————— ABOUT (stats moved here) ————— */
    #about { background: var(--bg); }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 90px;
      align-items: center;
      max-width: 1150px;
    }
    .about-img-wrap {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 4/5;
      border: 1px solid var(--border);
      box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
    }
    .about-img-wrap img.studio {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;
      display: block;
      filter: saturate(0.6) brightness(0.78) contrast(1.04);
      transition: filter 0.6s;
    }
    .about-img-wrap:hover img.studio { filter: saturate(0.9) brightness(0.95) contrast(1.02); }
    .about-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(126,200,227,0.22) 0%, rgba(126,200,227,0.06) 100%);
      pointer-events: none;
      mix-blend-mode: soft-light;
    }
    .about-content .s-head { margin-bottom: 30px; }
    .about-content p {
      font-size: 0.95rem;
      color: var(--muted);
      line-height: 1.85;
      margin-bottom: 18px;
      font-weight: 300;
    }
    .about-content p strong { color: var(--white); font-weight: 500; }
    .about-content p .hl {
      background: linear-gradient(135deg, var(--blue2), var(--blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 500;
    }

    .about-stats {
      display: flex;
      gap: 44px;
      margin-top: 34px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .stat { text-align: left; }
    .stat-n {
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 118;
      font-weight: 800;
      font-size: 2.2rem;
      line-height: 1;
      background: linear-gradient(135deg, var(--blue2), var(--blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 6px;
      font-variant-numeric: tabular-nums;
    }
    .stat-l {
      font-size: 0.6rem;
      font-family: 'Space Mono', monospace;
      letter-spacing: 0.16em;
      color: var(--muted);
      text-transform: uppercase;
    }

    /* ————— CONNECT (contact + socials merged) ————— */
    #connect { background: var(--bg2); }
    .connect-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      max-width: 1150px;
      align-items: center;
    }
    .contact-intro p {
      font-size: 0.94rem;
      color: var(--muted);
      line-height: 1.85;
      font-weight: 300;
      margin: 0;
      max-width: 46ch;
    }
    .social-col-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 18px;
    }
    .social-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .s-card {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 24px;
      border-radius: 10px;
      border: 1px solid var(--border);
      text-decoration: none;
      color: var(--white);
      background: rgba(5,5,9,.4);
      transition: border-color 0.3s, transform 0.35s var(--spring), box-shadow .35s;
      position: relative;
      overflow: hidden;
      will-change: transform;
    }
    .s-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.35s;
    }
    .s-card:hover { transform: translateY(-4px); }
    .s-card:hover::before { opacity: 1; }
    .sc-mail::before{ background: rgba(126,200,227,0.10); }
    .sc-ig::before  { background: linear-gradient(135deg, rgba(214,93,177,0.12), rgba(126,200,227,0.09)); }
    .sc-tt::before  { background: rgba(105,201,208,0.08); }
    .sc-yt::before  { background: rgba(255,0,0,0.09); }
    .sc-bs::before  { background: rgba(245,38,38,0.10); }
    .sc-mail:hover { border-color: rgba(126,200,227,0.55); box-shadow: 0 18px 40px -20px rgba(126,200,227,.45); }
    .sc-ig:hover { border-color: rgba(214,93,177,0.5); box-shadow: 0 18px 40px -20px rgba(214,93,177,.4); }
    .sc-tt:hover { border-color: rgba(105,201,208,0.5); box-shadow: 0 18px 40px -20px rgba(105,201,208,.4); }
    .sc-yt:hover { border-color: rgba(255,80,80,0.45); box-shadow: 0 18px 40px -20px rgba(255,80,80,.35); }
    .sc-bs:hover { border-color: rgba(245,38,38,0.5); box-shadow: 0 18px 40px -20px rgba(245,38,38,.4); }
    .s-icon {
      flex-shrink: 0;
      position: relative;
      z-index: 1;
      width: 42px; height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(151,148,180,.22);
      background: rgba(151,148,180,.06);
      transition: transform .35s var(--spring);
    }
    .s-card:hover .s-icon { transform: scale(1.12) rotate(-6deg); }
    .s-icon svg { width: 20px; height: 20px; display: block; }
    /* Het BeatStars-merk is hoger dan breed; op gelijke hoogte weegt het
       optisch even zwaar als de vierkante glyphs ernaast. */
    .s-icon img { width: auto; height: 22px; display: block; }
    .s-info { position: relative; z-index: 1; }
    .s-platform {
      font-family: 'Archivo', sans-serif;
      font-variation-settings: 'wdth' 115;
      font-weight: 800;
      font-size: 1rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .s-handle { font-size: 0.66rem; color: var(--muted); font-family: 'Space Mono', monospace; letter-spacing: 0.08em; }

    /* ————— FOOTER ————— */
    footer {
      position: relative;
      z-index: 1;
      padding: 44px 52px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      background: var(--bg);
    }
    .footer-logo svg { height: 30px; width: auto; display: block; opacity: .5; transition: opacity .3s; }
    .footer-logo:hover svg { opacity: 1; }
    .footer-mid { display: flex; gap: 26px; flex-wrap: wrap; }
    .footer-mid a {
      font-size: 0.66rem;
      font-family: 'Space Mono', monospace;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: color 0.3s;
    }
    .footer-mid a:hover { color: var(--white); }
    .footer-copy { font-size: 0.62rem; font-family: 'Space Mono', monospace; color: var(--muted); }

    /* ————— SCROLL REVEAL ————— */
    .reveal {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }
    .reveal.hidden { opacity: 0; transform: translateY(30px); }
    .reveal.hidden.visible { opacity: 1; transform: translateY(0); }
    .d1 { transition-delay: 0.08s; }
    .d2 { transition-delay: 0.16s; }
    .d3 { transition-delay: 0.24s; }
    .d4 { transition-delay: 0.32s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ————— RESPONSIVE ————— */
    @media (max-width: 860px) {
      nav, nav.scrolled { padding-left: 22px; padding-right: 22px; }
      .nav-links { display: none; }
      .hero { padding: 110px 22px 0; }
      .hero-bg { height: 520px; }
      .hero-name-row { gap: 12px; }
      .hero-title { font-size: clamp(38px, 10vw, 64px); }
      .hero-inline-logo { height: calc(clamp(38px, 10vw, 64px) * 1.15); }
      .player-console { padding: 10px; }
      section { padding: 80px 22px; }
      .s-ghost { font-size: clamp(90px, 24vw, 160px); top: -40px; }
      .about-grid, .connect-grid { grid-template-columns: 1fr; gap: 48px; }
      footer { padding: 30px 22px; }
      .footer-mid { display: none; }
    }
    @media (max-width: 480px) {
      .hero-title { font-size: clamp(30px, 9vw, 44px); }
      .hero-inline-logo { height: calc(clamp(30px, 9vw, 44px) * 1.1); }
      .about-stats { gap: 24px; }
      .stat-n { font-size: 1.8rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
      }
      .hero-eyebrow, .hero-name-row, .hero-desc, .player-reveal, .player-console, .player-footnote { opacity: 1 !important; animation: none !important; }
      .ltr { opacity: 1 !important; transform: none !important; animation: none !important; }
      .hero-inline-logo .lg { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; animation: none !important; }
      .hero-desc::after { display: none; }
      .grain { display: none; }
      html { scroll-behavior: auto; }
    }
  

/* 2026-08-18: vervangt inline style-attributen (CSP). */
.ltr-0{--i:0}
.ltr-1{--i:1}
.ltr-2{--i:2}
.ltr-3{--i:3}
.ltr-4{--i:4}
.ltr-5{--i:5}
.ltr-6{--i:6}
.ltr-7{--i:7}
.ltr-8{--i:8}
.ltr-9{--i:9}
.ltr-10{--i:10}
.ltr-11{--i:11}
.ltr-12{--i:12}
.btn-block{text-align:center;width:100%}