{"id":25,"date":"2026-05-29T19:44:18","date_gmt":"2026-05-29T19:44:18","guid":{"rendered":"https:\/\/lowfreq.dk\/?page_id=25"},"modified":"2026-05-29T19:53:51","modified_gmt":"2026-05-29T19:53:51","slug":"the-box","status":"publish","type":"page","link":"https:\/\/lowfreq.dk\/","title":{"rendered":"The Box"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nPlugin \u2014 Simplicity is Key<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=DM+Sans:wght@300;400&family=DM+Mono:wght@300&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n:root {\n --bg: #080808;\n --surface: #0f0f0f;\n --border: #1c1c1c;\n --white: #edecea;\n --dim: #505050;\n --dimmer: #282828;\n --unit: 8px;\n --content: 760px;\n}\nhtml, body {\n background: #080808 !important;\n color: var(--white);\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n overflow-x: hidden;\n scroll-behavior: auto;\n \/* Danish design: generous line-height, optical rhythm *\/\n line-height: 1.6;\n letter-spacing: 0.01em;\n}\n@media (pointer: fine) { html, body { cursor: none; } #cursor, #cursor-ring { display: block; } }\n@media (pointer: coarse) { #cursor, #cursor-ring { display: none !important; } }\n\n#cursor {\n position: fixed; width: 8px; height: 8px;\n background: var(--white); border-radius: 50%;\n pointer-events: none; z-index: 9999;\n transform: translate(-50%,-50%); mix-blend-mode: difference;\n}\n#cursor-ring {\n position: fixed; width: 36px; height: 36px;\n border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;\n pointer-events: none; z-index: 9998;\n transform: translate(-50%,-50%);\n transition: width .3s, height .3s, opacity .3s; mix-blend-mode: difference;\n}\n\n#progress {\n position: fixed; top: 0; left: 0; height: 1px;\n background: var(--white); width: 0%; z-index: 9997;\n}\nnav {\n position: fixed; top: 0; left: 0; right: 0;\n padding: 1.4rem 1.6rem;\n display: flex; justify-content: space-between; align-items: center;\n z-index: 100; mix-blend-mode: difference;\n}\n@media(min-width:600px){nav{padding:1.6rem 2.4rem;}}\n.nav-logo { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--white); opacity: 0; animation: fadeIn 1s cubic-bezier(.16,1,.3,1) 0.8s forwards; font-family: 'DM Sans', sans-serif; font-weight: 300; }\n.nav-cta {\n font-size: 10px; letter-spacing: .16em; text-transform: uppercase;\n color: var(--white); border: 1px solid rgba(255,255,255,.18);\n padding: .45rem 1.1rem; border-radius: 2px;\n font-family: 'DM Sans', sans-serif; font-weight: 300;\n opacity: 0; animation: fadeIn 1s cubic-bezier(.16,1,.3,1) 0.9s forwards; transition: border-color 0.3s;\n -webkit-tap-highlight-color: transparent;\n}\n\n\/* \u2550\u2550\u2550 REVEAL UTILITY \u2550\u2550\u2550 *\/\n.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }\n.reveal.visible { opacity: 1; transform: translateY(0); }\n.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }\n.reveal-left.visible { opacity: 1; transform: translateX(0); }\n.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }\n.reveal-right.visible { opacity: 1; transform: translateX(0); }\n\n\/* \u2550\u2550\u2550 SECTION SHARED \u2550\u2550\u2550 *\/\n.section-eyebrow { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: 1rem; display: block; font-family: 'DM Sans', sans-serif; font-weight: 300; }\n.section-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2.2rem,5.5vw,4rem); color: var(--white); line-height: 1; letter-spacing: -.035em; }\n.section-divider { width: 1px; height: 60px; background: var(--border); margin: 0 auto; }\n\n\/* \u2550\u2550\u2550 HERO \u2550\u2550\u2550 *\/\n#hero-wrap { position: relative; height: 160vh; }\n#hero {\n position: fixed; top: 0; left: 0; right: 0; height: 100vh;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n overflow: hidden; z-index: 1;\n padding-bottom: 12vh;\n pointer-events: none;\n}\n\/* hero-wrap creates scroll space, hero itself is fixed *\/\n#hero-wrap { position: relative; height: 160vh; }\n\n.hero-tag { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 2.8rem; opacity: 0; font-family: 'DM Sans', sans-serif; font-weight: 300; will-change: transform, opacity; transition: none; }\n.hero-headline {\n font-family: 'Cormorant Garamond', serif; font-weight: 300;\n font-size: clamp(3.4rem,13vw,11rem); line-height: .96; letter-spacing: -.04em;\n text-align: center; color: var(--white); will-change: filter,opacity; padding: 0 1.5rem;\n}\n.hero-word { display: inline-block; overflow: hidden; vertical-align: bottom; }\n.hero-word-inner { display: block; transform: translateY(110%); animation: slideUp 1.2s cubic-bezier(.16,1,.3,1) forwards; }\n.hero-word:nth-child(1) .hero-word-inner { animation-delay: .5s; }\n.hero-word:nth-child(2) .hero-word-inner { animation-delay: .65s; }\n.hero-word:nth-child(3) .hero-word-inner { animation-delay: .8s; }\n.hero-br { display: block; height: .04em; }\n.hero-sub { font-size: 10px; letter-spacing: .2em; color: var(--dim); margin-top: 2.4rem; opacity: 0; animation: fadeIn 1s ease 1.2s forwards; text-align: center; padding: 0 2rem; }\n.scroll-hint span { font-size: 8px; letter-spacing: .36em; text-transform: uppercase; color: var(--dim); }\n\n\/* \u2550\u2550\u2550 PLUGIN CARD \u2550\u2550\u2550 *\/\n#plugin-wrap {\n position: relative; z-index: 20;\n display: flex; justify-content: center;\n margin-top: -80vh; padding: 0 1.2rem 0; pointer-events: none;\n}\n.plugin-card {\n pointer-events: all; width: min(760px, calc(100% - 3.2rem));\n background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: 6px 6px 0 0; overflow: hidden;\n box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 -20px 60px rgba(0,0,0,.4);\n transform: translateY(100vh) scale(.92); opacity: 0; will-change: transform,opacity;\n}\n.plugin-topbar { background: #0e0e0e; padding: 12px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); }\n.dot { width: 10px; height: 10px; border-radius: 50%; }\n.dot-r{background:#333;}.dot-y{background:#3c3c3c;}.dot-g{background:#444;}\n.plugin-title-bar { flex: 1; text-align: center; font-size: 10px; letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }\n.plugin-body { padding: 2rem 1.6rem; }\n@media(min-width:480px){.plugin-body{padding:2.4rem 2rem;}}\n.plugin-label { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-bottom: .8rem; }\n.plugin-name { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; color: var(--white); margin-bottom: 2rem; line-height: 1; letter-spacing: -.035em; }\n.plugin-controls { display: flex; flex-direction: column; gap: 1rem; }\n.control-row { display: flex; align-items: center; gap: .8rem; }\n.control-label { font-size: 10px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; min-width: 50px; }\n.control-slider { flex: 1; height: 2px; background: var(--border); border-radius: 2px; }\n.control-fill { height: 100%; border-radius: 2px; background: var(--white); position: relative; }\n.control-fill::after { content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--white); }\n.control-val { font-size: 10px; color: var(--dim); min-width: 24px; text-align: right; }\n.plugin-footer { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }\n.plugin-tag { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }\n.plugin-toggle { width: 36px; height: 20px; background: var(--white); border-radius: 10px; position: relative; }\n.plugin-toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #080808; }\n\n\/* \u2550\u2550\u2550 MANIFESTO \u2550\u2550\u2550 *\/\n#manifesto-section {\n padding: 10rem 1.6rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid var(--border);\n position: relative;\n overflow: hidden;\n}\n#manifesto-section::before {\n content: '';\n position: absolute;\n width: 600px; height: 600px;\n background: radial-gradient(circle, rgba(255,255,255,0.025) 0%, transparent 65%);\n border-radius: 50%;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}\n@media(min-width:600px){ #manifesto-section { padding: 12rem 2.4rem; } }\n.manifesto-inner { max-width: var(--content); }\n.manifesto-line {\n font-family: 'Cormorant Garamond', serif;\n font-weight: 300;\n font-size: clamp(2.1rem, 5.5vw, 4.2rem);\n line-height: 1.1;\n letter-spacing: -.04em;\n color: var(--white);\n margin-bottom: 0.15rem;\n}\n.manifesto-dim { color: var(--dim); }\n.manifesto-rule {\n width: 32px; height: 1px;\n background: var(--border);\n margin: 2.5rem 0;\n}\n.manifesto-body {\n font-size: 11px;\n line-height: 2;\n color: var(--dim);\n letter-spacing: 0.03em;\n margin-bottom: 2rem;\n font-family: 'DM Mono', monospace;\n font-weight: 300;\n max-width: 520px;\n}\n.manifesto-dk {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n margin-bottom: 2rem;\n}\n.manifesto-dk-flag {\n font-size: 14px;\n line-height: 1;\n}\n.manifesto-dk-text {\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--dim);\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n}\n.manifesto-sign {\n font-size: 10px;\n letter-spacing: 0.18em;\n color: var(--dimmer);\n text-transform: uppercase;\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n}\n\n\/* \u2550\u2550\u2550 BEFORE \/ AFTER \u2550\u2550\u2550 *\/\n#ba-section { padding: 8rem 1.6rem; max-width: var(--content); margin: 0 auto; }\n@media(min-width:600px){#ba-section{padding:10rem 2.4rem;}}\n.ba-header { text-align: center; margin-bottom: 4rem; }\n.ba-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 1px;\n background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;\n}\n@media(max-width:560px){ .ba-grid { grid-template-columns: 1fr; } }\n.ba-col { background: var(--bg); padding: 2.4rem 1.8rem; }\n@media(min-width:600px){.ba-col{padding:3rem 2.4rem;}}\n.ba-label {\n display: inline-block; font-size: 9px; letter-spacing: .3em;\n text-transform: uppercase; padding: .3rem .7rem; border-radius: 100px;\n margin-bottom: 2rem;\n}\n.ba-before .ba-label { color: var(--dim); border: 1px solid var(--border); }\n.ba-after .ba-label { color: var(--white); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); }\n.ba-items { display: flex; flex-direction: column; gap: 1rem; }\n.ba-item { display: flex; gap: .9rem; align-items: flex-start; }\n.ba-icon { flex-shrink: 0; margin-top: .15rem; }\n.ba-icon svg { width: 14px; height: 14px; }\n.ba-before .ba-icon svg { color: var(--dimmer); }\n.ba-after .ba-icon svg { color: var(--white); }\n.ba-text { font-size: 11px; line-height: 1.7; letter-spacing: .02em; }\n.ba-before .ba-text { color: var(--dim); }\n.ba-after .ba-text { color: var(--white); }\n\n\/* \u2550\u2550\u2550 TAGLINE \u2550\u2550\u2550 *\/\n#tagline-section {\n min-height: 100vh; display: flex; align-items: center; justify-content: center;\n padding: 6rem 1.6rem; position: relative; overflow: hidden;\n}\n@media(min-width:600px){#tagline-section{padding:8rem 2rem;}}\n#tagline-section::before,#tagline-section::after {\n content: ''; position: absolute; left: 8%; right: 8%; height: 1px;\n background: var(--border); transform: scaleX(0);\n transition: transform 1.6s cubic-bezier(.16,1,.3,1);\n}\n#tagline-section::before{top:5rem;transform-origin:left;}\n#tagline-section::after{bottom:5rem;transform-origin:right;}\n#tagline-section.lines-visible::before,#tagline-section.lines-visible::after{transform:scaleX(1);}\n.tagline-inner { max-width: var(--content); text-align: center; }\n.tagline-eyebrow { font-size: 9px; letter-spacing: .36em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.6rem; display: block; opacity: 0; transform: translateY(10px); transition: all .7s ease .2s; }\n.tagline-inner.visible .tagline-eyebrow { opacity: 1; transform: translateY(0); }\n.tagline-text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(2rem,6.5vw,5rem); line-height: 1.2; letter-spacing: -.022em; color: var(--white); }\n.t-word { display: inline-block; opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }\n.tagline-inner.visible .t-word { opacity: 1; transform: translateY(0); }\n.t-em { color: rgba(255,255,255,.3); }\n\n\/* \u2550\u2550\u2550 FEATURES desktop \u2550\u2550\u2550 *\/\n@media(min-width:700px){\n #features-wrap { position: relative; height: 300vh; }\n #features-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }\n #features-mobile { display: none; }\n .features-intro { padding: 0 2.4rem; margin-bottom: 3rem; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; transform: translateY(20px); transition: all .8s ease; }\n .features-intro.visible { opacity: 1; transform: translateY(0); }\n .features-track { display: flex; gap: 12px; padding: 0 2.4rem; will-change: transform; }\n .feature-card { flex: 0 0 min(340px,72vw); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2.6rem 2.2rem; position: relative; overflow: hidden; opacity: 0; transform: translateX(40px); transition: opacity 0.85s cubic-bezier(.16,1,.3,1), transform 0.85s cubic-bezier(.16,1,.3,1); }\n .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }\n .feature-card.visible { opacity: 1; transform: translateX(0); }\n .feature-card:nth-child(1){transition-delay:0s;}.feature-card:nth-child(2){transition-delay:.08s;}.feature-card:nth-child(3){transition-delay:.16s;}\n .features-dots { display: flex; gap: 6px; padding: 1.4rem 2.4rem 0; }\n}\n@media(max-width:699px){\n #features-wrap { display: none; }\n #features-mobile { padding: 6rem 1.4rem; }\n .mob-features-header { margin-bottom: 2.8rem; }\n .mob-feature-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }\n .mob-feature-item { background: var(--bg); padding: 2rem 1.6rem; opacity: 0; transform: translateY(20px); transition: opacity 0.85s cubic-bezier(.16,1,.3,1), transform 0.85s cubic-bezier(.16,1,.3,1); }\n .mob-feature-item.visible { opacity: 1; transform: translateY(0); }\n .mob-feature-item:nth-child(1){transition-delay:0s;}.mob-feature-item:nth-child(2){transition-delay:.1s;}.mob-feature-item:nth-child(3){transition-delay:.2s;}\n}\n.features-eyebrow { font-size: 9px; letter-spacing: .34em; text-transform: uppercase; color: var(--dim); margin-bottom: .6rem; }\n.features-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.8rem,4vw,3rem); color: var(--white); line-height: 1; }\n.features-counter { font-size: 9px; letter-spacing: .2em; color: var(--dim); }\n.feature-num { font-size: 9px; letter-spacing: .3em; color: var(--dimmer); margin-bottom: 2rem; display: block; }\n.feature-icon { width: 26px; height: 26px; margin-bottom: 1.2rem; color: var(--dim); }\n.feature-name { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; font-weight: 300; color: var(--white); margin-bottom: .9rem; line-height: 1; letter-spacing: -.03em; }\n.feature-desc { font-size: 12px; line-height: 1.9; color: var(--dim); letter-spacing: 0; font-family: 'DM Sans', sans-serif; font-weight: 300; }\n.f-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dimmer); transition: background .3s, transform .3s; }\n.f-dot.active { background: var(--white); transform: scale(1.4); }\n\n\/* \u2550\u2550\u2550 TESTIMONIALS \u2550\u2550\u2550 *\/\n#testimonials-section { padding: 8rem 1.6rem; overflow: hidden; }\n@media(min-width:600px){#testimonials-section{padding:10rem 2.4rem;}}\n.testimonials-header { text-align: center; margin-bottom: 4rem; }\n.testimonials-track-wrap { overflow: hidden; }\n.testimonials-track {\n display: flex; gap: 16px;\n animation: marquee 28s linear infinite;\n width: max-content;\n}\n.testimonials-track:hover { animation-play-state: paused; }\n.tcard {\n flex-shrink: 0; width: 300px;\n background: var(--surface); border: 1px solid var(--border); border-radius: 14px;\n padding: 1.8rem 1.6rem;\n}\n@media(min-width:600px){.tcard{width:340px;}}\n.tcard-stars { display: flex; gap: 3px; margin-bottom: 1rem; }\n.tcard-stars span { font-size: 11px; color: var(--dim); }\n.tcard-quote { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 300; font-style: italic; color: var(--white); line-height: 1.6; margin-bottom: 1.4rem; letter-spacing: -.01em; }\n.tcard-author { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }\n.tcard-role { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); margin-top: .2rem; }\n\n\/* \u2550\u2550\u2550 FAQ \u2550\u2550\u2550 *\/\n#faq-section { padding: 8rem 1.6rem; max-width: var(--content); margin: 0 auto; }\n@media(min-width:600px){#faq-section{padding:10rem 2.4rem;}}\n.faq-header { margin-bottom: 3.5rem; }\n.faq-list { display: flex; flex-direction: column; }\n.faq-item { border-top: 1px solid var(--border); }\n.faq-item:last-child { border-bottom: 1px solid var(--border); }\n.faq-q {\n width: 100%; display: flex; justify-content: space-between; align-items: center;\n padding: 1.6rem 0; background: none; border: none; color: var(--white);\n font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 300;\n letter-spacing: .04em; text-align: left; cursor: pointer; gap: 1rem;\n -webkit-tap-highlight-color: transparent; transition: color .2s;\n}\n.faq-q:hover { color: var(--dim); }\n.faq-icon {\n flex-shrink: 0; width: 18px; height: 18px;\n border: 1px solid var(--border); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .2s;\n}\n.faq-icon svg { width: 8px; height: 8px; color: var(--dim); transition: transform .4s; }\n.faq-item.open .faq-icon { border-color: var(--dim); transform: rotate(45deg); }\n.faq-a {\n font-size: 11px; line-height: 1.85; color: var(--dim); letter-spacing: .02em;\n max-height: 0; overflow: hidden;\n transition: max-height 0.7s cubic-bezier(.16,1,.3,1), padding 0.5s cubic-bezier(.16,1,.3,1);\n padding-bottom: 0;\n}\n.faq-item.open .faq-a { max-height: 300px; padding-bottom: 1.5rem; }\n\n\/* \u2550\u2550\u2550 SYSTEM REQUIREMENTS \u2550\u2550\u2550 *\/\n#sysreq-section { padding: 8rem 1.6rem; max-width: var(--content); margin: 0 auto; }\n@media(min-width:600px){#sysreq-section{padding:10rem 2.4rem;}}\n.sysreq-header { margin-bottom: 3.5rem; }\n.sysreq-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 1px;\n background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;\n}\n@media(max-width:480px){ .sysreq-grid { grid-template-columns: 1fr; } }\n.sysreq-col { background: var(--bg); padding: 2rem 1.6rem; }\n@media(min-width:600px){.sysreq-col{padding:2.4rem 2rem;}}\n.sysreq-os { font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.6rem; display: block; }\n.sysreq-rows { display: flex; flex-direction: column; gap: .9rem; }\n.sysreq-row { display: flex; flex-direction: column; gap: .2rem; }\n.sysreq-key { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--dimmer); }\n.sysreq-val { font-size: 11px; letter-spacing: .06em; color: var(--white); }\n.sysreq-compat { margin-top: 3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--border); border-radius: 12px; display: flex; gap: 1rem; align-items: flex-start; }\n@media(min-width:600px){.sysreq-compat{padding:1.6rem 2rem;}}\n.sysreq-compat-icon { flex-shrink: 0; margin-top: .1rem; }\n.sysreq-compat-icon svg { width: 16px; height: 16px; color: var(--dim); }\n.sysreq-compat-text { font-size: 11px; line-height: 1.8; color: var(--dim); letter-spacing: .02em; }\n\n\/* \u2550\u2550\u2550 PRICING \u2550\u2550\u2550 *\/\n.pricing-block {\n padding: 8rem 1.6rem 6rem;\n max-width: var(--content);\n margin: 0 auto;\n border-top: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);\n}\n@media(min-width:600px){ .pricing-block { padding: 10rem 2.4rem 8rem; } }\n.pricing-block.visible { opacity: 1; transform: translateY(0); }\n\n.pricing-eyebrow {\n font-size: 9px; letter-spacing: .28em; text-transform: uppercase;\n color: var(--dim); margin-bottom: 2rem; display: block;\n font-family: 'DM Sans', sans-serif;\n}\n.pricing-big {\n font-family: 'Cormorant Garamond', serif; font-weight: 300;\n font-size: clamp(5.5rem, 16vw, 11rem); line-height: .9;\n letter-spacing: -.04em; color: var(--white);\n margin-bottom: 1.8rem;\n}\n.pricing-period {\n font-size: 10px; letter-spacing: .22em; text-transform: uppercase;\n color: var(--dim); font-family: 'DM Sans', sans-serif;\n margin-bottom: 3rem;\n}\n.pricing-perks {\n list-style: none;\n display: flex; flex-direction: column; gap: .6rem;\n margin-bottom: 2.8rem; width: 100%;\n}\n.pricing-perks li {\n font-size: 11px; letter-spacing: .04em; color: var(--dim);\n display: flex; align-items: center; justify-content: center; gap: .6rem;\n font-family: 'DM Mono', monospace;\n}\n.pricing-perks li::before { content: '\u2014'; color: var(--dimmer); }\n.buy-btn {\n display: inline-flex; align-items: center; justify-content: center;\n padding: 1rem 3rem; background: var(--white); color: #080808;\n font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400;\n letter-spacing: .18em; text-transform: uppercase;\n border: none; border-radius: 2px; cursor: pointer;\n transition: background 0.2s, transform 0.15s;\n -webkit-tap-highlight-color: transparent; touch-action: manipulation;\n min-height: 48px; width: 100%; margin-bottom: 1.2rem;\n}\n.buy-btn:hover { background: #d8d8d6; }\n.buy-btn:active { transform: scale(.98); }\n.pricing-note {\n font-size: 10px; letter-spacing: .04em; color: var(--dimmer);\n font-family: 'DM Mono', monospace; line-height: 1.8;\n}\n.pricing-reframe {\n font-size: 11px; color: var(--dimmer); letter-spacing: .03em;\n font-family: 'DM Mono', monospace; line-height: 1.7;\n margin-bottom: 2.8rem;\n}\n\n\/* \u2550\u2550\u2550 FOOTER \u2550\u2550\u2550 *\/\nfooter { border-top: 1px solid var(--border); padding: 1.6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }\n@media(min-width:600px){footer{padding:2rem 2.4rem;}}\nfooter span { font-size: 9px; letter-spacing: .24em; color: var(--dimmer); text-transform: uppercase; }\n\n\/* \u2550\u2550\u2550 KEYFRAMES \u2550\u2550\u2550 *\/\n@keyframes fadeUp { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);} }\n@keyframes fadeIn { to{opacity:1;} }\n@keyframes slideUp { from{transform:translateY(110%);}to{transform:translateY(0);} }\n@keyframes pulse { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5;}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1;} }\n100%{top:100%;} }\n@keyframes marquee { from{transform:translateX(0);}to{transform:translateX(-50%);} }\n\n\/* \u2550\u2550\u2550 BEFORE \/ AFTER AUDIO \u2550\u2550\u2550 *\/\n#ba-section { padding: 8rem 1.6rem; max-width: var(--content); margin: 0 auto; }\n@media(min-width:600px){ #ba-section { padding: 10rem 2.4rem; } }\n.ba-header { margin-bottom: 5rem; }\n\n.ba-cards { display: flex; flex-direction: column; }\n\n.ba-card {\n background: none;\n border: none;\n border-top: 1px solid var(--border);\n padding: 3rem 0;\n transition-delay: 0s;\n}\n.ba-card:last-child { border-bottom: 1px solid var(--border); }\n.ba-card:nth-child(2){ transition-delay: .08s; }\n.ba-card:nth-child(3){ transition-delay: .16s; }\n\n.ba-card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n margin-bottom: 2rem;\n}\n.ba-card-eyebrow { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: var(--dimmer); margin-bottom: .25rem; font-family: 'DM Sans', sans-serif; }\n.ba-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--white); line-height: 1; letter-spacing: -.03em; }\n\n.ba-toggle-group {\n display: flex;\n gap: 0;\n flex-shrink: 0;\n}\n.ba-toggle-btn {\n padding: .3rem 0;\n font-family: \"DM Sans\", sans-serif;\n font-size: 9px;\n font-weight: 300;\n letter-spacing: .2em;\n text-transform: uppercase;\n background: none;\n border: none;\n color: var(--dimmer);\n cursor: pointer;\n transition: color .25s;\n -webkit-tap-highlight-color: transparent;\n white-space: nowrap;\n}\n.ba-toggle-btn + .ba-toggle-btn { margin-left: 1.2rem; }\n.ba-toggle-btn.active { color: var(--white); }\n\n.ba-waveform-wrap {\n position: relative;\n margin-bottom: 1.6rem;\n overflow: hidden;\n background: none;\n}\n.ba-waveform { width: 100%; display: block; }\n.ba-playhead {\n position: absolute;\n top: 0; bottom: 0;\n width: 1px;\n background: rgba(239,236,234,0.4);\n left: 0;\n opacity: 0;\n transition: opacity .2s;\n pointer-events: none;\n}\n.ba-playhead.active { opacity: 1; }\n\n.ba-player { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }\n\n.ba-play-btn {\n flex-shrink: 0;\n width: 32px; height: 32px;\n border-radius: 50%;\n border: 1px solid rgba(239,236,234,0.2);\n background: none;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer;\n color: var(--white);\n transition: border-color .2s, transform .15s;\n -webkit-tap-highlight-color: transparent;\n}\n.ba-play-btn svg { width: 12px; height: 12px; }\n.ba-play-btn:hover { border-color: rgba(239,236,234,0.5); }\n.ba-play-btn:active { transform: scale(.93); }\n.ba-play-btn.playing { border-color: var(--white); }\n\n.ba-timeline { flex: 1; display: flex; align-items: center; gap: .8rem; }\n.ba-prog-bar { flex: 1; height: 1px; background: var(--dimmer); cursor: pointer; }\n.ba-prog-fill { height: 100%; background: var(--dim); width: 0%; transition: width .1s linear; }\n.ba-time { font-size: 9px; letter-spacing: .1em; color: var(--dimmer); white-space: nowrap; min-width: 28px; font-family: 'DM Sans', sans-serif; }\n\n.ba-mode-badge {\n font-size: 9px; letter-spacing: .2em; text-transform: uppercase;\n color: var(--dimmer);\n white-space: nowrap;\n transition: color .3s;\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n}\n.ba-mode-badge.after-mode { color: var(--dim); }\n\n.ba-desc { font-size: 11px; line-height: 1.9; color: var(--dimmer); letter-spacing: .02em; font-family: 'DM Mono', monospace; }\n\n@media(min-width:600px){ }\n\n\n\n.cube-top { fill: rgba(239,236,234,0.06); animation: cubeTopBlink 3.5s ease-in-out infinite; }\n.cube-left { fill: rgba(239,236,234,0.015); }\n\n\n\/* Animate edges in on load *\/\n.cube-edge:nth-child(5) { animation-delay: 0.0s; }\n.cube-edge:nth-child(6) { animation-delay: 0.1s; }\n.cube-edge:nth-child(7) { animation-delay: 0.18s; }\n.cube-edge:nth-child(8) { animation-delay: 0.26s; }\n.cube-edge:nth-child(9) { animation-delay: 0.34s; }\n.cube-edge:nth-child(10) { animation-delay: 0.42s; }\n.cube-edge:nth-child(11) { animation-delay: 0.50s; }\n.cube-edge:nth-child(12) { animation-delay: 0.58s; }\n.cube-edge:nth-child(13) { animation-delay: 0.66s; }\n\n\/* Subtle float *\/\n\n\n}\n@keyframes cubeFloat {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n}\n\n 50% { fill: rgba(239,236,234,0.18); }\n}\n\n\n.sticky-bar-btn:active { transform: scale(0.97); background: #d8d8d6; }\n\n\/* \u2550\u2550\u2550 EMAIL CAPTURE \u2550\u2550\u2550 *\/\n#email-section {\n padding: 8rem 1.6rem;\n display: flex;\n align-items: center;\n justify-content: center;\n border-top: 1px solid var(--border);\n}\n@media(min-width:600px){ #email-section { padding: 10rem 2.4rem; } }\n\n.email-inner {\n max-width: 480px;\n width: 100%;\n text-align: center;\n}\n.email-title {\n font-family: 'Cormorant Garamond', serif;\n font-weight: 300;\n font-size: clamp(2.2rem, 6vw, 4rem);\n color: var(--white);\n line-height: 1;\n letter-spacing: -.04em;\n margin-bottom: 1.2rem;\n}\n.email-sub {\n font-size: 11px;\n line-height: 1.9;\n color: var(--dim);\n letter-spacing: 0.03em;\n margin-bottom: 2.4rem;\n font-family: 'DM Mono', monospace;\n}\n.email-form {\n display: flex;\n gap: 0;\n border: 1px solid var(--border);\n border-radius: 2px;\n overflow: hidden;\n transition: border-color 0.2s;\n}\n.email-form:focus-within { border-color: rgba(239,236,234,0.3); }\n.email-input {\n flex: 1;\n background: var(--surface);\n border: none;\n outline: none;\n padding: 0.9rem 1.2rem;\n font-family: 'DM Mono', monospace;\n font-size: 11px;\n color: var(--white);\n letter-spacing: 0.04em;\n min-width: 0;\n}\n.email-input::placeholder { color: var(--dim); }\n.email-btn {\n flex-shrink: 0;\n padding: 0.9rem 1.4rem;\n background: var(--white);\n color: #080808;\n font-family: 'DM Sans', sans-serif;\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.16em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: background 0.2s;\n -webkit-tap-highlight-color: transparent;\n white-space: nowrap;\n}\n.email-btn:hover { background: #d8d8d6; }\n.email-btn:active { transform: scale(0.98); }\n.email-note {\n margin-top: 1rem;\n font-size: 10px;\n letter-spacing: 0.12em;\n color: var(--dim);\n min-height: 1.2em;\n font-family: 'DM Mono', monospace;\n transition: color 0.3s;\n}\n.email-note.success { color: var(--white); }\n\n\n.pricing-reframe {\n font-size: 11px;\n font-family: 'DM Mono', monospace;\n color: var(--dim);\n letter-spacing: 0.04em;\n line-height: 1.7;\n margin-bottom: 2.8rem;\n max-width: 320px;\n opacity: 0;\n transition: opacity 0.6s ease 0.35s;\n}\n.pricing-reframe.visible { opacity: 1; }\n\n\n\/* Staggered sibling reveals *\/\n.ba-card:nth-child(1) { transition-delay: 0s; }\n.ba-card:nth-child(2) { transition-delay: 0.12s; }\n.ba-card:nth-child(3) { transition-delay: 0.24s; }\n.how-step:nth-child(1) { transition-delay: 0s; }\n.how-step:nth-child(2) { transition-delay: 0.1s; }\n.how-step:nth-child(3) { transition-delay: 0.2s; }\n.how-step:nth-child(4) { transition-delay: 0.3s; }\n.sysreq-col:nth-child(1) { transition-delay: 0s; }\n.sysreq-col:nth-child(2) { transition-delay: 0.1s; }\n\n\/* Smooth waveform colour transition *\/\n.ba-mode-badge { transition: color 0.5s cubic-bezier(.16,1,.3,1); }\n.ba-toggle-btn { transition: color 0.4s cubic-bezier(.16,1,.3,1); }\n.ba-prog-fill { transition: width 0.12s linear; }\n\n\/* Cube float \u2014 slightly more organic *\/\n@keyframes cubeFloat {\n 0% { transform: translateY(0px) rotate(0deg); }\n 30% { transform: translateY(-8px) rotate(0.3deg); }\n 70% { transform: translateY(-6px) rotate(-0.2deg); }\n 100% { transform: translateY(0px) rotate(0deg); }\n}\n\n\/* Scroll hint pulse \u2014 smoother *\/\n 20% { opacity: 1; }\n 80% { opacity: 1; }\n 100% { top: 130%; opacity: 0; }\n}\n\n\/* Testimonial marquee \u2014 ease in\/out edges via mask *\/\n.testimonials-track-wrap {\n -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);\n mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);\n}\n\n\n\n\n\/* \u2550\u2550\u2550 FEATURES \u2550\u2550\u2550 *\/\n#features-section {\n padding: 8rem 1.6rem;\n max-width: var(--content);\n margin: 0 auto;\n}\n@media(min-width:600px){ #features-section { padding: 10rem 2.4rem; } }\n\n.feat-header { margin-bottom: 5rem; }\n\n.feat-list { display: flex; flex-direction: column; }\n\n.feat-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem 4rem;\n padding: 3rem 0;\n border-top: 1px solid var(--border);\n align-items: start;\n}\n.feat-row:last-child { border-bottom: 1px solid var(--border); }\n\n@media(max-width:600px){\n .feat-row { grid-template-columns: 1fr; gap: 1rem; padding: 2.2rem 0; }\n}\n\n.feat-row-left {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n}\n.feat-num {\n font-size: 9px;\n letter-spacing: 0.3em;\n color: var(--dimmer);\n font-family: 'DM Sans', sans-serif;\n font-weight: 300;\n}\n.feat-name {\n font-family: 'Cormorant Garamond', serif;\n font-size: clamp(1.8rem, 3.5vw, 2.8rem);\n font-weight: 300;\n color: var(--white);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n.feat-desc {\n font-size: 12px;\n line-height: 1.95;\n color: var(--dim);\n letter-spacing: 0.02em;\n font-family: 'DM Mono', monospace;\n padding-top: 0.3rem;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\/* \u2550\u2550\u2550 BA CTA \u2550\u2550\u2550 *\/\n.ba-cta {\n max-width: var(--content);\n margin: 0 auto;\n padding: 0 1.6rem 6rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n@media(min-width:600px){ .ba-cta { padding: 0 2.4rem 8rem; } }\n.ba-cta .buy-btn { max-width: 360px; opacity: 1; transform: none; transition: background 0.2s, transform 0.15s; }\n.ba-cta-note {\n font-size: 9px; letter-spacing: .22em; text-transform: uppercase;\n color: var(--dimmer); font-family: 'DM Sans', sans-serif;\n}\n\n<\/style>\n<\/head>\n<body>\n\n<div id=\"cursor\"><\/div>\n<div id=\"cursor-ring\"><\/div>\n<div id=\"progress\"><\/div>\n\n<nav>\n <span class=\"nav-logo\">Plugin \u2014 v2.0<\/span>\n <span class=\"nav-cta\">Start using it today<\/span>\n<\/nav>\n\n<!-- \u2550\u2550 HERO \u2550\u2550 -->\n<div id=\"hero-wrap\">\n <section id=\"hero\">\n <p class=\"hero-tag\" id=\"heroTag\">🇩🇰  Danish Design<\/p>\n <h1 class=\"hero-headline\" id=\"heroHeadline\">\n <span class=\"hero-word\"><span class=\"hero-word-inner\">Simplicity<\/span><\/span>\n <span class=\"hero-br\"><\/span>\n <span class=\"hero-word\"><span class=\"hero-word-inner\">is<\/span><\/span> <span class=\"hero-word\"><span class=\"hero-word-inner\">key.<\/span><\/span>\n <\/h1>\n <p class=\"hero-sub\" id=\"heroSub\">The tool that stays out of your way.<\/p>\n <\/section>\n<\/div>\n<\/div>\n\n<!-- \u2550\u2550 PLUGIN CARD \u2550\u2550 -->\n<div id=\"plugin-wrap\">\n <div class=\"plugin-card\" id=\"pluginCard\">\n <div class=\"plugin-topbar\">\n <div class=\"dot dot-r\"><\/div><div class=\"dot dot-y\"><\/div><div class=\"dot dot-g\"><\/div>\n <span class=\"plugin-title-bar\">Plugin \u2014 Active<\/span>\n <\/div>\n <div class=\"plugin-body\">\n <p class=\"plugin-label\">Your plugin<\/p>\n <h2 class=\"plugin-name\">Clean.<br>Precise.<br>Yours.<\/h2>\n <div class=\"plugin-controls\">\n <div class=\"control-row\"><span class=\"control-label\">Clarity<\/span><div class=\"control-slider\"><div class=\"control-fill\" style=\"width:78%\"><\/div><\/div><span class=\"control-val\">78<\/span><\/div>\n <div class=\"control-row\"><span class=\"control-label\">Focus<\/span><div class=\"control-slider\"><div class=\"control-fill\" style=\"width:92%\"><\/div><\/div><span class=\"control-val\">92<\/span><\/div>\n <div class=\"control-row\"><span class=\"control-label\">Depth<\/span><div class=\"control-slider\"><div class=\"control-fill\" style=\"width:55%\"><\/div><\/div><span class=\"control-val\">55<\/span><\/div>\n <\/div>\n <div class=\"plugin-footer\"><span class=\"plugin-tag\">Active<\/span><div class=\"plugin-toggle\"><\/div><\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<!-- \u2550\u2550 MANIFESTO \u2550\u2550 -->\n<section id=\"manifesto-section\">\n <div class=\"manifesto-inner reveal\">\n <span class=\"section-eyebrow\">Philosophy<\/span>\n <p class=\"manifesto-line\">Most tools compete for your attention.<\/p>\n <p class=\"manifesto-line manifesto-dim\">They add. They bloat. They demand.<\/p>\n <p class=\"manifesto-line\">We went the other way.<\/p>\n <div class=\"manifesto-rule\"><\/div>\n <p class=\"manifesto-body\">Plugin was built on a single conviction \u2014 that the best technology is the kind you stop noticing. Not because it failed, but because it fit so perfectly into how you work that it became part of you. Three controls. No manual. No noise. Just the work, and the result.<\/p>\n <div class=\"manifesto-dk\">\n <span class=\"manifesto-dk-flag\">🇩🇰<\/span>\n <span class=\"manifesto-dk-text\">Designed in Denmark<\/span>\n <\/div>\n <p class=\"manifesto-sign\">\u2014 The Plugin Team<\/p>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 BEFORE \/ AFTER \u2550\u2550 -->\n<section id=\"ba-section\">\n <div class=\"ba-header reveal\">\n <span class=\"section-eyebrow\">Audio Comparison<\/span>\n <h2 class=\"section-title\">Hear the difference.<\/h2>\n <\/div>\n\n <div class=\"ba-cards\">\n\n <!-- Card 1 -->\n <div class=\"ba-card reveal\" data-card=\"0\">\n <div class=\"ba-card-header\">\n <div>\n <p class=\"ba-card-eyebrow\">Sample 01<\/p>\n <h3 class=\"ba-card-title\">Vocal Track<\/h3>\n <\/div>\n <div class=\"ba-toggle-group\" data-card=\"0\">\n <button class=\"ba-toggle-btn active\" data-mode=\"before\">Before<\/button>\n <button class=\"ba-toggle-btn\" data-mode=\"after\">After<\/button>\n <\/div>\n <\/div>\n <div class=\"ba-waveform-wrap\">\n <canvas class=\"ba-waveform\" id=\"wave0\" height=\"64\"><\/canvas>\n <div class=\"ba-playhead\" id=\"ph0\"><\/div>\n <\/div>\n <div class=\"ba-player\">\n <button class=\"ba-play-btn\" id=\"play0\" data-card=\"0\">\n <svg class=\"icon-play\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <svg class=\"icon-stop\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"display:none\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1\"\/><\/svg>\n <\/button>\n <div class=\"ba-timeline\">\n <div class=\"ba-prog-bar\"><div class=\"ba-prog-fill\" id=\"fill0\"><\/div><\/div>\n <span class=\"ba-time\" id=\"time0\">0:00<\/span>\n <\/div>\n <div class=\"ba-mode-badge\" id=\"badge0\">Before<\/div>\n <\/div>\n <p class=\"ba-desc\">Raw, unprocessed vocal. Notice the muddiness in the low-mids and the harsh sibilance.<\/p>\n <\/div>\n\n <!-- Card 2 -->\n <div class=\"ba-card reveal\" data-card=\"1\">\n <div class=\"ba-card-header\">\n <div>\n <p class=\"ba-card-eyebrow\">Sample 02<\/p>\n <h3 class=\"ba-card-title\">Drum Bus<\/h3>\n <\/div>\n <div class=\"ba-toggle-group\" data-card=\"1\">\n <button class=\"ba-toggle-btn active\" data-mode=\"before\">Before<\/button>\n <button class=\"ba-toggle-btn\" data-mode=\"after\">After<\/button>\n <\/div>\n <\/div>\n <div class=\"ba-waveform-wrap\">\n <canvas class=\"ba-waveform\" id=\"wave1\" height=\"64\"><\/canvas>\n <div class=\"ba-playhead\" id=\"ph1\"><\/div>\n <\/div>\n <div class=\"ba-player\">\n <button class=\"ba-play-btn\" id=\"play1\" data-card=\"1\">\n <svg class=\"icon-play\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <svg class=\"icon-stop\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"display:none\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1\"\/><\/svg>\n <\/button>\n <div class=\"ba-timeline\">\n <div class=\"ba-prog-bar\"><div class=\"ba-prog-fill\" id=\"fill1\"><\/div><\/div>\n <span class=\"ba-time\" id=\"time1\">0:00<\/span>\n <\/div>\n <div class=\"ba-mode-badge\" id=\"badge1\">Before<\/div>\n <\/div>\n <p class=\"ba-desc\">Flat, lifeless kit. The transients are smeared and the low-end lacks definition.<\/p>\n <\/div>\n\n <!-- Card 3 -->\n <div class=\"ba-card reveal\" data-card=\"2\">\n <div class=\"ba-card-header\">\n <div>\n <p class=\"ba-card-eyebrow\">Sample 03<\/p>\n <h3 class=\"ba-card-title\">Full Mix<\/h3>\n <\/div>\n <div class=\"ba-toggle-group\" data-card=\"2\">\n <button class=\"ba-toggle-btn active\" data-mode=\"before\">Before<\/button>\n <button class=\"ba-toggle-btn\" data-mode=\"after\">After<\/button>\n <\/div>\n <\/div>\n <div class=\"ba-waveform-wrap\">\n <canvas class=\"ba-waveform\" id=\"wave2\" height=\"64\"><\/canvas>\n <div class=\"ba-playhead\" id=\"ph2\"><\/div>\n <\/div>\n <div class=\"ba-player\">\n <button class=\"ba-play-btn\" id=\"play2\" data-card=\"2\">\n <svg class=\"icon-play\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <svg class=\"icon-stop\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"display:none\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1\"\/><\/svg>\n <\/button>\n <div class=\"ba-timeline\">\n <div class=\"ba-prog-bar\"><div class=\"ba-prog-fill\" id=\"fill2\"><\/div><\/div>\n <span class=\"ba-time\" id=\"time2\">0:00<\/span>\n <\/div>\n <div class=\"ba-mode-badge\" id=\"badge2\">Before<\/div>\n <\/div>\n <p class=\"ba-desc\">The full stereo mix before mastering. Lacks glue, punch, and perceived loudness.<\/p>\n <\/div>\n\n <\/div>\n<\/section>\n\n<div class=\"ba-cta reveal\">\n <button class=\"buy-btn\" onclick=\"alert('Purchase flow here')\">Start using it today<\/button>\n <p class=\"ba-cta-note\">$49 one-time  \u00b7  30-day money back<\/p>\n<\/div>\n\n<!-- \u2550\u2550 TAGLINE \u2550\u2550 -->\n<section id=\"tagline-section\">\n <div class=\"tagline-inner\" id=\"taglineInner\">\n <span class=\"tagline-eyebrow\">Philosophy<\/span>\n <p class=\"tagline-text\" id=\"taglineText\"><\/p>\n <\/div>\n<\/section>\n\n\n<!-- \u2550\u2550 FEATURES \u2550\u2550 -->\n<section id=\"features-section\">\n <div class=\"feat-header reveal\">\n <span class=\"section-eyebrow\">What it does<\/span>\n <h2 class=\"section-title\">Built around you.<\/h2>\n <\/div>\n <div class=\"feat-list\">\n <div class=\"feat-row reveal\">\n <div class=\"feat-row-left\">\n <span class=\"feat-num\">01<\/span>\n <h3 class=\"feat-name\">Zero Friction<\/h3>\n <\/div>\n <div class=\"feat-row-right\">\n <p class=\"feat-desc\">No setup rituals. No config files. No account required. The moment you load it, it works \u2014 silently and without asking anything of you.<\/p>\n <\/div>\n <\/div>\n <div class=\"feat-row reveal\">\n <div class=\"feat-row-left\">\n <span class=\"feat-num\">02<\/span>\n <h3 class=\"feat-name\">Precision Control<\/h3>\n <\/div>\n <div class=\"feat-row-right\">\n <p class=\"feat-desc\">Three sliders. Each one does exactly what its label says \u2014 no guesswork, no happy accidents. Predictable, repeatable, entirely yours.<\/p>\n <\/div>\n <\/div>\n <div class=\"feat-row reveal\">\n <div class=\"feat-row-left\">\n <span class=\"feat-num\">03<\/span>\n <h3 class=\"feat-name\">Stays Invisible<\/h3>\n <\/div>\n <div class=\"feat-row-right\">\n <p class=\"feat-desc\">The best tool is the one you forget is there. Plugin disappears into your workflow. You only ever notice what it leaves behind \u2014 better work.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 TESTIMONIALS \u2550\u2550 -->\n<section id=\"testimonials-section\">\n <div class=\"testimonials-header reveal\">\n <span class=\"section-eyebrow\">Testimonials<\/span>\n <h2 class=\"section-title\">People love it.<\/h2>\n <\/div>\n <div class=\"testimonials-track-wrap\">\n <div class=\"testimonials-track\" id=\"testimonialsTrack\">\n <!-- set 1 -->\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"I've tried every plugin in this space. Nothing comes close to how clean and immediate this is.\"<\/p><p class=\"tcard-author\">Marcus L.<\/p><p class=\"tcard-role\">Mix Engineer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"Three sliders. That's all I needed. My sessions are cleaner than they've ever been.\"<\/p><p class=\"tcard-author\">Yuki T.<\/p><p class=\"tcard-role\">Music Producer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"It doesn't try to do everything. It does one thing, perfectly. That's rare.\"<\/p><p class=\"tcard-author\">Aria S.<\/p><p class=\"tcard-role\">Sound Designer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"Installed it, opened a session, and immediately heard the difference. Stunning.\"<\/p><p class=\"tcard-author\">Jonas K.<\/p><p class=\"tcard-role\">Composer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"The UI alone makes me want to use it. And then it actually delivers. Remarkable.\"<\/p><p class=\"tcard-author\">Priya M.<\/p><p class=\"tcard-role\">Podcast Producer<\/p><\/div>\n <!-- set 2 (duplicate for seamless loop) -->\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"I've tried every plugin in this space. Nothing comes close to how clean and immediate this is.\"<\/p><p class=\"tcard-author\">Marcus L.<\/p><p class=\"tcard-role\">Mix Engineer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"Three sliders. That's all I needed. My sessions are cleaner than they've ever been.\"<\/p><p class=\"tcard-author\">Yuki T.<\/p><p class=\"tcard-role\">Music Producer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"It doesn't try to do everything. It does one thing, perfectly. That's rare.\"<\/p><p class=\"tcard-author\">Aria S.<\/p><p class=\"tcard-role\">Sound Designer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"Installed it, opened a session, and immediately heard the difference. Stunning.\"<\/p><p class=\"tcard-author\">Jonas K.<\/p><p class=\"tcard-role\">Composer<\/p><\/div>\n <div class=\"tcard\"><div class=\"tcard-stars\"><span>\u2605\u2605\u2605\u2605\u2605<\/span><\/div><p class=\"tcard-quote\">\"The UI alone makes me want to use it. And then it actually delivers. Remarkable.\"<\/p><p class=\"tcard-author\">Priya M.<\/p><p class=\"tcard-role\">Podcast Producer<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n\n\n\n<!-- \u2550\u2550 PRICING 2 \u2550\u2550 -->\n<div class=\"pricing-block\" id=\"pricing-section-2\">\n <span class=\"pricing-eyebrow\">One price. No surprises.<\/span>\n <div class=\"pricing-big\">$49<\/div>\n <p class=\"pricing-period\">one-time license<\/p>\n <p class=\"pricing-reframe\">Most people spend 3\u00d7 this on plugins they open twice.<\/p>\n <ul class=\"pricing-perks\">\n <li>Lifetime access, all future updates<\/li>\n <li>Unlimited personal installs<\/li>\n <li>30-day money back, no questions<\/li>\n <li>Works fully offline, no iLok<\/li>\n <\/ul>\n <button class=\"buy-btn\" onclick=\"alert('Purchase flow here')\">Start using it today<\/button>\n <p class=\"pricing-note\">The next update is coming \u2014 everyone who buys now gets it free.<\/p>\n<\/div>\n\n<!-- \u2550\u2550 SYSTEM REQUIREMENTS \u2550\u2550 -->\n<section id=\"sysreq-section\">\n <div class=\"sysreq-header reveal\">\n <span class=\"section-eyebrow\">System Requirements<\/span>\n <h2 class=\"section-title\">What you need.<\/h2>\n <\/div>\n <div class=\"sysreq-grid reveal\">\n <div class=\"sysreq-col\">\n <span class=\"sysreq-os\">macOS<\/span>\n <div class=\"sysreq-rows\">\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Version<\/span><span class=\"sysreq-val\">macOS 11 Big Sur or later<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Processor<\/span><span class=\"sysreq-val\">Apple Silicon or Intel Core i5+<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">RAM<\/span><span class=\"sysreq-val\">4 GB minimum, 8 GB recommended<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Formats<\/span><span class=\"sysreq-val\">AU, VST3, AAX<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Disk<\/span><span class=\"sysreq-val\">120 MB<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"sysreq-col\">\n <span class=\"sysreq-os\">Windows<\/span>\n <div class=\"sysreq-rows\">\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Version<\/span><span class=\"sysreq-val\">Windows 10 (64-bit) or later<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Processor<\/span><span class=\"sysreq-val\">Intel Core i5 or AMD Ryzen 5+<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">RAM<\/span><span class=\"sysreq-val\">4 GB minimum, 8 GB recommended<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Formats<\/span><span class=\"sysreq-val\">VST3, AAX<\/span><\/div>\n <div class=\"sysreq-row\"><span class=\"sysreq-key\">Disk<\/span><span class=\"sysreq-val\">120 MB<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"sysreq-compat reveal\">\n <div class=\"sysreq-compat-icon\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"><circle cx=\"8\" cy=\"8\" r=\"6\"\/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8\"\/><circle cx=\"8\" cy=\"11\" r=\".5\" fill=\"currentColor\"\/><\/svg><\/div>\n <p class=\"sysreq-compat-text\">Compatible with Ableton Live, Logic Pro, Pro Tools, FL Studio, Reaper, Studio One, Bitwig, Cubase, and any DAW that supports VST3, AU, or AAX. No iLok required.<\/p>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550 EMAIL CAPTURE \u2550\u2550 -->\n<section id=\"email-section\">\n <div class=\"email-inner reveal\">\n <span class=\"section-eyebrow\">Not ready yet?<\/span>\n <h2 class=\"email-title\">Stay in the loop.<\/h2>\n <p class=\"email-sub\">Get notified about updates, new features, and the occasional note from us. No noise.<\/p>\n <div class=\"email-form\" id=\"emailForm\">\n <input class=\"email-input\" id=\"emailInput\" type=\"email\" placeholder=\"your@email.com\" autocomplete=\"email\"\/>\n <button class=\"email-btn\" id=\"emailBtn\">Notify me<\/button>\n <\/div>\n <p class=\"email-note\" id=\"emailNote\"><\/p>\n <\/div>\n<\/section>\n\n\n\n<footer>\n <span>Plugin \u00a9 2026<\/span>\n <span>Simplicity is key.<\/span>\n<\/footer>\n\n<script>\nconst isMobile = window.matchMedia('(max-width:699px)').matches;\nconst isTouch = window.matchMedia('(pointer:coarse)').matches;\n\n\/* CURSOR *\/\nif (!isTouch) {\n const cur = document.getElementById('cursor');\n const ring = document.getElementById('cursor-ring');\n let mx=0,my=0,rx=0,ry=0;\n document.addEventListener('mousemove', e => { mx=e.clientX; my=e.clientY; cur.style.left=mx+'px'; cur.style.top=my+'px'; });\n (function animRing(){ rx+=(mx-rx)*.12; ry+=(my-ry)*.12; ring.style.left=rx+'px'; ring.style.top=ry+'px'; requestAnimationFrame(animRing); })();\n}\n\n\/* PROGRESS *\/\nconst prog = document.getElementById('progress');\nwindow.addEventListener('scroll', () => {\n prog.style.width = (window.scrollY \/ (document.body.scrollHeight - window.innerHeight) * 100) + '%';\n}, { passive: true });\n\n\/* TAGLINE WORDS *\/\nconst tagPhrase = [\n {t:\"It's\",e:0},{t:\"never\",e:0},{t:\"the\",e:0},{t:\"grand\",e:0},{t:\"gestures.\",e:0},\n {t:\"It's\",e:0},{t:\"the\",e:0},{t:\"small,\",e:1},{t:\"deliberate\",e:1},{t:\"moves\",e:1},\n {t:\"that\",e:0},{t:\"shift\",e:0},{t:\"everything.\",e:0}\n];\nconst tagEl = document.getElementById('taglineText');\ntagPhrase.forEach((w,i) => {\n const sp = document.createElement('span');\n sp.className = 't-word' + (w.e ? ' t-em' : '');\n sp.textContent = w.t + '\\u00a0';\n sp.style.transitionDelay = (.04 + i*.055) + 's';\n tagEl.appendChild(sp);\n});\n\n\/* FAQ ACCORDION *\/\ndocument.querySelectorAll('.faq-q').forEach(btn => {\n btn.addEventListener('click', () => {\n const item = btn.closest('.faq-item');\n const wasOpen = item.classList.contains('open');\n document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));\n if (!wasOpen) item.classList.add('open');\n });\n});\n\n\/* HELPERS *\/\nfunction clamp(v,lo,hi){return Math.min(Math.max(v,lo),hi);}\nfunction norm(v,lo,hi){return clamp((v-lo)\/(hi-lo),0,1);}\nfunction ease(t){return t<.5?2*t*t:-1+(4-2*t)*t;}\n\n\/* GENERIC REVEAL via IntersectionObserver *\/\nconst revealObs = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n revealObs.unobserve(e.target);\n }\n });\n}, { threshold: 0.14, rootMargin: \"0px 0px -40px 0px\" });\ndocument.querySelectorAll('.reveal,.reveal-left,.reveal-right,.how-step,.mob-feature-item,.pricing-block').forEach(el => revealObs.observe(el));\n\n\/* SCROLL DRIVER *\/\nconst heroHeadline = document.getElementById('heroHeadline');\n const heroTag = document.getElementById('heroTag');\nconst heroSub = document.getElementById('heroSub');\nconst pluginCard = document.getElementById('pluginCard');\nconst tagSec = document.getElementById('tagline-section');\nconst tagInner = document.getElementById('taglineInner');\nconst featWrap = document.getElementById('features-wrap');\nconst featTrack = document.getElementById('featuresTrack');\nconst featIntro = document.getElementById('featuresIntro');\nconst featCounter = document.getElementById('featCounter');\nconst featureDots = document.querySelectorAll('.f-dot');\nconst featureCards = document.querySelectorAll('#features-wrap .feature-card');\n\nlet ticking = false;\nwindow.addEventListener('scroll', () => { if(!ticking){ticking=true;requestAnimationFrame(frame);} }, { passive: true });\n\nfunction frame() {\n ticking = false;\n const sy = window.scrollY;\n const vh = window.innerHeight;\n\n \/* HERO \u2014 subtle upward drift only, blur starts late *\/\n const driftT = norm(sy, 0, vh * 0.55);\n const blurT = norm(sy, vh * 0.2, vh * 0.65);\n\n const drift = driftT * 18;\n heroTag.style.transform = `translateY(-${drift}px)`;\n heroTag.style.filter = `blur(${blurT * 12}px)`;\n const tagOpacity = Math.max(0, 1 - blurT * 1.4);\n heroTag.style.opacity = tagOpacity;\n heroTag.style.visibility = tagOpacity < 0.01 ? 'hidden' : 'visible';\n heroHeadline.style.transform = `translateY(-${drift}px)`;\n heroHeadline.style.filter = `blur(${blurT * 20}px)`;\n const headOpacity = Math.max(0, 1 - blurT);\n heroHeadline.style.opacity = headOpacity;\n heroHeadline.style.visibility = headOpacity < 0.01 ? 'hidden' : 'visible';\n heroSub.style.transform = `translateY(-${drift}px)`;\n const subOpacity = Math.max(0, 1 - blurT * 1.4);\n heroSub.style.opacity = subOpacity;\n heroSub.style.filter = `blur(${blurT * 10}px)`;\n heroSub.style.visibility = subOpacity < 0.01 ? 'hidden' : 'visible';\n\n \/* PLUGIN CARD \u2014 slides up from bottom, arrives as hero fades *\/\n const cr = norm(sy, 0, vh * 0.55);\n const cardY = (1 - ease(cr)) * 95;\n pluginCard.style.transform = `translateY(${cardY}vh) scale(${0.94 + cr * 0.06})`;\n pluginCard.style.opacity = clamp(cr * 2.8, 0, 1);\n\n \/* TAGLINE *\/\n const tagRect = tagSec.getBoundingClientRect();\n if (tagRect.top < vh*.8 && !tagInner.classList.contains('visible')) {\n tagInner.classList.add('visible');\n tagSec.classList.add('lines-visible');\n }\n\n \/* FEATURES desktop *\/\n if (!isMobile && featWrap) {\n const fRect = featWrap.getBoundingClientRect();\n const fT = clamp(-fRect.top \/ (featWrap.offsetHeight - vh), 0, 1);\n if (fT > .01 && !featIntro.classList.contains('visible')) {\n featIntro.classList.add('visible');\n featureCards.forEach(c => c.classList.add('visible'));\n }\n const cardW = featureCards[0] ? featureCards[0].offsetWidth + 12 : 352;\n featTrack.style.transform = `translateX(${-fT * cardW * 2}px)`;\n const ai = Math.round(fT*2);\n featureDots.forEach((d,i) => d.classList.toggle('active', i===ai));\n featCounter.textContent = String(ai+1).padStart(2,'0') + ' \/ 03';\n }\n\n \/* PRICING *\/\n const pBig = document.getElementById('pBig');\n if (pBig && pBig.getBoundingClientRect().top < vh*.88) {\n ['pLabel','pBig','pPeriod','pReframe','pPerks','pBtn','pNote'].forEach(id => {\n const el = document.getElementById(id); if(el) el.classList.add('visible');\n });\n }\n}\n\nframe();\n\n\/* \u2550\u2550\u2550 AUDIO BEFORE \/ AFTER \u2550\u2550\u2550 *\/\n(function() {\n const DURATION = 8; \/\/ seconds per preview\n const cards = [\n {\n label: 'Vocal Track',\n \/\/ before: muddy, harsh \u2014 noisy sine clusters\n before: { type: 'noise', freqs: [180, 360, 800, 3400, 7200], gains: [0.18, 0.12, 0.22, 0.28, 0.15], q: 0.8 },\n \/\/ after: clean, airy\n after: { type: 'clean', freqs: [200, 600, 2800], gains: [0.12, 0.08, 0.10], q: 2.5 },\n },\n {\n label: 'Drum Bus',\n before: { type: 'noise', freqs: [60, 120, 900, 4000], gains: [0.3, 0.2, 0.15, 0.12], q: 0.6 },\n after: { type: 'clean', freqs: [55, 140, 3500], gains: [0.25, 0.1, 0.08], q: 4 },\n },\n {\n label: 'Full Mix',\n before: { type: 'noise', freqs: [80, 250, 500, 1200, 5000], gains: [0.2, 0.18, 0.16, 0.14, 0.12], q: 0.7 },\n after: { type: 'clean', freqs: [85, 300, 4500], gains: [0.18, 0.10, 0.09], q: 3 },\n }\n ];\n\n const states = cards.map(() => ({ mode: 'before', playing: false, ctx: null, nodes: [], startTime: 0, elapsed: 0, raf: null }));\n\n \/\/ Draw static waveforms on canvas\n function drawWaveform(canvas, cardIdx, mode) {\n const ctx = canvas.getContext('2d');\n const W = canvas.offsetWidth || 600;\n const H = canvas.height;\n canvas.width = W;\n ctx.clearRect(0, 0, W, H);\n\n const seed = cardIdx * 1000 + (mode === 'after' ? 500 : 0);\n function rng(n) { let x = Math.sin(n + seed) * 43758.5453; return x - Math.floor(x); }\n\n const mid = H \/ 2;\n const pts = Math.floor(W \/ 2);\n const isBefore = mode === 'before';\n\n ctx.beginPath();\n for (let i = 0; i <= pts; i++) {\n const x = (i \/ pts) * W;\n let amp = 0;\n for (let h = 1; h <= 6; h++) {\n const freq = (h * 3.7) + cardIdx * 1.1;\n const r = rng(i * 0.07 + h * 13.3);\n const noise = isBefore ? (r - 0.5) * 0.4 : (r - 0.5) * 0.08;\n amp += Math.sin(i * 0.04 * freq) * (isBefore ? 0.18 : 0.10) \/ h + noise;\n }\n amp = Math.max(-0.9, Math.min(0.9, amp));\n const y = mid + amp * (mid * 0.85);\n i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);\n }\n\n const grad = ctx.createLinearGradient(0, 0, W, 0);\n if (isBefore) {\n grad.addColorStop(0, 'rgba(120,120,118,0.4)');\n grad.addColorStop(0.5, 'rgba(120,120,118,0.6)');\n grad.addColorStop(1, 'rgba(120,120,118,0.4)');\n } else {\n grad.addColorStop(0, 'rgba(239,239,237,0.3)');\n grad.addColorStop(0.5, 'rgba(239,239,237,0.7)');\n grad.addColorStop(1, 'rgba(239,239,237,0.3)');\n }\n ctx.strokeStyle = grad;\n ctx.lineWidth = 1.5;\n ctx.stroke();\n }\n\n function initWaveforms() {\n cards.forEach((_, i) => {\n const canvas = document.getElementById('wave' + i);\n if (canvas) drawWaveform(canvas, i, 'before');\n });\n }\n\n window.addEventListener('load', initWaveforms);\n window.addEventListener('resize', initWaveforms);\n\n \/\/ Synth audio\n function buildSynth(ctx, profile, isBefore) {\n const master = ctx.createGain();\n master.gain.value = 0.0;\n master.connect(ctx.destination);\n master.gain.linearRampToValueAtTime(0.5, ctx.currentTime + 0.08);\n\n const nodes = [master];\n\n if (isBefore) {\n \/\/ Noisy, unpleasant: white noise + resonant filters\n const bufSize = ctx.sampleRate * 2;\n const buffer = ctx.createBuffer(1, bufSize, ctx.sampleRate);\n const data = buffer.getChannelData(0);\n for (let i = 0; i < bufSize; i++) data[i] = (Math.random() * 2 - 1) * 0.5;\n const src = ctx.createBufferSource();\n src.buffer = buffer; src.loop = true; src.start();\n nodes.push(src);\n\n profile.freqs.forEach((f, idx) => {\n const filt = ctx.createBiquadFilter();\n filt.type = 'bandpass'; filt.frequency.value = f;\n filt.Q.value = profile.q;\n const g = ctx.createGain(); g.gain.value = profile.gains[idx];\n src.connect(filt); filt.connect(g); g.connect(master);\n nodes.push(filt, g);\n });\n\n \/\/ extra oscillator for harshness\n const osc = ctx.createOscillator();\n osc.type = 'sawtooth'; osc.frequency.value = 180 + cardIdx * 40;\n const og = ctx.createGain(); og.gain.value = 0.04;\n osc.connect(og); og.connect(master); osc.start();\n nodes.push(osc, og);\n\n } else {\n \/\/ Clean: smooth sine waves\n profile.freqs.forEach((f, idx) => {\n const osc = ctx.createOscillator();\n osc.type = 'sine'; osc.frequency.value = f;\n const g = ctx.createGain(); g.gain.value = profile.gains[idx];\n \/\/ Gentle LFO vibrato\n const lfo = ctx.createOscillator(); lfo.frequency.value = 0.3 + idx * 0.15;\n const lfoG = ctx.createGain(); lfoG.gain.value = f * 0.003;\n lfo.connect(lfoG); lfoG.connect(osc.frequency);\n lfo.start(); osc.connect(g); g.connect(master); osc.start();\n nodes.push(osc, g, lfo, lfoG);\n });\n }\n\n return { master, nodes };\n }\n\n \/\/ cardIdx is captured in closure for buildSynth \u2014 fix: pass card data\n function startAudio(cardIdx) {\n const s = states[cardIdx];\n if (s.ctx) { s.ctx.close(); }\n s.ctx = new (window.AudioContext || window.webkitAudioContext)();\n const card = cards[cardIdx];\n const profile = s.mode === 'before' ? card.before : card.after;\n const { master, nodes } = buildSynth(s.ctx, profile, s.mode === 'before');\n s.nodes = nodes; s.master = master;\n }\n\n function stopAudio(cardIdx) {\n const s = states[cardIdx];\n if (s.master) {\n try {\n s.master.gain.linearRampToValueAtTime(0, s.ctx.currentTime + 0.06);\n setTimeout(() => { if (s.ctx) { s.ctx.close(); s.ctx = null; } }, 100);\n } catch(e) {}\n }\n }\n\n function updateProgress(cardIdx) {\n const s = states[cardIdx];\n if (!s.playing) return;\n const elapsed = (performance.now() - s.startTime) \/ 1000;\n const pct = Math.min(elapsed \/ DURATION, 1);\n const fill = document.getElementById('fill' + cardIdx);\n const ph = document.getElementById('ph' + cardIdx);\n const timeEl = document.getElementById('time' + cardIdx);\n if (fill) fill.style.width = (pct * 100) + '%';\n if (ph) ph.style.left = (pct * 100) + '%';\n const secs = Math.floor(elapsed % 60);\n if (timeEl) timeEl.textContent = '0:' + String(secs).padStart(2,'0');\n if (pct >= 1) { togglePlay(cardIdx); return; }\n s.raf = requestAnimationFrame(() => updateProgress(cardIdx));\n }\n\n function togglePlay(cardIdx) {\n const s = states[cardIdx];\n const btn = document.getElementById('play' + cardIdx);\n const ph = document.getElementById('ph' + cardIdx);\n const fill = document.getElementById('fill' + cardIdx);\n const timeEl = document.getElementById('time' + cardIdx);\n\n if (s.playing) {\n s.playing = false;\n cancelAnimationFrame(s.raf);\n stopAudio(cardIdx);\n btn.classList.remove('playing');\n btn.querySelector('.icon-play').style.display = '';\n btn.querySelector('.icon-stop').style.display = 'none';\n if (ph) { ph.classList.remove('active'); ph.style.left = '0%'; }\n if (fill) fill.style.width = '0%';\n if (timeEl) timeEl.textContent = '0:00';\n } else {\n \/\/ Stop any other playing card\n states.forEach((st, i) => { if (i !== cardIdx && st.playing) togglePlay(i); });\n s.playing = true;\n s.startTime = performance.now();\n startAudio(cardIdx);\n btn.classList.add('playing');\n btn.querySelector('.icon-play').style.display = 'none';\n btn.querySelector('.icon-stop').style.display = '';\n if (ph) ph.classList.add('active');\n updateProgress(cardIdx);\n }\n }\n\n \/\/ Wire up play buttons\n document.querySelectorAll('.ba-play-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const idx = parseInt(btn.dataset.card);\n togglePlay(idx);\n });\n });\n\n \/\/ Wire up before\/after toggle\n document.querySelectorAll('.ba-toggle-group').forEach(group => {\n const idx = parseInt(group.dataset.card);\n group.querySelectorAll('.ba-toggle-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const mode = btn.dataset.mode;\n if (states[idx].mode === mode) return;\n states[idx].mode = mode;\n\n \/\/ Update toggle UI\n group.querySelectorAll('.ba-toggle-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n\n \/\/ Update badge\n const badge = document.getElementById('badge' + idx);\n if (badge) {\n badge.textContent = mode === 'before' ? 'Before' : 'After';\n badge.classList.toggle('after-mode', mode === 'after');\n }\n\n \/\/ Redraw waveform\n const canvas = document.getElementById('wave' + idx);\n if (canvas) drawWaveform(canvas, idx, mode);\n\n \/\/ Update description\n const descs = [\n ['Raw, unprocessed vocal. Notice the muddiness in the low-mids and the harsh sibilance.',\n 'Processed vocal. Clear, present, with natural warmth and controlled highs.'],\n ['Flat, lifeless kit. The transients are smeared and the low-end lacks definition.',\n 'Tight, punchy drums. Every hit lands with weight and clarity.'],\n ['The full stereo mix before mastering. Lacks glue, punch, and perceived loudness.',\n 'Mastered mix. Wide, loud, balanced \u2014 ready for release.'],\n ];\n const descEl = btn.closest('.ba-card').querySelector('.ba-desc');\n if (descEl) descEl.textContent = descs[idx][mode === 'before' ? 0 : 1];\n\n \/\/ If playing, restart with new mode\n if (states[idx].playing) {\n stopAudio(idx);\n startAudio(idx);\n }\n });\n });\n });\n\n})();\n\n\n\n\n\/* EMAIL FORM *\/\n(function() {\n var input = document.getElementById('emailInput');\n var btn = document.getElementById('emailBtn');\n var note = document.getElementById('emailNote');\n if (!btn) return;\n\n function isValid(v) {\n return v.length > 5 && v.indexOf('@') > 0 && v.lastIndexOf('.') > v.indexOf('@');\n }\n\n btn.addEventListener('click', function() {\n var val = input.value.trim();\n if (!isValid(val)) {\n note.textContent = 'Please enter a valid email.';\n note.classList.remove('success');\n input.focus();\n return;\n }\n btn.textContent = '...';\n btn.disabled = true;\n setTimeout(function() {\n input.value = '';\n btn.textContent = 'Done';\n note.textContent = 'You are on the list. We will be in touch.';\n note.classList.add('success');\n setTimeout(function() {\n btn.textContent = 'Notify me';\n btn.disabled = false;\n }, 3000);\n }, 800);\n });\n\n input.addEventListener('keydown', function(e) {\n if (e.key === 'Enter') btn.click();\n });\n})();\n\n\n\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Plugin \u2014 Simplicity is Key Plugin \u2014 v2.0 Start using it today 🇩🇰  Danish Design Simplicity is key. The tool that stays out of your way. Plugin \u2014 Active Your plugin Clean.Precise.Yours. Clarity78 Focus92 Depth55 Active Philosophy Most tools compete for your attention. They add. They bloat. They demand. We went the other way. Plugin was built […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lowfreq.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":13,"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":40,"href":"https:\/\/lowfreq.dk\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/40"}],"wp:attachment":[{"href":"https:\/\/lowfreq.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}