/* Home-only: textures, 3D phone countdown, song/video/spread stage, animated market charts, tilt. */

/* ---------- smooth atmospheric backgrounds ---------- */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 55% at 85% 15%,rgba(204,255,0,.085),transparent 62%),
    radial-gradient(45% 45% at 8% 92%,rgba(204,255,0,.045),transparent 62%),
    linear-gradient(180deg,#070807,#050505 60%,#060606)}
.tex-soft-off::before{background:
    radial-gradient(55% 60% at 12% 60%,rgba(204,255,0,.07),transparent 62%),
    radial-gradient(40% 40% at 90% 90%,rgba(255,255,255,.025),transparent 60%),
    linear-gradient(180deg,#060606,#050505)}
.tex-wave::before{background:
    radial-gradient(60% 50% at 50% 100%,rgba(204,255,0,.11),transparent 65%),
    linear-gradient(#050505,#070707)}
.tex-wave .wave-bg{position:absolute;left:0;right:0;bottom:0;z-index:-1;width:100%;opacity:.5;pointer-events:none}
.tex .box,.tex .card,.tex .strip,.tex .callout{background:rgba(9,9,9,.9)}

/* ---------- THE PROBLEM: a 3D stopwatch falls in and counts 3 seconds ---------- */
.problem-grid{align-items:center}
.watch-stage{position:relative;height:460px;perspective:1400px;perspective-origin:50% 25%;margin-top:6px}
.watch3d{position:absolute;left:50%;top:20px;width:300px;height:350px;margin-left:-150px;transform-style:preserve-3d;will-change:transform}
.watch{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 32px rgba(204,255,0,.18))}
.w-num{font-family:var(--display);font-size:96px;fill:var(--white);letter-spacing:.02em}
.w-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.34em;fill:var(--lime)}
.w-hand{transform-box:view-box}
.w-shadow{position:absolute;left:50%;bottom:6px;width:280px;height:40px;margin-left:-140px;border-radius:50%;background:radial-gradient(ellipse,rgba(204,255,0,.28),rgba(0,0,0,0) 70%);filter:blur(10px);opacity:.7}
.w-streaks{position:absolute;inset:0;pointer-events:none}
.w-streaks i{position:absolute;height:1.5px;background:linear-gradient(90deg,transparent,rgba(204,255,0,.9));opacity:0;border-radius:2px}
.problem-rows .row{background:rgba(255,255,255,.012)}
@media(max-width:820px){.watch-stage{height:400px}.watch3d{width:250px;height:292px;margin-left:-125px}}

/* ---------- THE THREE POINTS: sticky journey (from loop-site) ---------- */
.why-scene{position:relative;padding:clamp(40px,6vw,80px) 0 0}
.why-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}
.why-stage{position:sticky;top:calc(66px + 8vh);height:44vh;display:flex;align-items:center;justify-content:center}
.why-numeral{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(150px,17vw,260px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);user-select:none;transition:opacity .4s ease}
.why-glow{position:absolute;left:50%;top:50%;width:min(38vw,420px);height:min(38vw,420px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(204,255,0,.16),transparent 66%);filter:blur(28px);pointer-events:none}
.why-notes{position:relative;width:min(19vw,170px);aspect-ratio:120/150;perspective:900px}
.why-note{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.7) rotateY(-40deg);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(204,255,0,.35))}
.why-note.is-on{opacity:1;transform:scale(1) rotateY(0);animation:note-float 7s ease-in-out infinite}
@keyframes note-float{0%,100%{transform:rotateY(-16deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(16deg) rotateX(-4deg) translateY(-12px)}}
.n-head{fill:var(--lime)}.n-head.hollow{fill:none;stroke:var(--lime);stroke-width:7}.n-inner{fill:#050505}
.n-stem{stroke:var(--lime);stroke-width:7;stroke-linecap:round}.n-flag,.n-beam{fill:var(--lime)}
.n-inf{fill:var(--lime);font-size:44px;font-family:var(--display);text-anchor:middle;opacity:.75}
.why-rail{position:absolute;right:-4px;top:12%;width:2px;height:76%;background:rgba(255,255,255,.09);overflow:hidden}
.why-rail i{position:absolute;inset:0 0 auto 0;height:100%;background:linear-gradient(var(--lime),rgba(204,255,0,.25));transform-origin:top;transform:scaleY(var(--progress,0));transition:transform .35s ease}
.why-steps{padding:2vh 0 6vh}
.why-step{min-height:38vh;display:flex;flex-direction:column;justify-content:center;max-width:38ch;opacity:.35;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.why-step.is-active{opacity:1;transform:none}
.why-kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.why-kick::before{content:"";width:34px;height:1px;background:var(--lime);transition:width .5s ease}
.why-step.is-active .why-kick::before{width:64px}
.why-step h2{font-family:var(--body);font-weight:600;letter-spacing:-.01em;font-size:clamp(26px,3.1vw,42px);line-height:1.06;margin:0 0 18px;color:var(--white)}
.why-step p{color:var(--muted);font-size:16.5px;margin:0;max-width:34ch}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:0}.why-stage{position:relative;top:auto;height:230px;margin-bottom:10px}.why-numeral{font-size:150px}.why-rail{display:none}.why-step{min-height:auto;padding:30px 0;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.why-note.is-on{animation:none}.why-step{opacity:1;transform:none}}

/* ---------- THE SONG, THE VIDEO, THE SPREAD ---------- */
.song-stage{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:clamp(18px,3vw,40px);align-items:end;perspective:1400px;margin-top:10px}
.song-stage figure{margin:0;position:relative;transform-style:preserve-3d;will-change:transform}
.song-stage img{width:100%;border-radius:16px;border:1px solid var(--line-soft);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.song-stage figcaption{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.song-stage figcaption b{display:block;font-family:var(--display);font-size:24px;letter-spacing:.06em;color:var(--white);margin-bottom:4px}
.song-cover img{aspect-ratio:1;object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(255,80,120,.18)}
.song-cover .bars{display:flex;gap:2px;align-items:flex-end;height:22px;margin-top:8px}
.song-cover .bars i{width:3px;background:var(--lime);border-radius:1px;display:block;animation:sbar 1.1s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes sbar{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.song-video img{filter:drop-shadow(0 20px 40px rgba(204,255,0,.10))}
.song-spread img{aspect-ratio:668/1008;object-fit:cover;object-position:top}
.song-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime);background:rgba(5,5,5,.75);padding:4px 9px;border-radius:4px}
.song-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-soft);border-radius:var(--r);background:#080808;margin-top:clamp(28px,4vw,44px)}
.song-stats div{padding:20px 22px;border-left:1px solid var(--line-soft)}
.song-stats div:first-child{border-left:0}
.song-stats b{display:block;font-family:var(--display);font-size:clamp(30px,3vw,44px);line-height:1;font-weight:400;color:var(--lime)}
.song-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.song-stage{grid-template-columns:1fr 1fr}.song-spread{grid-column:1/-1;max-width:420px;margin:0 auto}}
@media(max-width:600px){.song-stage{grid-template-columns:1fr}.song-stats{grid-template-columns:repeat(2,1fr)}.song-stats div:nth-child(3){border-left:0}.song-stats div:nth-child(n+3){border-top:1px solid var(--line-soft)}}

/* ---------- MARKET: animated charts ---------- */
.mk .card{transform-style:preserve-3d;transition:transform .25s ease,border-color .25s}
.mk .card svg.chart{overflow:visible}
.mk .card svg.chart text{font-family:var(--mono)}
.mk .chart .bar{transform-box:fill-box;transform-origin:50% 100%}
.mk .grid-3{perspective:1400px}

/* ---------- generic tilt + depth ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{border-color:var(--lime)}
.hero-inner{will-change:transform}
.currency .inf{filter:drop-shadow(0 0 24px rgba(204,255,0,.35))}
.big-inf{perspective:900px}

@media(prefers-reduced-motion:reduce){
  .song-cover .bars i{animation:none}
  .watch3d{transform:none!important}
}

/* ---------- site-wide 3D (motion.js) ---------- */
.motion .h-display,.motion .h-serif{perspective:800px}
.motion .h-display .w,.motion .h-serif .w{display:inline-block;transform-style:preserve-3d;will-change:transform}
.motion .rv{opacity:1;transform:none;transition:none}
.motion main .slide-head,.motion main .grid-2,.motion main .grid-3,.motion main .grid-4{perspective:1400px}
.motion .portrait,.motion .shift-img,.motion .card,.motion .case-card,.motion .box,.motion .callout,.motion .quote,.motion .release,.motion .player,.motion .albums figure{transform-style:preserve-3d}
.motion .inf,.motion .inf-big{transform-style:preserve-3d;display:block}
.tex .box,.tex .card,.tex .strip,.tex .callout{background:rgba(8,8,8,.85)}

/* ================= POLISH PASS ================= */
/* page fade */
.motion body{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.pt{position:fixed;inset:0;background:#050505;z-index:200;opacity:0;pointer-events:none;transition:opacity .28s ease}
.pt.on{opacity:1;pointer-events:auto}

/* nav: progress line + hide on scroll down */
.nav{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav.hide{transform:translateY(-100%)}
.nav-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px rgba(204,255,0,.7)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo .pulse-inf{width:40px;height:20px}
.nav-logo img{height:20px}

/* living infinity mark: a pulse of light travels the loop */
.pulse-inf{display:block;overflow:visible}
.pi-track{fill:none;stroke:rgba(204,255,0,.28);stroke-width:2.8;stroke-linecap:round}
.pi-run{fill:none;stroke:var(--lime);stroke-width:2.8;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(204,255,0,.9))}
.pulse-inf.big{width:min(420px,80%);height:auto;margin:0 auto}
.pulse-inf.big .pi-track,.pulse-inf.big .pi-run{stroke-width:2.2}
.pulse-inf.xl{width:min(520px,90%);height:auto}
.pulse-inf.xl .pi-track,.pulse-inf.xl .pi-run{stroke-width:2}

/* hero: light sweep + pointer glow + ticker */
.hero-wordmark.sweep{-webkit-mask-image:linear-gradient(110deg,#000 42%,rgba(0,0,0,.25) 50%,#000 58%);mask-image:linear-gradient(110deg,#000 42%,rgba(0,0,0,.25) 50%,#000 58%);-webkit-mask-size:320% 100%;mask-size:320% 100%;animation:sweep 2.2s cubic-bezier(.6,0,.2,1) .5s 1 both}
@keyframes sweep{from{-webkit-mask-position:120% 0;mask-position:120% 0}to{-webkit-mask-position:-120% 0;mask-position:-120% 0}}
.hero-glow{position:absolute;z-index:1;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(204,255,0,.10),transparent 68%);transform:translate(calc(var(--px,50vw) - 50%),calc(var(--py,50vh) - 50%));opacity:0;transition:opacity .5s}
.hero:hover .hero-glow{opacity:1}
.ticker{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:#040404;overflow:hidden;padding:12px 0}
.ticker-track{display:flex;gap:0;width:max-content;animation:tk 38s linear infinite}
.ticker span{font-family:var(--display);font-size:17px;letter-spacing:.24em;color:var(--muted);padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.ticker span i{width:6px;height:6px;border-radius:50%;background:var(--lime);display:inline-block;box-shadow:0 0 10px var(--lime)}
.ticker span b{font-weight:400;color:var(--lime)}
@keyframes tk{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* kinetic statement: words light up on scroll */
.currency .h-display .w{color:rgba(255,255,255,.14);transition:none}
.currency .h-display .lime .w{color:rgba(204,255,0,.16)}
.currency .h-display .w.lit{color:var(--white)}
.currency .h-display .lime .w.lit{color:var(--lime);text-shadow:0 0 30px rgba(204,255,0,.35)}
.quote-big .w{color:rgba(255,255,255,.14)}
.quote-big .lime .w{color:rgba(204,255,0,.16)}
.quote-big .w.lit{color:var(--white)}
.quote-big .lime .w.lit,.quote-big .w.lit .lime{color:var(--lime)}

/* section kickers get a lime dash */
.slide-head .kicker::before,.page-intro .kicker::before,.why-kick::before{content:"";display:inline-block;width:26px;height:1px;background:var(--lime);margin-right:12px;vertical-align:middle}
.why-kick::before{margin-right:0}

/* page-intro art: expanding sound rings around the living mark */
.page-intro{overflow:hidden}
.page-intro .wrap{position:relative}
.intro-art{position:absolute;right:0;top:50%;width:360px;height:360px;transform:translateY(-50%);pointer-events:none}
.intro-art .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(204,255,0,.35);animation:iring 4.2s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.intro-art .ring:nth-child(2){animation-delay:1.4s}.intro-art .ring:nth-child(3){animation-delay:2.8s}
@keyframes iring{0%{transform:scale(.25);opacity:0}15%{opacity:.8}100%{transform:scale(1);opacity:0}}
.intro-art .pulse-inf{position:absolute;left:50%;top:50%;width:150px;height:75px;transform:translate(-50%,-50%)}
@media(max-width:900px){.intro-art{width:220px;height:220px;right:-40px;opacity:.6}.intro-art .pulse-inf{width:100px;height:50px}}

/* cards + buttons craft */
.case-visual img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.case-card:hover .case-visual img{transform:scale(1.06)}
.case-card{transition:border-color .25s,transform .25s,box-shadow .35s}
.case-card:hover{box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(204,255,0,.35)}
.btn{position:relative;overflow:hidden}
.btn.solid::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg) translateX(-200%);transition:transform .7s ease}
.btn.solid:hover::after{transform:skewX(-20deg) translateX(520%)}
.card,.box{transition:border-color .3s,box-shadow .4s,transform .3s}
.card:hover,.box:hover{box-shadow:0 24px 50px rgba(0,0,0,.5)}

/* richer footer */
.foot{border-top:1px solid var(--line-soft);background:#040404;font-family:var(--body);color:var(--muted);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:40px}
.foot-brand .pulse-inf{width:64px;height:32px;margin-bottom:14px}
.foot-brand img{height:22px;width:auto;margin-bottom:14px}
.foot-brand p{max-width:34ch;color:var(--muted)}
.foot h5{font-family:var(--display);font-size:16px;letter-spacing:.24em;color:var(--white);margin:0 0 14px;font-weight:400}
.foot a{display:block;text-decoration:none;color:var(--muted);padding:5px 0;transition:color .2s,transform .2s}
.foot a:hover{color:var(--lime);transform:translateX(4px)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted-2)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:28px;padding-top:40px;padding-bottom:28px}}

/* contact: next steps */
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(36px,5vw,60px)}
.next-steps .card{padding-top:40px}
.next-steps .card .num{position:absolute;top:-18px;left:22px;transform:none}
@media(max-width:820px){.next-steps{grid-template-columns:1fr}}

/* why-page big mark */
.why .pulse-inf.xl{margin-top:34px}

@media(prefers-reduced-motion:reduce){.pi-run{animation:none!important}.ticker-track{animation:none}.intro-art .ring{animation:none;opacity:.3;transform:scale(.7)}.hero-wordmark.sweep{animation:none;-webkit-mask-image:none;mask-image:none}}

/* pinned statement fills the viewport while it lights up */
@media(min-width:821px){.motion .currency{min-height:calc(100vh - 66px);display:flex;align-items:center}.motion .currency>.wrap{width:100%}}

/* footer grid must win over the old footer .wrap flex rule */
.foot .wrap.foot-grid{display:grid}

/* calm: pause heavy loops when not on screen */
.loop-band-scene:not(.on) .lb-track,.loop-band-scene:not(.on) .lp-wave i{animation-play-state:paused}
.scoreboard:not(.on) .score-eq i{animation-play-state:paused}
.ticker:not(.on) .ticker-track{animation-play-state:paused}

/* ================= BANDS: every section reads as its own block ================= */
.band-soft{background:linear-gradient(180deg,#0e0f0d 0%,#0a0b0a 100%);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.band-soft .box,.band-soft .card,.band-soft .strip,.band-soft .callout,.band-soft .release{background:#070807}
.band-light{position:relative;isolation:isolate;border-top:1px solid rgba(204,255,0,.14);
  background:radial-gradient(70% 60% at 82% 18%,rgba(204,255,0,.13),transparent 60%),radial-gradient(50% 50% at 8% 92%,rgba(204,255,0,.07),transparent 60%),linear-gradient(180deg,#070807,#050505)}
.band-light::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(204,255,0,.6),transparent);z-index:1}
.band-photo{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.band-bg{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:var(--pos,center);z-index:-2;filter:brightness(.45) saturate(1.05);pointer-events:none;will-change:transform}
.band-photo::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.78) 48%,rgba(5,5,5,.42) 100%),linear-gradient(180deg,#050505 0%,transparent 16%,transparent 84%,#050505 100%)}
.band-photo.right::after{background:linear-gradient(270deg,rgba(5,5,5,.96) 0%,rgba(5,5,5,.78) 48%,rgba(5,5,5,.42) 100%),linear-gradient(180deg,#050505 0%,transparent 16%,transparent 84%,#050505 100%)}
.band-photo .box,.band-photo .card,.band-photo .strip,.band-photo .callout,.band-photo .feat-cols,.band-photo .pillar{background:rgba(6,6,6,.78)}
.band-photo .feat-cols,.band-photo .pillar{border-radius:var(--r)}
.band-photo .strip .cell,.band-photo .feat-cols .feat{background:transparent}
.slide.band-soft,.slide.band-light,.slide.band-photo{border-top-width:1px}
.loop-band-scene.band-soft{border-top:1px solid rgba(255,255,255,.07)}
.why-scene.band-soft{padding-bottom:4vh;margin-top:0}
/* the two edge rules between bands */
.band-lime{border-top:0}
@media(max-width:820px){.band-bg{filter:brightness(.38)}.band-photo::after{background:linear-gradient(180deg,rgba(5,5,5,.94),rgba(5,5,5,.7) 40%,rgba(5,5,5,.85))}}

/* why page journey: icon marks */
.why-note .n-stem.thin{stroke-width:5}

/* photo bands built from deck slides: soften so their own text never reads */
.band-photo .band-bg.soft{filter:brightness(.4) saturate(1.1) blur(3px);transform:scale(1.04)}

/* ================= CALM v2: nothing pulses ================= */
.score-eq i{animation:none!important;transform:scaleY(var(--h,.5))}
.score-eq i:nth-child(1){--h:.35}.score-eq i:nth-child(2){--h:.7}.score-eq i:nth-child(3){--h:.5}.score-eq i:nth-child(4){--h:.9}.score-eq i:nth-child(5){--h:.6}.score-eq i:nth-child(6){--h:1}.score-eq i:nth-child(7){--h:.45}.score-eq i:nth-child(8){--h:.8}.score-eq i:nth-child(9){--h:.55}.score-eq i:nth-child(10){--h:.75}.score-eq i:nth-child(11){--h:.4}.score-eq i:nth-child(12){--h:.65}
.intro-art .ring{animation:none!important;opacity:.35;transform:scale(.7)}
.intro-art .ring:nth-child(2){opacity:.18;transform:scale(.88)}
.intro-art .ring:nth-child(3){opacity:.08;transform:scale(1)}
.why-note.is-on{animation:none!important}
.hero-scroll::after{animation:none!important;opacity:.8}
.band-bg{will-change:auto;filter:brightness(.42) saturate(1.05)}
.band-photo .band-bg.soft{filter:brightness(.34) saturate(1.05);transform:none}
.lp-wave i{animation-duration:2.2s}
.motion body{animation:none}
.song-cover .bars i{animation:none!important;transform:scaleY(.75)}

/* ================= ROUND 9 ================= */
/* lime page titles */
.page-intro.lime{background:var(--lime);color:#000;padding-bottom:clamp(44px,6vw,76px);border-bottom:1px solid rgba(0,0,0,.2)}
.page-intro.lime .kicker,.page-intro.lime .h-display{color:#000}
.page-intro.lime .kicker::before{background:#000}
.page-intro.lime .lead{color:rgba(0,0,0,.74)}
.page-intro.lime .h-display .lime{color:transparent;-webkit-text-stroke:2px #000}
.page-intro.lime .intro-art .ring{border-color:rgba(0,0,0,.3)}
.page-intro.lime .pi-track{stroke:rgba(0,0,0,.22)}
.page-intro.lime .pi-run{stroke:#000;filter:none}
.page-intro.lime+.slide,.page-intro.lime+.why-scene{border-top:0}
.intro-lockup{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.intro-lockup .pulse-inf{width:78px;height:39px}
.intro-lockup img{height:36px;width:auto;filter:brightness(0)}
.intro-lockup span{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(0,0,0,.7);border-left:1px solid rgba(0,0,0,.3);padding-left:16px}

/* formula: three cards that arrive one after another */
.formula .grid-3{perspective:1200px}
.formula .feat{border:1px solid var(--line);border-radius:var(--r);background:#080808;padding:38px 22px 30px;position:relative;transform-style:preserve-3d}
.formula .feat .num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:var(--bg)}
.formula .feat .node{margin-top:8px}

/* secret sauce: the wave flows */
.wave-flow{position:relative;overflow:hidden;margin-top:clamp(40px,6vw,70px);height:clamp(120px,14vw,226px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wave-flow .wf-track{position:absolute;left:0;top:0;height:100%;display:flex;width:max-content;animation:wflow 48s linear infinite;animation-play-state:paused}
.sauce.on .wave-flow .wf-track{animation-play-state:running}
.wave-flow img{height:100%;width:auto;display:block;opacity:.9}
.wave-flow img:nth-child(2){transform:scaleX(-1)}
@keyframes wflow{to{transform:translateX(-50%)}}

/* three things: music tiles on a staff */
.eng.staff{position:relative;isolation:isolate}
.eng.staff::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 46px,rgba(255,255,255,.055) 46px 47px),radial-gradient(60% 60% at 70% 30%,rgba(204,255,0,.10),transparent 60%),#070807}
.three-music{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{border:1px solid var(--line-soft);border-radius:var(--r);background:rgba(8,8,8,.85);padding:24px 22px 26px;text-align:left}
.tile h4{margin:14px 0 6px;font-family:var(--display);font-size:clamp(22px,2vw,28px);letter-spacing:.06em;font-weight:400}
.tile p{margin:0;color:var(--muted);font-size:14.5px}
.tile-vis{height:150px;border-radius:10px;background:#050505;border:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tile-vis.eq{gap:4px;padding:0 18px;align-items:center}
.tile-vis.eq i{flex:1;height:var(--h,40%);background:linear-gradient(180deg,var(--lime),rgba(204,255,0,.25));border-radius:2px;transform-origin:center;animation:teq 1.6s ease-in-out infinite alternate;animation-delay:var(--d,0s);animation-play-state:paused}
.eng.on .tile-vis.eq i{animation-play-state:running}
@keyframes teq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.tile-vis.disc .disc-ring{position:absolute;width:118px;height:118px;border-radius:50%;background:conic-gradient(from 0deg,rgba(204,255,0,.0),rgba(204,255,0,.55),rgba(204,255,0,0) 60%,rgba(204,255,0,.25),rgba(204,255,0,0));animation:spin 9s linear infinite;animation-play-state:paused;-webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,#000 62%,transparent 63%);mask:radial-gradient(circle,transparent 46%,#000 47%,#000 62%,transparent 63%)}
.tile-vis.disc .disc-core{position:absolute;width:104px;height:104px;border-radius:50%;background:repeating-radial-gradient(circle,#0b0b0b 0 2px,#111 2px 3px);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.tile-vis.disc .pulse-inf{width:44px;height:22px}
.eng.on .tile-vis.disc .disc-ring{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.tile-vis.fan{perspective:700px}
.tile-vis.fan .mini{position:absolute;width:54px;height:104px;border-radius:10px;border:1.5px solid #2a2a2a;background:linear-gradient(180deg,#141414,#080808);transform-origin:50% 140%;box-shadow:0 12px 24px rgba(0,0,0,.6)}
.tile-vis.fan .mini::before{content:"";position:absolute;left:10px;right:10px;top:26px;height:34px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--lime) 0 2px,transparent 2px 5px);opacity:.8}
.tile-vis.fan .mini::after{content:"";position:absolute;left:50%;bottom:8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--lime)}
.tile-vis.fan .mini.lit{border-color:rgba(204,255,0,.5)}
@media(max-width:820px){.three-music{grid-template-columns:1fr}}

/* four pillars: mixing-desk channel strips */
.mixer{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.channel{--tint:var(--lime);position:relative;border:1px solid var(--line-soft);border-radius:var(--r);background:linear-gradient(180deg,#101110,#070807);padding:22px 20px 24px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto 1fr;gap:10px 16px;min-height:340px}
.channel::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;border-radius:var(--r) var(--r) 0 0;background:var(--tint)}
.ch-meter{grid-row:1/4;display:flex;flex-direction:column-reverse;gap:4px;align-self:stretch;padding:2px 0}
.ch-meter i{flex:1;border-radius:2px;background:rgba(255,255,255,.07);transition:background .25s,box-shadow .25s}
.ch-meter i.lit{background:var(--tint);box-shadow:0 0 8px var(--tint)}
.ch-meter i:nth-last-child(-n+2).lit{background:#fff;box-shadow:0 0 8px #fff}
.ch-head{display:flex;align-items:center;gap:10px}
.ch-head .num{width:30px;height:30px;font-size:15px;border-color:var(--tint);color:var(--tint)}
.channel h4{margin:0;font-family:var(--display);font-size:clamp(22px,1.9vw,26px);letter-spacing:.06em;font-weight:400;line-height:1}
.channel .st{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tint)}
.channel p{margin:0;color:var(--muted);font-size:14px;align-self:start}
.ch-fader{grid-column:2;position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);align-self:end;margin-top:14px}
.ch-fader span{position:absolute;top:50%;left:calc(var(--lvl,.5) * 100%);width:18px;height:26px;margin:-13px 0 0 -9px;border-radius:4px;background:linear-gradient(180deg,#2a2a2a,#111);border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 14px rgba(0,0,0,.6)}
.ch-fader span::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:2px;margin-top:-1px;background:var(--tint)}
.ch-fader::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--lvl,.5) * 100%);border-radius:3px;background:var(--tint);opacity:.7}
.channel.c2{--tint:#e6ff66}.channel.c3{--tint:#9fd300}.channel.c4{--tint:#ffffff}
@media(max-width:1000px){.mixer{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mixer{grid-template-columns:1fr}.channel{min-height:0}}
.eco.band-photo .channel{background:linear-gradient(180deg,rgba(14,15,14,.92),rgba(7,8,7,.95))}

/* ================= running results band (replaces the scoreboard) ================= */
.stat-band{padding:26px 0 30px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:#040404}
.stat-band .lb-track{animation-duration:58s}
.stat-band:not(.on) .lb-track,.stat-band:not(.on) .lp-wave i{animation-play-state:paused}
.lp.stat{height:292px;width:186px;justify-content:flex-start;gap:6px;padding-top:22px}
.lp.stat .lp-num{font-family:var(--display);font-size:46px;line-height:1;color:var(--lime);margin-top:12px;letter-spacing:.02em}
.lp.stat .lp-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5;min-height:32px}
.lp.stat .lp-wave{flex:1;max-height:64px;align-items:flex-end;margin-top:6px}
.lp.stat .lp-tag{position:absolute;right:14px;top:16px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(204,255,0,.7);border-radius:3px;padding:2px 6px}
.lp.stat .lp-src{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);margin-top:auto}

/* page header motifs (no infinity) */
.intro-art svg{width:100%;height:100%;overflow:visible}
.art-eq .bar{fill:#000;transform-box:fill-box;transform-origin:50% 50%}
.art-disc .disc{transform-box:fill-box;transform-origin:50% 50%}
.art-chart .bar{transform-box:fill-box;transform-origin:50% 100%}
@media(max-width:900px){.intro-art{opacity:.45}}

/* header art never overlaps the title */
.page-intro .h-display,.page-intro .lead{max-width:min(100%,760px)}
.intro-art{width:320px;height:320px}
@media(max-width:1200px){.intro-art{width:250px;height:250px}.page-intro .h-display,.page-intro .lead{max-width:min(100%,600px)}}
@media(max-width:900px){.intro-art{width:200px;height:200px;right:-20px}}

/* ================= the loop-site ticker band, ported ================= */
.ticker.big{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:0;background:linear-gradient(180deg,rgba(204,255,0,.05),transparent)}
.ticker.big .ticker-track{display:flex;align-items:center;gap:38px;width:max-content;animation:tick 34s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker.big .ticker-track span{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(26px,3vw,44px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42);white-space:nowrap;padding:0;display:inline;gap:0}
.ticker.big .ticker-track span.hot{color:var(--lime);-webkit-text-stroke:0}
.ticker.big .ticker-track b{color:var(--lime);font-size:22px;font-weight:400}
.ticker.big:not(.on) .ticker-track{animation-play-state:paused}

/* ================= nav links ================= */
.nav-menu{display:flex;align-items:center;gap:14px}
.nav-links{gap:2px;position:relative;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03)}
.nav-links li{position:relative;z-index:1}
.nav-links a{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.nav-links a i{font-family:var(--mono);font-size:9.5px;font-style:normal;color:var(--lime);opacity:.6;letter-spacing:.05em}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{color:#000;background:var(--lime);box-shadow:0 0 18px rgba(204,255,0,.3)}
.nav-links a[aria-current="page"] i{color:#000;opacity:.65}
.nav-hi{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;border-radius:999px;background:rgba(255,255,255,.08);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .2s;z-index:0;pointer-events:none}
.nav-links.hover .nav-hi{opacity:1}
.nav-btn{padding:9px 18px;min-height:40px;font-size:17px}
@media(max-width:900px){
  .nav-menu{display:none;flex-direction:column;align-items:stretch;gap:0}
  .nav-menu.open{display:flex}
  .nav-links{border:0;background:transparent;padding:0;border-radius:0}
  .nav-links li a{display:flex;padding:14px 0;font-size:15px;border-radius:0;letter-spacing:.16em}
  .nav-links a[aria-current="page"]{background:transparent;color:var(--lime);box-shadow:none}
  .nav-links a[aria-current="page"] i{color:var(--lime)}
  .nav-hi{display:none}
  .nav-btn{margin:16px 0 4px;align-self:flex-start;display:inline-flex}
}

/* ================= nav: loop-site's pill keys ================= */
.nav{background:rgba(10,10,10,.68);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav .wrap{height:76px}
.nav-logo img{height:22px}
.nav-links{gap:10px;padding:0;border:0;border-radius:0;background:transparent}
.nav-links a{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--white);padding:8px 15px;border:1px solid rgba(255,255,255,.14);border-radius:40px;background:rgba(255,255,255,.02);display:flex;align-items:center;gap:7px;transition:color .2s,border-color .2s,background .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--lime);border-color:rgba(204,255,0,.55);background:rgba(204,255,0,.06);box-shadow:none}
.nav-links a[aria-current="page"]{border-color:var(--lime)}
.nav-hi{display:none}
.nav-btn,.nav-btn:hover{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;background:var(--lime);color:#000;padding:11px 20px;border-radius:2px;border:0;min-height:0;transition:transform .2s,background .2s;white-space:nowrap}
.nav-btn:hover{background:#fff;transform:translateY(-2px)}
.nav-btn::after{display:none}
.nav-menu{gap:22px}
@media(max-width:900px){
  .nav-menu{top:76px;padding:0 var(--pad) 22px}
  .nav-links{flex-direction:column;align-items:stretch;gap:0}
  .nav-links li{border:0}
  .nav-links li a{width:100%;padding:16px 0;border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent;font-size:14px}
  .nav-links a[aria-current="page"]{border-color:rgba(255,255,255,.1);color:var(--lime)}
  .nav-btn{margin-top:18px}
}

/* ================= SYSTEM: five services (sound, loops, creators, distribution, culture) ================= */
.three-music.five{grid-template-columns:repeat(5,1fr);gap:16px}
.three-music.five .tile{padding:18px 16px 22px}
.three-music.five .tile-vis{height:130px}
.three-music.five .tile p{font-size:14px}
.tile-vis.dist{flex-direction:column;gap:8px}
.tile-vis.dist span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:5px 14px;transition:color .3s,border-color .3s,background .3s}
.eng.on .tile-vis.dist span{color:var(--lime);border-color:rgba(204,255,0,.55)}
.eng.on .tile-vis.dist span:nth-child(2){transition-delay:.25s}.eng.on .tile-vis.dist span:nth-child(3){transition-delay:.5s}
.tile-vis.culture{display:grid;grid-template-columns:repeat(6,12px);gap:7px;align-content:center;justify-content:center}
.tile-vis.culture i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .5s,box-shadow .5s}
.tile-vis.culture i.one{background:var(--lime)}
.eng.on .tile-vis.culture i.ten{background:var(--lime);box-shadow:0 0 6px rgba(204,255,0,.5);transition-delay:.3s}
.eng.on .tile-vis.culture i{background:rgba(204,255,0,.28);transition-delay:.8s}
.eng.on .tile-vis.culture i.one,.eng.on .tile-vis.culture i.ten{background:var(--lime)}
@media(max-width:1100px){.three-music.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.three-music.five{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.three-music.five{grid-template-columns:1fr}}

/* home hero: the positioning line */
.hero-sub .hero-pos{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--white);margin-bottom:12px}

/* ================= ROUND 10 (2026-09-14) ================= */
/* text marks: no dashes in front of kickers */
.slide-head .kicker::before,.page-intro .kicker::before,.why-kick::before{display:none!important}
.why-kick{gap:0}

/* step 3: a person, sharing the sound */
.why-person .n-wave{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;opacity:.7}
.why-person .n-neck{fill:var(--lime)}

/* lighter photo bands: real imagery shows through, less black */
.band-photo.lite .band-bg{filter:brightness(.66) saturate(1.12)}
.band-photo.lite::after{background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.6) 45%,rgba(5,5,5,.22) 100%),linear-gradient(180deg,rgba(5,5,5,.85) 0%,transparent 18%,transparent 82%,rgba(5,5,5,.85) 100%)}
.band-photo.lite.right::after{background:linear-gradient(270deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.6) 45%,rgba(5,5,5,.22) 100%),linear-gradient(180deg,rgba(5,5,5,.85) 0%,transparent 18%,transparent 82%,rgba(5,5,5,.85) 100%)}
.band-photo.lite.center::after{background:radial-gradient(70% 80% at 50% 50%,rgba(5,5,5,.82),rgba(5,5,5,.35) 100%),linear-gradient(180deg,rgba(5,5,5,.8) 0%,transparent 18%,transparent 82%,rgba(5,5,5,.8) 100%)}
.band-photo.lite .case-card,.band-photo.lite .song-stats,.band-photo.lite .channel{background:rgba(8,9,8,.86)}
.band-photo.lite .sub,.band-photo.lite .lead{color:#d8d8d3}
@media(max-width:820px){.band-photo.lite .band-bg{filter:brightness(.55)}.band-photo.lite::after,.band-photo.lite.right::after{background:linear-gradient(180deg,rgba(5,5,5,.88),rgba(5,5,5,.55) 40%,rgba(5,5,5,.8))}}

/* real reels with sound */
.case-visual.reel{background:#000}
.case-visual.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.case-grid.reels .case-visual{aspect-ratio:9/16}
.case-grid.bento .feature .case-visual.reel{aspect-ratio:3/4}
.reel-snd{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(5,5,5,.66);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.reel-snd em{font-style:normal}
.reel-snd .ic{width:18px;height:18px;stroke:currentColor}
.reel-snd .s-on{display:none}
.reel.sound .reel-snd{background:var(--lime);border-color:var(--lime);color:#000}
.reel.sound .reel-snd .s-on{display:block}.reel.sound .reel-snd .s-off{display:none}
.reel-snd:hover{border-color:var(--lime)}
.reel-snd:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* LOOOP's own reels */
.own-reels-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);align-items:center}
.reel-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reel-pair .case-card .case-visual{aspect-ratio:9/16}
.reel-pair .case-card:nth-child(2){transform:translateY(36px)}
@media(max-width:820px){.own-reels-grid{grid-template-columns:1fr}.reel-pair .case-card:nth-child(2){transform:none}}

/* why it worked: text + insights side by side */
.ww-top.ww-split{grid-template-columns:1fr minmax(0,460px)}
.ww-top.ww-split .phones img{border-radius:14px;filter:drop-shadow(0 20px 60px rgba(204,255,0,.12))}
@media(max-width:900px){.ww-top.ww-split{grid-template-columns:1fr}}

/* ecosystem mixer: real faders that change the sound */
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.slide-head.split .mix-play{align-self:end}
.mix-play.on{background:transparent;color:var(--lime)}
.mix-play.on .ic{stroke:var(--lime)!important}
.ch-fader{height:auto;background:none;margin-top:14px;display:block}
.ch-fader::before{display:none}
.ch-range,.mix-vol{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;margin:0}
.ch-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--tint) calc(var(--lvl,.5)*100%),rgba(255,255,255,.1) 0)}
.ch-range::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.ch-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--tint)}
.ch-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:28px;margin-top:-11px;border-radius:4px;background:linear-gradient(180deg,#2e2e2e,#111);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 -2px 0 var(--tint),0 6px 14px rgba(0,0,0,.6)}
.ch-range::-moz-range-thumb{width:18px;height:28px;border-radius:4px;background:linear-gradient(180deg,#2e2e2e,#111);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 -2px 0 var(--tint)}
.ch-range:focus-visible,.mix-vol:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.mixer.is-playing .channel{border-color:rgba(204,255,0,.28)}
.mix-master{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;padding:14px 20px;border:1px solid var(--line-soft);border-radius:var(--r);background:rgba(8,9,8,.86)}
.mix-master>span{font-family:var(--display);font-size:20px;letter-spacing:.14em;color:var(--lime)}
.mix-master .mix-vol{flex:1;min-width:160px;max-width:420px}
.mix-vol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
.mix-vol::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--lime)}
.mix-vol::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--lime);border:0}
.mix-note{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* market claims as a running band */
.market-band{padding:clamp(40px,6vw,70px) 0 0;background:#050505;border-top:1px solid rgba(255,255,255,.07)}
.market-head{margin-bottom:16px}
.market-head .kicker{display:block}
.ticker.big.market{background:linear-gradient(180deg,rgba(204,255,0,.08),rgba(204,255,0,.02))}
.ticker.big.market .ticker-track{animation-direction:reverse;animation-duration:40s}
.case-visual.reel .case-tag{left:auto;right:12px}
.proof .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.proof .release{min-width:0;grid-template-columns:minmax(120px,190px) minmax(0,1fr)}
.proof .metrics b{min-width:84px}
@media(max-width:900px){.proof .grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.case-grid.reels .case-visual{aspect-ratio:4/5}}

/* work: sound band phones are playable */
.lp.sound{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.lp.sound:hover{border-color:rgba(204,255,0,.7);transform:translateY(-4px)}
.lp.sound:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.lp.sound.playing{border-color:var(--lime);box-shadow:0 24px 60px rgba(0,0,0,.75),0 0 44px rgba(204,255,0,.35)}
.lp.sound.playing .lp-play{box-shadow:0 0 0 6px rgba(204,255,0,.25);font-size:10px;letter-spacing:-1px}
#sounds .loop-band{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}#sounds .loop-band.dragging{cursor:grabbing}#sounds .lb-track{will-change:transform}

/* ===== 2026-09-15 ===== */
/* system: the loop video in a phone */
.sys-loop-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:center}
.sys-phone{justify-self:center;width:min(100%,320px);padding:10px;border-radius:38px;background:linear-gradient(160deg,#2a2b28,#0b0c0b 40%,#161715);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px rgba(0,0,0,.6),0 0 60px rgba(204,255,0,.08)}
.sys-phone .case-visual.reel{aspect-ratio:9/16;border-radius:30px;overflow:hidden}
.sys-count{margin-top:24px;font-family:var(--display);font-size:clamp(26px,2.6vw,36px);letter-spacing:.04em;text-transform:uppercase;color:var(--white)}
.sys-count b{color:var(--lime);font-weight:400}
@media(max-width:820px){.sys-loop-grid{grid-template-columns:1fr}}
/* home: one clear closing CTA */
.home-cta{text-align:center}
.home-cta .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.band-lime .btn.line{background:transparent;color:#000;border:1.5px solid #000}
.band-lime .btn.line:hover{background:#000;color:var(--lime)}
/* one type system: headings in Bebas everywhere */
.why-step h2{font-family:var(--display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(34px,3.8vw,54px);line-height:.98}

/* ===== 2026-09-15 round 12 ===== */
/* hero: clearer supporting copy */
.hero-sub .hero-lede{margin:0;font-size:clamp(17px,1.55vw,20px);line-height:1.5;color:#e6e6e1;max-width:540px}
.hero-sub .hero-lede b{color:var(--white);font-weight:600}
.hero-pills{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero-pills li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid rgba(204,255,0,.4);background:rgba(5,5,5,.55);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}
.hero-pills .ic{width:16px;height:16px;stroke:var(--lime)}
/* band between the problem and the 1-2-3 */
.say-band{background:var(--lime);color:#000;padding-top:clamp(40px,6vw,70px);border-top:1px solid rgba(0,0,0,.2)}
.say-head{text-align:center}
.say-line{margin:0 0 clamp(24px,3vw,36px);font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,5vw,72px);line-height:.95;letter-spacing:.01em}
.say-line span{display:inline-block;color:transparent;-webkit-text-stroke:2px #000}
.ticker.big.lime{background:#000;border-color:#000}
.ticker.big.lime .ticker-track{animation-direction:reverse}
.ticker.big.lime .ticker-track span{-webkit-text-stroke:1px rgba(204,255,0,.55)}
.ticker.big.lime .ticker-track span.hot{color:var(--lime)}
.hero-inner .hero-sub{max-width:660px}
@media(max-width:600px){.hero-pills{gap:8px}.hero-pills li{font-size:11.5px;padding:7px 12px 7px 9px}}
.say-band{padding:clamp(44px,6vw,76px) 0}
.say-band .say-line{margin:0}

/* ===== 2026-09-15: WhatsApp button + 1 minute brief ===== */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 14px;border-radius:999px;background:#25D366;color:#04210f;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .2s,box-shadow .2s}
.wa-float svg{width:28px;height:28px}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.wa-float:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
body:has(.wy-sound-pill) .wa-float{bottom:78px}
@media(max-width:600px){.wa-float{height:54px;width:54px;padding:0;justify-content:center}.wa-float span{display:none}}

.brief-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
.brief-intro .sub{margin-top:14px}
.brief-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;color:var(--muted)}
.brief-points li{display:flex;align-items:center;gap:10px}
.brief-points .ic{width:18px;height:18px;stroke:var(--lime)}
.brief-points a{color:var(--lime)}
.brief{position:relative;border:1px solid rgba(204,255,0,.28);border-radius:var(--r);background:linear-gradient(180deg,#101110,#080908);padding:clamp(22px,3vw,34px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.bf-progress{height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.bf-progress i{display:block;height:100%;width:25%;background:var(--lime);transition:width .35s ease}
.bf-count{margin:12px 0 18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bf-count b{color:var(--lime)}
.bf-step{border:0;margin:0;padding:0;min-width:0}
.bf-step legend{padding:0;font-family:var(--display);font-size:clamp(30px,3.2vw,44px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.bf-hint{margin:16px 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bf-chips{display:flex;flex-wrap:wrap;gap:10px}
.bf-chip{position:relative;cursor:pointer}
.bf-chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.bf-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:var(--white);font-weight:600;font-size:14.5px;transition:background .15s,border-color .15s,color .15s}
.bf-chip:hover span{border-color:rgba(204,255,0,.6)}
.bf-chip input:checked+span{background:var(--lime);border-color:var(--lime);color:#000}
.bf-chip input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}
.bf-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.bf-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.bf-field.wide{grid-column:1/-1}
.bf-field em{font-style:normal;color:var(--muted-2)}
.bf-field input,.bf-field textarea{font:inherit;font-size:16px;color:var(--white);background:#050605;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 14px;resize:vertical}
.bf-field input:focus,.bf-field textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(204,255,0,.15)}
.bf-honey{position:absolute!important;left:-9999px!important;width:1px;height:1px}
.bf-error{margin:14px 0 0;color:#ff8a7a;font-size:14px}
.bf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.bf-nav .bf-next,.bf-nav .bf-send{margin-left:auto}
.bf-nav .btn[disabled]{opacity:.6;cursor:wait}
.bf-done{text-align:center;padding:10px 0 4px}
.bf-tick{width:64px;height:64px;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;margin:6px auto 10px;display:block}
.bf-done h3{font-size:clamp(32px,3.4vw,46px);margin:0 0 10px}
.bf-done p{color:var(--muted);margin:0 0 20px}
@media(max-width:900px){.brief-grid{grid-template-columns:1fr}}
@media(max-width:560px){.bf-fields{grid-template-columns:1fr}}

/* ===== 2026-09-15 round 16: hero order + example buttons ===== */
.hero-inner>.hero-pos{display:block;margin:0 0 22px;font-family:var(--display);font-weight:400;font-size:clamp(40px,5.2vw,78px);line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.hero-inner>.hero-wordmark{width:min(400px,74%)}
.hero-tag{font-family:var(--body);font-weight:500;font-size:clamp(17px,1.6vw,21px);letter-spacing:0;text-transform:none;color:var(--lime);margin:12px 0 0 2px}
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.hero-pills a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(204,255,0,.45);background:rgba(5,5,5,.55);color:var(--white);text-decoration:none;font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.hero-pills a .ic{width:17px;height:17px;stroke:var(--lime)}
.hero-pills a span{color:var(--lime);transition:transform .2s}
.hero-pills a:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.hero-pills a:hover .ic{stroke:#000}.hero-pills a:hover span{color:#000;transform:translateX(3px)}
.hero-pills a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media(max-width:600px){.hero-pills a{font-size:12px;min-height:40px}}
/* ecosystem: each channel plays its own real sound */
.channel{grid-template-rows:auto auto auto 1fr auto}
.channel .ch-meter{grid-row:1/6}
.ch-controls{grid-column:2;display:flex;align-items:center;gap:12px;align-self:end;margin-top:10px}
.ch-controls .ch-fader{flex:1;margin-top:0}
.ch-play{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;border-radius:999px;border:1px solid var(--tint);background:transparent;color:var(--tint);font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.ch-play .ic{width:15px;height:15px;stroke:currentColor}
.channel.is-on .ch-play{background:var(--tint);color:#000}
.channel.is-on{border-color:var(--tint);box-shadow:0 0 30px rgba(204,255,0,.12)}
.ch-play:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.slide-head.split .mix-stop{align-self:end}
/* work band: categories on every phone, our own music highlighted, one continuous run */
.lp .lp-cat{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-top:-2px}
.lp.mine{border-color:rgba(204,255,0,.6)}
[data-sound-band]{gap:22px;padding-right:22px}

/* ROUND 19 (2026-09-19) — premium hero type, phone polish, calmer WhatsApp button */
/* same display face as every other heading on the site */
.hero-inner>.hero-pos{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.95;font-size:clamp(34px,4vw,60px);max-width:none;margin-bottom:18px}
.hero-inner>.hero-pos .lime{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;font-size:1em;line-height:inherit}
/* WhatsApp float hides over the hero, lime CTA bands, the brief form and the footer (site.js toggles .wa-hide) */
.wa-float{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s,box-shadow .2s}
.wa-float.wa-hide{opacity:0;transform:translateY(24px) scale(.9);pointer-events:none}
@media(max-width:600px){
  .wa-float{height:50px;width:50px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .wa-float svg{width:26px;height:26px}
  body:has(.wy-sound-pill) .wa-float{bottom:calc(72px + env(safe-area-inset-bottom))}
  /* the intro illustrations collide with the full width headline on a phone */
  .page-intro .intro-art{display:none}
  /* release cards: cover on top, numbers in a two column grid below */
  .proof .release,.release{grid-template-columns:1fr;gap:16px}
  .proof .release img,.release img{width:100%;height:auto}
  .proof .release .metrics,.release .metrics{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .release .metrics li{flex-direction:column;align-items:flex-start;gap:4px}
  .release .metrics b{min-width:0;font-size:28px}
  .release .metrics li:last-child:nth-child(odd){grid-column:1/-1}
  /* the WhatsApp float also clears the lime page headers and the Why page hero */
  /* comfortable tap targets */
  .foot a{padding:6px 0;display:block}
  .brief-points a{display:inline-block;padding:10px 0}
}
/* the hidden attribute must win over component display rules (.btn, .bf-step, .bf-done) */
[hidden]{display:none!important}

/* ROUND 20-22 — centred hero: waveform video behind, copy + buttons + link row centred (no photo, her call 2026-09-21) */
.hero-stage{display:flex;flex-direction:column;justify-content:center;min-height:min(calc(100svh - 66px),820px);padding:clamp(56px,8vh,110px) 0;text-align:center}
.hero-stage::before{background:radial-gradient(ellipse 75% 60% at 50% 55%,transparent 25%,rgba(5,5,5,.5) 65%,#050505 95%),linear-gradient(180deg,rgba(5,5,5,.86) 0,rgba(5,5,5,.35) 34%,rgba(5,5,5,.2) 60%,#050505 97%)}
.hero-stage .hero-inner{max-width:920px;margin-inline:auto;z-index:4}
.hero-stage .hero-pos{margin-inline:auto}
.hero-stage .hero-wordmark{display:block;margin-inline:auto}
.hero-stage .hero-tag{margin:10px 0 0}
.hero-stage .hero-cta{justify-content:center;margin-top:20px}
.hero-stage .hero-pills{position:relative;z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px auto 0;max-width:var(--wrap,1180px);padding:0 var(--pad,24px)}
.hero-stage .hero-inner,.hero-stage .hero-pills{z-index:5}
.hero-scroll{z-index:5}
@media(max-width:600px){
  .hero-stage{padding-top:30px}
}

/* Team login link to the LOOOP Engine (2026-09-28) */
.foot-bottom .team-login{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot-bottom .team-login:hover{color:var(--lime);border-color:var(--lime)}