/* prodparker.com /muffin/ - stijl.
   Op 2026-08-18 uit de twee inline <style>-blokken van muffin/index.html
   gehaald zodat de CSP zonder 'unsafe-inline' kan draaien. De blokken
   staan hier in dezelfde volgorde; inhoud ongewijzigd. */
:root{
  /* ── Nord Dusk, getuned 2026-08-05: zelfde Nord-tinten, maar accenten
     verzadigder op een lichtere, zachtere ondergrond (gekozen variant D;
     basis was 1:1 [data-theme="nord-dusk"] uit muffin.css, zie
     _live-backup-2026-08-05) ── */
  --bg:#343c4f;
  --bg2:#424b61;
  --surf:#424b61;              /* paneelvlak */
  --cyan:#5dc7e5;              /* Nord frost - hoofdaccent, chroma ↑ */
  --cyan-soft:#69d3d2;         /* frost, lichter - tweede stop in verlopen */
  --purple:#66a1db;            /* tweede accent, frost-blauw */
  --green:#9bd369;
  --yellow:#f9ca6c;
  --red:#dd4b5a;
  --white:#f4f6fa;             /* Nord snow storm, iets helderder */
  --muted:#bfc9d9;
  --line:#5c6880;
  /* 2026-09-02: harde-schaduw-inkt, geleend van de AUTO-BOUNCE-stijl maar
     in Muffins eigen palet. Zwart zou hier verdwijnen: de pagina staat zelf
     al op #343c4f. Deze tint is duidelijk donkerder dan de achtergrond en
     blijft blauwgrijs, dus hij leest als diepte in plaats van als een gat. */
  --ink:#1e2431;
  --pop:0 4px 0 var(--ink);
  --pop-hi:0 7px 0 var(--ink);
  --pop-lo:0 2px 0 var(--ink);
  --panel:linear-gradient(180deg,#475166,#3e4759);
  --on-accent:#1f2530;         /* tekst op een frost-vlak */
  --accent-rgb:93,199,229;
  --accent2-rgb:102,161,219;
  --neutral-rgb:216,222,233;   /* snow storm, voor neutrale rgba's */
  --deep-rgb:52,60,79;         /* glaslagen: nav, kaartjes, lightbox */
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --spring:cubic-bezier(.3,1.36,.44,1);
  --font-d:'Chillax', sans-serif;
  --font-b:'General Sans', sans-serif;
  --font-m:'Martian Mono', monospace;   /* labellaag, gekozen 2026-08-07 uit de labelfont-mockup */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-b);
  font-weight:350;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:rgba(var(--accent-rgb),.35);color:#fff}
img{max-width:100%}

/* ----- atmosphere -----
   2026-09-03: de drie zwevende gloedbollen (.aurora) zijn eruit. Ze lagen
   als vaste laag over de volle pagina en trokken op de secties met een
   screenshot een blauwe waas over de app-UI heen. De pagina staat nu op de
   platte var(--bg); de kleur in het beeld komt van de screenshots zelf.
   De bijbehorende scroll-parallax in muffin.js is in dezelfde ronde weg. */

/* ----- nav ----- */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  z-index:300;
  width:min(calc(100% - 28px), var(--max));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 16px;
  border-radius:18px;
  box-shadow:0 2px 0 rgba(30,36,49,.55);
  transition:box-shadow .4s;
}
/* De frosted laag zit op een ::before in plaats van op .nav zelf. Met
   backdrop-filter op .nav wordt de hele balk (logo + tekst) op een eigen
   compositielaag gerasterd en op de halve pixel van translateX(-50%)
   hersampled - dat maakte het muffin-logo en de tekst wazig. De pseudo draagt
   geen tekst, dus daar speelt het niet. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  border:1px solid var(--line);
  background:rgba(var(--deep-rgb),.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
/* De balk hield bij het scrollen dezelfde blur maar werd melkiger
   (achtergrond .72 -> .9). Dat blijft nu op .72: de doorzichtigheid van de
   header verandert niet mee met de scroll. Alleen de schaduw tilt een tikje
   op als teken dat je van de hero af bent. */
.nav.scrolled{box-shadow:0 3px 0 rgba(30,36,49,.75)}
.nav-left{display:flex;align-items:center;gap:14px}
.back-hub{display:flex;align-items:center;justify-content:center;padding:6px;margin-left:-4px}
.back-hub svg{height:26px;width:auto;display:block;fill:#fff;opacity:.5;transition:opacity .3s;transform-origin:right center}
.back-hub:hover svg{opacity:1;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.55));animation:hubWave .65s cubic-bezier(.22,.61,.24,1) 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}}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand{align-items:center}
.brand img{width:54px;height:54px;object-fit:contain;display:block}
.brand-txt{display:flex;flex-direction:column;justify-content:center;line-height:1}
.brand-name{font-family:var(--font-d);font-weight:600;font-size:27px;letter-spacing:-.036em;line-height:.92;color:var(--white)}
.brand-sub{font-family:var(--font-d);font-weight:500;font-size:11px;letter-spacing:.045em;text-transform:none;color:var(--cyan);margin-top:1px}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:color .3s;position:relative;padding:4px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{transform:scaleX(1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-b);font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  padding:13px 26px;border-radius:14px;text-decoration:none;
  transition:transform .25s var(--spring), box-shadow .3s, background .3s, border-color .3s;
  /* 2px zodat de primaire en de secundaire knop even hoog blijven: de
     secundaire heeft een zichtbare rand van 2px, de primaire een onzichtbare. */
  border:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
/* De knop drukt in plaats van te zweven: omhoog bij hover, in bij klik, en de
   harde schaduw beweegt mee. Dat is het AUTO-BOUNCE-gebaar, hier met Muffins
   eigen inkt. */
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(2px)}
.btn-primary{
  color:var(--on-accent);
  background:linear-gradient(120deg, var(--cyan), var(--cyan-soft));
  box-shadow:var(--pop);
  position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);
}
.btn-primary:hover::before{left:140%}
.btn-primary:hover{box-shadow:var(--pop-hi)}
.btn-primary:active{box-shadow:var(--pop-lo)}
/* "Unlock everything"-knop: glazen look (2026-09-02). Frosted en licht
   doorschijnend met een randlicht bovenaan, zodat de hero-screenshot er
   doorheen schemert. Contrasteert bewust met de massieve cyan-primary ernaast.
   De harde AUTO-BOUNCE-inktstrook eronder (--pop) blijft, net als bij de
   primary; daaronder een zachte gloed voor de glasdiepte. */
.btn-secondary{
  color:var(--white);
  background:linear-gradient(155deg,
    rgba(var(--neutral-rgb),.18),
    rgba(var(--neutral-rgb),.06) 58%,
    rgba(var(--neutral-rgb),.03));
  border:2px solid rgba(var(--neutral-rgb),.22);
  border-top-color:rgba(var(--neutral-rgb),.44);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 0 12px rgba(255,255,255,.06),
    var(--pop),
    0 10px 20px rgba(12,16,24,.26);
  position:relative;overflow:hidden;
}
/* Zelfde glans-veeg als de primary, wat zachter zodat de witte tekst niet
   wegvalt in de piek. */
.btn-secondary::before{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);
  pointer-events:none;
}
.btn-secondary:hover::before{left:140%}
.btn-secondary:hover{
  background:linear-gradient(155deg,
    rgba(var(--neutral-rgb),.26),
    rgba(var(--neutral-rgb),.10) 58%,
    rgba(var(--neutral-rgb),.05));
  border-color:rgba(var(--neutral-rgb),.34);
  border-top-color:rgba(var(--neutral-rgb),.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 0 14px rgba(255,255,255,.10),
    var(--pop-hi),
    0 16px 26px rgba(12,16,24,.32);
}
.btn-secondary:active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 2px 9px rgba(12,16,24,.32),
    var(--pop-lo),
    0 5px 12px rgba(12,16,24,.26);
}
.btn-mini{padding:10px 20px;font-size:13.5px;border-radius:12px}

/* CTA + 30-day guarantee microcopy, toegevoegd voor de vijf koopknoppen */
.cta-with-note{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.cta-with-note--block{display:flex;width:100%}
.cta-with-note--nav{gap:2px}
.guarantee-note{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.02em;
  color:var(--muted);white-space:nowrap;
}
.cta-with-note--nav .guarantee-note{font-size:9px}

/* ----- shared section bits ----- */
section{position:relative;z-index:1}
.shell{width:min(100% - 44px, var(--max));margin:0 auto}
.sec{padding:110px 0}
/* Sinds 2026-08-28 geen pil meer: rand, vulling en de draaiende randgloed zijn
   eruit, het label blijft als kale kleine kapitalen staan. Het groene lampje
   (.dot in de hero) en zijn @keyframes pulse zijn daarmee ook vervallen. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:22px;
}
h2{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.04;letter-spacing:-.03em;
  margin-bottom:18px;
}
.sec-p{color:var(--muted);font-size:17px;max-width:640px;line-height:1.7}
/* ————— accentwoord in koppen (2026-09-02) —————
   Kort een schuivend kleurverloop geweest en daarna een streeppatroon;
   allebei te rumoerig op tekst. Nu effen cyaan, en nog maar op één plek:
   "Start free". De rest van de koppen is gewoon wit. */
.grad{color:var(--cyan)}

/* reveal */
.reveal{opacity:1;transform:none;transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.hidden{opacity:0;transform:translateY(28px)}
.reveal.hidden.visible{opacity:1;transform:translateY(0)}
.dl1{transition-delay:.08s}.dl2{transition-delay:.16s}.dl3{transition-delay:.24s}

/* ----- hero ----- */
.hero{padding:170px 0 90px;text-align:center}
.hero .eyebrow{display:flex;width:fit-content;margin:0 auto 26px}

/* ————— OUT NOW als prijskaartje (2026-09-02) —————
   Het eyebrow in de hero was sinds 2026-08-28 een kale regel. Hier komt de
   sticker terug, in dezelfde taal als de AUTO-BOUNCE-pagina: inktrand plus
   harde schaduw. Geel omdat het rijmt op de LAUNCH PRICE-badge verderop, en
   met een knip en een gaatje links zodat het een kaartje wordt in plaats van
   nog een pil. Geldt alleen hier; de eyebrows in de secties blijven kaal. */
.eyebrow-tag{
  position:relative;
  align-items:center;
  /* zelfde typografie als .badge, zodat de twee stickers als een setje lezen */
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--on-accent);
  background:linear-gradient(120deg,var(--yellow),#f2dcae);
  border:2px solid var(--ink);
  border-radius:7px 15px 15px 7px;
  padding:10px 23px 10px 35px;
  box-shadow:0 3px 0 var(--ink);
  transform:rotate(-2.5deg);
  transform-origin:50% 50%;
  /* delay .6s zodat het kaartje ná de twee kopregels opkomt (2026-09-02).
     De anime.js-tijdlijn stuurt dit kaartje bewust niet meer aan; deze CSS
     is de enige animatie ervan, met of zonder JS. */
  animation:tagWiggle 1.15s linear .6s both;
}
.tag-hole{
  position:absolute;left:13px;top:50%;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg);
  border:2px solid var(--ink);
  transform:translateY(-50%);
}
/* Kleine slinger om de middenas bij het openen. De hoek per frame komt uit
   een gedempte trilling, theta(t) = rust + A * e^-lambda*t * cos(omega*t),
   met rust -2.5 graden, A 6.5, lambda 4.2 en omega 17.6. Vandaar de 41
   keyframes en vandaal `linear`: de curve zit in de getallen, niet in de
   easing. Een easing tussen elk keyframe zetten liet elke deelbeweging
   apart afremmen, en dat is precies wat het hakkerig maakte.
   De schaal en de dekking lopen in dezelfde beweging mee. */
@keyframes tagWiggle{
  0%{opacity:0.000;transform:rotate(4.00deg) scale(0.9000)}
  2.5%{opacity:0.160;transform:rotate(2.54deg) scale(0.9197)}
  5%{opacity:0.319;transform:rotate(0.21deg) scale(0.9438)}
  7.5%{opacity:0.479;transform:rotate(-2.26deg) scale(0.9682)}
  10%{opacity:0.639;transform:rotate(-4.26deg) scale(0.9899)}
  12.5%{opacity:0.799;transform:rotate(-5.41deg) scale(1.0070)}
  15%{opacity:0.958;transform:rotate(-5.63deg) scale(1.0185)}
  17.5%{transform:rotate(-5.07deg) scale(1.0247)}
  20%{transform:rotate(-4.03deg) scale(1.0262)}
  22.5%{transform:rotate(-2.85deg) scale(1.0241)}
  25%{transform:rotate(-1.84deg) scale(1.0196)}
  27.5%{transform:rotate(-1.20deg) scale(1.0139)}
  30%{transform:rotate(-1.01deg) scale(1.0081)}
  32.5%{transform:rotate(-1.21deg) scale(1.0029)}
  35%{transform:rotate(-1.67deg) scale(0.9987)}
  37.5%{transform:rotate(-2.22deg) scale(0.9958)}
  40%{transform:rotate(-2.73deg) scale(0.9942)}
  42.5%{transform:rotate(-3.07deg) scale(0.9938)}
  45%{transform:rotate(-3.20deg) scale(0.9942)}
  47.5%{transform:rotate(-3.14deg) scale(0.9952)}
  50%{transform:rotate(-2.95deg) scale(0.9965)}
  52.5%{transform:rotate(-2.69deg) scale(0.9979)}
  55%{transform:rotate(-2.44deg) scale(0.9992)}
  57.5%{transform:rotate(-2.26deg) scale(1.0002)}
  60%{transform:rotate(-2.17deg) scale(1.0009)}
  62.5%{transform:rotate(-2.18deg) scale(1.0013)}
  65%{transform:rotate(-2.27deg) scale(1.0015)}
  67.5%{transform:rotate(-2.39deg) scale(1.0014)}
  70%{transform:rotate(-2.51deg) scale(1.0012)}
  72.5%{transform:rotate(-2.60deg) scale(1.0009)}
  75%{transform:rotate(-2.65deg) scale(1.0005)}
  77.5%{transform:rotate(-2.65deg) scale(1.0002)}
  80%{transform:rotate(-2.62deg) scale(1.0000)}
  82.5%{transform:rotate(-2.57deg) scale(0.9998)}
  85%{transform:rotate(-2.51deg) scale(0.9997)}
  87.5%{transform:rotate(-2.46deg) scale(0.9997)}
  90%{transform:rotate(-2.43deg) scale(0.9997)}
  92.5%{transform:rotate(-2.43deg) scale(0.9997)}
  95%{transform:rotate(-2.44deg) scale(0.9998)}
  97.5%{transform:rotate(-2.46deg) scale(0.9999)}
  100%{transform:rotate(-2.49deg) scale(0.9999)}
}
}
@media (prefers-reduced-motion:reduce){
  .eyebrow-tag{animation:none;opacity:1}
}
h1{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(44px,6.8vw,88px);
  line-height:.98;letter-spacing:-.035em;
  margin-bottom:26px;
}
/* padding-inline geeft de laatste glyph ("...musi[c]") lucht: de negatieve
   letter-spacing trekt de inline-boxrand ín de c, en de rechter-mascotte
   (op left:100%) hing daar net overheen. De font-size hier maakt dat .16em
   met de kop meeschaalt in plaats van vast op 16px te blijven. */
.hero-head{
  position:relative;display:inline-block;margin-bottom:26px;
  font-size:clamp(44px,6.8vw,88px);
  padding:0 .16em;
}
.hero-head h1{margin-bottom:0}
.hero-mascot{
  position:absolute;width:clamp(96px,9.2vw,148px);height:auto;z-index:2;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.45));
  animation:mascotFloat 6s ease-in-out infinite;
}
.hm-left{right:100%;top:-8%;margin-right:clamp(10px,1.2vw,24px);transform:rotate(-7deg);animation-delay:-1s}
.hm-right{left:100%;bottom:-8%;margin-left:clamp(10px,1.2vw,24px);transform:rotate(7deg);animation-delay:-3s}
@keyframes mascotFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (max-width:1240px){.hero-mascot{display:none}}
.hero-lead{
  color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.7;
  max-width:660px;margin:0 auto 34px;
}
.hero-lead b{color:var(--white);font-weight:600}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;align-items:flex-start}
.price-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-m);font-size:12px;color:var(--muted);
  letter-spacing:.02em;
}
.price-pill b{color:var(--yellow);font-weight:700}
.price-was{text-decoration:line-through;color:var(--muted);font-weight:600}

/* De ingelijste hero-screenshot (.hero-shot / .shot-frame / .shot-topbar) en de
   zwevende kaartjes (.float-card) zijn op 2026-08-07 vervallen: de shot vult nu
   de hele landingsectie als achtergrond. Zie de laag "LEVENDE HERO-ACHTERGROND"
   onderaan de stylesheet. */

/* DAW strip */
/* 2026-09-01: de vier metric-pillen erboven zijn weg, dus deze strip is
   nu het eerste blok onder de hero. Marge navenant kleiner. */
.daws{margin-top:34px;text-align:center}
.daws h3{
  font-family:var(--font-m);font-weight:400;font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px;
}
.daw-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.daw-chip{
  display:flex;align-items:center;gap:11px;
  border:2px solid var(--line);
  background:rgba(var(--neutral-rgb),.05);
  border-radius:14px;
  padding:11px 20px;
  font-size:14px;font-weight:600;color:var(--white);
  box-shadow:var(--pop-lo);
  transition:transform .3s var(--spring), border-color .3s, background .3s, box-shadow .3s;
}
.daw-chip:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.08)}
.daw-chip img{height:22px;width:auto;object-fit:contain}
.daw-disclaimer{
  margin:22px auto 0;max-width:560px;
  padding:12px 18px;border-radius:12px;
  border:1px solid rgba(var(--accent2-rgb),.35);
  background:rgba(var(--accent2-rgb),.08);
  color:var(--white);font-size:13.5px;line-height:1.55;text-align:left;
}
.daw-disclaimer b{color:var(--yellow)}
.daw-disclaimer code{font-family:var(--font-m);font-size:.92em;background:rgba(var(--neutral-rgb),.12);padding:1px 6px;border-radius:6px}
.daw-note{margin-top:12px;color:var(--muted);font-size:13px;font-style:italic}

/* ----- why ----- */
.features-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.feature{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px 28px;
  overflow:hidden;
  transition:transform .35s var(--spring), border-color .3s, box-shadow .35s;
}
.feature::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  opacity:0;transition:opacity .3s;
}
.feature:hover{transform:translateY(-6px);border-color:rgba(var(--accent-rgb),.38);box-shadow:var(--pop-hi)}
.feature:hover::before{opacity:1}
.icon{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.28);
  margin-bottom:18px;
  overflow:hidden;
}
.icon.icon-img{padding:3px;background:rgba(var(--accent-rgb),.12)}
.icon.icon-img img{width:100%;height:100%;object-fit:contain;display:block}
.icon.icon-crop{background:url("/assets/brand/muffin-hands-behind-384.webp") no-repeat;background-size:205%;background-position:98% 30%}
.icon.icon-bolt svg{width:27px;height:27px;display:block}
.icon.icon-bolt svg path{fill:#ffe227;stroke:#0a0a0d;stroke-width:34;stroke-linejoin:round}
.feature h3{font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:-.015em;margin-bottom:9px}
.feature p{color:var(--muted);font-size:14.5px;line-height:1.65;margin-bottom:16px}
/* Ook zonder pil, om dezelfde reden als .eyebrow. De tekstkleur is het
   lichtblauw dat de pil sinds 2026-08-05 had; var(--purple) stond te dof. */
.tagchip{
  display:inline-block;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#9cc9f6;
}

/* ----- features / showcase ----- */
#features{background:linear-gradient(180deg, transparent, rgba(var(--neutral-rgb),.03) 20%, rgba(var(--neutral-rgb),.03) 80%, transparent)}
.showcase{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center;margin-top:56px}
.copy-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:20px;border-radius:16px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.copy-item:hover,.copy-item.is-active{
  background:var(--panel);
  border-color:rgba(var(--accent-rgb),.35);
  transform:translateX(6px);
}
.num{
  flex-shrink:0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-weight:700;font-size:13px;
  background:linear-gradient(120deg,var(--cyan),var(--cyan-soft));color:var(--on-accent);
}
.copy-item h3{font-family:var(--font-d);font-weight:700;font-size:17.5px;letter-spacing:-.01em;margin-bottom:5px}
.copy-item p{color:var(--muted);font-size:14px;line-height:1.6}
.screens{position:relative;aspect-ratio:16/9.6}
.screen{
  position:absolute;inset:0;
  border-radius:16px;
  border:2px solid rgba(var(--neutral-rgb),.22);
  background:var(--surf);
  overflow:hidden;
  cursor:zoom-in;
  box-shadow:var(--pop);
  transition:opacity .45s var(--ease), transform .55s var(--spring);
  padding:0;
}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.screen .screen-tag{
  position:absolute;left:14px;bottom:14px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--white);
  background:rgba(var(--deep-rgb),.82);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  padding:7px 12px;border-radius:999px;
  pointer-events:none;
}
.screen:not(.is-front){opacity:0;transform:scale(.96) translateY(14px);pointer-events:none}
.screen.is-front{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.screen-hint{
  margin-top:16px;text-align:right;
  font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* ── showcase met vier schermen (2026-09-03) ──────────────────────────────
   Vier in plaats van drie, en de losse Auto-Bounce-figuur uit de
   workflow-sectie is hierin opgegaan. Het beeld krijgt meer breedte, want daar
   kijkt de bezoeker naar; de tekstkolom hoeft alleen leesbaar te zijn. */
.showcase.showcase-4{grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
.showcase-4 .copy-list{padding-top:6px}
.showcase-4 .copy-item{padding:16px 18px;gap:15px}
.showcase-4 .copy-item h3{font-size:16.5px;margin-bottom:4px}
.showcase-4 .copy-item p{font-size:13.5px}
.showcase-4 .num{width:30px;height:30px;font-size:12px}
/* Actief item duidelijker markeren dan alleen een achtergrond: met vier
   kaarten was op een stilstaand beeld niet te zien welke rij bij welk scherm
   hoort. De actieve kaart opent de lightbox, dus die wijst dat ook aan. */
.showcase-4 .copy-item:not(.is-active){opacity:.62}
.showcase-4 .copy-item.is-active{opacity:1;box-shadow:var(--pop-lo);cursor:zoom-in}

/* Exact de verhouding van de shots zelf (3840x2400). .screen staat op
   object-fit:cover met object-position:top left, dus elke andere verhouding
   snijdt de rechterkant weg. Op 16/9.6 verdween daar 6%, en juist daar staat
   op de Auto-Bounce-shot het render-console. */
.showcase-4 .screens{aspect-ratio:16/10}

/* Bijschrift onder het beeld: één regel die zegt wat er te zien is, naast de
   zoomhint. Staat er ook voor wie de afbeelding niet laadt. */
.screen-cap{
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  margin-top:14px;
}
.screen-cap p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}
.screen-cap .screen-hint{margin:0;white-space:nowrap}

/* interactive demo */
#demo{
  background:
    radial-gradient(circle at 84% 14%,rgba(var(--accent-rgb),.1),transparent 28%),
    radial-gradient(circle at 12% 82%,rgba(var(--accent2-rgb),.1),transparent 27%);
}
.demo-shell{width:min(calc(100% - 32px),1460px)}
.demo-intro{width:min(100%,var(--max));margin:0 auto 44px}
.demo-stage{
  position:relative;
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(var(--accent-rgb),.38);
  border-radius:28px;
  background:rgba(var(--deep-rgb),.56);
  box-shadow:0 36px 100px -45px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.045);
}
.demo-launch-card{
  position:relative;
  isolation:isolate;
  min-height:540px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(var(--neutral-rgb),.14);
  border-radius:20px;
  padding:54px 24px;
  text-align:center;
  background:#303849;
}
.demo-launch-card::before{
  content:'';
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(90deg,rgba(38,45,59,.97) 0%,rgba(38,45,59,.82) 46%,rgba(38,45,59,.68) 100%),
    url('/assets/muffin/muffin-beat-library-organizer-1920.webp') center 28% / cover no-repeat;
  filter:saturate(.78);
}
.demo-launch-card::after{
  content:'';
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.2),transparent 68%);
  filter:blur(10px);
}
.demo-launch-content{width:min(100%,610px)}
.demo-launch-mascot{position:relative;width:108px;height:108px;margin:0 auto 11px}
.demo-launch-mascot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.32));
  transition:opacity .18s ease,transform .2s var(--spring);
}
.demo-launch-mascot .pose-hover{opacity:0}
.demo-launch-card:hover .demo-launch-mascot .pose-default,
.demo-launch-card:focus-within .demo-launch-mascot .pose-default{opacity:0}
.demo-launch-card:hover .demo-launch-mascot .pose-hover,
.demo-launch-card:focus-within .demo-launch-mascot .pose-hover{opacity:1;transform:translateY(-3px) scale(1.035)}
.demo-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--cyan);
  font-family:var(--font-m);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.demo-launch-card h3{
  margin-bottom:12px;
  font-family:var(--font-d);
  font-size:clamp(29px,4vw,48px);
  font-weight:650;
  line-height:1.08;
  letter-spacing:-.035em;
}
.demo-launch-copy{max-width:545px;margin:0 auto 25px;color:var(--muted);font-size:15px;line-height:1.65}
.demo-launch-card .btn{min-height:52px}
.demo-safe{
  display:block;
  max-width:560px;
  margin:15px auto 0;
  color:#d2d9e4;
  font-family:var(--font-m);
  font-size:10px;
  line-height:1.55;
  letter-spacing:.025em;
}
.demo-frame-shell{
  overflow:hidden;
  border:1px solid rgba(var(--neutral-rgb),.18);
  border-radius:20px;
  background:#2e3545;
  box-shadow:0 28px 80px -34px rgba(0,0,0,.75);
}
.demo-frame-shell[hidden],.demo-launch-card[hidden],.demo-payoff[hidden],.demo-frame-loading[hidden]{display:none}
.demo-frame-toolbar{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px 8px 16px;
  border-bottom:1px solid rgba(var(--neutral-rgb),.14);
  background:linear-gradient(180deg,#3b4559,#333c4e);
}
.demo-frame-title{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--white);font-family:var(--font-m);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.demo-frame-title i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(155,211,105,.48)}
.demo-frame-action{
  min-height:36px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(var(--neutral-rgb),.07);
  color:var(--white);
  padding:0 13px;
  font-family:var(--font-b);
  font-size:12px;
  font-weight:650;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s var(--spring);
}
.demo-frame-action:hover{background:rgba(var(--neutral-rgb),.13);border-color:rgba(var(--accent-rgb),.5);transform:translateY(-1px)}
.demo-frame-action:focus-visible,.demo-launch-card .btn:focus-visible{outline:3px solid rgba(var(--accent-rgb),.5);outline-offset:3px}
.demo-frame-view{position:relative;height:clamp(650px,76vh,840px);background:#2e3545}
.demo-frame{display:block;width:100%;height:100%;border:0;background:#2e3545}
.demo-frame-loading{
  position:absolute;
  z-index:2;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#343c4f,#2d3545);
  color:var(--muted);
  font-family:var(--font-m);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.demo-frame-loading::before{
  content:'';
  position:absolute;
  width:46px;
  height:46px;
  margin-top:-58px;
  border:3px solid rgba(var(--neutral-rgb),.12);
  border-top-color:var(--cyan);
  border-radius:50%;
  animation:demoSpin .8s linear infinite;
}
@keyframes demoSpin{to{transform:rotate(360deg)}}
.demo-frame-shell.demo-expanded{
  position:fixed;
  z-index:1000;
  inset:0;
  width:100vw;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:0;
  border-radius:0;
  isolation:isolate;
  box-shadow:none;
}
.demo-frame-shell.demo-expanded .demo-frame-view{height:auto;min-height:0}
.demo-frame-placeholder[hidden]{display:none}
body.muffin-demo-open{overflow:hidden}
.demo-payoff{
  width:min(100%,900px);
  margin:22px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:20px 22px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:18px;
  background:rgba(var(--accent-rgb),.07);
}
.demo-payoff p{color:var(--muted);font-size:14px;line-height:1.55}
.demo-payoff p b{display:block;margin-bottom:2px;color:var(--white);font-family:var(--font-d);font-size:18px}

/* ----- workflow ----- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.flow-step{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 24px;
  transition:transform .35s var(--spring), border-color .3s;
}
.flow-step:hover{transform:translateY(-5px);border-color:rgba(var(--accent2-rgb),.45)}
/* Was een CSS-counter in ::before. Nu een echt element, want een pseudo-element
   kan zelf geen ::after krijgen en dat is precies waar de streep in hangt. */
.flow-num{
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;
  display:inline-block;
  padding:0 0 8px;
  margin-bottom:14px;
}
.flow-step h3{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:7px}
.flow-step p{color:var(--muted);font-size:13.5px;line-height:1.6}
/* .flow-shot is vervallen op 2026-09-03: de Auto-Bounce-figuur onder de
   vier workflow-stappen is weg, die screenshot staat nu in de sectie
   Features waar hij uitvergroot kan worden. */

/* ----- pricing ----- */
.pricing-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:56px}
@property --pspin{syntax:'<angle>';initial-value:0deg;inherits:false}
.price-card{
  position:relative;
  border-radius:24px;
  padding:40px 38px;
  box-shadow:var(--pop);
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--neutral-rgb),.03));
  border:1px solid transparent;
  overflow:hidden;
}
.price-card::before{
  content:'';position:absolute;inset:-1px;border-radius:24px;padding:1.5px;
  background:conic-gradient(from var(--pspin), var(--cyan), var(--purple) 30%, rgba(var(--neutral-rgb),.15) 55%, var(--cyan) 80%, var(--cyan));
  -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:pspin 6s linear infinite;
  pointer-events:none;
}
@keyframes pspin{to{--pspin:360deg}}
/* Sticker, dus mag scheef hangen. Alleen dit element: de screenshots blijven
   recht, want een scheve opname van een strak programma leest als een fout. */
.badge{
  display:inline-block;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-accent);font-weight:700;
  background:linear-gradient(120deg,var(--yellow),#f2dcae);
  padding:6px 14px;border-radius:8px;
  margin-bottom:22px;
  border:2px solid var(--ink);
  box-shadow:var(--pop-lo);
  transform:rotate(-2deg);
}
.price{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(58px,7vw,84px);
  line-height:1;letter-spacing:-.04em;
  display:flex;align-items:baseline;gap:12px;
}
.price small{font-family:var(--font-m);font-size:13px;color:var(--muted);letter-spacing:.06em;font-weight:400}
.price .price-was{font-size:.4em;align-self:center}
.price .price-now{color:var(--white)}
.price-sub{color:var(--muted);font-size:15px;margin:12px 0 28px}
.price-sub b{color:var(--yellow)}
.checklist{list-style:none;display:flex;flex-direction:column;gap:13px;margin:30px 0 0}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;
  color:var(--white);font-size:15px;font-weight:450;
}
.checklist li svg{flex-shrink:0;width:20px;height:20px;margin-top:2px;stroke:var(--green)}
.faq-col{display:flex;flex-direction:column;gap:14px}
.faq{
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:18px;
  padding:24px 26px;
  box-shadow:var(--pop);
  transition:border-color .3s, box-shadow .25s var(--ease), transform .25s var(--ease);
}
.faq:hover{border-color:rgba(var(--accent-rgb),.35);box-shadow:var(--pop-hi);transform:translateY(-3px)}
.faq p{color:var(--muted);font-size:14px;line-height:1.65}

/* ————— FAQ als accordeon (2026-09-02) —————
   Tien open kaarten maakten van de prijssectie een toren van 1488px naast een
   prijskaart van 560px. Dichtgeklapt is dat 790px en staan de twee kolommen
   weer in verhouding. Bewust native <details>: geen JavaScript, dus niets dat
   de CSP raakt, en toetsenbord- en schermlezergedrag krijg je gratis. */
.faq{padding:0}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-d);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--white);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:16px}
/* plusje dat een minnetje wordt */
.faq summary i{position:relative;flex:none;width:16px;height:16px}
.faq summary i::before,
.faq summary i::after{
  content:'';position:absolute;left:50%;top:50%;
  width:13px;height:2.5px;border-radius:2px;background:var(--cyan);
  transform:translate(-50%,-50%);transition:transform .25s var(--ease);
}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq[open]{border-color:rgba(var(--accent-rgb),.35)}
.faq p{padding:0 22px 20px;margin:0}
@media (prefers-reduced-motion:reduce){
  .faq summary i::before,.faq summary i::after{transition:none}
}

/* ----- final ----- */
.final{text-align:center;padding:130px 0 70px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.final-mascot{
  width:130px;height:130px;margin:0 auto 30px;
  animation:floaty 6s ease-in-out infinite;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));
}
.final-mascot img{width:100%;height:100%;object-fit:contain}
.final h2{font-size:clamp(34px,5vw,60px);max-width:820px;margin:0 auto 18px}
.final .sec-p{margin:0 auto 36px}
.footer{
  margin-top:90px;
  border-top:1px solid var(--line);
  padding:30px 0 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:13.5px;
}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{color:var(--muted);text-decoration:none;transition:color .3s}
.footer a:hover{color:var(--cyan)}

/* ----- floating next-section arrow (restored) ----- */
.next-arrow{
  position:fixed;left:50%;bottom:22px;z-index:250;transform:translateX(-50%);
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(var(--deep-rgb),.92),rgba(var(--deep-rgb),.86));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--pop),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s var(--spring), box-shadow .25s ease, opacity .25s ease;
}
.next-arrow:hover{transform:translateX(-50%) translateY(-4px);box-shadow:var(--pop-hi),inset 0 1px 0 rgba(255,255,255,.09)}
.next-arrow svg{width:22px;height:22px;color:var(--cyan);animation:arrowBob 1.4s ease-in-out infinite}
.next-arrow.up svg{transform:rotate(180deg)}
@keyframes arrowBob{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@media (max-width:640px){.next-arrow{width:48px;height:48px;bottom:16px;border-radius:15px}.next-arrow svg{width:19px;height:19px}}
@media (prefers-reduced-motion: reduce){.next-arrow svg{animation:none}}

/* ----- lightbox ----- */
.shot-lightbox{
  position:fixed;inset:0;z-index:500;
  display:none;
  align-items:center;justify-content:center;
  background:rgba(var(--deep-rgb),.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.shot-lightbox.open{display:flex}
.lb-stage{position:absolute;inset:60px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.lb-stage img{
  max-width:100%;max-height:100%;
  border-radius:10px;
  border:1px solid rgba(var(--neutral-rgb),.3);
  cursor:zoom-in;
  transition:transform .25s var(--ease);
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
}
.lb-title{
  position:absolute;top:20px;left:24px;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.lb-btn{
  position:absolute;z-index:2;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(var(--deep-rgb),.85);
  color:var(--white);
  font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .3s, border-color .3s, transform .2s;
}
.lb-btn:hover{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.45);transform:scale(1.06)}
.lb-close{top:16px;right:16px}
.lb-prev{right:16px;top:calc(50% - 50px)}
.lb-next{right:16px;top:calc(50% + 6px)}
.lb-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
body.muffin-modal-open{overflow:hidden}

/* ----- responsive ----- */
@media (max-width:980px){
    .features-3{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr;gap:34px}
  /* Gestapeld staat alles onder elkaar en is er geen hover, dus alle vier de
     kaarten blijven leesbaar. */
  .showcase.showcase-4{grid-template-columns:1fr;gap:28px}
  .showcase-4 .copy-item:not(.is-active){opacity:1}
  .flow{grid-template-columns:repeat(2,1fr)}
  .pricing-wrap{grid-template-columns:1fr}
}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:640px){
  .nav-links{display:none}
  .brand-sub{display:none}
  .brand img{width:44px;height:44px}
  .brand-name{font-size:23px}
  .sec{padding:80px 0}
  .hero{padding:140px 0 70px}
  .flow{grid-template-columns:1fr}
  .lb-stage{inset:70px 12px}
  .hero-ctas .btn{width:100%}
  .screens{aspect-ratio:4/3}
  /* De vier nieuwe shots houden hun eigen verhouding, ook op een telefoon:
     4/3 snijdt met object-position:top left een kwart van de breedte weg en
     daar staat op de Auto-Bounce-shot het render-console. Klein maar heel is
     hier beter dan groot en half, want zoomen kan met een tik. */
  .showcase-4 .screens{aspect-ratio:16/10}
  .screen-cap{flex-direction:column;gap:8px}
  .screen-cap .screen-hint{align-self:flex-end}
  .demo-shell{width:min(calc(100% - 20px),1460px)}
  .demo-intro{margin-bottom:30px}
  .demo-stage{padding:7px;border-radius:20px}
  .demo-launch-card{min-height:470px;border-radius:14px;padding:34px 18px}
  .demo-launch-card::before{background-position:23% 30%}
  .demo-launch-mascot{width:86px;height:86px}
  .demo-launch-copy{font-size:13.5px}
  .demo-launch-card .btn{width:100%}
  .demo-frame-toolbar{min-height:56px;padding-left:11px}
  .demo-frame-title{font-size:9px}
  .demo-frame-action{padding:0 10px;font-size:11px}
  .demo-frame-view{height:calc(100dvh - 56px)}
  .demo-payoff{align-items:stretch;flex-direction:column;padding:18px}
  .demo-payoff .btn{width:100%}
}

/* ----- reduced motion ----- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}
/* ══════════════════════════════════════════════════════════════════════════
   ANIME.JS-LAAG - toegevoegd 2026-07-31. Alles hierboven is ongewijzigd.
   Backup van de vorige versie: _live-backup-2026-07-31/muffin/index.html
   Deze laag is additief: laadt anime.js niet, of staat beweging uit, dan
   gedraagt de pagina zich exact als daarvoor.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · zolang anime.js een element aanstuurt mag de CSS-transitie de
      frame-waarden niet uitsmeren. De klas gaat er direct weer af als de
      entree klaar is, dus alle :hover-transities blijven werken. */
.anime-on .anime-run{transition:none}

/* 2 · regelmaskers voor de gesplitste koppen (houdt .grad intact).
      Het masker is hoger dan de regel zodat stokken en staarten van letters
      niet worden afgeknipt; de negatieve marge haalt die extra hoogte er in
      de layout weer af. De kop wordt flex-kolom, want tussen flex-items
      klappen verticale marges niet samen - anders wordt de kop hoger. */
.anime-on .lined{display:flex;flex-direction:column}
/* De horizontale padding/marge (2026-09-02) geeft de laatste glyph van een
   regel ruimte binnen het masker: de negatieve letter-spacing van de kop laat
   de 'c' van "music" anders net buiten de overflow:hidden vallen. */
.anime-on .ln{display:block;overflow:hidden;padding:.1em .18em .18em;margin:-.1em -.18em -.18em}
.anime-on .ln > span{display:block;will-change:transform}

/* 3 · woord-spans uit de text-module van anime.js */
.anime-on .word{display:inline-block;will-change:transform,opacity}

/* 4 · vervallen op 2026-08-07: de muisdiepte en de scroll-tilt hoorden bij de
      ingelijste hero-screenshot, en die is vervangen door de beeldvullende
      achtergrond. */

/* 5 · anime.js neemt de showcase-crossfade over zodat die op spring kan */
.anime-on .screens{perspective:1200px}
.anime-on .screen{transition:none}

/* 6 · dwell-indicator van de auto-rotatie in de showcase */
.anime-on .copy-item{position:relative}
.anime-on .ci-bar{
  position:absolute;left:20px;right:20px;bottom:8px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;
}

/* 8 · tellers */
.anime-on .cnt{font-variant-numeric:tabular-nums}
.anime-on .price-num{white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════════
   MASCOTTES OOK OP SMALLERE SCHERMEN
   Stond eerst verborgen onder 1240px. Dat is ruim te streng: de mascotte is
   daar 80px breed plus ~9px marge, terwijl er naast de kop nog ruim 160px
   vrij is. Onder 640px een maat kleiner. Onder 560px vult de kop bijna de
   hele kolom (11px tot de schermrand, 2px tot de tekst) - naast de kop past
   niets meer, dus daar verhuizen ze naar de hoeken BOVEN de kop: linksboven
   en rechtsboven, net onder het eyebrow-label langs. Dat label is smal en
   gecentreerd, dus de hoeken zijn vrij.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1240px){
  .hero-mascot{display:block}
}
/* Maten op mobiel bijgesteld 2026-08-07: de poppetjes waren op een telefoon
   te bescheiden (41px bij 375 breed) en verdienen wat meer aanwezigheid. */
@media (max-width:640px){
  .hero-mascot{width:clamp(60px,12vw,80px)}
  .hm-left{margin-right:clamp(2px,1vw,8px)}
  .hm-right{margin-left:clamp(2px,1vw,8px)}
}
@media (max-width:560px){
  .hero-mascot{width:clamp(46px,13vw,58px)}
  /* 8px voorbij de kop-rand naar buiten: de grotere poppetjes bleven anders
     met een paar pixels aan het (versmalde) eyebrow-label hangen */
  .hm-left{right:auto;left:-8px;top:auto;bottom:100%;margin:0 0 6px}
  .hm-right{left:auto;right:-8px;bottom:100%;margin:0 0 6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   WORKFLOW-NUMMERS: pil eruit, geanimeerde onderstreping erin - 2026-08-28
   De blauwe pillen met hun draaiende randgloed zijn van de hele pagina weg
   (zie .eyebrow en .tagchip hierboven). Alleen 01-04 houden een accent, nu
   als streep onder het nummer in plaats van een ring eromheen.

   Zelfde kleuren en hetzelfde tempo als die ring: 4s, lineair, eindeloos.
   De conic-gradient zelf kon niet mee. In een strook van 2px hoog snijd je
   dwars door het midden van de kegel, dus dan krijg je twee vlakke banden
   met een naad in het midden in plaats van een sweep. Daarom loopt de sweep
   hier door een linear-gradient die opschuift: de vijf kleurstops staan
   twee keer in het beeld (0-50% en 50-100%) en het beeld is twee keer zo
   breed als de streep, zodat één verschuiving van 100% precies één periode
   is en de lus naadloos sluit.

   De streep stopt .16em voor de rechterrand: dat is exact de letterafstand
   die achter het laatste cijfer blijft hangen, anders steekt hij uit.
   ══════════════════════════════════════════════════════════════════════════ */
.flow-num{position:relative;color:#9cc9f6}
.flow-num::after{
  content:'';position:absolute;left:0;right:.16em;bottom:0;height:2px;border-radius:2px;
  /* Twee lagen: de sweep die schuift, en daaronder een vaste basislijn. In de
     ring viel de bijna-doorzichtige stop weg tegen de rand van de pil, maar op
     een streep van 15px maakt hij een gat en oogt het als een streepjeslijn.
     De basislijn houdt de streep heel; alleen het licht loopt eroverheen. */
  background-image:
    linear-gradient(90deg,
      var(--cyan) 0, var(--purple) 15%, rgba(var(--neutral-rgb),.15) 27.5%, var(--cyan) 40%, var(--cyan) 50%,
      var(--purple) 65%, rgba(var(--neutral-rgb),.15) 77.5%, var(--cyan) 90%, var(--cyan) 100%),
    linear-gradient(rgba(var(--accent2-rgb),.4) 0 100%);
  background-size:200% 100%, 100% 100%;
  background-repeat:no-repeat, no-repeat;
  animation:numSweep 4s linear infinite;
  pointer-events:none;
}
@keyframes numSweep{
  from{background-position:100% 0, 0 0}
  to{background-position:0% 0, 0 0}
}
/* Buiten beeld stilzetten, net als de ring dat deed. */
.flow-num.sweep-idle::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .flow-num::after{animation:none;background-position:0 0, 0 0}
}

/* ══════════════════════════════════════════════════════════════════════════
   LEVENDE HERO-ACHTERGROND - 2026-08-07, herzien 2026-09-02
   De ingelijste screenshot onder de tekst is vervangen door dezelfde shot
   als beeldvullende achtergrond van de landingsectie.

   Sinds 2026-09-02: geen duotone-truc meer. Er staan vier echte per-thema
   renders van het bibliotheekscherm op één stapel (nord-dusk, royal-plum,
   cyber-magenta, deep-teal, alle pixelidentiek qua layout). muffin.js zet
   .is-on op de zichtbare <img>; .bg-frame fadet met één opacity-transitie,
   puur compositorwerk. Voordeel t.o.v. de hue-sweep: élk accent in de UI
   (knoppen, waveform, actieve status) kleurt correct mee, want het is de
   echte app in dat thema, niet een gekleurd filter over grijswaarden.
   Backup vorige versie: _live-backup-2026-08-07/muffin/index.html

   De scrim is thema-neutraal en donkert alleen het midden achter de kop plus
   de onderrand die afloopt op de site-achtergrond. Geen vignet naar de hoeken:
   de thema-kleur loopt door tot de rand. De site-accenten (nav, pill, knoppen,
   scrollpijl) blijven bewust Nord-cyaan.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --hero-dim:.92;       /* dekking van de zichtbare screenshot-frame */
  --hero-fade:1600ms;   /* duur van de crossfade tussen twee thema-frames */
}

.hero{padding:0}
/* 2026-09-02: van 90 naar 36. Met de metric-pillen weg eindigt de hero op de
   DAW-strip, en 90 + 110 sectiepadding liet daaronder een leeg gat van ruim
   200px staan. De strip hoort visueel nog bij de hero, dus die loopt nu door
   in de sectie eronder in plaats van er los van te zweven. */
.hero > .shell{padding-bottom:36px}

.hero-stage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* de onderruimte houdt de baan van de zwevende scrollpijl vrij: die staat
     op bottom:22px en is 56px hoog, dus alles onder ~100px is van hem */
  padding:150px 0 clamp(104px,13vh,158px);
}
.hero-stage .shell{position:relative}

.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* inset:0 i.p.v. -4% (2026-09-02): de 8% overscan was er voor de oude
   scroll-tilt, die is weg. Zonder overscan is de screenshot aan alle randen
   ~4% minder geknipt. */
.bg-media{position:absolute;inset:0}

/* Vier thema-frames op één stapel. Alleen .is-on is zichtbaar; de rest staat
   op opacity:0 en fadet erin via de transitie. Geen filter: dat zou elke
   frame over alle pixels herrekend worden. */
.bg-frame{
  position:absolute;inset:0;width:100%;height:100%;
  /* object-position:50% 0 (2026-09-02): op brede/lage schermen snijdt cover
     verticaal. Met de uitsnede pal aan de bovenrand wordt de top van het
     beeld nooit weggesneden, dus de app-headerbalk (logo + tellers) blijft
     altijd volledig zichtbaar - ook als de browser-adresbalk de viewport
     lager maakt. De crop valt dan volledig aan de onderkant, waar de scrim
     toch al afloopt op de site-achtergrond. */
  object-fit:cover;object-position:50% 0;
  opacity:0;
  transition:opacity var(--hero-fade) cubic-bezier(.45,.05,.35,1);
}
.bg-frame.is-on{opacity:var(--hero-dim)}

.bg-scrim{
  position:absolute;inset:0;
  /* Zachte poel achter de koptekst, maar zo groot dat de rand van het verloop
     buiten beeld valt - dan is er nergens een zichtbare ovaal-/vignetrand,
     alleen een geleidelijke verdonkering naar het midden-boven toe. Plus een
     onderrand die afloopt op de site-achtergrond. Kop, lead en pill dragen
     verder op hun eigen tekstschaduw. */
  background:
    radial-gradient(ellipse 80% 62% at 50% 36%,
      hsl(222 26% 7% / .36) 0%,
      hsl(222 26% 7% / .15) 46%,
      hsl(222 26% 7% / .04) 74%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 88%,
      var(--bg) 100%);
}
.bg-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  /* De SVG heeft sinds 2026-08-07 een vaste maat (420px) en tegelt: zonder maat
     rekende Safari de fractalruis over het volle scherm op 3x-resolutie uit en
     dat kostte op een iPhone seconden main-thread. stitchTiles maakt de randen
     naadloos; op opacity .05 is de tegel niet van de oude vlakvulling te
     onderscheiden. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* de kop moet los blijven van de drukke lijst eronder; de poel achter de kop
   is nu minimaal, dus kop, lead en pill dragen vooral op hun eigen tekstschaduw
   (twee lagen: wijde gloed + strakke rand), thema-neutraal */
.hero-stage h1{text-shadow:0 2px 44px hsl(222 26% 5% / .9), 0 1px 12px hsl(222 26% 5% / .72)}
.hero-stage .hero-lead{text-shadow:0 2px 26px hsl(222 26% 5% / .94), 0 1px 6px hsl(222 26% 5% / .82)}
.hero-stage .price-pill{text-shadow:0 2px 22px hsl(222 26% 5% / .95), 0 1px 5px hsl(222 26% 5% / .82)}

@media (max-width:640px){
  .hero-stage{padding:132px 0 clamp(88px,12vh,120px)}
  /* staand scherm snijdt de brede shot horizontaal af; uitsnede naar de lijst
     toe schuiven zodat er beatnamen in beeld blijven in plaats van
     chipfragmenten. Verticaal net als op desktop pal aan de bovenkant, zodat
     de app-headerbalk ook op een liggende telefoon niet wordt weggesneden. */
  .bg-frame{object-position:26% 0}
  /* Martian Mono is breder dan JetBrains; op een telefoon vulde het
     eyebrow-label daardoor bijna de hele regel. Een tandje kleiner en
     strakker gespatieerd - geldt voor álle eyebrow-labels op de pagina. */
  .eyebrow{font-size:10px;letter-spacing:.12em;gap:8px}
}

/* 2026-08-18: vervangt een inline style-attribuut (CSP). */
.btn.btn-block{width:100%}

/* ————— downloadsectie —————
   2026-09-01: verving de interactieve demo. 2026-09-02: van "downloadkaart +
   losse lijst" naar twee echte kaarten naast elkaar - links Free (download),
   rechts Unlock (launch price). De losse "Unlock everything"-knop die eronder
   hing is nu de footer van de rechterkaart. Dezelfde rasterverhouding als
   .pricing-wrap zodat de pagina zijn ritme houdt. */
.dw-install-help{width:100%;margin-top:4px}
.dw-install-help summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:8px 0;cursor:pointer;list-style:none;
  font-size:13px;font-weight:500;color:var(--muted);
}
.dw-install-help summary::-webkit-details-marker{display:none}
.dw-install-help summary:hover,.dw-install-help[open] summary{color:var(--cyan)}
.dw-install-help summary:focus-visible,.dw-install-help a:focus-visible{
  outline:2px solid var(--cyan);outline-offset:4px;border-radius:4px;
}
.dw-install-help summary i{position:relative;flex:none;width:16px;height:16px}
.dw-install-help summary i::before,.dw-install-help summary i::after{
  content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;
  border-radius:2px;background:var(--cyan);transform:translate(-50%,-50%);
}
.dw-install-help summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.dw-install-help[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.dw-install-help p{
  padding:16px 18px;border:2px solid var(--line);border-radius:16px;
  background:var(--panel);box-shadow:var(--pop);
  color:var(--muted);font-size:13px;line-height:1.65;
}
.dw-install-help a{color:var(--cyan);text-underline-offset:3px}
.dw-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;margin-top:52px}
.dw-card{display:flex;flex-direction:column}
.dw-card .dw-list{margin-top:20px}
/* de waarschuwing zakt naar de onderrand zodat de Free-kaart even lang blijft
   als de Unlock-kaart ernaast */
.dw-card .dw-warn{margin-top:auto}

/* installer-details onder de kaarten (2026-09-02): meta + hash + SmartScreen-
   tip stonden in de linkerkaart en maakten die veel langer dan de rechter.
   Nu een rustige rij eronder, buiten beide kaarten. */
.dw-details{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:10px 44px;align-items:start;
}
.dw-details .dw-meta{margin:0;padding:0;border:0}
.dw-details-hash{display:flex;flex-direction:column;gap:12px}
.dw-details .dw-checksum{margin:0}

/* rechterkaart: launch price */
.dw-buy{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(249,202,108,.10), rgba(var(--neutral-rgb),.03));
  border:2px solid rgba(249,202,108,.4);
  border-radius:24px;
  padding:34px 32px;
  box-shadow:var(--pop);
}
/* de sticker mag niet oprekken in de flexkolom */
.dw-buy .badge{align-self:flex-start;margin-bottom:18px}
.dw-price{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(42px,5vw,58px);line-height:1;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:10px;margin:4px 0 0;
}
.dw-price .dw-price-now{color:var(--white)}
.dw-price small{font-family:var(--font-m);font-size:12px;color:var(--muted);letter-spacing:.06em;font-weight:400}
.dw-buy .checklist{margin-top:22px}
/* knop pal onderaan uitgelijnd met de onderrand van de Free-kaart */
.dw-buy .cta-with-note{margin-top:auto;padding-top:26px}
.dw-card{
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--neutral-rgb),.03));
  border:2px solid var(--line);
  border-radius:24px;
  padding:34px 32px;
  box-shadow:var(--pop);
}
.dw-label{display:block;font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dw-row{display:flex;gap:10px;flex-wrap:wrap}
.dw-input{
  flex:1 1 200px;min-width:0;min-height:50px;
  background:rgba(var(--deep-rgb),.55);
  border:2px solid var(--line);
  border-radius:12px;
  padding:0 16px;
  color:var(--white);
  font-family:var(--font);font-size:15px;
}
.dw-input::placeholder{color:rgba(var(--neutral-rgb),.45)}
.dw-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22)}
.dw-input[aria-invalid="true"]{border-color:var(--red)}
.dw-submit{flex:0 0 auto;min-height:50px}
/* alleen de knop in de sectiekaart is volle breedte; die in de nav en de
   hero houden hun eigen maat */
.dw-card .dw-open{width:100%;justify-content:center}
.dw-under{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted)}
/* honeypot: onzichtbaar voor mensen, wel invulbaar voor bots */
.dw-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dw-msg{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--muted);min-height:1px}
.dw-msg.is-error{color:var(--red)}
.dw-msg.is-ok{color:var(--green)}
.dw-fine{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted);opacity:.85}
.dw-fine a{color:var(--cyan)}
/* [hidden] verliest het van een class-selector met display, dus expliciet
   terugzetten. Anders staat de directe link er al voordat er gedownload is. */
.dw-direct[hidden]{display:none}
.dw-direct{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.dw-meta{list-style:none;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--muted)}
.dw-meta b{color:var(--white);font-weight:600}
.dw-checksum{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--muted);opacity:.85}
.dw-hash{
  display:inline-block;margin-top:5px;
  font-family:var(--font-m);font-size:10.5px;line-height:1.5;
  word-break:break-all;color:var(--muted);
}
.dw-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0}
.dw-list li{
  position:relative;padding-left:30px;
  font-size:14.5px;line-height:1.6;color:var(--muted);
}
/* Vinkje en kruisje als CSS-vorm: geen extra SVG per regel in de HTML. */
.dw-list li::before{
  content:'';position:absolute;left:4px;top:6px;
  width:11px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.dw-list li.is-no::before{
  width:12px;height:12px;top:4px;border:0;
  background:
    linear-gradient(to bottom, transparent 45%, var(--red) 45%, var(--red) 55%, transparent 55%),
    linear-gradient(to right, transparent 45%, var(--red) 45%, var(--red) 55%, transparent 55%);
  transform:rotate(45deg);
}
.dw-warn{
  margin-top:22px;padding:14px 16px;
  background:rgba(249,202,108,.08);
  border:1px solid rgba(249,202,108,.3);
  border-radius:12px;
  font-size:13.5px;line-height:1.6;color:var(--muted);
}
.dw-warn b{color:var(--yellow);font-weight:700}

@media (max-width:900px){
  .dw-grid{grid-template-columns:1fr;gap:28px}
  .dw-card .dw-warn{margin-top:16px}
}
@media (max-width:760px){
  .dw-details{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .dw-card,.dw-buy{padding:26px 22px}
  .dw-submit{width:100%}
}

/* ————— downloadvenster (2026-09-01) —————
   Vervangt het formulier in de sectie: elke "Download free"-knop opent dit.
   z-index 600 zodat het boven de nav (300) en de lightbox (500) valt. */
.dw-modal{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(var(--deep-rgb),.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .22s var(--ease);
}
.dw-modal[hidden]{display:none}
.dw-modal.is-open{opacity:1}
.dw-panel{
  position:relative;
  width:min(520px,100%);
  border-width:2px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  padding:38px 36px 32px;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:0 8px 0 var(--ink);
  transform:translateY(14px) scale(.98);
  transition:transform .28s var(--spring);
}
.dw-modal.is-open .dw-panel{transform:none}
.dw-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;display:grid;place-items:center;
  border:2px solid var(--line);border-radius:50%;
  background:rgba(var(--deep-rgb),.5);color:var(--muted);
  font-size:14px;line-height:1;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.dw-close:hover{color:var(--white);border-color:var(--cyan)}
/* padding-right houdt de regel los van de sluitknop op smalle schermen */
.dw-eyebrow{font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);padding-right:42px;line-height:1.5}
.dw-title{font-family:var(--font-d);font-weight:700;font-size:clamp(24px,3.4vw,30px);letter-spacing:-.02em;margin:8px 0 10px}
.dw-modal-sub{font-size:14.5px;line-height:1.65;color:var(--muted);margin-bottom:22px}
/* dezelfde amberdoos als in de downloadkaart, maar hier tussen kop en
   subtekst in plaats van onderaan een kaart */
.dw-panel .dw-warn{margin:2px 0 16px}
/* het paneel scrollt zelf; de pagina erachter niet */
body.dw-modal-open{overflow:hidden}

@media (max-width:640px){
  .dw-panel{padding:32px 22px 26px}
}