/* Home tools block: six module cards above the player. Each card has its own accent and live miniature. */
.home-tools{position:relative;padding:clamp(28px,4vw,52px) 0 clamp(18px,3vw,34px)}
.home-tools-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(18px,2.4vw,28px)}
.home-tools-head h2{margin:6px 0 0;font-size:clamp(30px,4.2vw,52px);line-height:1.02;letter-spacing:-.02em;color:#f4f4f6;font-weight:600}
.home-tools-head h2 span{color:#a9a8b2;font-weight:400}
.home-tools-lead{max-width:440px;margin:0;color:#b9b8c1;font-size:15.5px;line-height:1.55}
.home-tools-lead b{color:#ececef;font-weight:500}
.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.tool-card{--ac:120 220 210;--ac2:180 160 255;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;padding:12px 12px 16px;color:#ececef;text-decoration:none;background:linear-gradient(160deg,rgba(40,38,50,.72),rgba(18,17,24,.82));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .45s;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tool-card::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(closest-side,rgb(var(--ac)/.28),transparent);z-index:-1;opacity:.55;animation:tool-breathe var(--breath,6s) ease-in-out infinite;pointer-events:none}
.tool-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:2}
.tool-card:hover,.tool-card:focus-visible{transform:translateY(-6px);border-color:rgb(var(--ac)/.55);box-shadow:0 26px 60px -24px rgb(var(--ac)/.55),0 0 0 1px rgb(var(--ac)/.2),inset 0 1px 0 rgba(255,255,255,.1)}
.tool-card:hover::after,.tool-card:focus-visible::after{transform:translateX(120%)}
.tool-card:focus-visible{outline:2px solid rgb(var(--ac));outline-offset:3px}
.tool-art{position:relative;flex:none;width:100%;aspect-ratio:16/9;border-radius:15px;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,rgb(var(--ac)/.16),transparent 60%),radial-gradient(90% 90% at 100% 100%,rgb(var(--ac2)/.14),transparent 60%),#0c0b11;border:1px solid rgba(255,255,255,.06)}
.tool-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tool-card:hover .tool-art{border-color:rgb(var(--ac)/.35)}
.tool-copy{padding:14px 6px 0;flex:1}
.tool-kicker{margin:0;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--ac))}
.tool-copy h3{margin:6px 0 6px;font-size:21px;line-height:1.15;font-weight:600;color:#f6f6f8}
.tool-copy p:last-child{margin:0;color:#aeadb7;font-size:14px;line-height:1.5}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 6px 0;font-size:13.5px}
.tool-price{color:#cfced6}
.tool-tag{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#d4d3da;font-size:12px}
.tool-go{display:inline-flex;align-items:center;gap:7px;color:#f2f2f4;font-weight:500;white-space:nowrap}
.tool-go i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;background:rgb(var(--ac)/.16);border:1px solid rgb(var(--ac)/.4);color:rgb(var(--ac));transition:transform .35s,background .35s}
.tool-card:hover .tool-go i{transform:translateX(4px);background:rgb(var(--ac)/.3)}
/* Accents */
.tool-lyrics{--ac:95 224 208;--ac2:110 160 255;--breath:5.5s}
.tool-video{--ac:178 150 255;--ac2:255 120 190;--breath:7s}
.tool-snippet{--ac:255 170 85;--ac2:255 110 120;--breath:4.8s}
.tool-portfolio{--ac:110 170 255;--ac2:120 230 255;--breath:6.5s}
.tool-cover{--ac:255 120 180;--ac2:255 205 100;--breath:5.2s}
.tool-daw{--ac:150 240 110;--ac2:90 220 200;--breath:6.2s}
/* Shared SVG pieces */
.ta-dim{fill:rgba(255,255,255,.1)}.ta-dim2{fill:rgba(255,255,255,.06)}.ta-line{stroke:rgba(255,255,255,.14);fill:none}
.ta-ac{fill:rgb(var(--ac))}.ta-ac2{fill:rgb(var(--ac2))}.ta-st{stroke:rgb(var(--ac));fill:none}
.ta-mono{font:500 9px ui-monospace,Consolas,monospace;fill:rgb(var(--ac)/.85)}
/* 1. Lyrics: words light up in time, playhead runs over the wave */
.tl-w{fill:rgba(255,255,255,.13);animation:tl-word 6s linear infinite}
.tl-w:nth-of-type(1){animation-delay:0s}.tl-w:nth-of-type(2){animation-delay:.35s}.tl-w:nth-of-type(3){animation-delay:.7s}.tl-w:nth-of-type(4){animation-delay:1.05s}.tl-w:nth-of-type(5){animation-delay:1.4s}.tl-w:nth-of-type(6){animation-delay:1.75s}.tl-w:nth-of-type(7){animation-delay:2.1s}.tl-w:nth-of-type(8){animation-delay:2.45s}.tl-w:nth-of-type(9){animation-delay:2.8s}.tl-w:nth-of-type(10){animation-delay:3.15s}.tl-w:nth-of-type(11){animation-delay:3.5s}.tl-w:nth-of-type(12){animation-delay:3.85s}
@keyframes tl-word{0%{fill:rgba(255,255,255,.13)}4%,70%{fill:rgb(var(--ac));filter:drop-shadow(0 0 4px rgb(var(--ac)/.8))}80%,100%{fill:rgba(255,255,255,.13)}}
.tl-bar{fill:rgb(var(--ac2)/.45)}
.tl-head{animation:tl-head 6s linear infinite}
@keyframes tl-head{from{transform:translateX(0)}to{transform:translateX(264px)}}
.tl-stamp{animation:tl-stamp 6s steps(1) infinite;opacity:.4}
.tl-stamp:nth-of-type(2){animation-delay:2s}.tl-stamp:nth-of-type(3){animation-delay:4s}
@keyframes tl-stamp{0%{opacity:1}33%,100%{opacity:.4}}
/* 2. Lyric video: flowing colour field, rising lines, vertical frame */
.tv-blob{animation:tv-flow 9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.tv-blob.b2{animation-duration:11s;animation-direction:alternate-reverse}
@keyframes tv-flow{0%{transform:translate(-18px,-6px) scale(1)}100%{transform:translate(26px,10px) scale(1.25)}}
.tv-row{fill:#fff;animation:tv-rise 4.5s cubic-bezier(.2,.8,.2,1) infinite;transform-box:fill-box}
.tv-row.r2{animation-delay:1.5s}.tv-row.r3{animation-delay:3s}
@keyframes tv-rise{0%{opacity:0;transform:translateY(14px)}15%,55%{opacity:.95;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(-12px)}}
.tv-phone{stroke:rgba(255,255,255,.55);fill:rgba(10,9,14,.55)}
.tv-pulse{animation:tool-breathe 3s ease-in-out infinite}
/* 3. Snippet: selected segment, playhead inside, the line zone pulses */
.ts-seg{fill:rgb(var(--ac)/.18);stroke:rgb(var(--ac)/.7)}
.ts-handle{fill:rgb(var(--ac))}
.ts-bar{fill:rgba(255,255,255,.18)}.ts-bar.in{fill:rgb(var(--ac)/.85)}
.ts-head{animation:ts-head 3.2s linear infinite}
@keyframes ts-head{from{transform:translateX(0)}to{transform:translateX(86px)}}
.ts-zone{fill:rgb(var(--ac)/.12);stroke:rgb(var(--ac));stroke-dasharray:4 3;animation:ts-zone 2.4s ease-in-out infinite}
@keyframes ts-zone{0%,100%{stroke-opacity:.5}50%{stroke-opacity:1;fill:rgb(var(--ac)/.24)}}
.ts-text{fill:#fff;animation:ts-text 3.2s ease-in-out infinite}
@keyframes ts-text{0%,10%{opacity:0}25%,85%{opacity:1}100%{opacity:0}}
/* 4. Portfolio: avatar ring, tracks play one after another, links float */
.tp-ring{stroke:rgb(var(--ac));fill:none;animation:tp-ring 3s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tp-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.tp-fill{fill:rgb(var(--ac));transform-box:fill-box;transform-origin:left;animation:tp-fill 6s linear infinite;transform:scaleX(0)}
.tp-fill.f2{animation-delay:2s}.tp-fill.f3{animation-delay:4s}
@keyframes tp-fill{0%{transform:scaleX(0)}30%{transform:scaleX(1)}33%,100%{transform:scaleX(1);opacity:0}}
.tp-chip{animation:tp-float 4s ease-in-out infinite;transform-box:fill-box}
.tp-chip.c2{animation-delay:.6s}.tp-chip.c3{animation-delay:1.2s}.tp-chip.c4{animation-delay:1.8s}
@keyframes tp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* 5. Covers: fanned tiles, the front one shifts colour, sparkles */
.tc-back{transform-box:fill-box;transform-origin:center bottom;animation:tc-fan 5s ease-in-out infinite alternate}
.tc-back.k2{animation-direction:alternate-reverse}
@keyframes tc-fan{0%{transform:rotate(var(--r0))}100%{transform:rotate(var(--r1))}}
.tc-back.k1{--r0:-14deg;--r1:-8deg}.tc-back.k2{--r0:14deg;--r1:8deg}
.tc-front{animation:tc-hue 8s linear infinite}
@keyframes tc-hue{to{filter:hue-rotate(360deg)}}
.tc-spark{fill:#fff;transform-box:fill-box;transform-origin:center;animation:tc-spark 2.6s ease-in-out infinite}
.tc-spark.s2{animation-delay:.7s}.tc-spark.s3{animation-delay:1.3s}.tc-spark.s4{animation-delay:1.9s}.tc-spark.s5{animation-delay:.35s}
@keyframes tc-spark{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
.tc-check{animation:tc-check 5s ease-in-out infinite}
@keyframes tc-check{0%,40%{opacity:0;transform:translateY(4px)}55%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
/* 6. DAW: clips snap into place, playhead sweeps, meters bounce */
.td-clip{transform-box:fill-box;animation:td-snap 7s cubic-bezier(.3,1.4,.5,1) infinite}
.td-clip.c1{--x:-30px}.td-clip.c2{--x:42px}.td-clip.c3{--x:-54px}.td-clip.c4{--x:24px}
.td-clip.c2{animation-delay:.25s}.td-clip.c3{animation-delay:.5s}.td-clip.c4{animation-delay:.75s}
@keyframes td-snap{0%,8%{transform:translateX(var(--x))}22%,88%{transform:translateX(0)}100%{transform:translateX(var(--x))}}
.td-head{animation:td-head 7s linear infinite}
@keyframes td-head{0%,25%{transform:translateX(0)}88%{transform:translateX(196px)}100%{transform:translateX(196px);opacity:0}}
.td-meter{fill:rgb(var(--ac));transform-box:fill-box;transform-origin:bottom;animation:td-meter .9s ease-in-out infinite alternate}
.td-meter.m2{animation-duration:.7s;animation-delay:.2s}.td-meter.m3{animation-duration:1.1s;animation-delay:.1s}.td-meter.m4{animation-duration:.8s;animation-delay:.35s}
@keyframes td-meter{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes tool-breathe{0%,100%{opacity:.35}50%{opacity:.8}}
/* Base services strip */
.tools-more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(14px,2vw,22px);padding:14px 16px;border-radius:18px;background:rgba(22,21,28,.6);border:1px solid rgba(255,255,255,.07)}
.tools-more>span{color:#a9a8b2;font-size:14px;margin-right:4px}
.tools-more a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.13);color:#e4e4e8;text-decoration:none;font-size:14px;transition:border-color .25s,background .25s,transform .25s}
.tools-more a:hover,.tools-more a:focus-visible{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);transform:translateY(-1px)}
.tools-more a.is-main{background:#c2185b;border-color:#c2185b;color:#fff;font-weight:500}
.tools-more a.is-main:hover,.tools-more a.is-main:focus-visible{background:#d81b60;border-color:#d81b60}
.tools-more a.is-all{margin-left:auto;border-color:transparent;color:#cfced6}
/* Animations run only on screen, never with reduced motion */
.home-tools:not(.is-live) .tool-card *,.home-tools:not(.is-live) .tool-card::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.home-tools .tool-card *,.home-tools .tool-card::before{animation:none!important}.tool-card,.tool-card::after{transition:none}.tp-fill{transform:scaleX(.6)}.tv-row,.ts-text,.tc-check{opacity:1}}
@media (max-width:1100px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-tools-head{flex-direction:column;align-items:flex-start;gap:10px}}
@media (max-width:640px){.tools-grid{grid-template-columns:1fr}.tool-copy h3{font-size:19px}.tools-more a.is-all{margin-left:0}.tool-card{border-radius:18px}}