/** Shopify CDN: Minification failed

Line 4982:140 Unexpected "\\n"
Line 4982:293 Unexpected "\\n"
Line 4982:336 Expected ":"
Line 4982:408 Expected ":"
Line 4982:508 Expected ":"
Line 4982:891 Expected ":"
Line 4982:976 Expected ":"
Line 4982:1148 Expected ":"
Line 4982:1239 Expected ":"
Line 4982:1317 Expected ":"
... and 17 more hidden warnings

**/

:root{
  --ink:#0F0F0F; --surface:#171717; --surface-2:#1E1E1E;
  --acc:#FF2E9E; --acc-lt:#FF5CB8; --acc-soft:#FF8FCF; --badge:#FFD24A; --bone:#F4F1EC; --mute:#9A9590; --rule:#2A2A2A;
  /* alias pentru etichete/note "stinse" (ore, legende tabel) - fara asta
     var(--dim) era nedefinita si cadea pe culoarea mostenita, orice ar fi
     fost ea. Se recalculeaza mereu dupa --mute activ pe elementul curent,
     deci urmeaza automat tema deschisa/inchisa si .tpl-presets. */
  --dim:var(--mute);
  --ui:Outfit,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:Outfit,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --brand:Anton,"Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--bone);font-family:var(--ui);
  font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.wrap{max-width:1420px;margin:0 auto;padding-inline:24px}
.narrow{max-width:820px;margin:0 auto;padding-inline:24px}
.btn{display:inline-block;padding:15px 30px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--ui);font-weight:600;font-size:14.5px;background:var(--acc);color:#FFFFFF;
  transition:background .2s}
.btn:hover{background:#9C86FF}
a:focus-visible,button:focus-visible,input:focus-visible{outline:1px solid var(--acc);outline-offset:3px}

.nav{position:sticky;top:0;z-index:30;background:rgba(5,4,5,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.nav .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-block:18px}
.nav .row>.mark{justify-self:start}
.nav .row>.tools{justify-self:end}
.nav .mark{font-size:26px;font-weight:700;color:var(--bone);line-height:1;cursor:pointer}
.nav .cart{position:relative;display:inline-flex;align-items:center;color:var(--mute);margin-left:4px}
.nav .cart:hover{color:var(--bone)}
.nav .cartnum{position:absolute;right:-7px;bottom:-4px;font-size:9.5px;font-weight:700;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule);color:var(--bone);
  border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.nav .links{display:flex;align-items:center;justify-content:center;gap:38px;
  font-family:var(--ui);font-size:16px;font-weight:500;letter-spacing:-.005em;color:#9C96AC}
.nav .tools{display:flex;align-items:center;gap:16px}
.nav .acct{color:#9C96AC;display:flex;transition:color .18s}
.nav .acct:hover{color:var(--bone)}
@media(max-width:820px){.nav .row{grid-template-columns:auto 1fr auto}.nav .links{gap:22px;font-size:14px}}
@media(max-width:560px){.nav .links{display:none}}
.nav .links a{cursor:pointer;transition:color .18s,background .18s;
  padding:7px 14px;border-radius:999px;line-height:1.2}
.nav .links a.on{color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent)}
.nav .links{gap:8px}
.nav .links a:hover{color:var(--bone)}


/* ---------- hero animat ---------- */
.hero-live .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
.hero-live .heroscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,10,.55) 0%,rgba(5,5,10,.30) 38%,rgba(5,5,10,.86) 100%)}
.hero-live.hasvid .halo{opacity:.35}
.hero-live.hasvid .hmark,.hero-live.hasvid .hbot{z-index:2}

.hero-live{position:relative;width:100%;min-height:clamp(560px,80vh,840px);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;gap:clamp(20px,3.4vw,52px);
  padding-block:clamp(40px,6vh,90px);
  padding-inline:max(24px,calc((100% - 1420px) / 2));
  background:#05050A;isolation:isolate}
.hero-live .hcopy{position:relative;z-index:2;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero-live .hcopy .ln{margin:0}
.hero-live .halo{position:absolute;left:50%;top:58%;width:120%;aspect-ratio:2/1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.085),rgba(129,100,252,.035) 45%,transparent 72%)}
.hero-live .hmark{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:2px}
.hero-live .sig{font-family:var(--brand);font-size:clamp(20px,2.4vw,30px);
  line-height:1;color:var(--bone);opacity:0}
.hero-live .wm{font-family:var(--brand);font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.42em;color:var(--acc);opacity:0;padding-left:.42em}
.hero-live .hbot{position:relative;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(18px,3vw,40px)}
.hero-live .hleft{min-width:0}
.hero-live .ln{font-family:var(--disp);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(46px,7.1vw,116px);line-height:.88;color:#FFF8EC;margin:0;
  opacity:0;text-wrap:balance;max-width:9ch}
.hero-live .ln em{font-style:normal;display:block;color:var(--acc-lt)}
.hero-live .ln,.hero-live .ln em{text-shadow:none !important}
.hero-live .hlede{margin:0;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:var(--mute);
  max-width:46ch;opacity:0}
.hero-live .hbtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;opacity:0}
.hero-live .hcta2{border-radius:999px;padding:14px 24px;font-size:15px;font-weight:600;
  font-family:var(--ui);color:var(--bone);background:transparent;border:1px solid var(--rule);
  text-decoration:none;transition:.2s}
.hero-live .hcta2:hover{border-color:var(--bone)}
@media (max-width:860px){
  .hero-live{grid-template-columns:1fr;min-height:0;padding:26px 20px 24px;gap:22px}
  .hero-live .hcopy{order:1}
  .hero-live .hstage{order:2}
  .hero-live .ln{font-size:clamp(30px,8.4vw,46px);max-width:none}
}
.banner{padding:0;max-width:none;margin:0}
.banner .frame{border-radius:0;overflow:hidden;box-shadow:none;border-bottom:1px solid var(--rule)}
.banner img{width:100%;height:auto}

.dawbar{margin-top:30px;position:relative;overflow:hidden;
  background:var(--surface);border-block:1px solid var(--rule);
  padding:14px 0 16px}
.dawbar .db-lbl{padding:0 max(24px,calc((100% - 1420px) / 2)) 12px;display:flex;align-items:baseline;gap:12px;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.dawbar .db-lbl b{color:var(--bone);font-weight:700}
.dawbar .db-lbl span{color:var(--mute);font-weight:500}
.dawbar .db-lane{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.dawbar .db-run{display:flex;width:max-content;will-change:transform}
.dawbar .db-half{display:flex;align-items:center;gap:clamp(30px,4.4vw,64px);
  padding-right:clamp(30px,4.4vw,64px)}
.dawbar .db-lg{flex:0 0 auto;display:grid;place-items:center;
  width:clamp(40px,4.6vw,56px);height:clamp(40px,4.6vw,56px)}
.dawbar .db-lg img{width:100%;height:100%;object-fit:contain}
.dawbar .db-lg.off img{filter:grayscale(1) brightness(.42);opacity:.45}
:root[data-theme="light"] .dawbar{background:#EFEBE4;border-color:#DFDAD2}
:root[data-theme="light"] .dawbar .db-lg.off img{filter:grayscale(1) brightness(1.08);opacity:.35}

.card{position:relative;overflow:hidden;border-radius:var(--r);padding:1px;background:var(--rule)}
.card.buy{cursor:pointer}
.card.buy::before{content:"";position:absolute;inset:0;margin:auto;width:320%;aspect-ratio:1;
  will-change:transform;
  background:conic-gradient(from 0deg,transparent 0 54%,var(--acc) 72%,#CFC2FF 79%,transparent 88% 100%);
  opacity:0;transition:opacity .3s ease;transform:rotate(var(--a,0deg))}
.card.buy:hover::before,.card.buy:focus-visible::before{opacity:1}
.card .inner{position:relative;z-index:1;background:var(--surface);border-radius:13px;
  overflow:hidden;height:100%;display:flex;flex-direction:column;transition:background .25s}
.card.buy:hover .inner{background:var(--surface-2)}
.card .art{position:relative;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(ellipse 62% 56% at 50% 48%,rgba(255,255,255,.055),transparent 68%),#0B0A10}
.card .art img{width:100%;height:100%;object-fit:contain;padding:20% 24%;
  transition:transform .55s cubic-bezier(.19,1,.22,1)}
.card.buy:hover .art img{transform:scale(1.04)}
.pin{position:absolute;top:15px;font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;padding:7px 13px;border-radius:9px;z-index:2}
.pin.l{left:15px;color:#B9B3C7;background:rgba(28,26,40,.92);backdrop-filter:blur(6px)}
.pin.r{right:15px;color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);background:rgba(255,255,255,.07)}
.card .meta{padding:20px 20px 22px;display:flex;flex-direction:column;gap:4px}
.card .count{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7C7590}
.card .name{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.01em;text-transform:uppercase}
.card .sub{font-size:13px;color:var(--mute)}
.card .prices{margin-top:12px;display:flex;align-items:baseline;gap:11px}
.card .now{font-size:17px;font-weight:700;color:var(--acc)}
.card .was{font-size:13.5px;color:#6A6478;text-decoration:line-through}
.card.locked{opacity:.62}
.card.locked .art{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#09080E 0 11px,#0C0B12 11px 22px)}
.card.locked .lock{font-size:34px;color:#272134}
.card.locked .name{color:#98929F}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:36px;
  border-top:1px solid var(--rule)}
.trust .t{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.trust .d{font-size:12.5px;color:var(--mute);margin-top:4px}

.foot{border-top:1px solid var(--rule);padding-block:56px 42px;text-align:center}
.foot .big{font-family:var(--brand);font-weight:700;font-size:clamp(46px,12vw,124px);
  line-height:1;color:var(--bone);opacity:.92;letter-spacing:-.02em}
.foot .fine{color:var(--mute);font-size:12.5px;margin-top:12px}

.promo{position:fixed;left:22px;bottom:22px;z-index:40;max-width:340px}
.promo .pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;padding:11px 18px;cursor:pointer;
  font-size:12.5px;font-weight:500}
.promo .pill b{color:var(--acc);font-weight:700}
.promo .card2{position:relative;background:var(--surface-2);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--rule),0 22px 56px rgba(0,0,0,.65);padding:20px;display:none}
.promo.open .card2{display:block}
.promo.open .pill{display:none}
.promo .x{position:absolute;right:11px;top:9px;color:var(--mute);cursor:pointer;font-size:17px;padding:4px}
.promo .head{display:flex;gap:13px;align-items:center;margin-bottom:11px}
.promo .head img{width:54px;height:54px;object-fit:cover;border-radius:8px;flex:none}
.promo .title{font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.25}
.promo .body{font-size:12.5px;color:var(--mute);margin-bottom:13px}
.promo .code{color:var(--acc);font-weight:700;letter-spacing:.08em}
.promo form{display:flex;gap:8px}
.promo input{flex:1;min-width:0;padding:12px 14px;background:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule);border:0;border-radius:999px;color:var(--bone);
  font-family:var(--ui);font-size:13.5px}
.promo input::placeholder{color:#595369}
.promo button{padding:12px 18px;font-size:13.5px}
.promo .ok{color:var(--acc);font-size:13.5px}

.back{display:inline-block;font-size:13px;font-weight:500;color:var(--mute);padding-block:24px;cursor:pointer}
.back:hover{color:var(--bone)}
.phead{display:grid;grid-template-columns:minmax(0,350px) 1fr;gap:50px;align-items:start;padding-bottom:58px}
.phead img{border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule)}
.phead h1{font-weight:700;letter-spacing:-.03em;font-size:clamp(34px,5.2vw,50px);line-height:1.02;margin-bottom:16px}
.phead .lede{color:var(--mute);font-size:16px;max-width:52ch}
.pprice{display:flex;align-items:baseline;gap:13px;margin:24px 0 10px}
.pprice .now{font-weight:700;font-size:42px;color:var(--acc);line-height:1;letter-spacing:-.02em}
.pprice .was{color:var(--mute);text-decoration:line-through;font-size:15px}
.pprice .off{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--acc);
  box-shadow:inset 0 0 0 1px var(--acc);border-radius:999px;padding:5px 11px}
.note{color:var(--mute);font-size:13.5px}
.chapters{list-style:none;padding:0;margin:22px 0 0;columns:2;column-gap:28px;font-size:14.5px;color:var(--mute)}
.chapters li{padding-block:5px;break-inside:avoid}
.chapters b{color:var(--bone);font-weight:600}

.punchband{background:var(--surface);border-block:1px solid var(--rule)}
.punch{font-weight:700;letter-spacing:-.025em;font-size:clamp(24px,4.2vw,38px);
  line-height:1.16;padding-block:60px;max-width:22ch}
.punch span{color:var(--acc)}

.law{display:grid;grid-template-columns:74px 1fr;gap:20px;padding-block:28px;border-bottom:1px solid var(--rule)}
.law:first-of-type{border-top:1px solid var(--rule)}
.law .num{font-weight:700;font-size:16px;letter-spacing:.04em;color:var(--acc);padding-top:4px}
.law h3{font-weight:600;font-size:16.5px;margin-bottom:6px}
.law p{color:var(--mute);font-size:15px}
.insert{margin-top:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);
  border-radius:10px;padding:16px 18px 12px}
.insert svg{width:100%;height:auto;display:block}
.insert figcaption{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#6A6478;margin-top:11px}

details{border-bottom:1px solid var(--rule)}
details:first-of-type{border-top:1px solid var(--rule)}
summary{cursor:pointer;padding-block:18px;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc);font-size:17px}
details[open] summary::after{content:"\2013"}
details p{color:var(--mute);font-size:14.5px;padding-bottom:20px;max-width:58ch}


/* ---------- bara de anunt ---------- */
.announce{background:var(--surface-2);border-bottom:1px solid var(--rule)}
.announce .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:11px;
  font-size:12.5px;color:var(--mute)}
.announce b{color:var(--bone);font-weight:600}
.announce .code{margin-left:auto;display:flex;gap:8px;align-items:center}
.announce .codebtn{font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--acc);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--acc);
  border-radius:999px;padding:7px 15px;cursor:pointer;transition:.18s}
.announce .codebtn:hover{background:rgba(129,100,252,.1)}
.announce .copied{color:var(--acc);font-size:11.5px;font-weight:600}

/* ---------- produs: layout ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;
  align-items:start;padding-bottom:20px}
.gallery .stage{border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);background:#08070D}
.gallery .stage img{width:100%;aspect-ratio:1/1;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.th{padding:0;border:0;background:transparent;border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .2s;line-height:0}
.th img{width:100%;aspect-ratio:1/1;object-fit:cover}
.th.on,.th:hover{box-shadow:inset 0 0 0 1px var(--acc)}

.eyebrow{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.pinfo h1{font-size:clamp(32px,4.4vw,46px);font-weight:700;letter-spacing:-.035em;
  line-height:1.02;margin-bottom:16px}
.pdesc{color:var(--mute);font-size:15.5px;max-width:48ch}
.pdesc b{color:var(--bone);font-weight:600}
.preq{color:var(--mute);font-size:13.5px;margin-top:14px}
.preq b{color:var(--bone);font-weight:600}
.prow{display:flex;align-items:baseline;gap:12px;margin:22px 0 22px}
.pnow{font-size:30px;font-weight:700;letter-spacing:-.025em}
.pwas{color:#6A6478;text-decoration:line-through;font-size:15px}
.poff{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--acc);
  box-shadow:inset 0 0 0 1px var(--acc);border-radius:999px;padding:5px 11px}
.optline{display:flex;gap:8px;font-size:12px;margin-top:16px}
.optlabel{font-weight:600;letter-spacing:.14em;color:var(--mute)}
.optval{color:var(--bone)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.opt{font-size:12.5px;padding:8px 15px;border-radius:999px;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--rule);cursor:default}
.opt.on{color:var(--bone);box-shadow:inset 0 0 0 1px #474160;background:var(--surface-2)}
.opt.dim{opacity:.5}
.cta{width:100%;margin-top:26px;padding:17px 24px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--ui);font-weight:600;font-size:15.5px;background:var(--acc);color:#FFFFFF;
  transition:transform .12s,background .2s}
.cta:hover{background:#9C86FF}
.cta:active{transform:scale(.985)}
.ctanote{font-size:12.5px;color:var(--mute);margin-top:11px;text-align:center}
.ctanote b{color:var(--acc);font-weight:700;letter-spacing:.06em}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;
  border-top:1px solid var(--rule);padding-top:20px}
.badges .bt{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em}
.badges .bd{display:block;font-size:12px;color:var(--mute);margin-top:3px}

/* ---------- blocuri ---------- */
.block{padding-block:62px}
.block h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.blede{color:var(--mute);font-size:15px;margin-top:12px;max-width:52ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev>div:first-child{order:-1}
.stats{display:flex;flex-wrap:wrap;gap:52px;margin-top:30px}
.stats .sv{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em}
.stats .sl{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip2{font-size:11px;font-weight:600;letter-spacing:.12em;padding:8px 14px;border-radius:999px;
  color:var(--mute);box-shadow:inset 0 0 0 1px var(--rule)}


/* ---------- help center ---------- */
.help{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px}
.help .fab{width:52px;height:52px;border-radius:999px;border:0;cursor:pointer;
  background:var(--acc);color:#FFFFFF;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.55);transition:transform .14s ease,background .2s}
.help .fab:hover{background:#9C86FF}
.help .fab:active{transform:scale(.94)}
.help .panel{width:338px;max-width:calc(100vw - 44px);background:var(--surface-2);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule),0 26px 60px rgba(0,0,0,.7);
  overflow:hidden;display:none}
.help.open .panel{display:block}
.help .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-bottom:1px solid var(--rule)}
.help .hd .t{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.help .hd .s{font-size:11px;color:var(--mute);margin-top:1px}
.help .hd .x{color:var(--mute);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.help .hd .x:hover{color:var(--bone)}
.help .thread{max-height:300px;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:12px}
.help .msg{font-size:13.2px;line-height:1.6;max-width:92%}
.help .msg.a{color:var(--mute)}
.help .msg.a b{color:var(--bone);font-weight:600}
.help .msg.q{align-self:flex-end;background:var(--acc);color:#FFFFFF;font-weight:600;
  padding:8px 13px;border-radius:14px 14px 3px 14px}
.help .asks{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 16px}
.help .ask{font-size:11.8px;padding:7px 12px;border-radius:999px;cursor:pointer;color:var(--bone);
  box-shadow:inset 0 0 0 1px var(--rule);transition:.16s}
.help .ask:hover{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)}
.help .ask.used{opacity:.35;pointer-events:none}
@media (max-width:560px){ .help{right:12px;bottom:12px} }

/* ---------- easter eggs ---------- */
.eggs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.egg{position:relative;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule);
  background:var(--surface);min-height:230px;cursor:pointer;overflow:hidden;transition:box-shadow .25s}
.egg:hover{box-shadow:inset 0 0 0 1px #474160}
.egg .front,.egg .backside{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;
  transition:opacity .32s ease,transform .32s ease}
.egg .front{align-items:center;justify-content:center;gap:12px;
  background:repeating-linear-gradient(135deg,#09080E 0 11px,#0C0B12 11px 22px)}
.egg .front .lock{font-size:26px;filter:grayscale(1);opacity:.5}
.egg .en{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--acc)}
.egg .hint{font-size:10px;font-weight:600;letter-spacing:.18em;color:#5B5570}
.egg .backside{opacity:0;transform:translateY(10px);pointer-events:none;gap:8px}
.egg .backside h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.egg .backside p{font-size:13.5px;color:var(--mute);line-height:1.6}
.egg.open .front{opacity:0;transform:translateY(-10px)}
.egg.open .backside{opacity:1;transform:none;pointer-events:auto}

.grid.rel{grid-template-columns:repeat(2,1fr);max-width:560px;padding-block:26px 0}

/* apasare pe popup */
.promo .pill{transition:transform .14s ease,box-shadow .2s}
.promo .pill:active{transform:scale(.95)}
.promo .card2{animation:mxpop .36s cubic-bezier(.22,1,.26,1) both}
@keyframes mxpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .pgrid{grid-template-columns:1fr;gap:32px}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}
  .split.rev>div:first-child{order:0}
  .eggs{grid-template-columns:1fr}
  .egg{min-height:0}
  .egg .front,.egg .backside{position:relative;inset:auto}
  .egg .front{padding-block:34px}
  .egg.open .front{display:none}
  .egg .backside{opacity:1;transform:none;display:none}
  .egg.open .backside{display:flex}
  .grid.rel{grid-template-columns:1fr}
}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .trust{grid-template-columns:1fr}
  .phead{grid-template-columns:1fr;gap:28px}
  .phead img{max-width:300px}
}
@media (max-width:560px){
  .chapters{columns:1}
  .promo{left:12px;right:12px;bottom:12px;max-width:none}
  .law{grid-template-columns:56px 1fr;gap:15px}
}


/* ---------- pagini auxiliare ---------- */
.page-body{padding-block:56px 80px}
.page-body h1{font-size:clamp(28px,5vw,42px);font-weight:700;letter-spacing:-.03em;margin-bottom:22px}
.page-body h2{font-size:22px;font-weight:600;margin:28px 0 10px}
.page-body .rte{color:var(--mute);font-size:15.5px;line-height:1.75}
.page-body .rte a{color:var(--acc)}
.page-body .lede{color:var(--mute);font-size:16.5px;max-width:52ch}
.empty{padding:44px 0 10px;color:var(--mute);font-size:15.5px}
.rowlink{display:flex;justify-content:space-between;gap:18px;padding-block:15px;
  border-bottom:1px solid var(--rule);font-size:15.5px}
.rowlink:first-of-type{border-top:1px solid var(--rule)}
.rowlink .m{color:var(--mute)}
.field{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.field input{flex:1 1 220px;min-width:0;padding:15px 16px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--rule);border:0;border-radius:999px;color:var(--bone);
  font-family:var(--ui);font-size:15px}
.field input::placeholder{color:#595369}
table{width:100%;border-collapse:collapse;margin-top:18px}
td,th{padding:15px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400;font-size:15.5px}
th{font-weight:600}
.pd-media{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:44px;align-items:start}
@media (max-width:760px){ .pd-media{grid-template-columns:1fr;gap:26px} }

/* ---------- cart ---------- */
.cartpage h1{margin-bottom:26px}
.cartlist{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.citem{display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--rule)}
.ci-media{flex:0 0 96px;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center}
.ci-media img{width:100%;height:100%;object-fit:cover;display:block}
.ci-body{flex:1 1 auto;min-width:0}
.ci-title{display:block;color:var(--bone);font-weight:600;font-size:16px;text-decoration:none;line-height:1.3}
.ci-title:hover{color:var(--acc)}
.ci-var,.ci-meta{color:var(--mute);font-size:12.5px;margin-top:5px}
.ci-tools{display:flex;align-items:center;gap:18px;margin-top:13px;flex-wrap:wrap}
.ci-qty{display:inline-flex;align-items:center;gap:9px;color:var(--mute);font-size:12px;
  text-transform:uppercase;letter-spacing:.09em}
.ci-qty input{width:62px;padding:8px 10px;border-radius:9px;border:1px solid var(--rule);
  background:var(--surface-2);color:var(--bone);font:inherit;font-size:14px;text-align:center}
.ci-qty input:focus{outline:0;border-color:var(--acc)}
.ci-rm{color:var(--mute);font-size:12.5px;text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;transition:color .15s,border-color .15s}
.ci-rm:hover{color:var(--acc);border-color:var(--acc)}
.ci-price{flex:0 0 auto;text-align:right;white-space:nowrap;padding-left:8px}
.ci-price s{display:block;color:var(--mute);font-size:13px;margin-bottom:3px}
.ci-price strong{color:var(--bone);font-size:17px;font-weight:600}
.cartfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  margin-top:28px;flex-wrap:wrap}
.cf-rows{min-width:240px}
.cf-row{display:flex;justify-content:space-between;gap:30px;color:var(--bone);
  font-size:15px;padding:6px 0}
.cf-disc span:last-child{color:var(--acc)}
.cf-row.cf-note{display:block;color:var(--mute);font-size:12.5px;line-height:1.55;
  padding-top:10px;max-width:330px}
.cf-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.cf-back{margin-top:30px}
.cf-back a{color:var(--mute);text-decoration:none;font-size:13.5px}
.cf-back a:hover{color:var(--acc)}
@media(max-width:640px){
  .citem{gap:14px}
  .ci-media{flex:0 0 72px;width:72px;height:72px}
  .cartfoot{flex-direction:column;align-items:stretch}
  .cf-act{flex-direction:column-reverse;align-items:stretch}
  .cf-act .btn{width:100%;text-align:center}
}

/* ---------- cart drawer ---------- */
.cd{position:fixed;inset:0;z-index:120;pointer-events:none;visibility:hidden}
.cd.open{pointer-events:auto;visibility:visible}
.cd-scrim{position:absolute;inset:0;background:rgba(3,2,3,.72);opacity:0;transition:opacity .28s ease}
.cd.open .cd-scrim{opacity:1}
.cd-panel{position:absolute;top:14px;right:14px;bottom:14px;width:min(430px,calc(100vw - 28px));
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:#0A0912;border:1px solid var(--rule);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  transform:translateX(calc(100% + 24px));transition:transform .34s cubic-bezier(.22,.8,.28,1)}
.cd.open .cd-panel{transform:translateX(0)}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 22px 16px;border-bottom:1px solid var(--rule)}
.cd-ttl{margin:0;font-size:21px;font-weight:700;color:var(--bone);display:flex;align-items:center;gap:10px}
.cd-count{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;
  padding:0 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--rule);
  color:var(--mute);font-size:12px;font-weight:600}
.cd-x{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:999px;border:1px solid var(--rule);background:var(--surface-2);color:var(--mute);
  cursor:pointer;transition:color .15s,border-color .15s}
.cd-x:hover{color:var(--acc);border-color:var(--acc)}
.cd-body{flex:1 1 auto;overflow-y:auto;padding:4px 22px}
.cd-items{list-style:none;margin:0;padding:0}
.cd-it{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--rule)}
.cd-im{flex:0 0 62px;width:62px;height:62px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.cd-im img{width:100%;height:100%;object-fit:cover;display:block}
.cd-in{flex:1 1 auto;min-width:0}
.cd-nm{color:var(--bone);font-weight:600;font-size:15px;line-height:1.25}
.cd-sb{color:var(--mute);font-size:12.5px;margin-top:3px}
.cd-ln{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.cd-q{display:inline-flex;align-items:center;gap:1px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.cd-q button{width:26px;height:26px;border:0;background:var(--surface-2);color:var(--mute);
  cursor:pointer;font-size:15px;line-height:1}
.cd-q button:hover{color:var(--acc)}
.cd-q span{min-width:26px;text-align:center;color:var(--bone);font-size:13px}
.cd-rm{background:none;border:0;padding:0;cursor:pointer;color:var(--mute);font:inherit;font-size:12.5px;
  transition:color .15s}
.cd-rm:hover{color:var(--acc)}
.cd-pr{flex:0 0 auto;text-align:right;white-space:nowrap}
.cd-pr s{display:block;color:var(--mute);font-size:12px;margin-bottom:2px}
.cd-pr b{color:var(--bone);font-size:15px;font-weight:600}
.cd-empty{color:var(--mute);font-size:14.5px;padding:44px 0;text-align:center}
.cd-foot{flex:0 0 auto;padding:18px 22px 22px;border-top:1px solid var(--rule);background:#08080F}
.cd-disc{display:flex;gap:9px}
.cd-disc input{flex:1 1 auto;min-width:0;padding:13px 15px;border-radius:11px;border:1px solid var(--rule);
  background:var(--surface-2);color:var(--bone);font:inherit;font-size:14px}
.cd-disc input::placeholder{color:var(--mute)}
.cd-disc input:focus{outline:0;border-color:var(--acc)}
.cd-disc button{flex:0 0 auto;padding:0 20px;border-radius:11px;border:1px solid var(--rule);
  background:var(--surface-2);color:var(--bone);font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  transition:color .15s,border-color .15s}
.cd-disc button:hover{color:var(--acc);border-color:var(--acc)}
.cd-msg{margin:9px 0 0;font-size:12.5px;color:var(--mute)}
.cd-msg.ok{color:var(--acc)}
.cd-tot{margin-top:15px;padding:15px 16px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--rule)}
.cd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  color:var(--mute);font-size:13.5px;padding:7px 0}
.cd-row+.cd-row{border-top:1px solid var(--rule)}
.cd-row .cd-sub{color:var(--bone)}
.cd-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  background:var(--ink);border:1px solid var(--rule);font-size:11px;font-style:normal;margin-left:7px}
.cd-grand{padding-top:11px}
.cd-grand>span:first-child{color:var(--bone);font-size:17px;font-weight:700}
.cd-grand i{color:var(--mute);font-size:11.5px;font-style:normal;margin-right:5px}
.cd-grand b{color:var(--bone);font-size:19px}
.cd-go{width:100%;margin-top:15px;text-align:center}
.cd-fine{margin:11px 0 0;color:var(--mute);font-size:11.5px;line-height:1.5;text-align:center}
@media(max-width:520px){
  .cd-panel{top:0;right:0;bottom:0;width:100vw;border-radius:0;border:0}
}

/* ---------- site behind the drawer ---------- */
#site{transition:filter .40s cubic-bezier(.22,.8,.28,1),transform .40s cubic-bezier(.22,.8,.28,1),opacity .40s ease;
  transform-origin:50% 42%;will-change:transform,filter}
body.cd-on #site{filter:blur(7px) saturate(.85) brightness(.72);transform:scale(.955);opacity:.9}
.cd-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:var(--acc);font-size:24px;font-weight:700;opacity:.55}

/* ---------- banda de promotie ---------- */
.offer{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:38px;padding:24px 28px;border-radius:20px;
  background:linear-gradient(180deg,#0E0D16,#0A0910);border:1px solid var(--rule)}
.offer .oamt{font-family:var(--disp);font-size:44px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--acc)}
.offer .otxt{flex:1 1 280px;min-width:0}
.offer .oh{font-size:19px;font-weight:700;color:var(--bone);line-height:1.3}
.offer .os{font-size:14px;color:var(--mute);margin-top:3px}
.offer .os b{color:#C8C3D4;font-weight:600}
.offer .ocopy{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-family:var(--ui);font-size:14px;font-weight:600;color:#14131E;
  background:#E9E7EF;border:0;border-radius:999px;padding:12px 20px;cursor:pointer;
  transition:background .18s,color .18s}
.offer .ocopy:hover{background:#FFFFFF}
.offer .ocopy.done{background:var(--acc);color:#FFFFFF}
.offer .ocode{display:flex;align-items:center;gap:16px;flex:0 0 auto;
  border-radius:14px;border:1px solid var(--rule);background:var(--surface-2);padding:12px 18px}
.offer .ocode b{font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--bone)}
.offer .ocode i{font-style:normal;font-size:13px;color:var(--mute);
  border-left:1px solid var(--rule);padding-left:16px}
@media(max-width:860px){
  .offer{gap:18px;padding:20px}
  .offer .oamt{font-size:36px}
  .offer .ocopy,.offer .ocode{flex:1 1 auto;justify-content:center}
}

/* ---------- produs: layout ---------- */
.pgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;
  align-items:start;padding-bottom:20px}
.gallery .stage{border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--rule);background:#08070D}
.gallery .stage img{width:100%;aspect-ratio:1/1;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.th{padding:0;border:0;background:transparent;border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .2s;line-height:0}
.th img{width:100%;aspect-ratio:1/1;object-fit:cover}
.th.on,.th:hover{box-shadow:inset 0 0 0 1px var(--acc)}

.eyebrow{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.pinfo h1{font-size:clamp(32px,4.4vw,46px);font-weight:700;letter-spacing:-.035em;
  line-height:1.02;margin-bottom:16px}
.pdesc{color:var(--mute);font-size:15.5px;max-width:48ch}
.pdesc b{color:var(--bone);font-weight:600}
.preq{color:var(--mute);font-size:13.5px;margin-top:14px}
.preq b{color:var(--bone);font-weight:600}
.prow{display:flex;align-items:baseline;gap:12px;margin:22px 0 22px}
.pnow{font-size:30px;font-weight:700;letter-spacing:-.025em}
.pwas{color:#6A6478;text-decoration:line-through;font-size:15px}
.poff{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--acc);
  box-shadow:inset 0 0 0 1px var(--acc);border-radius:999px;padding:5px 11px}
.optline{display:flex;gap:8px;font-size:12px;margin-top:16px}
.optlabel{font-weight:600;letter-spacing:.14em;color:var(--mute)}
.optval{color:var(--bone)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.opt{font-size:12.5px;padding:8px 15px;border-radius:999px;color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--rule);cursor:default}
.opt.on{color:var(--bone);box-shadow:inset 0 0 0 1px #474160;background:var(--surface-2)}
.opt.dim{opacity:.5}
.cta{width:100%;margin-top:26px;padding:17px 24px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--ui);font-weight:600;font-size:15.5px;background:var(--acc);color:#FFFFFF;
  transition:transform .12s,background .2s}
.cta:hover{background:#9C86FF}
.cta:active{transform:scale(.985)}
.ctanote{font-size:12.5px;color:var(--mute);margin-top:11px;text-align:center}
.ctanote b{color:var(--acc);font-weight:700;letter-spacing:.06em}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;
  border-top:1px solid var(--rule);padding-top:20px}
.badges .bt{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em}
.badges .bd{display:block;font-size:12px;color:var(--mute);margin-top:3px}

/* ---------- blocuri ---------- */
.block{padding-block:62px}
.block h2{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.blede{color:var(--mute);font-size:15px;margin-top:12px;max-width:52ch}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.rev>div:first-child{order:-1}
.stats{display:flex;flex-wrap:wrap;gap:52px;margin-top:30px}
.stats .sv{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em}
.stats .sl{display:block;font-size:12.5px;color:var(--mute);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip2{font-size:11px;font-weight:600;letter-spacing:.12em;padding:8px 14px;border-radius:999px;
  color:var(--mute);box-shadow:inset 0 0 0 1px var(--rule)}


/* ---------- help center ---------- */
.help{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px}
.help .fab{width:52px;height:52px;border-radius:999px;border:0;cursor:pointer;
  background:var(--acc);color:#FFFFFF;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.55);transition:transform .14s ease,background .2s}
.help .fab:hover{background:#9C86FF}
.help .fab:active{transform:scale(.94)}
.help .panel{width:338px;max-width:calc(100vw - 44px);background:var(--surface-2);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule),0 26px 60px rgba(0,0,0,.7);
  overflow:hidden;display:none}
.help.open .panel{display:block}
.help .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 16px;border-bottom:1px solid var(--rule)}
.help .hd .t{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.help .hd .s{font-size:11px;color:var(--mute);margin-top:1px}
.help .hd .x{color:var(--mute);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px}
.help .hd .x:hover{color:var(--bone)}
.help .thread{max-height:300px;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:12px}
.help .msg{font-size:13.2px;line-height:1.6;max-width:92%}
.help .msg.a{color:var(--mute)}
.help .msg.a b{color:var(--bone);font-weight:600}
.help .msg.q{align-self:flex-end;background:var(--acc);color:#FFFFFF;font-weight:600;
  padding:8px 13px;border-radius:14px 14px 3px 14px}
.help .asks{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 16px}
.help .ask{font-size:11.8px;padding:7px 12px;border-radius:999px;cursor:pointer;color:var(--bone);
  box-shadow:inset 0 0 0 1px var(--rule);transition:.16s}
.help .ask:hover{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)}
.help .ask.used{opacity:.35;pointer-events:none}
@media (max-width:560px){ .help{right:12px;bottom:12px} }

/* ---------- easter eggs ---------- */
.eggs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.egg{position:relative;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--rule);
  background:var(--surface);min-height:230px;cursor:pointer;overflow:hidden;transition:box-shadow .25s}
.egg:hover{box-shadow:inset 0 0 0 1px #474160}
.egg .front,.egg .backside{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;
  transition:opacity .32s ease,transform .32s ease}
.egg .front{align-items:center;justify-content:center;gap:12px;
  background:repeating-linear-gradient(135deg,#09080E 0 11px,#0C0B12 11px 22px)}
.egg .front .lock{font-size:26px;filter:grayscale(1);opacity:.5}
.egg .en{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--acc)}
.egg .hint{font-size:10px;font-weight:600;letter-spacing:.18em;color:#5B5570}
.egg .backside{opacity:0;transform:translateY(10px);pointer-events:none;gap:8px}
.egg .backside h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.egg .backside p{font-size:13.5px;color:var(--mute);line-height:1.6}
.egg.open .front{opacity:0;transform:translateY(-10px)}
.egg.open .backside{opacity:1;transform:none;pointer-events:auto}

.grid.rel{grid-template-columns:repeat(2,1fr);max-width:560px;padding-block:26px 0}

/* apasare pe popup */
.promo .pill{transition:transform .14s ease,box-shadow .2s}
.promo .pill:active{transform:scale(.95)}
.promo .card2{animation:mxpop .36s cubic-bezier(.22,1,.26,1) both}
@keyframes mxpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .pgrid{grid-template-columns:1fr;gap:32px}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}
  .split.rev>div:first-child{order:0}
  .eggs{grid-template-columns:1fr}
  .egg{min-height:0}
  .egg .front,.egg .backside{position:relative;inset:auto}
  .egg .front{padding-block:34px}
  .egg.open .front{display:none}
  .egg .backside{opacity:1;transform:none;display:none}
  .egg.open .backside{display:flex}
  .grid.rel{grid-template-columns:1fr}
}

@media (max-width:900px){
  .grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .trust{grid-template-columns:1fr}
  .phead{grid-template-columns:1fr;gap:28px}
  .phead img{max-width:300px}
}
@media (max-width:560px){
  .chapters{columns:1}
  .promo{left:12px;right:12px;bottom:12px;max-width:none}
  .law{grid-template-columns:56px 1fr;gap:15px}
}


/* ================= pagina de produs presete ================= */

.pp{padding-block:46px 0}
.pp .back{display:inline-flex;align-items:center;gap:8px;color:var(--mute);font-size:13.5px;
  cursor:pointer;transition:color .18s}
.pp .back:hover{color:var(--acc)}

/* --- hero --- */
.pph{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;padding-block:30px 20px}
.pph .shot{border-radius:20px;overflow:hidden;background:#0A0910;border:1px solid var(--rule)}
.pph .shot img{width:100%;display:block}
.pph .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}
.pph h1{font-family:var(--disp);font-size:clamp(40px,5.4vw,62px);font-weight:700;line-height:.98;
  letter-spacing:-.035em;text-transform:uppercase;margin-top:12px}
.pph .lede{color:var(--mute);font-size:15.5px;line-height:1.7;margin-top:18px;max-width:46ch}
.pph .lede b{color:var(--bone);font-weight:600}
.pph .pr{display:flex;align-items:baseline;gap:14px;margin-top:26px}
.pph .pr .now{font-size:34px;font-weight:700;color:var(--bone);letter-spacing:-.02em}
.pph .pr .was{font-size:16px;color:#6A6478;text-decoration:line-through}
.pph .pr .off{font-size:11px;font-weight:700;letter-spacing:.14em;color:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);border-radius:999px;padding:5px 11px}

.spec{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.spec .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spec .k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);min-width:74px}
.spec .v{font-size:13.5px;font-weight:600;color:var(--bone);border:1px solid var(--rule);
  background:var(--surface-2);border-radius:999px;padding:8px 16px}
.pph .cta{width:100%;margin-top:28px;text-align:center;font-size:15.5px;padding:17px 30px}
.pph .trust2{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pph .trust2 span{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--rule);border-radius:12px;padding:12px 14px;
  font-size:12.5px;color:var(--mute);background:var(--surface)}

/* --- bento --- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:70px 0}
.bento .b{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--rule);
  background:linear-gradient(180deg,#0E0D16,#0A0910);min-height:240px;
  display:flex;align-items:center;justify-content:center;padding:26px}
.bento .b.wide{grid-column:span 2}
.bento .b img{width:100%;height:auto;display:block}
.bento .tag{position:absolute;left:18px;bottom:18px;z-index:2;
  font-size:12.5px;font-weight:600;color:var(--bone);
  background:rgba(12,11,18,.86);backdrop-filter:blur(8px);
  border:1px solid var(--rule);border-radius:10px;padding:8px 14px}
.bento .b.glow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%,rgba(212,28,50,.16),transparent 70%)}

/* --- sectiuni text + imagine --- */
.sect{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding-block:78px}
.sect.rev{grid-template-columns:1.1fr 1fr}
.sect.rev .copy{order:2}
.sect .eyebrow{font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:0}
.sect h2{font-family:var(--disp);font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1.04;
  letter-spacing:-.03em;text-transform:none;margin:8px 0 20px}
.sect p{color:var(--mute);font-size:15px;line-height:1.75;margin-bottom:14px;max-width:48ch}
.sect p b{color:var(--bone);font-weight:600}
.sect .media{border-radius:18px;overflow:hidden}
.sect .media img{width:100%;display:block}
.sect .media.plain{border:0;background:none}

/* --- statistici 2x2 --- */
.stats4{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px;padding-block:20px 80px}
.stats4 .k{font-size:14px;color:var(--mute);margin-bottom:6px}
.stats4 .v{font-family:var(--disp);font-size:clamp(28px,3.6vw,40px);font-weight:700;
  letter-spacing:-.03em;line-height:1.05}
.stats4 .d{font-size:13.5px;color:var(--mute);margin-top:6px}

/* --- macro list --- */
.macros{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.macros div{border:1px solid var(--rule);background:var(--surface-2);border-radius:12px;
  padding:14px 16px}
.macros .mk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.macros .md{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.5}

/* --- bara de cumparare lipita jos --- */
.buybar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);
  z-index:90;display:flex;align-items:center;gap:18px;
  background:rgba(14,13,22,.92);backdrop-filter:blur(14px);
  border:1px solid var(--rule);border-radius:999px;padding:10px 10px 10px 24px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);transition:transform .38s cubic-bezier(.22,.8,.28,1)}
.buybar.show{transform:translateX(-50%) translateY(0)}
.buybar .bn{font-size:14px;font-weight:600;color:var(--bone);line-height:1.25}
.buybar .bp{font-size:13px;color:var(--mute)}
.buybar .btn{padding:12px 28px;font-size:14px}
body.cd-on .buybar{opacity:0;pointer-events:none;transition:opacity .2s}

@media(max-width:940px){
  .pph{grid-template-columns:1fr;gap:30px}
  .sect,.sect.rev{grid-template-columns:1fr;gap:26px;padding-block:52px}
  .sect.rev .copy{order:0}
  .bento{grid-template-columns:1fr}
  .bento .b.wide{grid-column:span 1}
  .stats4{grid-template-columns:1fr;gap:30px}
  .macros{grid-template-columns:1fr 1fr}
}


/* --- cardul evidentiat din grid --- */
.card.feat{background:transparent}
.card.feat::before{opacity:.5}
.card.feat:hover::before{opacity:1}
.card.feat .inner{background:var(--surface-2);box-shadow:0 22px 60px rgba(0,0,0,.5)}
.card.feat .meta{padding-bottom:26px}
.feattag{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;
  background:rgba(212,28,50,.92);border-radius:999px;padding:6px 14px;white-space:nowrap;
  box-shadow:0 8px 24px rgba(212,28,50,.35)}
@media(min-width:941px){
  .grid{align-items:center}
  .card.feat{transform:scale(1.045);z-index:2}
}


/* --- ce contine pachetul --- */
.inside{display:flex;flex-direction:column;gap:2px;margin-top:22px}
.inside>div{display:grid;grid-template-columns:34px 112px 1fr;align-items:baseline;gap:10px;
  padding:14px 4px;border-top:1px solid var(--rule)}
.inside>div:last-child{border-bottom:1px solid var(--rule)}
.inside .n{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.inside .t{font-size:15px;font-weight:600;color:var(--bone)}
.inside .d{font-size:13.5px;color:var(--mute);line-height:1.55}
.inside .bonus .n,.inside .bonus .t{color:#E8556E}
@media(max-width:620px){
  .inside>div{grid-template-columns:28px 1fr;gap:6px}
  .inside .d{grid-column:2}
}

/* --- grila cu un singur produs --- */
.grid.one{grid-template-columns:minmax(0,420px);justify-content:center;padding-block:14px 80px}
.grid.one .card.feat{transform:none}
@media(max-width:940px){.grid.one{grid-template-columns:1fr}}

/* --- player A/B --- */
.ab{margin-top:26px;padding:16px 18px;border-radius:16px;background:var(--surface-2);
  border:1px solid var(--rule)}
.ab-top{display:flex;align-items:center;gap:14px}
.ab-play{flex:0 0 42px;width:42px;height:42px;border-radius:999px;border:0;cursor:pointer;
  background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s}
.ab-play:hover{background:#9C86FF}
.ab-wave{position:relative;flex:1 1 auto;height:34px;border-radius:7px;overflow:hidden;
  background:linear-gradient(var(--ink),var(--ink));min-width:60px}
.ab-wave::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,#3A3550 0 2px,transparent 2px 5px)}
.ab-prog{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);opacity:.5}
.ab-sw{display:flex;flex:0 0 auto;border:1px solid var(--rule);border-radius:999px;overflow:hidden}
.ab-b{border:0;cursor:pointer;background:transparent;color:var(--mute);
  font:inherit;font-size:12.5px;font-weight:600;padding:9px 15px;transition:.15s;white-space:nowrap}
.ab-b.on{background:var(--acc);color:#fff}
.ab-note{margin:11px 0 0;font-size:12px;color:var(--mute)}
.bento .b.tall img{max-height:330px;width:auto}
@media(max-width:560px){
  .ab-top{flex-wrap:wrap}
  .ab-wave{order:3;flex:1 1 100%;margin-top:10px}
}

/* --- countdown reducere --- */
.cdown{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;
  padding:12px 16px;border-radius:12px;background:rgba(129,100,252,.10);
  border:1px solid rgba(129,100,252,.38)}
.cdown .cd-l{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#B9AEF4}
.cdown .cd-t{font-family:"SFMono-Regular",Consolas,monospace;font-size:19px;font-weight:700;
  color:var(--bone);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* mesaj cand audio-ul nu se incarca */
.ab.err .ab-top{opacity:.7}
.ab .ab-err{display:none;margin:10px 0 0;font-size:12.5px;color:#E8869B}
.ab.err .ab-err{display:block}

/* ---------- insigna + buton in hero ---------- */
.hbadge{display:inline-flex;align-items:center;gap:8px;margin:0;
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-soft);opacity:0;
  background:color-mix(in srgb,var(--acc-soft) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--acc-soft) 36%,transparent);
  border-radius:999px;padding:8px 15px}
.hbadge svg{flex:0 0 auto;width:14px;height:14px}
/* REPAIR PASS - pe o suprafata clara, lavanda deschisa (--acc-soft) e
   insuficient de contrastanta ca text/bordura; aici folosim violetul
   plin (--acc), fundalul usor rezervandu-se tot pastelului */
:root[data-theme="light"] .hbadge{color:var(--acc);
  border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.hcta{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--ui);font-size:15px;font-weight:600;
  background:var(--acc);color:#fff;
  box-shadow:0 12px 34px -10px color-mix(in srgb,var(--acc) 62%,transparent);
  transition:filter .18s,transform .18s}
.hcta:hover{filter:brightness(1.08);transform:translateY(-2px)}

/* ---------- trei clipuri (home) ---------- */
.clipsec{padding-block:clamp(48px,6vw,72px) clamp(64px,8vw,104px)}
.seyebrow{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.clipsec h2{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(30px,4vw,46px);line-height:1.04;max-width:26ch;text-wrap:balance}
.clipsub{margin-top:14px;font-size:16px;color:var(--mute);max-width:56ch;line-height:1.7}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px);
  margin-top:clamp(30px,4vw,46px)}
.clipc{min-width:0;background:var(--surface);border:1px solid var(--rule);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s}
.clipc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 42%,var(--rule))}
.clipc video,.clipc img,.clipc .clipimg{width:100%;height:auto;display:block;aspect-ratio:4/3;
  object-fit:cover;object-position:50% 20%;background:var(--surface-2);
  border:0;border-radius:0;border-bottom:1px solid var(--rule)}
.clipt{margin:0;padding:18px 20px 0;font-size:clamp(16px,1.35vw,18px);
  font-weight:700;letter-spacing:-.015em;color:var(--bone)}
.clipd{margin:0;padding:6px 20px 20px;font-size:13.5px;line-height:1.62;color:var(--mute)}
@media(max-width:940px){
  .clips{grid-template-columns:1fr;gap:18px}
  .clipsec h2{max-width:none}
}

/* ---------- recenzii ---------- */
.revs{padding-block:80px 20px;text-align:center}
.revs .stars{color:var(--acc);font-size:19px;letter-spacing:.24em}
.revs h2{font-family:var(--disp);font-size:clamp(28px,4vw,42px);font-weight:700;
  letter-spacing:-.03em;margin:14px 0 12px}
.revs .sub{color:var(--mute);font-size:15px;line-height:1.7;max-width:56ch;margin:0 auto}
.revgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding-block:40px 0;text-align:left}
.revc{border:1px solid var(--rule);border-radius:16px;background:var(--surface);
  padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.revc .rs{color:var(--acc);font-size:13px;letter-spacing:.18em}
.revc p{font-size:14px;line-height:1.65;color:#C8C3D4;margin:0}
.revc p mark{background:rgba(129,100,252,.22);color:var(--bone);border-radius:3px;
  padding:1px 3px}
.revc .who{display:flex;align-items:center;gap:11px;margin-top:auto}
.revc .av{width:34px;height:34px;border-radius:999px;flex:0 0 34px;
  background:var(--surface-2);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;color:var(--mute);
  font-size:13px;font-weight:700}
.revc .nm{font-size:13.5px;font-weight:600;color:var(--bone);line-height:1.3}
.revc .rl{font-size:12px;color:var(--mute)}
.revempty{border:1px dashed var(--rule);border-radius:16px;padding:38px 24px;
  color:var(--mute);font-size:14.5px;line-height:1.7;max-width:640px;margin:34px auto 0}
.revempty b{color:var(--bone);font-weight:600}
@media(max-width:1000px){.revgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.revgrid{grid-template-columns:1fr}}


/* ============================================================
   v33 — THE VAULT, carduri de listare, chips, carusel recenzii
   ============================================================ */

/* ---------- grid cu doua produse ---------- */
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin:0 auto;
  justify-content:center;padding-block:14px 80px}
.grid.two .card.feat{transform:none}
@media(max-width:800px){.grid.two{grid-template-columns:1fr;max-width:420px}}

/* ---------- carduri produs, stil listare ---------- */
.card .namerow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:2px}
.card .namerow .tag{font-family:var(--ui);font-size:17px;font-weight:600;color:var(--bone);white-space:nowrap}
.pin.hot{position:absolute;top:15px;right:13px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--badge);background:rgba(28,22,12,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(255,182,53,.45);border-radius:999px;padding:6px 11px}

/* ---------- chips + recenzii sub buton ---------- */
.pchips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.pchip{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:14px;
  background:var(--surface);padding:14px 16px;font-size:13.5px;color:var(--bone)}
.pchip svg{flex:0 0 auto;color:var(--acc)}
.prevs{margin-top:12px;border:1px solid var(--rule);border-radius:16px;background:var(--surface);padding:18px}
.prevs .lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#7C7590;margin-bottom:12px}
.prevs .stars{color:var(--badge);font-size:14px;letter-spacing:.18em}
.prevs .stars span{color:var(--mute);font-size:12.5px;letter-spacing:0}
.prevs .q{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--bone)}
.prevs .who{margin-top:12px;display:flex;justify-content:space-between;font-size:12.5px;color:var(--mute)}
.prevs .dots{margin-top:14px;display:flex;gap:6px;justify-content:center}
.prevs .dots i{width:16px;height:4px;border-radius:2px;background:var(--rule);cursor:pointer}
.prevs .dots i.on{background:var(--acc);width:24px}
.pview{overflow:hidden}
.ptrack{display:flex;align-items:flex-start;will-change:transform}
.pslide{flex:0 0 100%;min-width:0}
@media(max-width:560px){.pchips{grid-template-columns:1fr}}

/* ---------- THE VAULT: cerinte pluginuri ---------- */
.vreq{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,56px);
  align-items:center;padding-block:clamp(48px,7vw,88px)}
.vtxt h2{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,52px);line-height:1.05;margin:12px 0 16px}
.vtxt p{color:var(--mute);font-size:16px;line-height:1.7;max-width:46ch}
.vlist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.vlist li{display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--rule);padding-top:10px}
.vlist li b{color:var(--bone);font-size:14.5px;min-width:186px}
.vlist li span{color:var(--mute);font-size:13.5px}
.vshot img{width:100%;border-radius:18px;border:1px solid var(--rule);display:block}
.vcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:clamp(40px,6vw,72px)}
.vcard{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--rule);background:var(--surface)}
.vcard img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.vcard .cap{position:absolute;left:16px;bottom:16px;font-size:13px;font-weight:600;color:var(--bone);
  background:rgba(10,9,14,.82);border:1px solid var(--rule);border-radius:10px;padding:8px 14px}
.tree{display:grid;gap:12px;align-content:center}
.tree .grp{border:1px solid var(--rule);border-radius:14px;background:var(--surface);padding:16px 18px}
.tree .grp b{display:block;color:var(--bone);font-size:15px}
.tree .grp span{display:block;margin-top:4px;color:var(--mute);font-size:13.5px}
@media(max-width:900px){
  .vreq{grid-template-columns:1fr}
  .vcards{grid-template-columns:1fr}
  .vlist li b{min-width:150px}
}

/* ---------- panou "Built with" sub poza produsului ---------- */
/* poza sus-stanga, panoul sub ea, textul pe coloana din dreapta pe 2 randuri */
.pph .shot{grid-column:1;grid-row:1}
.pph .vbuilt{grid-column:1;grid-row:2}
.pph .info{grid-column:2;grid-row:1 / span 2}
.vbuilt{margin-top:18px;border:1px solid var(--rule);border-radius:18px;
  background:var(--surface);padding:20px 20px 18px}
.vbuilt .vb-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.vbuilt .vb-k{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7C7590}
.vbuilt .vb-n{font-size:13.5px;font-weight:600;color:var(--bone);white-space:nowrap}
.vbuilt .vb-pills{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
.vbuilt .vb-pills span{font-size:12.5px;font-weight:500;color:#C8C3D4;
  border:1px solid var(--rule);border-radius:999px;padding:7px 12px;background:var(--surface-2)}
.vbuilt .vb-f{display:flex;align-items:flex-start;gap:9px;margin-top:16px;
  font-size:13px;line-height:1.55;color:var(--mute)}
.vbuilt .vb-f b{color:var(--bone);font-weight:600}
.vbuilt .vb-f svg{flex:0 0 auto;margin-top:2px;color:var(--acc)}
@media(max-width:940px){
  .pph .shot,.pph .vbuilt,.pph .info{grid-column:auto;grid-row:auto}
}

/* ---------- grid cu trei produse ---------- */
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1200px;margin:0 auto;
  padding-block:14px 80px}
.grid.three .card.feat{transform:none}
@media(max-width:980px){.grid.three{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}}
@media(max-width:640px){.grid.three{grid-template-columns:1fr;max-width:420px}}

/* ============================================================
   v36 — header-pastila, ritm de sectiune, banda de logo-uri
   ============================================================ */

/* ---------- header care pluteste ---------- */
.nav{background:transparent;border-bottom:0;padding-top:14px}
.nav .row{background:rgba(23,23,23,.86);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:999px;
  padding:12px 26px;margin-inline:auto}
.nav .mark{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.03em;
  text-shadow:none}
.nav .links{font-weight:500;font-size:15px;color:#A5A09B}
.nav .links a:hover{color:var(--bone)}
@media(max-width:820px){.nav .row{padding:10px 18px}}

/* ---------- ritm de sectiune ---------- */
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding-top:clamp(40px,6vw,76px)}
.sechead h2{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,4.8vw,52px);line-height:1.03;margin:12px 0 0;text-wrap:balance}
.sechead .lede{color:var(--mute);font-size:16.5px;line-height:1.7;max-width:58ch;margin-top:14px}

/* ---------- banda cu DAW-uri ---------- */
.logobar{border-block:1px solid var(--rule);background:var(--surface);
  padding:22px 0;overflow:hidden}
.logobar .lbl{max-width:1200px;margin:0 auto;padding:0 28px 16px;
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.logobar .lbl b{font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone)}
.logobar .lbl span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6F6A65}
.logobar .lane{overflow:hidden}
.logobar .run{display:flex;align-items:center;gap:58px;width:max-content;
  animation:logoslide 34s linear infinite}
.logobar .lg{display:block;flex:0 0 auto}
.logobar .lg img{width:54px;height:54px;border-radius:13px;display:block;
  transition:filter .25s,opacity .25s}
.logobar .lg.off img{filter:grayscale(1) brightness(.40);opacity:.45}
@keyframes logoslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .logobar .run{animation:none;flex-wrap:wrap;width:auto;padding-inline:28px;
    gap:30px;justify-content:center}
}

/* ---------- butoane, colturi mai stranse ---------- */
.btn{font-weight:600;letter-spacing:-.005em}
.card{border-radius:18px}
.card .inner{border-radius:17px}
.card .name{font-family:var(--disp);font-weight:700;letter-spacing:-.025em;text-transform:none}

/* ============================================================
   v37 — tema light, buybox, player A/B, placute, perete de mesaje
   ============================================================ */

/* ---------- tema deschisa ---------- */
:root[data-theme="light"]{
  --ink:#F7F5F1; --surface:#FFFFFF; --surface-2:#F0EDE8;
  --bone:#141210; --mute:#5E5952; --rule:#DFDAD2;
  color-scheme:light;
}
:root[data-theme="light"] .nav .row{background:rgba(255,255,255,.88)}
:root[data-theme="light"] .card .art,
:root[data-theme="light"] .pph .shot{background:#EFEBE4}
:root[data-theme="light"] .hero-live{background:#EDE9E2}
:root[data-theme="light"] .hero-live .ln,
:root[data-theme="light"] .foot .big{color:#141210}
:root[data-theme="light"] .clipc video{background:#EFEBE4 !important;border-color:#DFDAD2 !important}
:root[data-theme="light"] .logobar .lg.off img{filter:grayscale(1) brightness(1.05);opacity:.35}
:root[data-theme="light"] .abx-wave{background:#E6E1D9}
:root[data-theme="light"] .dm p{color:#3B3630}

/* butonul de tema */
.themetog{display:inline-flex;align-items:center;gap:0;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:999px;padding:3px;cursor:pointer}
.themetog i{display:grid;place-items:center;width:28px;height:24px;border-radius:999px;
  color:var(--mute);font-style:normal;transition:background .2s,color .2s}
.themetog i.on{background:var(--acc);color:#fff}

/* ---------- stele langa pret ---------- */
.prating{display:flex;align-items:center;gap:9px;margin-top:22px}
.prating .rs{color:var(--acc);font-size:16px;letter-spacing:.12em}
.prating b{font-size:15px;font-weight:700}
.prating .rc{font-size:14px;color:var(--mute)}
.pph .pr{margin-top:12px}

/* ---------- selector de DAW ---------- */
.dawpick{margin-top:24px;border:1px solid var(--rule);border-radius:16px;
  background:var(--surface);padding:16px 16px 18px}
.dp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dp-t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.dp-s{font-size:12.5px;color:var(--mute)}
.dp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dp{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:13px;
  cursor:pointer;font-family:var(--ui);transition:border-color .2s,background .2s}
.dp img{width:38px;height:38px;border-radius:9px}
.dp span{font-size:12.5px;font-weight:600;color:var(--bone);display:flex;align-items:center;gap:6px}
.dp span i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);
  border-radius:999px;padding:2px 6px}
.dp:hover:not(.off){border-color:#4A4A4A}
.dp.sel{border-color:var(--acc);background:rgba(255,74,61,.10)}
.dp.off{opacity:.45;cursor:not-allowed}
.dp.off img{filter:grayscale(1) brightness(.5)}
.btn.cta[disabled]{background:var(--surface-2);color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--rule);cursor:not-allowed}
@media(max-width:520px){.dp-row{grid-template-columns:1fr}.dp{flex-direction:row;justify-content:flex-start;gap:12px}}

/* ---------- player before / after ---------- */
.abx{margin-top:16px;border:1px solid var(--rule);border-radius:16px;
  background:var(--surface);padding:16px}
.abx-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.abx-t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.abx-s{font-size:12.5px;color:var(--mute)}
.abx-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.abx-tab{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--mute);
  background:var(--surface-2);border:1px solid var(--rule);border-radius:999px;
  padding:7px 13px;cursor:pointer}
.abx-tab.on{color:#fff;background:var(--acc);border-color:var(--acc)}
.abx-main{display:flex;align-items:center;gap:12px;margin-top:15px}
.abx-play{width:40px;height:40px;flex:0 0 40px;border-radius:999px;border:0;cursor:pointer;
  background:var(--acc);color:#fff;display:grid;place-items:center}
.abx-wave{flex:1;height:34px;border-radius:8px;background:var(--surface-2);position:relative;overflow:hidden}
.abx-prog{position:absolute;inset:0;width:0;background:rgba(255,74,61,.26)}
.abx-sw{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:999px;padding:3px}
.abx-b{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--mute);
  background:transparent;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.abx-b.on{background:var(--acc);color:#fff}
.abx-note{margin-top:11px;font-size:12.5px;color:var(--mute)}

/* ---------- placute de incredere ---------- */
.ttiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:clamp(40px,6vw,72px)}
.ttiles>div{border:1px solid var(--rule);border-radius:16px;background:var(--surface);
  padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.ttiles svg{color:var(--acc)}
.ttiles b{font-size:17px;font-weight:700;letter-spacing:-.015em}
.ttiles span{font-size:14px;color:var(--mute);line-height:1.6}
@media(max-width:820px){.ttiles{grid-template-columns:1fr}}

/* ---------- perete de mesaje ---------- */
.dmwall{padding-bottom:clamp(40px,6vw,72px)}
.dm-h h2{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(28px,4.4vw,46px);margin:12px 0 0}
.dm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.dm{border:1px solid var(--rule);border-radius:16px;background:var(--surface);padding:20px}
.dm-top{display:flex;align-items:center;gap:11px}
.dm .av{width:34px;height:34px;border-radius:999px;flex:0 0 34px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--rule);display:grid;place-items:center;
  font-size:13px;font-weight:700;color:var(--mute);text-transform:uppercase}
.dm-top b{display:block;font-size:14px;font-weight:600}
.dm-top i{display:block;font-style:normal;font-size:12px;color:var(--mute)}
.dm p{margin:13px 0 0;font-size:14.5px;line-height:1.65;color:#C8C3BC}
.dm-reply{margin-top:13px;border-top:1px solid var(--rule);padding-top:12px;
  font-size:13.5px;color:var(--mute);display:flex;gap:9px;flex-wrap:wrap}
.dm-reply .who{font-weight:600;color:var(--bone)}
.dm-reply em{font-style:normal;color:var(--mute);font-weight:400}
@media(max-width:780px){.dm-grid{grid-template-columns:1fr}}

/* ---------- hero: cutiile tale, inclinate, care plutesc ---------- */
.hstage{position:relative;width:100%;height:clamp(330px,42vw,560px);z-index:1}
.hslot{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) translate(var(--dx),var(--dy))}
.hslot.s1{--dx:clamp(150px,16vw,256px); --dy:40px; --tilt:10deg;--hh:clamp(116px,11.4vw,184px);--dur:7.2s; --del:-.9s;  --lift:14px; z-index:1}
.hslot.s2{--dx:0px;                     --dy:-18px;--tilt:-4deg; --hh:clamp(186px,19.5vw,312px);--dur:6.1s; --del:0s;    --lift:20px; z-index:3}
.hslot.s3{--dx:clamp(-256px,-16vw,-150px);--dy:38px;--tilt:-11deg;--hh:clamp(120px,11.8vw,192px);--dur:8s;   --del:-2.1s; --lift:16px; z-index:2}
/* o singura cutie in hero: sta pe mijloc si e mult mai mare.
   Cutia e deja randata inclinata, deci --tilt ramane 0. */
.hslot.s0{--dx:0px; --dy:-6px; --tilt:0deg; --hh:clamp(268px,30vw,466px); --dur:6.6s; --del:0s; --lift:22px; z-index:3}
.hstage.solo{height:clamp(340px,40vw,540px)}
/* cutia asta e deja randata cu lumina ei: nu o mai luminam a doua oara */
.hslot.s0 .hbximg{filter:drop-shadow(0 30px 38px rgba(0,0,0,.66))}
:root[data-theme="light"] .hslot.s0 .hbximg{filter:drop-shadow(0 24px 32px rgba(0,0,0,.30))}

.hbob{display:block;animation:hbob var(--dur) ease-in-out infinite;animation-delay:var(--del)}
@keyframes hbob{
  0%,100%{transform:translate3d(0,calc(var(--lift) * -.5),0)}
  50%    {transform:translate3d(0,calc(var(--lift) * .5),0)}
}
.hslot .hbximg{height:var(--hh);width:auto;max-width:none;display:block;
  filter:brightness(1.22) saturate(1.12) contrast(1.04)
         drop-shadow(0 26px 34px rgba(0,0,0,.62));
  transform:rotate(var(--tilt));transform-origin:50% 55%}
:root[data-theme="light"] .hslot .hbximg{filter:drop-shadow(0 22px 30px rgba(0,0,0,.28))}

.hglow{position:absolute;top:50%;left:50%;width:calc(var(--hh) * 1.7);height:calc(var(--hh) * 1.7);
  border-radius:50%;transform:translate(-50%,-50%);filter:blur(44px);opacity:.55;
  z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--g) 0%,transparent 66%);
  animation:hpulse var(--dur) ease-in-out infinite;animation-delay:var(--del)}
@keyframes hpulse{0%,100%{opacity:.40;transform:translate(-50%,-50%) scale(.94)}
                  50%    {opacity:.66;transform:translate(-50%,-50%) scale(1.06)}}

/* singurul strat animat din spate: o lumina difuza care respira */
.hero-live .hair{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 52% 62% at 50% 48%, rgba(255,248,236,.075), transparent 60%),
    radial-gradient(ellipse 40% 54% at 24% 56%, rgba(90,107,255,.10), transparent 62%),
    radial-gradient(ellipse 40% 54% at 76% 56%, rgba(255,74,61,.10), transparent 62%);
  animation:hbreathe 13.2s ease-in-out infinite}
@keyframes hbreathe{0%,100%{opacity:.55}50%{opacity:1}}
:root[data-theme="light"] .hero-live .hair{opacity:.5}

@media(prefers-reduced-motion:reduce){
  .hbob,.hglow,.hero-live .hair{animation:none!important}
}
@media(max-width:620px){
  .hstage{height:250px}
  .hslot.s1{--dx:112px; --hh:88px}
  .hslot.s2{--dx:4px;   --hh:172px}
  .hslot.s3{--dx:-88px; --hh:128px}
  .hstage.solo{height:300px}
  .hslot.s0{--dx:0px;   --hh:242px}
  .hglow{filter:blur(30px)}
}

/* ---------- light mode: nimic negru ramas in pagina ---------- */
:root[data-theme="light"] .hero-live{
  background:linear-gradient(180deg,#F7F5F1,#EDE9E2)}
:root[data-theme="light"] .hero-live .halo{opacity:.5}
:root[data-theme="light"] .offer{
  background:linear-gradient(180deg,#FFFFFF,#F4F1EC);border-color:#DFDAD2}
:root[data-theme="light"] .offer .ocopy{background:#141210;color:#F7F5F1}
:root[data-theme="light"] .offer .ocopy:hover{background:#000000}
:root[data-theme="light"] .offer .os b{color:#3B3630}
:root[data-theme="light"] .offer .ocode{background:#FFFFFF;border-color:#DFDAD2}
:root[data-theme="light"] .punchband{background:#EFEBE4}
:root[data-theme="light"] .foot{background:transparent}
:root[data-theme="light"] .marquee{background:#EFEBE4;border-color:#DFDAD2}
:root[data-theme="light"] .logobar{background:#EFEBE4;border-color:#DFDAD2}
:root[data-theme="light"] .buybar{background:rgba(255,255,255,.94);border-color:#DFDAD2}

/* ---------- meniu care se deschide la hover pe Presets ---------- */
.nav .has-menu{position:relative;display:inline-flex;align-items:center}
.nav .mega{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:min(560px,86vw);padding-top:14px;opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70}
.nav .has-menu:hover .mega,
.nav .has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .mega-in{background:var(--surface);border:1px solid var(--rule);border-radius:18px;
  padding:14px;box-shadow:0 26px 60px -18px rgba(0,0,0,.72);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
:root[data-theme="light"] .nav .mega-in{box-shadow:0 26px 60px -22px rgba(0,0,0,.24)}
.nav .mg{display:flex;gap:12px;align-items:center;padding:10px;border-radius:13px;
  text-decoration:none;color:inherit;transition:background .16s}
.nav .mg:hover{background:var(--surface-2)}
.nav .mg .mgi{flex:0 0 46px;width:46px;height:58px;border-radius:7px;overflow:hidden;
  background:var(--surface-2);display:grid;place-items:center}
.nav .mg .mgi img{width:100%;height:100%;object-fit:contain;padding:5px}
.nav .mg .mgt{min-width:0;display:block}
.nav .mg .mgn{display:block;font-size:14px;font-weight:700;color:var(--bone);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .mg .mgd{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.nav .mg .mgp{display:block;font-size:12.5px;font-weight:600;color:var(--acc);margin-top:3px}
@media(max-width:860px){.nav .mega{display:none}}

:root[data-theme="light"] .nav{background:rgba(247,245,241,.92)}
:root[data-theme="light"] .gallery .stage{background:#EFEBE4}
:root[data-theme="light"] .nav .mark{text-shadow:none}

:root[data-theme="light"] .card .art{
  background:radial-gradient(ellipse 62% 56% at 50% 48%,rgba(0,0,0,.05),transparent 68%),#F2EFEA}

/* ==================== bare de sunet in spatele cutiilor ==================== */
.hero-live .hwave{position:absolute;left:0;right:0;bottom:0;height:68%;z-index:0;
  pointer-events:none;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(4px,.62vw,11px);opacity:.14;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 38%,#000 92%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 38%,#000 92%,transparent)}
.hero-live .hwave i{flex:1 1 0;min-width:0;max-width:17px;height:var(--h);border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 14%,transparent));
  transform-origin:50% 100%;
  animation:wv var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes wv{from{transform:scaleY(.20)}to{transform:scaleY(1)}}
:root[data-theme="light"] .hero-live .hwave{opacity:.11}
@media(prefers-reduced-motion:reduce){.hero-live .hwave i{animation:none;transform:scaleY(.5)}}

/* ==================== banda orizontala de produse ==================== */
.lane{padding-block:clamp(30px,3.4vw,52px) clamp(20px,2.6vw,34px)}
.lane-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.lane-t{min-width:0}
.lane h2{font-family:var(--disp);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(30px,4.3vw,62px);line-height:1;margin:0}
.lane-sub{margin-top:10px;font-size:15px;color:var(--mute);max-width:52ch;line-height:1.65}
.lane-nav{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lane-cta{font-size:13.5px;font-weight:600;color:#fff;background:var(--acc);
  border-radius:999px;padding:10px 18px;text-decoration:none;transition:filter .2s}
.lane-cta:hover{filter:brightness(1.1)}
.lane-arw{width:54px;height:54px;font-size:17px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;color:var(--mute);cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:.18s;font-family:var(--ui)}
.lane-arw:hover{color:var(--bone);border-color:var(--bone)}
.lane-arw[disabled]{opacity:.5;cursor:default}
.lane-row{display:flex;gap:clamp(12px,1.2vw,20px);margin-top:clamp(18px,2.2vw,28px);
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.lane-row::-webkit-scrollbar{display:none}
.lane-bar{margin-top:18px;height:2px;background:var(--rule);border-radius:2px;overflow:hidden}
.lane-bar i{display:block;height:100%;width:30%;background:var(--acc);border-radius:2px;
  transition:transform .12s linear,width .2s}

/* cardul de produs, masurat pe site-ul lor:
   310x405, radius 8, bg #1A1A1F, rama alba 12%, media patrata #232329,
   titlu 16/900 si pretul pe randul urmator, 16/400 */
.pcard{flex:0 0 clamp(216px,21vw,310px);scroll-snap-align:start;min-width:0;
  background:#1A1A1F;border:1px solid rgba(255,255,255,.12);border-radius:8px;
  overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:background .52s cubic-bezier(.2,.8,.2,1),
             border-color .52s cubic-bezier(.2,.8,.2,1),
             transform .52s cubic-bezier(.2,.8,.2,1)}
:root[data-theme="light"] .pcard{background:#FFFFFF;border-color:rgba(0,0,0,.12)}
.pcard-art{position:relative;aspect-ratio:1/1;flex:0 0 auto;overflow:hidden;
  background:#232329;padding:0}
:root[data-theme="light"] .pcard-art{background:#EFEBE4}
.pcard-art img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.pcard-m{margin-top:auto;padding:15px 15px 18px;display:flex;flex-direction:column;gap:8px}
.pcard-n{font-size:16px;font-weight:900;letter-spacing:-.01em;color:#F7F1E8;line-height:1.2;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:text-decoration-color .3s}
:root[data-theme="light"] .pcard-n{color:#141210}
.pcard-p{font-size:16px;font-weight:400;color:#F7F1E8;opacity:.86}
:root[data-theme="light"] .pcard-p{color:#141210}

/* hover: sticla luminata cu tenta rosie, rama rosie subtire,
   titlul SI pretul subliniate, poza creste */
.pcard:hover{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--acc-lt) 9%,transparent),
      color-mix(in srgb,var(--acc-lt) 3%,transparent)), #232329;
  border-color:color-mix(in srgb,var(--acc-lt) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc-lt) 10%,transparent),
             0 20px 48px -20px color-mix(in srgb,var(--acc-lt) 38%,transparent)}
:root[data-theme="light"] .pcard:hover{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--acc-lt) 8%,transparent),
      color-mix(in srgb,var(--acc-lt) 2%,transparent)), #FFFFFF;
  border-color:color-mix(in srgb,var(--acc-lt) 45%,transparent)}
.pcard:hover .pcard-art{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--acc-lt) 11%,transparent),
      transparent 70%), #2A2A33}
:root[data-theme="light"] .pcard:hover .pcard-art{
  background:linear-gradient(180deg,
      color-mix(in srgb,var(--acc-lt) 9%,transparent),
      transparent 70%), #F4F1EC}
.pcard-art{transition:background .52s cubic-bezier(.2,.8,.2,1)}
.pcard-art::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-75%;width:55%;
  pointer-events:none;z-index:2;opacity:0;transform:translateX(0) skewX(-18deg);
  background:linear-gradient(90deg,transparent,
      rgba(255,255,255,.10) 32%,rgba(255,255,255,.26) 50%,
      rgba(255,255,255,.10) 68%,transparent)}
.pcard:hover .pcard-art::after{animation:pshine 1.05s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes pshine{
  0%  {opacity:0;   transform:translateX(0)    skewX(-18deg)}
  18% {opacity:1}
  80% {opacity:1}
  100%{opacity:0;   transform:translateX(330%) skewX(-18deg)}
}
.pcard:hover .pcard-art img{transform:scale(1.06)}
.pcard:hover .pcard-n,
.pcard:hover .pcard-p{text-decoration:underline;text-decoration-color:currentColor;
  text-underline-offset:3px}
.pcard-p{text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .3s}

.pcard.is-soon{cursor:default}
.pcard.is-soon:hover{background:#1A1A1F;border-color:rgba(255,255,255,.12)}
:root[data-theme="light"] .pcard.is-soon:hover{background:#FFFFFF;border-color:rgba(0,0,0,.12)}
.pcard.is-soon .pcard-art{display:grid;place-items:center}
.pcard-soon{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--badge);
  border:1px solid color-mix(in srgb,var(--badge) 42%,transparent);
  background:color-mix(in srgb,var(--badge) 12%,transparent);border-radius:999px;padding:5px 10px}
.pcard-ph{width:34%;max-width:96px;color:color-mix(in srgb,var(--acc) 60%,transparent);opacity:.5}
.pcard-ph svg{width:100%;height:auto;display:block}
.pcard.is-soon .pcard-n{color:var(--mute);text-decoration-color:transparent !important}
.pcard.is-soon .pcard-p{opacity:.55}

/* ==================== intrebari ==================== */
.hfaq{padding-block:clamp(56px,7vw,90px);text-align:center}
.hfaq h2{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(28px,3.8vw,46px);line-height:1.04;margin:0}
.hfaq .seyebrow{margin-bottom:12px}
.hfaq-list{max-width:760px;margin:clamp(26px,3.4vw,40px) auto 0;text-align:left;
  display:flex;flex-direction:column;gap:10px}
.hfaq details{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:0 18px;transition:border-color .2s}
.hfaq details[open]{border-color:color-mix(in srgb,var(--acc) 38%,var(--rule))}
.hfaq summary{list-style:none;cursor:pointer;padding:16px 26px 16px 0;position:relative;
  font-size:15px;font-weight:600;color:var(--bone)}
.hfaq summary::-webkit-details-marker{display:none}
.hfaq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  font-size:19px;font-weight:400;color:var(--mute);transition:transform .2s}
.hfaq details[open] summary::after{content:"\2212";color:var(--acc)}
.hfaq-a{padding:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--mute)}
.hfaq-a p{margin:0 0 10px}

/* ==================== banda finala ==================== */
.fband{margin-top:clamp(20px,3vw,40px);border-radius:24px;overflow:hidden;position:relative;
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, color-mix(in srgb,var(--acc) 34%,transparent), transparent 62%),
    linear-gradient(180deg,#1A0F10,#0C0B0D);
  border:1px solid color-mix(in srgb,var(--acc) 22%,var(--rule))}
:root[data-theme="light"] .fband{background:
    radial-gradient(ellipse 70% 120% at 50% 0%, color-mix(in srgb,var(--acc) 18%,transparent), transparent 62%),
    linear-gradient(180deg,#FFF6F4,#F7F5F1)}
.fband-in{padding:clamp(44px,6vw,76px) clamp(22px,4vw,48px);text-align:center;
  max-width:760px;margin:0 auto}
.fband h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(30px,4.4vw,54px);line-height:1.02;margin:0;text-wrap:balance}
.fband p{margin-top:14px;color:var(--mute);font-size:16px;line-height:1.65}
.fband-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn-p,.btn-s{border-radius:999px;padding:14px 26px;font-size:15px;font-weight:600;
  text-decoration:none;transition:.2s;display:inline-block;font-family:var(--ui)}
.btn-p{background:var(--acc);color:#fff;
  box-shadow:0 12px 34px -10px color-mix(in srgb,var(--acc) 62%,transparent)}
.btn-p:hover{transform:translateY(-2px)}
.btn-s{background:transparent;color:var(--bone);
  border:1.5px solid color-mix(in srgb,var(--bone) 30%,transparent)}
.btn-s:hover{border-color:var(--bone)}

/* ==================== abonare ==================== */
.subband{margin-top:clamp(16px,2.4vw,26px);margin-bottom:clamp(30px,4vw,54px)}
.subband-in{background:var(--surface);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,36px);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.subband-t{min-width:0}
.subband-t b{display:block;font-size:clamp(17px,1.7vw,21px);font-weight:700;
  letter-spacing:-.015em;color:var(--bone)}
.subband-t span{display:block;margin-top:5px;font-size:14px;color:var(--mute)}
.subform{flex:1 1 320px;max-width:460px}
.subform form{display:flex;gap:10px;margin:0}
.subform input[type=email]{flex:1 1 auto;min-width:0;background:var(--ink);color:var(--bone);
  border:1px solid var(--rule);border-radius:999px;padding:13px 18px;font-size:14.5px;
  font-family:var(--ui);outline:none;transition:border-color .2s}
.subform input[type=email]:focus{border-color:var(--acc)}
.subform button{flex:0 0 auto;border:0;border-radius:999px;background:var(--acc);color:#fff;
  font-family:var(--ui);font-size:14.5px;font-weight:600;padding:13px 24px;cursor:pointer;
  transition:filter .2s}
.subform button:hover{filter:brightness(1.1)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
@media(max-width:700px){
  .subband-in{flex-direction:column;align-items:stretch}
  /* REPAIR PASS - gasit prin QA la 390px, nu doar din cod: .subform mostenea
     flex:1 1 320px de la randul desktop, dar in coloana (flex-direction:
     column) acelasi "320px" devine o INALTIME minima pe axa principala, nu
     o latime - .subform crestea pe verticala (gol mare in card) si butonul
     "Subscribe" iesea in dreapta cardului. Fortam explicit latime completa,
     inaltime naturala, pe mobil. */
  .subform{max-width:none;flex:none;width:100%}
}

/* ==================== capul de sectiune, ca la ei ==================== */
.sechead{max-width:760px;margin:0 0 clamp(18px,2.4vw,30px)}
.sechead.mid{margin-inline:auto;text-align:center}
.sechead h2{font-family:var(--disp);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(30px,4.3vw,62px);line-height:1;margin:0}
.sechead p{margin-top:13px;font-size:15.5px;line-height:1.6;color:var(--mute)}

/* ==================== banda cu DAW-uri, ca la ei ==================== */
.dawbar{background:#1A1A1F;padding:17px 0 18px}
:root[data-theme="light"] .dawbar{background:#EFEBE4}
.dawbar .db-lg{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center}
.dawbar .db-lg img{width:100%;height:100%;object-fit:contain;
  filter:saturate(.9);opacity:.92;transition:opacity .2s}
.dawbar .db-lg:hover img{opacity:1}
/* nedisponibile: doar putin mai discrete, fara gri inchis */
.dawbar .db-lg.off img{filter:saturate(.9);opacity:.48}
.dawbar .db-lg.txt{width:auto;padding-inline:4px}
.dawbar .db-lg.txt b{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:-.01em;
  color:var(--bone);opacity:.88;white-space:nowrap}
.dawbar .db-lg.txt.off b{opacity:.48}
:root[data-theme="light"] .dawbar .db-lg.off img{filter:saturate(.9);opacity:.48}

/* ==================== carusel in hero: sageti pe margini, puncte ==================== */
.hero-live .hslides{position:relative;width:100%}
.hero-live .hslide{display:none;flex-direction:column;align-items:flex-start;gap:16px}
.hero-live .hslide.on{display:flex;animation:hslidein .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hslidein{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.hero-live .harrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  border:1px solid var(--rule);color:var(--bone);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.2s;padding:0}
.hero-live .harrow:hover{background:var(--surface);border-color:var(--bone)}
.hero-live .harrow.prev{left:clamp(12px,1.6vw,24px)}
.hero-live .harrow.next{right:clamp(12px,1.6vw,24px)}
.hero-live .hdots{display:flex;gap:8px;align-items:center;margin-top:4px}
.hero-live .hdot{width:10px;height:10px;border-radius:50%;padding:0;cursor:pointer;
  border:0;background:#3A3733;transition:.22s}
.hero-live .hdot.on{background:var(--acc-lt);width:26px;border-radius:999px}
@media(max-width:900px){.hero-live .harrow{display:none}}

/* DAW fara logo, in selectorul de pe pagina de produs */
.dawpick .dp-wm{display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  font-family:var(--ui);font-size:15px;font-weight:700;letter-spacing:-.01em;
  color:var(--bone);opacity:.5}

/* ==================== pagina de produs, asezata ca la ei ==================== */
/* poza produsului: fara cutie, cu glow mare colorat in spate */
.pph .shot{background:transparent !important;border:0 !important;box-shadow:none !important;
  position:relative;display:grid;place-items:center;padding:clamp(28px,5vw,72px);
  border-radius:0;overflow:visible}
.pph .shot::before{content:"";position:absolute;top:50%;left:50%;
  width:min(88%,470px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(58px);opacity:.62;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--pglow,#7B4BFF) 0%,transparent 66%)}
.pph .shot img{position:relative;z-index:1;width:auto;max-width:100%;
  height:auto;max-height:clamp(340px,44vw,560px);margin:0 auto;
  border-radius:0;border:0;box-shadow:none;
  filter:brightness(1.16) saturate(1.1) drop-shadow(0 34px 44px rgba(0,0,0,.6))}
#pop.vaultpage .pph .shot{--pglow:var(--acc,#FF2E9E)}
:root[data-theme="light"] .pph .shot::before{opacity:.32}

/* pretul mare, cu pretul taiat langa el */
.pph .pr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 0}
.pph .pr .now{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--bone)}
.pph .pr .was{font-size:clamp(15px,1.4vw,19px);color:var(--mute);text-decoration:line-through}

/* pastila cu stele */
.pph .prating{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:8px 15px;font-size:13.5px}
.pph .prating .rs{color:var(--badge);letter-spacing:.06em;font-size:13px}
.pph .prating b{color:var(--bone);font-weight:700}
.pph .prating .rdot,.pph .prating .rc{color:var(--mute);font-weight:500}

/* selectorul de DAW: pastile mici in grila */
.dawpick{margin-top:22px}
.dawpick .dp-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:11px}
.dawpick .dp-t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)}
.dawpick .dp-s{font-size:12.5px;color:var(--dim)}
.dawpick .dp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}
.dawpick .dp{display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:11px 16px;cursor:pointer;font-family:var(--ui);color:var(--bone);
  transition:background .2s,border-color .2s,transform .2s}
.dawpick .dp img{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.dawpick .dp span{font-size:13.5px;font-weight:600;white-space:nowrap}
.dawpick .dp span i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-left:6px}
.dawpick .dp:hover:not([disabled]){border-color:var(--bone);transform:translateY(-1px)}
.dawpick .dp.sel{background:color-mix(in srgb,var(--acc) 14%,transparent);
  border-color:color-mix(in srgb,var(--acc) 58%,transparent)}
.dawpick .dp.off{opacity:.55;cursor:default}
.dawpick .dp.off img{filter:saturate(.9);opacity:.6}

/* butonul mare, cu degrade si glow, ca la ei */
.pph .btn.cta{display:block;width:100%;margin-top:18px;border:0;cursor:pointer;
  font-family:var(--ui);font-size:14.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;border-radius:999px;padding:18px 26px;
  background:linear-gradient(90deg,#FF2E9E,#FF5CB8 45%,#D81B7A);
  box-shadow:0 16px 42px -12px color-mix(in srgb,var(--acc) 66%,transparent);
  transition:filter .2s,transform .2s,opacity .2s}
.pph .btn.cta:hover:not([disabled]){filter:brightness(1.08);transform:translateY(-2px)}
.pph .btn.cta[disabled]{opacity:.62;cursor:default}

/* ---------- pagina de produs: glow mai puternic, player sub poza,
              descrierea sub blocul de cumparare ---------- */
.pph .shot::before{width:min(92%,520px) !important;filter:blur(70px) !important;
  opacity:1 !important}
.pph .shot::after{content:"";position:absolute;top:50%;left:50%;
  width:min(52%,270px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(42px);opacity:.78;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--pglow,#7B4BFF) 0%,transparent 62%)}
:root[data-theme="light"] .pph .shot::before{opacity:.42 !important}
:root[data-theme="light"] .pph .shot::after{opacity:.3}

/* playerul mutat in coloana din stanga, sub poza */
.pph .ab.shotab{grid-column:1;margin-top:6px}
.pph .shot{grid-row:1}
.pph .ab.shotab{grid-row:2}
.pph .vbuilt{grid-row:3}
.pph .info{grid-column:2;grid-row:1 / span 3}
@media(max-width:940px){
  .pph .shot,.pph .ab.shotab,.pph .vbuilt,.pph .info{grid-column:1;grid-row:auto}
}

/* descrierea, sub buton */
.pph .pdesc{margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.pph .pdesc .lede{margin:0;font-size:15px;line-height:1.72;color:var(--mute)}
.pph .pdesc .lede b{color:var(--bone);font-weight:600}

/* headerul: scris mai deschis si mai lizibil, ca la ei */
.nav .links{color:#EDEAE4;font-size:15.5px;font-weight:500}
.nav .links a{color:#EDEAE4;opacity:.92}
.nav .links a:hover{color:#FFFFFF;opacity:1}
.nav .links a.on{color:var(--acc-lt);opacity:1}
:root[data-theme="light"] .nav .links,
:root[data-theme="light"] .nav .links a{color:#2A2622}
.nav .acct,.nav .cart{color:#EDEAE4;opacity:.8}
.nav .acct:hover,.nav .cart:hover{opacity:1}

/* sagetile din hero fara slide-uri: raman vizibile, dar inactive */
.hero-live .harrow.idle{opacity:.42;cursor:default;pointer-events:none}
.hero-live .harrow.idle:hover{background:color-mix(in srgb,var(--surface) 72%,transparent);
  border-color:var(--rule)}

/* ==================== pagina de produs: About + clip, ca la ei ==================== */
.pabout{position:relative;margin-top:clamp(34px,4.6vw,66px);
  background:var(--ink2);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(26px,3.2vw,44px) clamp(22px,3vw,44px) clamp(28px,3.4vw,46px);
  overflow:hidden}
.pabout::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-lt) 55%,transparent)}
:root[data-theme="light"] .pabout{background:#FBF9F6;border-color:#E6E1D9}
.pabout h2{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,32px);line-height:1.1;margin:0}
.pabout h3{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc-lt);margin:26px 0 12px}
.pabout-body{margin-top:14px;max-width:74ch}
.pabout-body p{margin:0 0 11px;font-size:15.5px;line-height:1.72;color:var(--mute)}
.pabout-body p:last-child{margin-bottom:0}
.pabout-body b,.pabout-body strong{color:var(--bone);font-weight:600}
.pspecs{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:80ch}
.pspecs li{font-size:15px;line-height:1.6;color:var(--mute)}
.pspecs li b{color:var(--bone);font-weight:700;margin-right:6px}
.pspecs li b::after{content:":"}

.pvid{margin-top:clamp(34px,4.6vw,66px);text-align:center}
.pvid h2{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,46px);line-height:1.04;margin:0}
.pvid .seyebrow{margin-bottom:11px}
.pvid-sub{margin:13px auto 0;max-width:56ch;font-size:15.5px;line-height:1.6;color:var(--mute)}
.pvid-stage{position:relative;margin-top:clamp(22px,3vw,36px);border-radius:18px;
  overflow:hidden;aspect-ratio:16/9;background:var(--surface-2);
  border:1px solid var(--rule);display:grid;place-items:center}
.pvid-stage video,.pvid-stage img{width:100%;height:100%;object-fit:cover;display:block}
.pvid-stage.empty{background:
  radial-gradient(ellipse 60% 70% at 50% 45%, color-mix(in srgb,var(--acc) 13%,transparent), transparent 68%),
  var(--surface-2)}
.pvid-play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:var(--acc);
  box-shadow:0 16px 40px -12px color-mix(in srgb,var(--acc) 70%,transparent)}
.pvid-stage:not(.empty) .pvid-play{display:none}
.pvid-tag{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);
  z-index:3;text-align:left;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.pvid-b{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--acc);border-radius:999px;padding:5px 11px}
.pvid-l{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(17px,1.9vw,26px);line-height:1.1;color:#FFF8EC;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* ==================== pagina cu toate produsele ==================== */
.collpage{padding-block:clamp(34px,4.4vw,64px) clamp(56px,7vw,96px)}
.collhead{max-width:640px;display:block}
.collhead .seyebrow{margin-bottom:12px}
.collhead h2{display:block;width:100%;font-family:var(--disp);font-weight:900;
  letter-spacing:-.035em;font-size:clamp(30px,4.3vw,62px);line-height:1;margin:0}
.collhead p{margin-top:13px;font-size:15.5px;line-height:1.6;color:var(--mute)}
.collpage-desc{margin-top:13px;font-size:15.5px;line-height:1.65;color:var(--mute)}
.collpage-desc p{margin:0 0 9px}
.collgrid{display:grid;gap:clamp(12px,1.2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-top:clamp(22px,3vw,36px)}
.collgrid .pcard{flex:none}
.collgrid .pcard-p s{margin-left:8px;opacity:.55;font-size:14px}
.collempty{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.collempty p{margin:0;color:var(--mute);font-size:16px}
@media(max-width:560px){.collgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ==================== cutia 3D de pe pagina de produs ==================== */
/* Sase fete reale, nu poze pe cadre. Raportul cutiei: 2000 x 2600 x 440. */
.b3{
  --b3w:clamp(196px,25vw,330px);
  --b3h:calc(var(--b3w) * 1.3);
  --b3d:calc(var(--b3w) * .22);
  position:relative;display:grid;place-items:center;
  padding-block:clamp(26px,5vw,62px);
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
.b3:active{cursor:grabbing}
.b3::before{content:"";position:absolute;top:46%;left:50%;
  width:min(90%,470px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;filter:blur(58px);opacity:.58;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--b3g,#FF2E9E) 0%,transparent 66%)}
.b3-floor{position:absolute;left:50%;top:calc(50% + var(--b3h) * .5 - 4px);
  width:calc(var(--b3w) * 1.5);height:calc(var(--b3w) * .24);
  transform:translate(-50%,-50%);filter:blur(11px);z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.70), transparent 70%)}
:root[data-theme="light"] .b3-floor{background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.30), transparent 70%)}
:root[data-theme="light"] .b3::before{opacity:.30}

.b3-scene{position:relative;z-index:1;perspective:1900px;perspective-origin:50% 46%;
  display:grid;place-items:center}
.b3-box{position:relative;width:var(--b3w);height:var(--b3h);
  transform-style:preserve-3d;will-change:transform;
  transform:rotateX(8deg) rotateY(-32deg)}
.b3-f{position:absolute;top:50%;left:50%;display:block;
  background:#16161B no-repeat center/cover;backface-visibility:hidden;
  outline:1px solid rgba(255,255,255,.05)}
.b3-f::after{content:"";position:absolute;inset:0}

.b3-front,.b3-back{width:var(--b3w);height:var(--b3h);
  margin-left:calc(var(--b3w) / -2);margin-top:calc(var(--b3h) / -2)}
.b3-left,.b3-right{width:var(--b3d);height:var(--b3h);
  margin-left:calc(var(--b3d) / -2);margin-top:calc(var(--b3h) / -2)}
.b3-top,.b3-bot{width:var(--b3w);height:var(--b3d);
  margin-left:calc(var(--b3w) / -2);margin-top:calc(var(--b3d) / -2)}

.b3-front{transform:translateZ(calc(var(--b3d) / 2))}
.b3-back {transform:rotateY(180deg) translateZ(calc(var(--b3d) / 2))}
.b3-right{transform:rotateY(90deg)  translateZ(calc(var(--b3w) / 2))}
.b3-left {transform:rotateY(-90deg) translateZ(calc(var(--b3w) / 2))}
.b3-top  {transform:rotateX(90deg)  translateZ(calc(var(--b3h) / 2))}
.b3-bot  {transform:rotateX(-90deg) translateZ(calc(var(--b3h) / 2))}

/* aceeasi umbrire pe fete ca in randarea statica, ca sa arate ca acelasi obiect */
.b3-front::after{background:linear-gradient(104deg,rgba(255,255,255,.09),rgba(255,255,255,0) 40%,rgba(0,0,0,.20))}
.b3-right::after{background:rgba(0,0,0,.56)}
.b3-left::after {background:rgba(0,0,0,.62)}
.b3-back::after {background:rgba(0,0,0,.48)}
.b3-top{background:#1B1B21}  .b3-top::after{background:rgba(0,0,0,.30)}
.b3-bot{background:#1B1B21}  .b3-bot::after{background:rgba(0,0,0,.74)}

.b3-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);pointer-events:none;transition:opacity .45s}
.b3.touched .b3-hint{opacity:0}

@media(max-width:620px){ .b3{--b3w:200px} }

/* cand in shot sta cutia 3D, glow-ul vine de la ea, nu si de la container */
.pph .shot-3d{padding:0}
.pph .shot-3d::before{display:none}

/* ==================================================================
   v58 - pagina de produs: glow mai mare, pastile DAW mai mici,
   player mai calm, descrierea scoasa din coloana de cumparare.
   Nu atinge fisierele cutiei.
   ================================================================== */

/* ---------- 1. glow mult mai puternic in spatele cutiei ---------- */
#pop .pph .shot{--pglow:var(--acc,#FF2E9E); --pglow-hot:var(--acc-lt,#FF6FC4)}
.pph .shot::before{
  width:min(120%,660px) !important; filter:blur(84px) !important; opacity:1 !important;
  background:radial-gradient(circle,
    var(--pglow) 0%,
    color-mix(in srgb, var(--pglow) 52%, transparent) 36%,
    transparent 70%) !important}
.pph .shot::after{
  width:min(78%,430px); filter:blur(54px); opacity:.95;
  background:radial-gradient(circle,
    var(--pglow-hot) 0%,
    var(--pglow) 42%,
    transparent 72%)}
:root[data-theme="light"] .pph .shot::before{opacity:.42 !important}
:root[data-theme="light"] .pph .shot::after{opacity:.30}

/* ---------- 2. pastilele de DAW, mai mici ---------- */
/* flex, nu grila: pastilele se string pe latimea textului, ca la ei,
   in loc sa se intinda pe toata coloana */
.dawpick{padding:13px 13px 14px; border-radius:14px}
.dawpick .dp-h{margin-bottom:9px}
.dawpick .dp-t{font-size:10.5px; letter-spacing:.13em}
.dawpick .dp-s{font-size:11.5px}
.dawpick .dp-grid{display:flex; flex-wrap:wrap; gap:7px; grid-template-columns:none}
.dawpick .dp{flex:0 0 auto; flex-direction:row; padding:8px 13px; gap:7px;
  white-space:nowrap}
.dawpick .dp img{width:16px; height:16px}
.dawpick .dp span{font-size:12px}
.dawpick .dp span i{font-size:8.5px; margin-left:5px; letter-spacing:.08em}

/* ---------- 3. playerul before / after ---------- */
.pph .ab.shotab{
  margin-top:14px; padding:14px 16px; border-radius:18px;
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  border:1px solid var(--rule);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -26px rgba(0,0,0,.9)}
.pph .ab .ab-top{display:flex; align-items:center; gap:14px}

.pph .ab .ab-play{
  flex:0 0 44px; width:44px; height:44px; border-radius:999px;
  background:linear-gradient(180deg,#FF5A4B,#E8392F); color:#fff;
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--acc) 82%, transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), filter .2s}
.pph .ab .ab-play:hover{background:linear-gradient(180deg,#FF6A5C,#F04438); transform:scale(1.06)}
.pph .ab .ab-play:active{transform:scale(.97)}

.pph .ab .ab-meta{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px}
.pph .ab .ab-h{font-size:13.5px; font-weight:700; color:var(--bone); letter-spacing:-.01em}
.pph .ab .ab-s{font-size:11.5px; color:var(--mute)}

.pph .ab .ab-wave{
  position:relative; height:20px; margin-top:3px; overflow:hidden;
  background:none; border-radius:0; flex:none; min-width:0}
.pph .ab .ab-wave::before{content:none}
.ab-bars{position:absolute; left:0; top:0; bottom:0; width:900px;
  display:flex; align-items:center; gap:5px; pointer-events:none}
.ab-bars i{flex:0 0 3px; width:3px; border-radius:2px;
  background:color-mix(in srgb, var(--bone) 24%, transparent)}
.pph .ab .ab-prog{position:absolute; left:0; top:0; bottom:0; width:0;
  overflow:hidden; background:none; opacity:1;
  transition:width .08s linear}
.ab-bars.on i{background:var(--acc)}

.pph .ab .ab-sw{
  flex:0 0 auto; border:1px solid var(--rule); border-radius:999px; padding:3px;
  background:color-mix(in srgb, var(--ink) 55%, transparent); overflow:visible}
.pph .ab .ab-b{
  border-radius:999px; padding:7px 14px; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--mute);
  transition:background .26s cubic-bezier(.2,.8,.2,1), color .26s}
.pph .ab .ab-b.on{
  background:linear-gradient(180deg,#FF5A4B,#E8392F); color:#fff;
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--acc) 80%, transparent)}
.pph .ab .ab-note{display:none}

@media(max-width:560px){
  .pph .ab .ab-top{flex-wrap:wrap}
  .pph .ab .ab-meta{flex:1 1 100%; order:2}
  .pph .ab .ab-sw{order:3; margin-left:auto}
}
@media(prefers-reduced-motion:reduce){
  .pph .ab .ab-play,.pph .ab .ab-b,.pph .ab .ab-prog{transition:none}
}

/* ---------- 4. descrierea nu mai sta langa buton ---------- */
.pph .pdesc{display:none}
.pdesc-below{max-width:62ch; margin:0 auto; padding-block:6px 4px}
.pdesc-below .lede{margin:0; font-size:16px; line-height:1.75; color:var(--mute)}
.pdesc-below .lede b{color:var(--bone); font-weight:600}

/* ==================================================================
   v59 - cutia mai mare, glow mai aprins, meniul Presets se deschide
   ca la ei. Nicio poza nu e atinsa.
   ================================================================== */

/* ---------- 1. cutia 3D, mai mare ---------- */
.b3{--b3w:clamp(238px,31vw,408px)}
@media(max-width:620px){ .b3{--b3w:252px} }
/* varianta cu poza statica, pentru produsele fara cutie rotativa */
.pph .shot img{max-height:clamp(380px,50vw,640px)}

/* ---------- 2. glow mai mare si mai aprins in spatele cutiei ----------
   Doua straturi: un halou larg care coloreaza tot fundalul si un miez
   cald chiar in spatele cutiei. Clipul e taiat din ::before, deci
   umbrele de sub cutie raman vizibile. */
.b3::before{
  width:min(150%,780px) !important; filter:blur(92px) !important; opacity:1 !important;
  background:radial-gradient(circle,
    #FF7A55 0%,
    var(--b3g,#FF2E9E) 24%,
    color-mix(in srgb, var(--b3g,#FF2E9E) 48%, transparent) 46%,
    transparent 74%) !important}
.b3::after{content:"";position:absolute; top:44%; left:50%;
  width:min(90%,450px); aspect-ratio:1/1; transform:translate(-50%,-50%);
  border-radius:50%; filter:blur(54px); opacity:.95; z-index:0; pointer-events:none;
  background:radial-gradient(circle, #FFB08A 0%, #FF5533 38%, transparent 72%)}
:root[data-theme="light"] .b3::before{opacity:.34 !important}
:root[data-theme="light"] .b3::after{opacity:.26}

/* ---------- 3. meniul Presets: se desface din nav spre exterior ----------
   Panoul nu e scalat (textul ar iesi neclar): i se decupeaza marginile
   cu clip-path, de la o pastila mica sub buton pana la panoul intreg.
   Insetul final e negativ ca sa nu taie si umbra de sub panou. */
.nav .mega-in{
  clip-path:inset(0 42% 86% 42% round 26px);
  opacity:.25;
  transition:clip-path .44s cubic-bezier(.22,.85,.26,1), opacity .24s ease;
  will-change:clip-path}
.nav .has-menu:hover .mega-in,
.nav .has-menu:focus-within .mega-in{
  clip-path:inset(-12px -64px -80px -64px round 20px);
  opacity:1}

.nav .mega .mg{--d:.10s; opacity:0; transform:translate3d(0,9px,0);
  transition:opacity .30s ease var(--d),
             transform .36s cubic-bezier(.2,.8,.2,1) var(--d),
             background .16s ease 0s}
.nav .has-menu:hover .mega .mg,
.nav .has-menu:focus-within .mega .mg{opacity:1; transform:none}
.nav .mega .mg:nth-child(2){--d:.15s}
.nav .mega .mg:nth-child(3){--d:.20s}
.nav .mega .mg:nth-child(4){--d:.25s}

@media(prefers-reduced-motion:reduce){
  .nav .mega-in{clip-path:none; opacity:1; transition:none}
  .nav .has-menu:hover .mega-in,
  .nav .has-menu:focus-within .mega-in{clip-path:none}
  .nav .mega .mg{opacity:1; transform:none; transition:background .16s}
}

/* ==================================================================
   v60 - tabelul cu exemple audio, cate un comutator Raw/Mixed pe rand
   ================================================================== */
.abt{padding-block:clamp(34px,5vw,58px)}
.abt h2{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,3.4vw,40px);line-height:1.04;margin:6px 0 20px;text-wrap:balance}

.abt-card{border:1px solid var(--rule);border-radius:18px;overflow:hidden;
  background:color-mix(in srgb, var(--surface) 92%, transparent)}

.abt-head,.abt-row{display:grid;align-items:center;
  grid-template-columns:minmax(230px,1.5fr) minmax(150px,1.1fr) 110px 110px 132px;
  gap:18px;padding:0 22px}
.abt-head{height:44px;border-bottom:1px solid var(--rule)}
.abt-head span{font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.abt-head .abt-c-sw{text-align:right}

.abt-row{min-height:62px;border-bottom:1px solid var(--rule);
  transition:background .18s}
.abt-row:last-of-type{border-bottom:0}
.abt-row:hover{background:color-mix(in srgb, var(--bone) 4%, transparent)}
.abt-row audio{display:none}

.abt-audio{display:flex;align-items:center;gap:12px;min-width:0}
.abt-play{flex:0 0 32px;width:32px;height:32px;border-radius:999px;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;padding:0;
  background:linear-gradient(180deg,var(--vs-electric,var(--acc-lt)),var(--vs-purple,var(--acc)));
  box-shadow:0 6px 16px -8px color-mix(in srgb, var(--acc) 82%, transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.abt-play:hover{transform:scale(1.08)}
.abt-play:active{transform:scale(.96)}
.abt-play:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

.abt-wave{position:relative;flex:1 1 auto;height:24px;min-width:60px;
  overflow:hidden;cursor:pointer}
.abt-bars{position:absolute;left:0;top:0;bottom:0;width:900px;
  display:flex;align-items:center;gap:3px;pointer-events:none}
.abt-bars i{flex:0 0 2px;width:2px;border-radius:2px;
  background:color-mix(in srgb, var(--bone) 22%, transparent)}
.abt-bars.on i{background:var(--acc)}
.abt-prog{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;
  transition:width .08s linear}

.abt-time{flex:0 0 auto;font-size:11.5px;color:var(--mute);
  font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

.abt-name{font-size:14.5px;font-weight:700;color:var(--bone);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.abt-preset span{display:inline-block;font-size:11.5px;font-weight:600;color:var(--mute);
  padding:4px 10px;border-radius:999px;border:1px solid var(--rule);
  background:color-mix(in srgb, var(--ink) 40%, transparent)}
.abt-daw{font-size:12.5px;color:var(--mute)}

.abt-sw{justify-self:end;display:flex;border:1px solid var(--rule);border-radius:999px;
  padding:2px;background:color-mix(in srgb, var(--ink) 55%, transparent)}
.abt-b{border:0;cursor:pointer;background:transparent;color:var(--mute);
  font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  transition:background .26s cubic-bezier(.2,.8,.2,1),color .26s}
.abt-b.on{background:linear-gradient(180deg,var(--vs-electric,var(--acc-lt)),var(--vs-purple,var(--acc)));color:#fff;
  box-shadow:0 5px 14px -8px color-mix(in srgb, var(--acc) 80%, transparent)}
.abt-b:focus-visible{outline:2px solid var(--acc);outline-offset:1px}

.abt-note{margin:0;padding:15px 22px;text-align:center;
  font-size:12px;color:var(--dim);border-top:1px solid var(--rule)}

/* mobil: randul se aseaza pe doua linii, capul de tabel dispare */
@media(max-width:860px){
  .abt-head{display:none}
  .abt-row{grid-template-columns:1fr auto;grid-auto-rows:min-content;
    gap:10px 14px;padding:14px 16px}
  .abt-audio{grid-column:1 / -1;order:2}
  .abt-name{grid-column:1;order:1;white-space:normal}
  .abt-sw{grid-column:2;order:1;align-self:start}
  .abt-preset,.abt-daw{order:3;font-size:11.5px}
  .abt-preset{grid-column:1}
  .abt-daw{grid-column:2;justify-self:end}
  .abt-note{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){
  .abt-play,.abt-b,.abt-prog,.abt-row{transition:none}
}

/* ==================================================================
   v61 - cosul in pasi
   ================================================================== */
.cd-head{display:flex;align-items:center;gap:10px}
.cd-bagi{flex:0 0 auto;color:var(--mute)}
.cd-head .cd-x{margin-left:auto}
.cd-ttl .cd-count{display:inline-grid;place-items:center;min-width:20px;height:20px;
  padding-inline:6px;border-radius:999px;background:var(--acc);color:#fff;
  font-size:11px;font-weight:800;margin-left:8px;vertical-align:middle}

.cd-steps{display:flex;gap:5px;padding:0 var(--cdpad,20px)}
.cd-steps i{height:3px;flex:1;border-radius:2px;background:var(--rule);display:block;
  transition:background .3s}
.cd-steps i.on{background:var(--acc)}
.cd-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px var(--cdpad,20px) 0;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.cd-res{display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em;
  text-transform:none;font-weight:500;color:var(--mute)}
.cd-res i{width:6px;height:6px;border-radius:999px;background:var(--acc);display:block}
.cd-res b{color:var(--bone);font-weight:700;font-variant-numeric:tabular-nums}
.cd-lead{padding:10px var(--cdpad,20px) 0}
.cd-lead h3{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;
  font-size:21px;line-height:1.1;margin:0}
.cd-lead p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--mute)}

.cd-pane{display:none}
.cd-pane.on{display:block;animation:cdUp .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes cdUp{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* rand de DAW */
.cd-row{width:100%;display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1.6px solid var(--rule);border-radius:13px;padding:12px 14px;margin-bottom:9px;
  cursor:pointer;text-align:left;color:var(--bone);font-family:var(--ui);
  transition:border-color .2s,background .2s,transform .16s}
.cd-row:hover{border-color:rgba(255,255,255,.3)}
.cd-row:active{transform:scale(.99)}
.cd-row.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
.cd-row img{width:26px;height:26px;object-fit:contain;flex:0 0 26px}
.cd-row .cd-sq{width:26px;height:26px;border-radius:7px;background:var(--surface-2);flex:0 0 26px}
.cd-row b{flex:1;font-size:14px;font-weight:700}
.cd-row .cd-chev{color:var(--dim)}

/* cadoul */
.cd-gift{text-align:center;padding-block:14px}
.cd-giftimg{position:relative;display:inline-grid;place-items:center;margin-bottom:14px}
.cd-giftimg::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  filter:blur(34px);opacity:0;transition:opacity .55s;
  background:radial-gradient(circle,var(--acc),transparent 68%)}
.cd-gift.won .cd-giftimg::before{opacity:.6}
.cd-giftimg img{position:relative;width:auto;height:150px;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));
  transition:transform .55s cubic-bezier(.16,.84,.24,1)}
.cd-gift.won .cd-giftimg img{transform:scale(1.07)}
.cd-giftimg .cd-q{position:absolute;top:-4px;right:-12px;width:30px;height:30px;
  border-radius:999px;background:var(--bone);color:var(--ink);display:grid;place-items:center;
  font-weight:800;font-size:15px;transition:opacity .3s,transform .3s}
.cd-gift.won .cd-q{opacity:0;transform:scale(.6)}
.cd-gift h4{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.cd-gift.won h4{color:var(--acc)}
.cd-gift p{margin:6px 0 0;color:var(--mute);font-size:13px}

/* al doilea produs */
.cd-up{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:16px}
.cd-badge{display:inline-flex;gap:6px;align-items:center;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.cd-uptop{display:flex;gap:14px;margin-top:11px}
.cd-uptop img{width:72px;height:auto;align-self:start;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.cd-up h4{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em}
.cd-why{margin:5px 0 0;color:var(--mute);font-size:12.5px;line-height:1.5}
.cd-uppr{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.cd-uppr b{font-size:20px;font-weight:800}
.cd-uppr s{color:var(--dim);font-size:13px}

/* treptele */
.cd-tiers{border:1.6px solid var(--acc);border-radius:16px;padding:16px 14px;text-align:center;
  background:color-mix(in srgb,var(--acc) 8%,transparent);margin-bottom:14px}
.cd-tl{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cd-tbig{font-family:var(--disp);font-size:38px;font-weight:800;letter-spacing:-.03em;
  color:var(--acc);line-height:1.15}
.cd-trow{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-top:10px}
.cd-tier{border:1.6px solid var(--rule);border-radius:12px;background:var(--surface);
  padding:8px 4px;transition:background .28s,border-color .28s,color .28s}
.cd-tier b{display:block;font-size:15px;font-weight:800}
.cd-tier span{display:block;font-size:10px;color:var(--mute);margin-top:2px}
.cd-tier.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cd-tier.on span{color:rgba(255,255,255,.86)}
.cd-tnext{margin:11px 0 0;font-size:12.5px;color:var(--mute)}
.cd-tnext b{color:var(--acc)}

.cd-free{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc);margin-left:6px}

/* butoanele din subsol */
.cd-actions{display:grid;gap:8px}
.cd-btn{border:0;cursor:pointer;width:100%;border-radius:12px;padding:15px 20px;
  font-family:var(--ui);font-size:13.5px;font-weight:800;letter-spacing:.05em;
  transition:filter .2s,transform .16s,background .2s}
.cd-btn.go{background:linear-gradient(90deg,var(--acc,#FF2E9E),var(--acc-lt,#FF5CB8) 45%,color-mix(in srgb,var(--acc,#FF2E9E) 72%,black));color:#fff;
  box-shadow:0 14px 34px -16px color-mix(in srgb,var(--acc) 80%,transparent)}
.cd-btn.go:hover:not([disabled]){filter:brightness(1.07);transform:translateY(-1px)}
.cd-btn.dark{background:var(--bone);color:var(--ink)}
.cd-btn.dark:hover{filter:brightness(.94)}
.cd-btn.ghost{background:transparent;color:var(--mute);border:1px solid var(--rule)}
.cd-btn.ghost:hover{color:var(--bone);border-color:rgba(255,255,255,.3)}
.cd-btn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cd-hint{margin:0;text-align:center;font-size:12.5px;color:var(--mute);padding:6px 0}
.cd-hint b{color:var(--bone)}
.cd-guar{margin:2px 0 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:10.5px;color:var(--dim)}
.cd-back{background:none;border:0;color:var(--mute);font-family:var(--ui);font-size:12.5px;
  cursor:pointer;padding:6px}
.cd-back:hover{color:var(--bone)}
.cd-q2{display:inline-flex;align-items:center;gap:2px}

@media(prefers-reduced-motion:reduce){
  .cd-pane.on{animation:none}
  .cd-btn,.cd-row,.cd-tier,.cd-giftimg img,.cd-giftimg::before,.cd-q{transition:none}
}

/* hero construit din produse: numele produsului e titlul, cutia se schimba cu el */
.hslide .hpre{display:block;font-family:var(--ui);font-weight:600;
  font-size:clamp(13px,1.2vw,17px);letter-spacing:.02em;color:var(--mute);
  text-transform:none;margin-bottom:.25em}
.hslide h1.ln em{display:block;font-style:normal;color:var(--bone)}
.hcta b{font-weight:800;margin-left:9px;opacity:.9}
.hstage .hbox{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .42s ease,visibility .42s}
.hstage .hbox.on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){ .hstage .hbox{transition:none} }

/* randul de produse de sub hero */
.hpick{padding:18px max(24px,calc((100% - 1420px) / 2)) 22px;display:flex;
  flex-direction:column;gap:11px;position:relative;z-index:4}
.hpick-l{font-size:12px;color:var(--mute)}
.hpick-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.hpick-row::-webkit-scrollbar{display:none}
.hpill{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:7px 15px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  color:var(--mute);font-family:var(--ui);font-size:13px;font-weight:600;
  white-space:nowrap;text-decoration:none;
  transition:background .24s,border-color .24s,color .24s,transform .18s}
.hpill img{width:20px;height:26px;object-fit:contain;border-radius:3px}
.hpill:hover{color:var(--bone);border-color:rgba(255,255,255,.3)}
.hpill:active{transform:scale(.97)}
.hpill.on{background:var(--acc);border-color:var(--acc);color:#fff}
.hpill.on img{filter:brightness(1.1)}
.hpill.all{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}
.hpill.all i{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;
  background:rgba(255,255,255,.22)}
.hpill:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
:root[data-theme="light"] .hpill:not(.on):not(.all){background:#FFFFFF}
@media(prefers-reduced-motion:reduce){ .hpill{transition:none} }

/* Titlul, textul si butoanele din hero pornesc ascunse si sunt aratate de
   animatia de intrare, care lucreaza pe ID-uri. Slide-urile 2, 3, ... nu au
   ID-uri, deci le facem vizibile din CSS; intrarea lor o da hslidein. */
.hero-live .hslide .ln,
.hero-live .hslide .hlede,
.hero-live .hslide .hbadge,
.hero-live .hslide .habrow,
.hero-live .hslide .hbtns{opacity:1}

/* Sagetile stateau pe marginile hero-ului si cadeau peste titlu.
   Le mutam sub cutie, centrate pe coloana din dreapta, ca la referinta. */
@media(min-width:861px){
  .hero-live .harrow{top:auto;bottom:18px;transform:none}
  .hero-live .harrow.prev{left:auto;right:calc(25% + 36px)}
  .hero-live .harrow.next{right:calc(25% - 36px)}
}
@media(max-width:860px){
  .hero-live .harrow{top:auto;bottom:14px;transform:none;width:44px;height:44px}
  .hero-live .harrow.prev{left:calc(50% - 52px)}
  .hero-live .harrow.next{right:calc(50% - 52px)}
}

/* ==================================================================
   v64 - hero de tip pagina de produs: player, linie, card cu exemple,
   buton mare de cumparare care urmeaza produsul ales
   ================================================================== */
.hero-live .habrow{display:flex;align-items:center;gap:12px;opacity:0}
.hab-play{width:48px;height:48px;border-radius:999px;border:0;cursor:pointer;flex:0 0 48px;
  display:grid;place-items:center;color:#fff;padding:0;
  background:linear-gradient(180deg,var(--vs-electric,var(--acc-lt)),var(--vs-purple,var(--acc)));
  box-shadow:0 10px 26px -10px color-mix(in srgb,var(--acc) 85%,transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.hab-play:hover{transform:scale(1.07)}
.hab-play:active{transform:scale(.96)}
.hab-play:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.hab-sw{display:flex;border:1px solid var(--rule);border-radius:999px;padding:3px;
  background:color-mix(in srgb,var(--surface) 80%,transparent)}
.hab-b{border:0;background:transparent;cursor:pointer;color:var(--mute);font-family:var(--ui);
  font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;white-space:nowrap;
  transition:background .26s cubic-bezier(.2,.8,.2,1),color .26s}
.hab-b.on{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc-lt)}
.hab-b:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.hero-live .hcap{margin:12px 0 0;font-size:12.5px;color:var(--dim);opacity:0}
.hero-live .hslide .hcap{opacity:1}

/* blocul de sub randul de produse */
.hsell{padding:0 max(24px,calc((100% - 1420px) / 2)) 30px;
  display:flex;flex-direction:column;gap:20px;position:relative;z-index:4}
.hsell-rule{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 20%,transparent))}

.hhear{display:inline-flex;align-items:center;gap:18px;align-self:flex-start;max-width:100%;
  text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--rule);border-radius:999px;padding:9px 9px 9px 22px;
  transition:border-color .2s,transform .2s,background .2s}
.hhear:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.hhear-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hhear-t b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.hhear-t i{font-style:normal;font-size:12px;color:var(--mute)}
.hhear-p{flex:0 0 38px;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--vs-electric,var(--acc-lt)),var(--vs-purple,var(--acc)));color:#fff;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--acc) 85%,transparent)}

.hsell-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hbuy{display:none}
.hbuy.on{display:block}
.hbuy form{margin:0}
.hbuy button{display:inline-flex;align-items:center;gap:16px;border:0;cursor:pointer;color:#fff;
  border-radius:999px;padding:16px 16px 16px 28px;
  font-family:var(--ui);font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--acc,#FF2E9E),var(--acc-lt,#FF5CB8) 45%,color-mix(in srgb,var(--acc,#FF2E9E) 72%,black));
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--acc) 85%,transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s}
.hbuy button[disabled]{opacity:.5;cursor:default}
.hbuy b{font-weight:800;margin-left:10px;opacity:.92}
.hbuy button:hover:not([disabled]){transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 24px 50px -18px color-mix(in srgb,var(--acc) 85%,transparent)}
.hbuy button i{width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.22);
  display:grid;place-items:center;font-style:normal}
.hbuy button:focus-visible{outline:3px solid var(--bone);outline-offset:3px}
.tpl-presets .hbuy button{background:linear-gradient(90deg,var(--vs-purple),var(--vs-electric) 55%,var(--vs-grape2))}
/* .hbuy2 nu mai e folosit - butonul dublat a fost scos */
.hbuy2{color:var(--mute);font-size:14.5px;font-weight:600;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s}
.hbuy2:hover{color:var(--bone)}

:root[data-theme="light"] .hhear{background:#FFFFFF}
@media(max-width:620px){
  .hsell{gap:16px;padding-bottom:24px}
  .hhear{padding-left:16px;gap:12px;width:100%}
  .hbuy,.hbuy form,.hbuy button{width:100%}
  .hbuy button{justify-content:space-between;font-size:14.5px;padding-left:22px}
  .hsell-row{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .hab-play,.hab-b,.hhear,.hbuy{transition:none}
}

/* barele mici de langa cutie, ca la referinta: statice, doar un semn vizual */
.hstage .hflank{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:4px;pointer-events:none;z-index:0}
.hstage .hflank i{display:block;width:3px;border-radius:2px;
  background:color-mix(in srgb, var(--bone) 34%, transparent);
  transform-origin:50% 50%;
  animation:hflankpulse var(--du,1400ms) ease-in-out infinite alternate;
  animation-delay:var(--dl,0ms);will-change:transform}
@keyframes hflankpulse{
  from{transform:scaleY(.42)}
  to  {transform:scaleY(1.28)}}
@media(prefers-reduced-motion:reduce){
  .hstage .hflank i{animation:none;transform:none}}
.hstage .hflank.l{right:calc(50% + var(--fgap,150px));flex-direction:row-reverse;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 62%);
  mask-image:linear-gradient(90deg,transparent,#000 62%)}
.hstage .hflank.r{left:calc(50% + var(--fgap,150px));
  -webkit-mask-image:linear-gradient(270deg,transparent,#000 62%);
  mask-image:linear-gradient(270deg,transparent,#000 62%)}
:root[data-theme="light"] .hstage .hflank i{background:rgba(20,18,16,.26)}
@media(max-width:1100px){ .hstage{--fgap:120px} }
@media(max-width:860px){ .hstage .hflank{display:none} }

/* playerul din hero arata la fel si cand e doar o scurtatura spre tabel */
a.hab-play{text-decoration:none}
a.hab-b{text-decoration:none;display:inline-flex;align-items:center}

/* ==================================================================
   v68 - bara de redare din hero: merge de la stanga la dreapta
   Doua straturi de bare identice, pas fix. Cel de sus e taiat de
   .hab-prog, a carui latime o misca JS-ul in timp ce canta.
   ================================================================== */
.hab-wave{position:relative;display:block;flex:1 1 auto;
  height:34px;min-width:90px;max-width:300px;
  overflow:hidden;cursor:pointer}
.hab-wave-off{cursor:default;opacity:.5}
.hab-bars{position:absolute;left:0;top:0;bottom:0;width:322px;
  display:flex;align-items:center;gap:4px;pointer-events:none}
.hab-bars i{flex:0 0 3px;width:3px;border-radius:2px;
  background:color-mix(in srgb, var(--bone) 24%, transparent)}
.hab-bars.on i{background:var(--acc)}
.hab-prog{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;
  transition:width .08s linear;pointer-events:none}
.hab-time{flex:0 0 auto;font-size:12px;color:var(--mute);
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right}

@media(max-width:860px){
  .hab-wave{max-width:300px;height:30px}
  .hab-time{display:none}
}
/* pe telefon bara trece pe randul ei, ca sa nu ramana un ciot de 100px */
@media(max-width:560px){
  .hab-wave{flex:1 1 100%;order:3;max-width:300px}
}
@media(prefers-reduced-motion:reduce){
  .hab-prog{transition:none}
}
.hero-live .habrow{flex-wrap:wrap;width:100%;max-width:620px}
.hab-sw{flex:0 0 auto}

/* nota de sub lista de DAW-uri din cos */
.cd-dawnote{margin:14px 2px 0;font-size:12.5px;line-height:1.5;color:var(--dim)}

/* DAW-uri care nu sunt inca disponibile: se vad, dar nu se pot alege */
.cd-row.off{cursor:default;opacity:.45;border-style:dashed}
.cd-row.off:hover{border-color:var(--rule);transform:none}
.cd-row.off img,.cd-row.off .cd-sq{filter:grayscale(1)}
.cd-soon{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--rule);
  border-radius:999px;padding:4px 10px;white-space:nowrap}


/* ==================================================================
   v72 - tema deschisa: cosul si tot ce ramasese negru
   Panoul si subsolul cosului aveau culori fixe (#0A0912, #08080F), deci
   pe alb ramaneau negre cu scris negru. Acum urmeaza variabilele.
   ================================================================== */
:root[data-theme="light"] .cd-panel{background:#FFFFFF;
  box-shadow:0 30px 90px rgba(20,18,16,.22)}
:root[data-theme="light"] .cd-foot{background:#F7F5F1}
:root[data-theme="light"] .cd-scrim{background:rgba(20,18,16,.38)}
:root[data-theme="light"] .cd-row{background:#FFFFFF}
:root[data-theme="light"] .cd-row:hover{border-color:rgba(20,18,16,.28)}
:root[data-theme="light"] .cd-q button{background:#F0EDE8}
:root[data-theme="light"] .cd-disc input{background:#FFFFFF}
:root[data-theme="light"] .cd-btn.dark{background:#141210;color:#F7F5F1}
:root[data-theme="light"] .cd-btn.ghost{color:#5E5952}
:root[data-theme="light"] .cd-soon{background:#F0EDE8}
:root[data-theme="light"] .hab-sw{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .hab-bars i{background:rgba(20,18,16,.20)}
:root[data-theme="light"] .abt-bars i{background:rgba(20,18,16,.18)}
:root[data-theme="light"] .abt-card,
:root[data-theme="light"] .hhear{background:#FFFFFF}
:root[data-theme="light"] .hstage .hflank i{background:rgba(20,18,16,.16)}
:root[data-theme="light"] .hpill:hover{border-color:rgba(20,18,16,.3)}
:root[data-theme="light"] .hpill.on,
:root[data-theme="light"] .hpill.all{background:var(--acc);border-color:var(--acc);color:#FFFFFF}

/* linia de deasupra numelui produsului, cu bulina rosie */
.hero-live .heyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-family:var(--ui);font-size:13px;font-weight:700;color:var(--mute);
  letter-spacing:-.005em;opacity:0}
.hero-live .hslide .heyebrow{opacity:1}
.hero-live .heyebrow i{flex:0 0 auto;width:7px;height:7px;border-radius:999px;background:var(--acc)}
@media(max-width:860px){ .hero-live .heyebrow{font-size:12px} }

/* ==================================================================
   v72 - banda de anunturi din capul paginii
   Doua copii identice, translatate cu -50% din pista: bucla nu se vede.
   ================================================================== */
.tk{background:var(--tk-bg,#FF7FD1);color:var(--tk-fg,#fff);
  overflow:hidden;position:relative;z-index:31;
  padding:13px 0;user-select:none}
.tk-track{display:flex;width:max-content;
  animation:tkrun var(--tk-s,30s) linear infinite;will-change:transform}
.tk-run{display:flex;align-items:center;flex:0 0 auto}
.tk-i{flex:0 0 auto;font-family:var(--ui);font-size:15.5px;font-weight:800;
  letter-spacing:-.012em;white-space:nowrap;padding:0 26px}

/* valul: fiecare litera urca si coboara, cu un decalaj dat de pozitia ei,
   deci unda pare ca trece prin cuvant. Literele sunt taiate de JS. */
.tk-i span{display:inline-block;white-space:pre;
  animation:tkwave 1.9s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -70ms);will-change:transform}
@keyframes tkwave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.tk-a{flex:0 0 auto;display:grid;place-items:center;opacity:.85}
.tk:hover .tk-track{animation-play-state:paused}
@keyframes tkrun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media(max-width:860px){ .tk{padding:11px 0} .tk-i{font-size:13.5px;padding:0 18px} }
@media(prefers-reduced-motion:reduce){
  .tk-track{animation:none}
  .tk-i span{animation:none}
  .tk{overflow-x:auto}
}

/* Butonul de cumparare are aceeasi latime la orice produs: altfel sare de
   la un slide la altul, dupa cat de lung e numele. */
.hbuy button{min-width:330px;max-width:100%;justify-content:space-between}
@media(max-width:560px){ .hbuy button{min-width:0;width:100%} }

/* ==================================================================
   v73 - roata de reduceri
   Feliile sunt conuri taiate cu conic-gradient pe fiecare span, asa ca
   nu avem nevoie de imagini. Textul sta pe raza feliei, rotit cu unghiul
   ei din mijloc.
   ================================================================== */
.wh{position:fixed;inset:0;z-index:70;display:none}
.wh.open{display:block}
.wh-scrim{position:absolute;inset:0;background:rgba(6,5,8,.66);
  opacity:0;transition:opacity .3s ease}
.wh.open .wh-scrim{opacity:1}
.wh-card{position:absolute;left:50%;top:50%;width:min(440px,calc(100vw - 28px));
  max-height:calc(100vh - 28px);overflow-y:auto;
  transform:translate(-50%,-46%) scale(.96);opacity:0;
  transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .28s ease;
  background:var(--surface);border:1px solid var(--rule);border-radius:22px;
  padding:26px 24px 24px;text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.55)}
.wh.open .wh-card{transform:translate(-50%,-50%) scale(1);opacity:1}
:root[data-theme="light"] .wh-card{background:#FFFFFF;box-shadow:0 40px 100px rgba(20,18,16,.25)}
:root[data-theme="light"] .wh-scrim{background:rgba(20,18,16,.42)}

.wh-x{position:absolute;right:14px;top:12px;width:32px;height:32px;border-radius:999px;
  border:1px solid var(--rule);background:transparent;color:var(--mute);
  font-size:20px;line-height:1;cursor:pointer}
.wh-x:hover{color:var(--acc);border-color:var(--acc)}

.wh-eye{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.wh-eye i{width:6px;height:6px;border-radius:999px;background:var(--acc)}
.wh-copy h3{margin:10px 0 6px;font-family:var(--disp);font-size:27px;font-weight:800;
  letter-spacing:-.03em;color:var(--bone)}
.wh-copy p{color:var(--mute);font-size:14px;margin:0 auto;max-width:330px}

.wh-stage{position:relative;width:min(330px,72vw);aspect-ratio:1;margin:22px auto 20px}
.wh-disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  border:6px solid var(--surface-2);
  box-shadow:0 18px 50px -18px color-mix(in srgb,var(--acc) 70%,transparent);
  transform:rotate(0deg)}
.wh-disc.spin{transition:transform 4.6s cubic-bezier(.12,.78,.16,1)}
/* trei tonuri care se rotesc, ca doua felii alaturate sa nu se lipeasca
   vizual atunci cand sunt trei, cinci sau sase premii */
.wh-seg{position:absolute;inset:0;--c:var(--acc-lt,#FF7FD1);
  background:conic-gradient(from var(--a), var(--c) 0deg var(--b), transparent var(--b))}
.wh-seg:nth-child(3n+2){--c:#17171F}
.wh-seg:nth-child(3n+3){--c:color-mix(in srgb,var(--acc,#FF2E9E) 72%,black)}
:root[data-theme="light"] .wh-seg:nth-child(3n+2){--c:#141210}

/* Textul sta pe bisectoarea feliei, dar drept: rotim un strat cat tot
   discul pana cand varful lui ajunge in mijlocul feliei, apoi rotim
   textul inapoi cu acelasi unghi. Asa nu apare niciodata cu susul in jos. */
.wh-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.wh-lb{position:absolute;inset:0;transform:rotate(var(--m))}
.wh-lb b{position:absolute;left:50%;top:9%;
  transform:translateX(-50%) rotate(calc(var(--m) * -1));
  font-family:var(--ui);font-size:14px;font-weight:800;white-space:nowrap;
  line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.wh-pin{position:absolute;left:50%;top:-4px;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;
  border-top:20px solid var(--bone);filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.wh-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;background:var(--surface);
  border:5px solid var(--surface-2)}

.wh-go{width:100%;padding:16px 22px;border:0;border-radius:999px;cursor:pointer;color:#fff;
  font-family:var(--ui);font-size:15.5px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(90deg,var(--acc-lt,#FF7FD1),var(--acc,#FF2E9E) 60%,color-mix(in srgb,var(--acc,#FF2E9E) 72%,black));
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--acc) 85%,transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s}
.wh-go:hover:not([disabled]){transform:translateY(-2px);filter:brightness(1.06)}
.wh-go[disabled]{opacity:.55;cursor:default}
.wh-fine{margin:11px 0 0;font-size:12px;color:var(--dim,var(--mute))}

.wh-won{animation:whpop .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes whpop{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
.wh-woneye{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.wh-won strong{display:block;margin:8px 0 4px;font-family:var(--disp);font-size:34px;
  font-weight:900;letter-spacing:.02em;color:var(--acc)}
.wh-won p{margin:0 0 16px;color:var(--mute);font-size:13.5px}
.wh-wonrow{display:flex;gap:10px}
.wh-copy2,.wh-use{flex:1 1 0;padding:14px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--ui);font-size:14px;font-weight:700}
.wh-copy2{border:1px solid var(--rule);background:transparent;color:var(--bone)}
.wh-copy2:hover{border-color:var(--acc);color:var(--acc)}
.wh-use{border:0;color:#fff;background:linear-gradient(90deg,var(--acc-lt,#FF7FD1),color-mix(in srgb,var(--acc,#FF2E9E) 72%,black))}

.wh-tab{position:fixed;left:16px;bottom:16px;z-index:60;border:0;cursor:pointer;
  padding:12px 20px;border-radius:999px;color:#fff;font-family:var(--ui);
  font-size:13px;font-weight:800;background:linear-gradient(90deg,var(--acc-lt,#FF7FD1),color-mix(in srgb,var(--acc,#FF2E9E) 72%,black));
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7)}
.wh-tab[hidden]{display:none}

@media(max-width:560px){
  .wh-copy h3{font-size:23px}
  .wh-seg b{font-size:12px;padding-left:24%}
}
@media(prefers-reduced-motion:reduce){
  .wh-disc.spin{transition:none}
  .wh-card,.wh-scrim{transition:none}
  .wh-won{animation:none}
}

/* pretul cu treapta aplicata, la pasul cu al doilea produs */
.cd-updeal{display:inline-flex;align-items:center;margin-left:8px;padding:3px 9px;
  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.cd-upfine{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}

/* ==================================================================
   v73 - hero mai compact, masurat dupa referinta
   La ei coloana de continut incepe la ~21% din latimea ferestrei si
   titlul are ~76px la 1900px latime. La noi containerul era 1420px si
   titlul 88px, de aia parea imprastiat si prea jos.
   ================================================================== */
.hero-live{
  min-height:clamp(520px,72vh,760px);
  padding-block:clamp(28px,4.4vh,62px);
  padding-inline:max(24px,calc((100% - 1120px) / 2));
}
.hero-live .hcopy{gap:12px}
.hero-live .ln{font-size:clamp(40px,4.4vw,78px);max-width:11ch}
.hero-live .heyebrow{margin-bottom:2px}
.hero-live .hbadge{padding:7px 14px;font-size:11px}
.hstage{height:clamp(300px,36vw,500px)}
@media(max-width:860px){
  .hero-live{padding-inline:20px}
  .hero-live .ln{font-size:clamp(30px,8.4vw,46px);max-width:none}
  .hstage{height:250px}
}

/* mesajul din editor cand roata nu are inca premii (nu apare pe site) */
.wh-empty{margin:0 auto;max-width:640px;padding:22px 24px;text-align:center;
  border:1.5px dashed var(--rule);border-radius:16px;background:var(--surface)}
.wh-empty b{display:block;font-family:var(--ui);font-size:15px;font-weight:800;color:var(--bone)}
.wh-empty p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--mute)}

/* ==================================================================
   v75 - fereastra "Hear every before & after"
   Se deschide peste pagina. Un singur player pentru toate exemplele.
   ================================================================== */
.ha{position:fixed;inset:0;z-index:75;display:none}
.ha.open{display:block}
.ha-scrim{position:absolute;inset:0;background:rgba(6,5,8,.62);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.ha.open .ha-scrim{opacity:1}
:root[data-theme="light"] .ha-scrim{background:rgba(20,18,16,.38)}

.ha-card{position:absolute;left:50%;top:50%;width:min(940px,calc(100vw - 28px));
  max-height:calc(100vh - 40px);overflow-y:auto;
  transform:translate(-50%,-47%) scale(.97);opacity:0;
  transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .26s ease;
  background:var(--surface);border:1px solid var(--rule);border-radius:24px;
  padding:30px 32px 30px;box-shadow:0 50px 120px rgba(0,0,0,.55)}
.ha.open .ha-card{transform:translate(-50%,-50%) scale(1);opacity:1}
:root[data-theme="light"] .ha-card{background:#F7F5F1;box-shadow:0 50px 120px rgba(20,18,16,.24)}

.ha-x{position:absolute;right:20px;top:18px;width:38px;height:38px;border-radius:999px;
  display:grid;place-items:center;border:1px solid var(--rule);background:var(--surface);
  color:var(--mute);cursor:pointer;transition:.2s}
.ha-x:hover{color:var(--acc);border-color:var(--acc)}
:root[data-theme="light"] .ha-x{background:#FFFFFF}

.ha-eye{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ha-eye i{width:7px;height:7px;border-radius:999px;background:var(--acc)}
.ha-card h3{margin:12px 0 0;font-family:var(--disp);font-size:clamp(26px,3vw,38px);
  font-weight:800;letter-spacing:-.035em;line-height:1.02;color:var(--bone);max-width:15ch}

/* panoul cu produsul ales */
.ha-stage{position:relative;margin:22px 0 18px;display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:26px;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:20px;
  padding:26px 30px 26px 26px}
:root[data-theme="light"] .ha-stage{background:#FFFFFF}
.ha-chip{position:absolute;left:22px;top:18px;z-index:2;
  font-family:var(--ui);font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:#141210;border-radius:999px;padding:6px 13px}
:root[data-theme="light"] .ha-chip{background:#141210}

.ha-art{position:relative;display:grid;place-items:center;min-height:210px}
.ha-art img{max-height:270px;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.ha-noart{font-family:var(--brand);font-size:64px;color:var(--rule)}

.ha-meta{min-width:0}
.ha-meta h4{margin:0;font-family:var(--disp);font-size:clamp(22px,2.4vw,32px);
  font-weight:800;letter-spacing:-.03em;color:var(--bone);line-height:1.05}
.ha-sub{display:flex;align-items:center;gap:8px;margin:8px 0 0;
  font-size:13px;font-weight:600;color:var(--mute)}
.ha-sub i{flex:0 0 auto;width:6px;height:6px;border-radius:999px;background:var(--mute)}

.ha-wave{position:relative;height:30px;margin:22px 0 20px;overflow:hidden;cursor:pointer}
.ha-bars{position:absolute;left:0;top:0;bottom:0;width:680px;
  display:flex;align-items:center;gap:4px;pointer-events:none}
.ha-bars i{flex:0 0 3px;width:3px;border-radius:2px;
  background:color-mix(in srgb, var(--bone) 22%, transparent)}
.ha-bars.on i{background:var(--acc)}
.ha-prog{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;
  transition:width .08s linear;pointer-events:none}
:root[data-theme="light"] .ha-bars i{background:rgba(20,18,16,.18)}

.ha-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ha-play{width:54px;height:54px;flex:0 0 54px;border-radius:999px;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;padding:0;
  background:linear-gradient(180deg,var(--vs-electric,var(--acc-lt)),var(--vs-purple,var(--acc)));
  box-shadow:0 14px 32px -12px color-mix(in srgb,var(--acc) 85%,transparent);
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.ha-play:hover{transform:scale(1.07)}
.ha-side{font-family:var(--ui);font-size:14px;font-weight:700;color:var(--mute);
  transition:color .24s}
.ha-side.on{color:var(--bone)}
.ha-tog{width:52px;height:29px;flex:0 0 52px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule);background:var(--surface);position:relative;padding:0}
.ha-tog i{position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:21px;height:21px;border-radius:999px;background:var(--bone);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),background .26s}
.ha-tog[aria-checked="true"]{background:color-mix(in srgb,var(--acc) 22%,transparent);
  border-color:var(--acc)}
.ha-tog[aria-checked="true"] i{transform:translate(23px,-50%);background:var(--acc)}
.ha-time{margin-left:auto;font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}

/* grila cu toate exemplele */
.ha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ha-pick{display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  padding:9px 13px;border-radius:13px;border:1.6px solid var(--rule);
  background:var(--surface-2);color:var(--mute);font-family:var(--ui);
  font-size:13.5px;font-weight:700;min-width:0;
  transition:border-color .2s,color .2s,background .2s,transform .16s}
:root[data-theme="light"] .ha-pick{background:#FFFFFF}
.ha-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ha-pick img{width:22px;height:28px;flex:0 0 22px;object-fit:contain;border-radius:3px}
.ha-sq{width:22px;height:28px;flex:0 0 22px;border-radius:4px;background:var(--rule)}
.ha-pick:hover{color:var(--bone)}
.ha-pick:active{transform:scale(.985)}
.ha-pick.on{border-color:var(--acc);color:var(--acc);
  background:color-mix(in srgb,var(--acc) 10%,transparent)}

@media(max-width:760px){
  .ha-card{padding:24px 18px;border-radius:20px}
  .ha-stage{grid-template-columns:1fr;gap:14px;padding:44px 18px 20px;text-align:center}
  .ha-art{min-height:150px}
  .ha-art img{max-height:180px}
  .ha-sub{justify-content:center}
  .ha-row{justify-content:center}
  .ha-time{margin-left:0;width:100%;text-align:center}
  .ha-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .ha-card,.ha-scrim,.ha-prog,.ha-tog i{transition:none}
}

/* ==================================================================
   v77 - cadoul sta neclar pana il ceri
   Poza e blurata si desaturata cat timp e surpriza; la Claim, .won se
   pune pe card si blurul dispare intr-o secunda.
   ================================================================== */
.cd-giftimg img{filter:blur(16px) saturate(.55) brightness(.92)
    drop-shadow(0 16px 22px rgba(0,0,0,.5));
  transition:filter .85s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.cd-gift.won .cd-giftimg img{filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}
@media(prefers-reduced-motion:reduce){
  .cd-giftimg img{transition:none}
}

/* ==================================================================
   v78 - cardul "hear all": trei miniaturi suprapuse, ca la referinta
   ================================================================== */
.hhear{padding:9px 9px 9px 12px;gap:14px}
.hhear-st{display:inline-flex;align-items:center;flex:0 0 auto}
.hhear-st img{width:30px;height:38px;object-fit:cover;border-radius:6px;
  border:2px solid var(--surface);background:var(--surface-2);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.hhear-st img + img{margin-left:-13px}
.hhear-st img:nth-child(1){z-index:3;transform:rotate(-5deg)}
.hhear-st img:nth-child(2){z-index:2}
.hhear-st img:nth-child(3){z-index:1;transform:rotate(5deg)}
:root[data-theme="light"] .hhear-st img{border-color:#FFFFFF}
:root[data-theme="light"] .hhear{background:#FFFFFF}

/* fereastra: cutia mai mare, ca la ei */
.ha-stage{grid-template-columns:minmax(0,340px) minmax(0,1fr);padding:30px 34px 30px 24px}
.ha-art{min-height:260px}
.ha-art img{max-height:330px}
@media(max-width:760px){
  .ha-stage{grid-template-columns:1fr}
  .ha-art{min-height:170px}
  .ha-art img{max-height:200px}
}

/* ==================================================================
   v79 - fereastra cu toate produsele (pastila "view all")
   ================================================================== */
.ap{position:fixed;inset:0;z-index:74;display:none}
.ap.open{display:block}
.ap-scrim{position:absolute;inset:0;background:rgba(6,5,8,.62);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.ap.open .ap-scrim{opacity:1}
:root[data-theme="light"] .ap-scrim{background:rgba(20,18,16,.38)}

.ap-card{position:absolute;left:50%;top:50%;width:min(960px,calc(100vw - 28px));
  max-height:calc(100vh - 40px);overflow-y:auto;
  transform:translate(-50%,-47%) scale(.97);opacity:0;
  transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .26s ease;
  background:var(--surface);border:1px solid var(--rule);border-radius:24px;
  padding:30px 32px 32px;box-shadow:0 50px 120px rgba(0,0,0,.55)}
.ap.open .ap-card{transform:translate(-50%,-50%) scale(1);opacity:1}
:root[data-theme="light"] .ap-card{background:#F7F5F1;box-shadow:0 50px 120px rgba(20,18,16,.24)}

.ap-x{position:absolute;right:20px;top:18px;width:38px;height:38px;border-radius:999px;
  display:grid;place-items:center;border:1px solid var(--rule);background:var(--surface);
  color:var(--mute);cursor:pointer;transition:.2s;z-index:2}
.ap-x:hover{color:var(--acc);border-color:var(--acc)}
:root[data-theme="light"] .ap-x{background:#FFFFFF}

.ap-eye{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ap-eye i{width:7px;height:7px;border-radius:999px;background:var(--acc)}
.ap-card h3{margin:12px 0 0;font-family:var(--disp);font-size:clamp(26px,3vw,36px);
  font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--bone)}
.ap-sub{margin:8px 0 0;font-size:14px;color:var(--mute)}

.ap-grid{margin-top:24px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ap-it{display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;
  padding:14px;border-radius:16px;border:1.6px solid var(--rule);
  background:var(--surface-2);color:var(--bone);font-family:var(--ui);
  transition:border-color .2s,transform .18s,background .2s}
:root[data-theme="light"] .ap-it{background:#FFFFFF}
.ap-it:hover{border-color:var(--acc);transform:translateY(-3px)}
.ap-it:active{transform:translateY(0) scale(.99)}
.ap-it:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

.ap-art{position:relative;display:grid;place-items:center;height:172px;
  border-radius:11px;overflow:hidden;
  background:radial-gradient(60% 60% at 50% 45%,
    color-mix(in srgb,var(--acc) 12%,transparent), transparent 70%)}
.ap-art img{max-height:168px;width:auto;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.4))}
.ap-ph{font-family:var(--brand);font-size:42px;color:var(--rule)}
.ap-out{position:absolute;left:8px;top:8px;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--bone);
  background:rgba(0,0,0,.6);border-radius:999px;padding:4px 9px}

.ap-n{font-size:14.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-p{display:flex;align-items:baseline;gap:8px}
.ap-p b{font-size:15px;font-weight:800;color:var(--acc)}
.ap-p s{font-size:12.5px;color:var(--mute)}

@media(max-width:620px){
  .ap-card{padding:24px 16px 26px;border-radius:20px}
  .ap-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .ap-art{height:132px}
  .ap-art img{max-height:128px}
}
@media(prefers-reduced-motion:reduce){
  .ap-card,.ap-scrim,.ap-it{transition:none}
}

/* pagina de produs veche: doar un pas catre pagina principala */
.tohome{min-height:52vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;text-align:center;padding:40px 24px}
.tohome p{margin:0;font-size:15px;color:var(--mute)}
.tohome p b{color:var(--bone)}
.tohome-d{width:26px;height:26px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--acc) 30%,transparent);
  border-top-color:var(--acc);animation:tohomespin .8s linear infinite}
@keyframes tohomespin{to{transform:rotate(360deg)}}
.tohome-l{font-size:14.5px;font-weight:700;color:var(--acc);text-decoration:underline}
@media(prefers-reduced-motion:reduce){ .tohome-d{animation:none} }


/* ====================================================================
   VOCALSYRUP - identitate proprie, doar pe pagina principala
   (.template-index), ca sa nu afecteze deloc magazinul de preseturi
   (care ramane pe paleta lui roz/portocalie existenta).
   ==================================================================== */
.template-index{
  --vs-bg:#09090D; --vs-bg2:#0D0C12; --vs-surf:#15141B; --vs-surf2:#19171F;
  --vs-grape:#180922; --vs-grape2:#210B2D;
  --vs-purple:#8B45F5; --vs-electric:#C77DFF; --vs-lav:#E4C4FF;
  --vs-white:#F3F0EA; --vs-text2:#9B969F; --vs-pink:#FF3B8D;
  --vs-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  /* same generic-token overrides .tpl-presets already carries, so any
     shared/legacy component that still reads the generic --acc/--ink/
     --bone tokens (cart drawer, product quick-view popup, promo wheel)
     renders in the VocalSyrup palette instead of the base MIXLAWS hot
     pink when it happens to render inside the homepage's DOM tree. */
  --ink:#09090D; --surface:#15141B; --surface-2:#19171F;
  --acc:#8B45F5; --acc-lt:#C77DFF; --acc-soft:#E4C4FF;
  --bone:#F3F0EA; --mute:#9B969F; --rule:#2A2440;
  background:var(--vs-bg) !important;
}

/* ====================================================================
   PAGINA "VOCAL PRESETS" (templates/page.presets.json, body class
   tpl-presets - vezi template.suffix in layout/theme.liquid) - aceeasi
   paleta grafit/mov ca VocalSyrup, cerere separata de Gabi. Nu atinge
   alte pagini: tpl-presets apare DOAR pe pagina asta.

   Doua straturi, ca sa recoloram tot fara sa rescriem fiecare regula:
   1) acelasi set de token-uri --vs-* ca pe .template-index, pentru
      codul care deja are fallback var(--vs-x, var(--bone)) (ex: footerul
      .ftx-*, deja scris asa dinainte).
   2) suprascriem token-urile vechi generice (--ink/--acc/--bone/...)
      cu echivalentele mov, pentru restul codului (butoane, nav,
      sectiunea mixlaws-shop) care foloseste direct var(--acc) etc.
   Fonturile (--ui/--disp = Outfit) sunt deja aceleasi peste tot, nu le
   schimbam.
   ==================================================================== */
.tpl-presets{
  --vs-bg:#09090D; --vs-bg2:#0D0C12; --vs-surf:#15141B; --vs-surf2:#19171F;
  --vs-grape:#180922; --vs-grape2:#210B2D;
  --vs-purple:#8B45F5; --vs-electric:#C77DFF; --vs-lav:#E4C4FF;
  --vs-white:#F3F0EA; --vs-text2:#9B969F; --vs-pink:#FF3B8D;
  --vs-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
}
/* ==================================================================
   REPAIR PASS - pagina de presete are DOUA suprafete (clara si
   intunecata), nu una singura. Blocul de mai sus definea --ink/
   --surface/--bone/--mute/--rule direct pe <body class="tpl-presets">
   necondiHonat de tema, care UMBREA mereu valorile deschise puse pe
   <html data-theme="light"> (acolo e setarea implicita a magazinului).
   Rezultatul: fundaluri clare (hex fix, din regulile de mai jos) +
   text ramas "mereu intunecat" => text alb pe alb. Solutia nu e un
   nou set de culori, e sa lasam acelasi mecanism light/dark care
   functioneaza deja pe restul site-ului sa ajunga si aici: cand tema
   e intunecata (comutator), presetele isi pastreaza paleta lor
   violet-intunecata; cand tema e deschisa (implicit), textul/
   bordurile/fundalurile-pe-token urmeaza automat valorile deschise
   deja definite in :root[data-theme="light"] (negru aproape pentru
   text, gri mediu pentru --mute, alb/crem pentru fundaluri). --acc/
   --acc-lt/--acc-soft NU sunt aici: raman mov intotdeauna (definite
   mai departe in fisier, pentru .template-index si .tpl-presets),
   ca sa nu reapara roz-ul vechi MIXLAWS pe tema deschisa.
   ================================================================== */
:root:not([data-theme="light"]) .tpl-presets{
  --ink:#09090D; --surface:#15141B; --surface-2:#19171F;
  --bone:#F3F0EA; --mute:#9B969F; --rule:#2A2440;
  background:var(--ink) !important;
}
.template-index #shopify-section-mxl-ticker{display:none}
/* pila globala "Get 10% off - code LAW10" e un cupon MIXLAWS pentru
   preseturi, fara nicio legatura cu brandul VocalSyrup - o ascundem pe
   Acasa SI pe pagina de presete (acelasi shell VocalSyrup, acelasi motiv;
   codul ramane valabil si vizibil peste tot in rest) */
.template-index #shopify-section-promo,
.tpl-presets #shopify-section-promo{display:none !important}
/* header propriu VocalSyrup - intotdeauna intunecat, indiferent de
   comutatorul global de tema deschisa/inchisa a magazinului MIXLAWS
   (de-asta sunt regulile duplicate sub :root[data-theme="light"]).
   Extins si pe .tpl-presets: pagina de presete foloseste acelasi shell
   (header.liquid -> use_vs_shell), deci are nevoie de exact aceleasi
   regului de fundal/culoare ca Acasa, nu doar de token-urile din #1. */
.template-index .nav,.tpl-presets .nav,
:root[data-theme="light"] .template-index .nav,
:root[data-theme="light"] .tpl-presets .nav{
  background:color-mix(in srgb,var(--vs-bg) 92%,transparent) !important;
  border-bottom:1px solid color-mix(in srgb,var(--vs-lav) 14%,transparent) !important;
  backdrop-filter:blur(10px) saturate(140%);padding-top:0}
.template-index .nav .row,.tpl-presets .nav .row,
:root[data-theme="light"] .template-index .nav .row,
:root[data-theme="light"] .tpl-presets .nav .row{
  background:transparent !important;box-shadow:none !important;border-radius:0 !important;
  margin-inline:auto !important;padding:22px clamp(20px,4vw,28px) !important;max-width:1240px}
.template-index .nav .mark,.tpl-presets .nav .mark{color:var(--vs-white) !important}
.template-index .nav .links a,.tpl-presets .nav .links a{color:color-mix(in srgb,var(--vs-white) 72%,transparent) !important}
.template-index .nav .links a.on,.template-index .nav .links a:hover,
.tpl-presets .nav .links a.on,.tpl-presets .nav .links a:hover{color:var(--vs-lav) !important;
  background:color-mix(in srgb,var(--vs-purple) 16%,transparent) !important}
.template-index .cart,.template-index .acct,.tpl-presets .cart,.tpl-presets .acct{color:var(--vs-white) !important}
.template-index main,.tpl-presets main{background:var(--vs-bg)}
/* REPAIR PASS - gasit prin QA vizual, nu doar din citit codul: in tema
   deschisa, <main> ramanea mereu negru (--vs-bg nu e umbrit de gating-ul
   de mai sus), si se vedea direct in orice zona fara fundal propriu
   (randul cu artisti, cardul "hear every before & after", butonul de
   cumparare) - o banda neagra intre sectiuni deschise. Scopat STRICT pe
   pagina de presete, ca sa nu umblam la Acasa (.template-index main
   ramane neschimbat). */
:root[data-theme="light"] .tpl-presets main{background:var(--ink)}

.vsx-navmark{display:inline-flex;align-items:baseline;gap:0;font-family:var(--ui);
  font-size:21px;font-weight:700;letter-spacing:-.01em;line-height:1;cursor:pointer}
.vsx-navmark .w{color:var(--vs-white) !important}
.vsx-navmark .s{color:var(--vs-lav) !important}
.template-index .nav .mega-in{background:var(--vs-surf) !important;
  border-color:color-mix(in srgb,var(--vs-white) 12%,transparent) !important}
.template-index .nav .mg:hover{background:var(--vs-surf2) !important}
.template-index .nav .mg .mgn{color:var(--vs-white) !important}
.template-index .nav .mg .mgd{color:color-mix(in srgb,var(--vs-white) 50%,transparent) !important}
.template-index .nav .mg .mgp{color:var(--vs-lav) !important}

.vsx{background:var(--vs-bg);color:var(--vs-white)}
.vsx .wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.vsx section{position:relative}
.vsx h1,.vsx h2,.vsx h3{font-family:var(--disp);letter-spacing:-.03em;text-wrap:balance}
.vsx b,.vsx strong{font-weight:800}

.vsx-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--vs-mono);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--vs-lav)}
.vsx-eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--vs-electric);flex:0 0 auto}
.vsx-num{font-family:var(--vs-mono);font-weight:600;font-size:12.5px;color:color-mix(in srgb,var(--vs-white) 45%,transparent);letter-spacing:.02em}

.vsx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ui);font-size:15px;font-weight:700;border-radius:12px;padding:15px 26px;
  cursor:pointer;transition:filter .15s,transform .1s;border:0;text-decoration:none}
.vsx-btn.p{background:var(--vs-lav);color:#140a1d}
.vsx-btn.p:hover{filter:brightness(1.07);transform:translateY(-1px)}
.vsx-btn.p:active{transform:translateY(1px)}
.vsx-btn.s{background:transparent;color:var(--vs-white);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--vs-lav) 40%,transparent)}
.vsx-btn.s:hover{box-shadow:inset 0 0 0 1.5px var(--vs-lav);color:var(--vs-lav)}
.vsx-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.vsx-btn:focus-visible{outline:2px solid var(--vs-lav);outline-offset:3px}

.vsx-specs{font-family:var(--vs-mono);font-weight:600;font-size:12px;letter-spacing:.01em;
  color:color-mix(in srgb,var(--vs-white) 55%,transparent)}

@media(prefers-reduced-motion:reduce){
  .vsx *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- VS: banda de sus dedicata (vs-ticker) ----------
   Fundal mov (var(--vs-grape2)), text alb, font sans (ca pe referinta -
   SF Pro Display/stiva de sistem, nu monospace), fara majuscule fortate,
   viteza marita (secs e inmultit mai putin fata de inainte). */
.vtk{background:var(--vs-grape2);color:#fff;overflow:hidden;position:relative;z-index:31;
  padding:8px 0;user-select:none;border-bottom:1px solid rgba(255,255,255,.08)}
.vtk-track{display:flex;width:max-content;animation:vtkrun var(--s,18s) linear infinite;will-change:transform}
.vtk-run{display:flex;align-items:center;flex:0 0 auto}
.vtk-i{flex:0 0 auto;font-family:var(--ui);font-size:13px;font-weight:600;
  letter-spacing:normal;text-transform:none;white-space:nowrap;padding:0 20px;color:#fff}
.vtk-a{flex:0 0 auto;color:rgba(255,255,255,.5)}
.vtk:hover .vtk-track{animation-play-state:paused}
@keyframes vtkrun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media(prefers-reduced-motion:reduce){ .vtk-track{animation:none} }

/* ---------- VS: hero ---------- */
.vsx-hero{padding-block:clamp(30px,7vh,64px) 0;overflow:clip;position:relative}
.vsx-hero-bgwave{position:absolute;inset:auto 0 0 0;height:46%;min-height:220px;pointer-events:none;z-index:0;
  display:flex;align-items:flex-end;gap:3px;padding-inline:clamp(20px,4vw,48px);
  opacity:.16;-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 92%);
  mask-image:linear-gradient(to top,#000 0%,transparent 92%)}
.vsx-hero-bgwave i{flex:1 1 auto;min-width:2px;max-width:6px;border-radius:2px 2px 0 0;
  background:linear-gradient(to top,var(--vs-purple),color-mix(in srgb,var(--vs-lav) 60%,transparent))}
.vsx-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(20px,3vw,40px)}
.vsx-hero-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.vsx-h1{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(46px,7.4vw,120px);line-height:.94;color:var(--vs-white);margin:0}
.vsx-h1 p{margin:0}
.vsx-hero-sub{margin:0;font-size:clamp(15.5px,1.3vw,18px);line-height:1.6;color:color-mix(in srgb,var(--vs-white) 68%,transparent);max-width:46ch}
.vsx-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* banda compacta "Hear VocalSyrup" + pastile de comenzi, sub subtitlu */
.vsx-hero-strip{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
  padding:11px 14px;border-radius:14px;text-decoration:none;cursor:pointer;
  background:var(--vs-surf);border:1px solid color-mix(in srgb,var(--vs-white) 10%,transparent);
  transition:border-color .18s,transform .18s}
.vsx-hero-strip:hover{border-color:color-mix(in srgb,var(--vs-lav) 40%,transparent);transform:translateY(-1px)}
.vsx-hero-strip-play{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--vs-lav);color:#140a1d}
.vsx-hero-strip-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.vsx-hero-strip-txt b{font-family:var(--ui);font-size:13px;font-weight:700;color:var(--vs-white)}
.vsx-hero-strip-txt span{font-size:11px;color:color-mix(in srgb,var(--vs-white) 48%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsx-hero-strip-sw{flex:0 0 auto;display:flex;gap:3px;font-family:var(--vs-mono);font-size:9.5px;
  font-weight:600;letter-spacing:.03em}
.vsx-hero-strip-sw i{font-style:normal;padding:4px 7px;border-radius:999px;
  color:color-mix(in srgb,var(--vs-white) 45%,transparent)}
.vsx-hero-strip-sw i.on{background:color-mix(in srgb,var(--vs-purple) 24%,transparent);color:var(--vs-lav)}
.vsx-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
.vsx-pill.sm{font-size:12px;padding:7px 13px;font-weight:600}

.vsx-hero-art{position:relative;min-height:220px;display:grid;place-items:center;
  transform:translate3d(0,0,0);transition:transform .12s ease-out}
.vsx-hero-ambient{position:absolute;inset:-10% -15%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 68%,color-mix(in srgb,var(--vs-grape2) 70%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 80% 80% at 50% 50%,var(--vs-bg) 0%,transparent 60%)}
.vsx-hero-shadow{position:absolute;left:50%;bottom:8%;width:56%;max-width:320px;height:11%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.4) 0%,transparent 72%)}
.vsx-hero-art img{position:relative;z-index:1;width:100%;max-width:420px;height:auto;display:block;
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.4))}
@media(min-width:1401px){ .vsx-hero-art img{max-width:500px} }
@media(max-width:900px){
  .vsx-hero-in{grid-template-columns:1fr;text-align:left}
  .vsx-hero-art{order:-1;min-height:190px}
  .vsx-hero-art img{max-width:280px}
  .vsx-hero-bgwave{height:38%}
  .vsx-hero-strip{max-width:100%}
}

/* ---------- VS: module + hotspots ---------- */
.vsx-modsec{padding-block:clamp(36px,6vh,72px) clamp(22px,3.5vh,40px)}
.vsx-h2{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(32px,5.2vw,64px);line-height:1.02;color:var(--vs-white);margin:14px 0 0;max-width:16ch}
.vsx-modsec-sub{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:color-mix(in srgb,var(--vs-white) 62%,transparent);max-width:52ch}

.vsx-modshow{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);
  align-items:center;margin-top:clamp(30px,5vw,56px)}
.vsx-modshow-art{min-width:0}
.vsx-hot{position:relative;max-width:460px;margin:0;display:block}
.vsx-hot img{width:100%;height:auto;display:block;border-radius:18px;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}
@media(max-width:900px){
  .vsx-modshow{grid-template-columns:1fr}
  .vsx-hot{max-width:380px;margin-inline:auto}
  .vsx-hotpanel{max-width:380px;margin-inline:auto}
}
.vsx-dot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--vs-lav) 55%,transparent);
  background:color-mix(in srgb,var(--vs-bg) 55%,transparent);backdrop-filter:blur(3px);
  color:var(--vs-lav);font-family:var(--ui);font-size:12px;font-weight:700;cursor:pointer;
  display:grid;place-items:center;transition:.15s}
.vsx-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--vs-lav) 30%,transparent);opacity:0;transition:.15s}
.vsx-dot:hover,.vsx-dot.on{background:var(--vs-lav);color:#140a1d;border-color:var(--vs-lav)}
.vsx-dot:hover::after,.vsx-dot.on::after{opacity:1}
.vsx-dot:focus-visible{outline:2px solid var(--vs-lav);outline-offset:3px}
.vsx-hotpanel{max-width:460px;margin:16px 0 0;display:flex;align-items:baseline;gap:12px;
  padding:16px 20px;border-radius:14px;background:var(--vs-surf);
  border:1px solid color-mix(in srgb,var(--vs-lav) 14%,transparent)}
.vsx-hotpanel b{font-family:var(--vs-mono);font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--vs-electric);flex:0 0 auto}
.vsx-hotpanel span{font-size:14px;color:color-mix(in srgb,var(--vs-white) 78%,transparent)}

.vsx-feats{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;min-width:0}
.vsx-feat{display:flex;flex-direction:column;gap:8px;padding-top:18px;
  border-top:1px solid color-mix(in srgb,var(--vs-white) 12%,transparent)}
.vsx-feat h3{font-family:var(--vs-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--vs-white) 50%,transparent);margin:2px 0 0}
.vsx-feat-h{font-family:var(--disp);font-size:clamp(19px,1.8vw,24px);font-weight:800;color:var(--vs-white);
  margin:2px 0 0;letter-spacing:-.01em}
.vsx-feat-b{margin:0;font-size:13.5px;line-height:1.55;color:color-mix(in srgb,var(--vs-white) 55%,transparent)}
@media(max-width:900px){ .vsx-feats{grid-template-columns:1fr 1fr;gap:22px} }
@media(max-width:560px){ .vsx-feats{grid-template-columns:1fr} }

.vsx-modrow-h{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,30px);
  color:var(--vs-white);margin:clamp(56px,8vh,88px) 0 0}
.vsx-modrow{display:flex;gap:18px;overflow-x:auto;margin-top:24px;padding-bottom:14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;cursor:grab;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--vs-white) 22%,transparent) transparent;
  -webkit-user-select:none;user-select:none}
.vsx-modrow.is-dragging{cursor:grabbing;scroll-snap-type:none}
.vsx-modrow::-webkit-scrollbar{height:5px}
.vsx-modrow::-webkit-scrollbar-track{background:transparent}
.vsx-modrow::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--vs-white) 18%,transparent);border-radius:99px}
.vsx-modcard{flex:0 0 auto;width:min(80vw,388px);scroll-snap-align:start;
  border:1px solid color-mix(in srgb,var(--vs-white) 10%,transparent);border-radius:18px;overflow:hidden;
  background:var(--vs-surf);transition:border-color .22s,transform .22s,box-shadow .22s}
.vsx-modcard:hover{border-color:color-mix(in srgb,var(--vs-lav) 45%,transparent);transform:translateY(-4px);
  box-shadow:0 18px 40px -20px color-mix(in srgb,var(--vs-purple) 45%,transparent)}
.vsx-modcard img{display:block;width:100%;height:auto;aspect-ratio:900/630;object-fit:cover;
  object-position:50% 50%;pointer-events:none}
.vsx-modcap{padding:14px 16px 17px;display:flex;flex-direction:column;gap:3px}
.vsx-modcap b{font-family:var(--vs-mono);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--vs-white)}
.vsx-modcap span{font-size:11.5px;color:color-mix(in srgb,var(--vs-white) 50%,transparent)}

/* ---------- VS: audio demo (dry vs syrup) ---------- */
.vsx-audiosec{position:relative;overflow:clip;padding-block:clamp(36px,6vh,68px)}
.vsx-audio-in{position:relative;z-index:1}
.vsx-audio-shot{display:none;position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:38%;max-width:460px;height:auto;opacity:.85;z-index:0;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
@media(min-width:1100px){ .vsx-audio-shot{display:block} }
.vsx-empty{border:1px dashed color-mix(in srgb,var(--vs-white) 20%,transparent);border-radius:16px;
  padding:26px 22px;color:color-mix(in srgb,var(--vs-white) 55%,transparent);font-size:13.5px;line-height:1.65;
  max-width:640px;margin:22px 0 0}
.vsx-empty b{display:block;color:var(--vs-white);font-weight:700;margin-bottom:6px}

.vsx-flavorsel{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.vsx-flavorpick{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;cursor:pointer;
  background:var(--vs-surf);border:1px solid color-mix(in srgb,var(--vs-white) 12%,transparent);
  font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.02em;
  color:color-mix(in srgb,var(--vs-white) 55%,transparent);transition:background .18s,border-color .18s,color .18s}
.vsx-flavorpick img{width:14px;height:14px;border-radius:4px;object-fit:cover}
.vsx-flavorpick i{width:5px;height:5px;border-radius:50%;background:transparent;transition:background .18s}
.vsx-flavorpick.on{background:var(--vs-grape);border-color:var(--vs-lav);color:var(--vs-lav)}
.vsx-flavorpick.on i{background:var(--vs-lav)}

.vsx-dryup{margin-top:clamp(28px,4vw,44px);max-width:1000px}
.vsx-dryup-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:22px 24px;border-radius:20px;background:var(--vs-surf);
  border:1px solid color-mix(in srgb,var(--vs-lav) 14%,transparent)}
.vsx-dryup-row audio{display:none}
.vsx-dryup-play{flex:0 0 46px;width:46px;height:46px;border-radius:999px;border:0;cursor:pointer;
  background:var(--vs-lav);color:#140a1d;display:grid;place-items:center;transition:transform .15s}
.vsx-dryup-play:hover{transform:scale(1.06)}
.vsx-dryup-play:active{transform:scale(.94)}
.vsx-dryup-play:focus-visible{outline:2px solid var(--vs-lav);outline-offset:3px}
.vsx-dryup-wave{position:relative;flex:1 1 240px;height:56px;min-width:0;cursor:pointer;overflow:hidden;border-radius:8px}
.vsx-dryup-bars{position:absolute;left:0;top:0;bottom:0;width:100%;display:flex;align-items:flex-end;gap:3px}
.vsx-dryup-bars i{flex:1 1 auto;min-width:2px;border-radius:2px;
  background:color-mix(in srgb,var(--vs-white) 16%,transparent);align-self:flex-end}
.vsx-dryup-bars.on i{background:linear-gradient(180deg,var(--vs-lav),var(--vs-purple))}
.vsx-dryup-prog{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden}
.vsx-dryup-time{flex:0 0 auto;font-family:var(--vs-mono);font-size:12px;color:color-mix(in srgb,var(--vs-white) 55%,transparent);min-width:38px}
.vsx-dryup-sw{flex:0 0 auto;display:flex;border:1px solid color-mix(in srgb,var(--vs-white) 16%,transparent);border-radius:999px;overflow:hidden}
.vsx-dryup-sw .abt-b{padding:9px 16px;font-family:var(--ui);font-size:12.5px;font-weight:700;
  letter-spacing:.02em;color:color-mix(in srgb,var(--vs-white) 60%,transparent)}
.vsx-dryup-sw .abt-b.on{background:var(--vs-lav);color:#140a1d}
.vsx-dryup-row.is-hidden{display:none}
.vsx-dryup-desc{flex-basis:100%;margin:2px 0 0;font-size:12.5px;line-height:1.55;
  color:color-mix(in srgb,var(--vs-white) 55%,transparent)}
@media(max-width:640px){ .vsx-dryup-row{padding:18px} .vsx-dryup-wave{flex-basis:100%;order:5} }

.vsx-audio-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- VS: talk (fundal grena) ---------- */
.vsx-talksec{padding-block:clamp(44px,7vh,76px);background:var(--vs-grape);
  margin-top:clamp(24px,4vh,44px)}
.vsx-talksec .vsx-h2{max-width:14ch}
.vsx-pills{margin-top:clamp(30px,5vw,48px);display:flex;flex-direction:column;gap:14px;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vsx-pills-run{display:flex;gap:12px;width:max-content;animation:vspillrun 34s linear infinite}
.vsx-pills-run.rev{animation-direction:reverse;animation-duration:40s}
.vsx-pill{flex:0 0 auto;font-family:var(--ui);font-size:14px;font-weight:600;color:var(--vs-lav);
  background:color-mix(in srgb,var(--vs-electric) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--vs-lav) 30%,transparent);
  border-radius:999px;padding:11px 20px;white-space:nowrap}
@keyframes vspillrun{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media(prefers-reduced-motion:reduce){ .vsx-pills-run{animation:none} }

/* ---------- VS: flavors / presets ---------- */
.vsx-flavsec{padding-block:clamp(36px,6vh,68px)}
.vsx-flavrow{display:flex;gap:14px;overflow-x:auto;margin-top:clamp(26px,4vw,40px);padding-bottom:10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.vsx-flavrow::-webkit-scrollbar{height:6px}
.vsx-flavrow::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--vs-white) 18%,transparent);border-radius:99px}
.vsx-flav{flex:0 0 auto;width:168px;scroll-snap-align:start;border-radius:16px;padding:18px 16px;
  background:var(--vs-surf);border:1px solid color-mix(in srgb,var(--vs-white) 10%,transparent);
  display:flex;flex-direction:column;gap:14px;transition:.18s}
.vsx-flav:hover{border-color:color-mix(in srgb,var(--vs-lav) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vs-lav) 25%,transparent),0 18px 34px -18px color-mix(in srgb,var(--vs-purple) 60%,transparent);
  transform:translateY(-3px)}
.vsx-flav-wave{height:34px;display:flex;align-items:flex-end;gap:2px}
.vsx-flav-wave i{flex:1 1 auto;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--vs-lav) 45%,transparent)}
.vsx-flav:hover .vsx-flav-wave i{background:linear-gradient(180deg,var(--vs-lav),var(--vs-purple))}
.vsx-flav-name{font-family:var(--disp);font-size:19px;font-weight:800;letter-spacing:.01em;color:var(--vs-white)}
.vsx-flav-meta{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.01em;
  color:color-mix(in srgb,var(--vs-white) 48%,transparent)}

/* ---------- VS: THE POUR FEED (reactii comunitate) ---------- */
.vsx-pfsec{padding-block:clamp(40px,7vh,76px)}
.vsx-pf-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:start}
.vsx-pf-head{display:flex;flex-direction:column;gap:14px;min-width:0}
.vsx-pf-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:20px;
  max-width:640px;width:100%;justify-self:end;background:#111117;
  border:1px solid rgba(215,164,255,.10);box-shadow:inset 0 1px 0 rgba(215,164,255,.06)}
.vsx-pf-panel::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.55}
.vsx-pf-panel::after{content:"";position:absolute;left:0;right:0;top:0;height:70px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(180,92,255,.12),transparent)}
.vsx-pf-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid rgba(215,164,255,.10)}
.vsx-pf-dots{display:flex;gap:6px}
.vsx-pf-dots i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--vs-white) 16%,transparent)}
.vsx-pf-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--vs-lav)}
.vsx-pf-live i{width:6px;height:6px;border-radius:50%;background:var(--vs-lav);animation:vspfpulse 1.7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.vsx-pf-live i{animation:none}}
@keyframes vspfpulse{0%,100%{opacity:1}50%{opacity:.25}}
.vsx-pf-list{position:relative;z-index:2;max-height:520px;overflow-y:auto}
.vsx-pf-row{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;
  border-bottom:1px solid rgba(243,240,234,.06)}
.vsx-pf-row:last-child{border-bottom:0}
.vsx-pf-empty{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:58px 24px 62px;position:relative;z-index:2}
.vsx-pf-empty-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--vs-lav);background:color-mix(in srgb,var(--vs-purple) 16%,transparent);
  animation:vspfbreathe 2.6s ease-in-out infinite}
@keyframes vspfbreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.vsx-pf-empty-ico{animation:none}}
.vsx-pf-empty-h{margin:2px 0 0;font-family:var(--ui);font-size:15px;font-weight:700;color:var(--vs-white)}
.vsx-pf-empty-sub{margin:0;font-size:12.5px;color:color-mix(in srgb,var(--vs-white) 48%,transparent)}
.vsx-pf-empty-cta{margin-top:6px;font-family:var(--ui);font-size:12.5px;font-weight:700;
  color:var(--vs-lav);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--vs-lav) 45%,transparent)}
.vsx-pf-empty-cta:hover{color:var(--vs-white);border-color:var(--vs-white)}
.vsx-pf-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--vs-purple) 22%,transparent);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:var(--vs-lav)}
.vsx-pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.vsx-pf-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.vsx-pf-line1{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.vsx-pf-line1 b{font-size:13px;font-weight:700;color:var(--vs-white)}
.vsx-pf-verif{width:13px;height:13px;border-radius:50%;background:var(--vs-electric);position:relative;flex:0 0 auto}
.vsx-pf-verif::after{content:"";position:absolute;left:4px;top:2.5px;width:3.5px;height:6.5px;
  border:solid #0C0C10;border-width:0 1.4px 1.4px 0;transform:rotate(40deg)}
.vsx-pf-role,.vsx-pf-plat{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.02em;
  color:color-mix(in srgb,var(--vs-white) 45%,transparent)}
.vsx-pf-ts{margin-left:auto;flex:0 0 auto;font-family:var(--ui);font-size:11px;
  color:color-mix(in srgb,var(--vs-white) 34%,transparent)}
.vsx-pf-quote{margin:0;font-size:13px;line-height:1.55;color:color-mix(in srgb,var(--vs-white) 78%,transparent)}
.vsx-pf-quote a{color:inherit;text-decoration:none}
.vsx-pf-quote a:hover{color:var(--vs-lav)}
.vsx-pf-track{font-family:var(--ui);font-weight:600;font-size:11px;color:var(--vs-lav)}
.vsx-pf-thumb{flex:0 0 40px;width:40px;height:40px;border-radius:8px;object-fit:cover}
.vsx-pf-heart{flex:0 0 auto;align-self:flex-start;font-size:11px;color:color-mix(in srgb,var(--vs-white) 40%,transparent)}
.vsx-pf-react{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-top:1px solid rgba(215,164,255,.10)}
.vsx-pf-react span{font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:color-mix(in srgb,var(--vs-white) 40%,transparent);margin-right:2px}
.vsx-pf-react i{font-style:normal;font-size:15px;line-height:1;color:color-mix(in srgb,var(--vs-white) 55%,transparent)}
.vsx-pf-react i.pink{color:var(--vs-pink)}
@media(max-width:900px){ .vsx-pf-in{grid-template-columns:1fr} .vsx-pf-panel{justify-self:stretch;max-width:none} }

/* ---------- VS: video creatori ---------- */
.vsx-vidsec{padding-block:clamp(36px,6vh,68px)}
.vsx-vidrow{display:flex;gap:14px;overflow-x:auto;margin-top:clamp(26px,4vw,40px);padding-bottom:10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.vsx-vidrow::-webkit-scrollbar{height:6px}
.vsx-vidrow::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--vs-white) 18%,transparent);border-radius:99px}
.vsx-vidcard{position:relative;flex:0 0 auto;width:180px;aspect-ratio:9/16;scroll-snap-align:start;
  border:0;border-radius:16px;overflow:hidden;background:var(--vs-surf);cursor:pointer;padding:0}
.vsx-vidcard img{width:100%;height:100%;object-fit:cover;display:block}
.vsx-vidplay{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--vs-bg) 55%,transparent);backdrop-filter:blur(3px);
  color:var(--vs-white);display:grid;place-items:center;transition:.15s}
.vsx-vidcard:hover .vsx-vidplay{background:var(--vs-lav);color:#140a1d;transform:scale(1.08)}
.vsx-vidname{position:absolute;left:10px;right:10px;bottom:10px;font-size:12px;font-weight:700;
  color:var(--vs-white);text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:left}
.vsx-vidcard:focus-visible{outline:2px solid var(--vs-lav);outline-offset:3px}

.vsx-vidmodal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.vsx-vidmodal-scrim{position:absolute;inset:0;background:rgba(6,4,10,.82)}
.vsx-vidmodal-body{position:relative;z-index:1;max-width:420px;width:100%}
.vsx-vidmodal-body video{width:100%;max-height:82vh;border-radius:14px;display:block;background:#000}
.vsx-vidmodal-x{position:absolute;top:-42px;right:0;width:34px;height:34px;border-radius:50%;border:0;
  background:color-mix(in srgb,var(--vs-white) 12%,transparent);color:var(--vs-white);font-size:20px;
  cursor:pointer;display:grid;place-items:center}

/* ---------- VS: WORKS WHERE YOU WORK (compatibilitate DAW) ---------- */
.vsx-compatsec{padding-block:clamp(36px,5.5vh,60px);border-top:1px solid color-mix(in srgb,var(--vs-white) 8%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--vs-white) 8%,transparent);text-align:center}
.vsx-compatsec .vsx-eyebrow{display:inline-flex;margin:0 auto 14px}
.vsx-compat-h{margin:0;text-align:center;font-family:var(--ui);font-size:clamp(28px,3.2vw,34px);
  font-weight:700;letter-spacing:-.015em;color:color-mix(in srgb,var(--vs-white) 94%,transparent)}
.vsx-dawrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 40px;margin-top:38px}
.vsx-daw{display:flex;flex-direction:column;align-items:center;gap:8px;width:auto}
.vsx-daw-tile{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:none;border:0;transition:transform .18s,opacity .18s}
.vsx-daw:hover .vsx-daw-tile{transform:translateY(-2px)}
.vsx-daw-tile img{height:100%;width:100%;object-fit:contain;display:block;
  opacity:.92;transition:opacity .18s,transform .18s}
.vsx-daw:hover .vsx-daw-tile img{opacity:1}
.vsx-daw-fb{padding:0;font-family:var(--ui);font-size:15px;font-weight:600;line-height:1.2;
  text-align:center;color:color-mix(in srgb,var(--vs-white) 55%,transparent);transition:color .18s}
.vsx-daw:hover .vsx-daw-fb{color:var(--vs-white)}
.vsx-daw-name{font-family:var(--ui);font-size:11px;font-weight:600;
  color:color-mix(in srgb,var(--vs-white) 42%,transparent)}
.vsx-daw-ct{font-family:var(--vs-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;
  color:color-mix(in srgb,var(--vs-white) 42%,transparent)}
.vsx-compatsec .vsx-specs{text-align:center}
.vsx-daw-tag{margin:10px 0 0;text-align:center;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.01em;
  color:color-mix(in srgb,var(--vs-white) 36%,transparent)}

/* ---------- VS: sectiunea de cumparare ---------- */
.vsx-buysec{padding-block:clamp(36px,6.5vh,76px)}
.vsx-buy-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center}
.vsx-buy-art{position:relative}
.vsx-buy-art img{width:100%;height:auto;display:block;border-radius:18px;
  animation:vsxFloat 7s ease-in-out infinite;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.55))}
.vsx-buy-info{min-width:0}
.vsx-rating{display:flex;align-items:center;gap:8px;margin-top:10px}
.vsx-stars{position:relative;display:inline-block;font-size:14px;line-height:1;letter-spacing:2px;
  color:color-mix(in srgb,var(--vs-white) 22%,transparent)}
.vsx-stars::before{content:"\2605\2605\2605\2605\2605"}
.vsx-stars::after{content:"\2605\2605\2605\2605\2605";position:absolute;inset:0;color:var(--vs-lav);
  width:calc(var(--r) / 5 * 100%);overflow:hidden;white-space:nowrap}
.vsx-rating b{font-size:13px;font-weight:700;color:var(--vs-white)}
.vsx-rating span{font-size:12.5px;color:color-mix(in srgb,var(--vs-white) 50%,transparent)}
.vsx-buy-desc{margin:16px 0 0;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--vs-white) 68%,transparent);max-width:52ch}
.vsx-buy-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.vsx-buy-list li{font-size:13.5px;color:color-mix(in srgb,var(--vs-white) 72%,transparent);padding-left:22px;position:relative}
.vsx-buy-list li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:6px;
  border-left:2px solid var(--vs-lav);border-bottom:2px solid var(--vs-lav);transform:rotate(-45deg)}

.vsx-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.vsx-plan{position:relative;border-radius:18px;background:var(--vs-surf);
  border:1px solid color-mix(in srgb,var(--vs-white) 10%,transparent);padding:20px 18px;
  display:flex;flex-direction:column;gap:14px}
.vsx-plan.on{border-color:var(--vs-lav)}
.vsx-plan-badge{position:absolute;top:-10px;left:18px;font-family:var(--vs-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:#140a1d;background:var(--vs-lav);border-radius:999px;padding:4px 10px}
.vsx-plan-h span{font-family:var(--vs-mono);font-weight:600;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;
  color:color-mix(in srgb,var(--vs-white) 45%,transparent)}
.vsx-plan-h h3{margin:6px 0 0;font-family:var(--disp);font-size:20px;font-weight:800;color:var(--vs-white)}
.vsx-plan-p{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vsx-plan-p s{font-size:14px;color:color-mix(in srgb,var(--vs-white) 40%,transparent);width:100%;order:-1}
.vsx-plan-p b{font-family:var(--disp);font-size:32px;font-weight:900;color:var(--vs-white);letter-spacing:-.02em}
.vsx-plan-p span{font-size:13px;color:color-mix(in srgb,var(--vs-white) 50%,transparent)}
.vsx-plan-sel{width:100%;font-family:var(--ui);font-size:13px;color:var(--vs-white);
  background:var(--vs-bg2);border:1px solid color-mix(in srgb,var(--vs-white) 14%,transparent);
  border-radius:10px;padding:9px 10px}
.vsx-plan-go{width:100%;padding:13px 16px;font-size:14px}
.vsx-plan-warn{margin:0;font-size:11.5px;color:var(--vs-lav)}
@media(max-width:900px){ .vsx-buy-in{grid-template-columns:1fr} .vsx-buy-art{order:-1} }
@media(max-width:560px){ .vsx-plans{grid-template-columns:1fr} }

/* ---------- VS: bara sticky de cumparare ---------- */
.vsx-stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vs-bg2);
  border-top:1px solid color-mix(in srgb,var(--vs-lav) 18%,transparent);
  transform:translateY(100%);transition:transform .25s ease}
.vsx-stickybuy.show{transform:translateY(0)}
.vsx-stickybuy-in{display:flex;align-items:center;gap:16px;padding-block:12px}
.vsx-stickybuy-in b{font-family:var(--disp);font-size:15px;color:var(--vs-white);flex:0 0 auto}
.vsx-stickybuy-in .vsx-specs{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
.vsx-stickybuy-in .vsx-btn{flex:0 0 auto;padding:11px 18px;font-size:13.5px;margin-left:auto}
@media(min-width:640px){ .vsx-stickybuy-in .vsx-specs{display:block} }

/* ---------- VS: FAQ ---------- */
.vsx-faqsec{padding-block:clamp(36px,6vh,68px)}
.vsx-faq-wrap{max-width:960px}
.vsx-faqlist{margin-top:clamp(24px,4vw,36px);display:flex;flex-direction:column}
.vsx-faqitem{border-bottom:1px solid color-mix(in srgb,var(--vs-white) 12%,transparent)}
.vsx-faqq{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 2px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--ui);font-size:16.5px;font-weight:600;color:var(--vs-white)}
.vsx-faqq:focus-visible{outline:2px solid var(--vs-lav);outline-offset:2px}
.vsx-faqplus{position:relative;flex:0 0 18px;width:18px;height:18px}
.vsx-faqplus::before,.vsx-faqplus::after{content:"";position:absolute;background:var(--vs-lav);
  border-radius:2px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.vsx-faqplus::before{left:0;top:8px;width:18px;height:2px}
.vsx-faqplus::after{left:8px;top:0;width:2px;height:18px}
.vsx-faqq[aria-expanded="true"] .vsx-faqplus::after{transform:rotate(90deg);opacity:0}
.vsx-faqa{overflow:hidden;height:0;transition:height .3s cubic-bezier(.4,0,.2,1)}
.vsx-faqa p{margin:0;padding:0 2px 22px;max-width:820px;font-size:14.5px;line-height:1.7;color:color-mix(in srgb,var(--vs-white) 65%,transparent)}

/* ---------- VS: CTA finala ---------- */
.vsx-finalsec{position:relative;overflow:clip;background:var(--vs-grape);
  padding-block:clamp(48px,8vh,92px);margin-top:clamp(24px,4vh,44px)}
.vsx-final-wave{position:absolute;inset:auto 0 0 0;height:120px;display:flex;align-items:flex-end;
  gap:3px;padding-inline:6vw;opacity:.35;pointer-events:none}
.vsx-final-wave i{flex:1 1 auto;min-width:2px;border-radius:2px;background:linear-gradient(180deg,var(--vs-lav),transparent)}
.vsx-final-in{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.vsx-final-h{text-align:center}
.vsx-final-shotwrap{position:relative;width:100%;max-width:420px;margin-top:8px}
.vsx-final-glow{position:absolute;inset:-25% -40%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 60% at 50% 55%,color-mix(in srgb,var(--vs-bg) 85%,transparent) 0%,transparent 72%)}
.vsx-final-shot{position:relative;z-index:1;width:100%;max-width:420px;height:auto;
  animation:vsxFloat 8s ease-in-out infinite;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.5))}

@keyframes vsxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){
  .vsx-buy-art img,.vsx-final-shot,.vsx-hero-art img{animation:none!important}
}

/* ---------- Footer global (toate paginile). Mov/lavanda pe Acasa,
   roz-portocaliu in rest, prin fallback in var() - fara reguli scoase
   pe .template-index ---------- */
.ftx{border-top:1px solid color-mix(in srgb,var(--vs-white,var(--bone)) 12%,transparent);
  padding-block:48px 28px}
.ftx-in{display:flex;flex-direction:column;gap:26px}
.ftx-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.ftx-mark{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--vs-white,var(--bone));text-transform:lowercase}
.ftx-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.ftx-links a{font-family:var(--ui);font-size:13.5px;font-weight:500;
  color:color-mix(in srgb,var(--vs-white,var(--bone)) 62%,transparent);transition:color .18s}
.ftx-links a:hover{color:var(--vs-lav,var(--acc-lt))}
.ftx-social{display:flex;gap:18px}
.ftx-social a{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.02em;
  color:color-mix(in srgb,var(--vs-white,var(--bone)) 55%,transparent);transition:color .18s}
.ftx-social a:hover{color:var(--vs-lav,var(--acc-lt))}
.ftx-bottom{padding-top:20px;border-top:1px solid color-mix(in srgb,var(--vs-white,var(--bone)) 8%,transparent)}
.ftx-bottom span{font-family:var(--ui);font-size:12px;letter-spacing:.02em;
  color:color-mix(in srgb,var(--vs-white,var(--bone)) 40%,transparent)}
@media(max-width:640px){ .ftx-top{flex-direction:column;align-items:flex-start} }
/* REPAIR PASS - pe pagina de presete, in tema deschisa, --vs-white e
   mereu un crem-aproape-alb (nu e umbrit de .tpl-presets, e pe tokenul
   lui propriu), si cadea direct pe fundalul deschis al footer-ului =>
   wordmark "vocalsyrup" si linkurile Plugin/Presets/Privacy aproape
   invizibile. Fixam explicit, scopat strict pe pagina de presete, ca
   sa nu umblam la footer-ul de pe restul site-ului in acest pas. */
:root[data-theme="light"] .tpl-presets .ftx{border-top-color:color-mix(in srgb,var(--bone) 14%,transparent)}
:root[data-theme="light"] .tpl-presets .ftx-mark{color:var(--bone)}
:root[data-theme="light"] .tpl-presets .ftx-links a{color:color-mix(in srgb,var(--bone) 68%,transparent)}
:root[data-theme="light"] .tpl-presets .ftx-social a{color:color-mix(in srgb,var(--bone) 60%,transparent)}
:root[data-theme="light"] .tpl-presets .ftx-bottom{border-top-color:color-mix(in srgb,var(--bone) 10%,transparent)}
:root[data-theme="light"] .tpl-presets .ftx-bottom span{color:color-mix(in srgb,var(--bone) 46%,transparent)}

/* VocalSyrup v102 structural rebuild */
.vsx-hero-in{max-width:1240px!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:clamp(60px,8vw,130px)!important}
.vsx-hero-copy{padding-left:clamp(20px,3vw,52px)}
.vsx-hero-art img{max-width:460px!important;filter:drop-shadow(0 28px 38px rgba(0,0,0,.48));border-radius:0!important}
.vsx-hero-art{min-height:390px!important}.vsx-hero-ambient{opacity:.35!important}
.vsx-modshow{grid-template-columns:minmax(0,.82fr) minmax(300px,.72fr)!important;max-width:1050px;margin-inline:auto}
.vsx-modshow-art img{max-width:520px;margin-inline:auto;display:block}.vsx-hot{max-width:560px;margin-inline:auto}
.vsx-buy-art img{max-width:470px;margin-inline:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45));border-radius:0!important}
.vsx-dawrow{gap:22px!important}.vsx-daw-tile{width:58px!important;height:58px!important}.vsx-daw-tile img{width:46px!important;height:46px!important;object-fit:contain!important}
.vsx-compat-h{font-size:22px!important;font-weight:650!important}
.vsx-hubsec{padding-block:clamp(72px,9vw,128px);border-top:1px solid rgba(255,255,255,.07)}
.vsx-hubsec>.wrap{max-width:1200px}.vsx-hub{margin-top:40px;display:grid;grid-template-columns:220px 1fr;min-height:520px;border:1px solid rgba(201,138,255,.22);border-radius:22px;overflow:hidden;background:#111116;box-shadow:0 40px 90px rgba(0,0,0,.35)}
.vsx-hub-side{padding:22px 14px;background:#0d0d12;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:6px}.vsx-hub-brand{display:flex;align-items:center;gap:10px;padding:8px 10px 24px;font-size:13px;font-weight:700}.vsx-hub-brand b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#8b45f5;color:#fff}.vsx-hub-side button{appearance:none;border:0;background:transparent;color:rgba(243,240,234,.55);text-align:left;padding:11px 12px;border-radius:10px;font:600 12px var(--ui);cursor:pointer}.vsx-hub-side button.on{background:rgba(139,69,245,.18);color:#e7c5ff}.vsx-hub-license{margin-top:auto;padding:12px 10px;font:600 9px var(--vs-mono);color:#a95cff}
.vsx-hub-main{position:relative;background:radial-gradient(circle at 70% 15%,rgba(113,56,232,.10),transparent 32%),#14131a}.vsx-hub-top{height:48px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;padding:0 20px;font:600 9px var(--vs-mono);color:rgba(243,240,234,.42)}.vsx-hub-panel{display:none;padding:42px}.vsx-hub-panel.on{display:block}.vsx-hub-panel small{font:600 10px var(--vs-mono);letter-spacing:.12em;color:#c98aff}.vsx-hub-panel h3{font:700 clamp(28px,3vw,42px) var(--disp);margin:8px 0 28px}.vsx-hub-panel>p{color:rgba(243,240,234,.58)}
.vsx-hub-product{display:grid;grid-template-columns:46% 1fr;gap:30px;align-items:center;padding:28px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#18181f}.vsx-hub-product img{width:100%;filter:drop-shadow(0 16px 22px rgba(0,0,0,.4))}.vsx-status{font:600 9px var(--vs-mono);color:#c98aff}.vsx-hub-product h4{font:700 28px var(--disp);margin:8px 0 4px}.vsx-hub-product p{font-size:12px;color:rgba(243,240,234,.5)}.vsx-hub-actions{display:flex;gap:8px;margin-top:22px}.vsx-hub-actions button{border:1px solid rgba(201,138,255,.35);background:#22162d;color:#e7c5ff;border-radius:9px;padding:9px 14px;font:700 10px var(--ui)}
.vsx-hub-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.vsx-hub-mini b,.vsx-license-card{padding:26px 18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#18181f}.vsx-hub-mini b{font:700 15px var(--disp)}.vsx-updatebar{height:10px;border-radius:99px;background:#24232c;margin-top:36px;overflow:hidden}.vsx-updatebar i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#7138e8,#c98aff)}.vsx-license-card{display:flex;gap:18px;align-items:center;margin-top:30px}.vsx-license-card span{font:700 12px var(--disp)}.vsx-license-card b{font:500 11px var(--vs-mono);color:rgba(243,240,234,.55)}.vsx-license-card em{margin-left:auto;font:700 9px var(--vs-mono);color:#c98aff}.vsx-hub-foot{display:flex;align-items:center;gap:18px;margin-top:18px}
.vsx-plans{align-items:stretch}.vsx-plan{overflow:visible}.vsx-product-stack{height:170px;position:relative;margin:10px 0 16px}.vsx-product-stack img{position:absolute;left:50%;top:50%;width:74%;max-height:150px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38));transition:transform .65s cubic-bezier(.2,.8,.2,1)}.vsx-product-stack .s1{transform:translate(-50%,-50%) scale(.92);z-index:3}.vsx-product-stack .s2{transform:translate(-58%,-50%) rotate(-4deg) scale(.78);z-index:2}.vsx-product-stack .s3{transform:translate(-42%,-50%) rotate(4deg) scale(.78);z-index:1}.vsx-plan:hover .vsx-product-stack .s2{transform:translate(-72%,-51%) rotate(-7deg) scale(.76)}.vsx-plan:hover .vsx-product-stack .s3{transform:translate(-28%,-49%) rotate(7deg) scale(.76)}
@media(max-width:800px){.vsx-hero-in{grid-template-columns:1fr!important;gap:20px!important}.vsx-hero-copy{padding-left:0}.vsx-hero-art{min-height:240px!important;order:-1}.vsx-hero-art img{max-width:310px!important}.vsx-hub{grid-template-columns:72px 1fr}.vsx-hub-side span{display:none}.vsx-hub-brand span{display:none}.vsx-hub-panel{padding:24px}.vsx-hub-product{grid-template-columns:1fr}.vsx-hub-mini{grid-template-columns:1fr 1fr}.vsx-modshow{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.vsx-product-stack img{transition:none!important}}

/* ================================================================
   VOCALSYRUP v103 — premium restraint pass
   Cleaner editorial rhythm, less oversized product art, more space.
   ================================================================ */
:root{--vs-v103-max:1160px}
.vsx .wrap{max-width:var(--vs-v103-max)}
.vsx-h1{font-size:clamp(64px,7.1vw,104px)!important;line-height:.86!important;letter-spacing:-.065em!important}
.vsx-h2{font-size:clamp(40px,4.5vw,68px)!important;line-height:.94!important;letter-spacing:-.045em!important}
.vsx-eyebrow{letter-spacing:.09em!important}

/* hero: product becomes a deliberate object, not half the viewport */
.vsx-hero{padding-top:clamp(62px,8vw,108px)!important;padding-bottom:clamp(70px,9vw,126px)!important}
.vsx-hero-in{max-width:1160px!important;grid-template-columns:minmax(0,.9fr) minmax(380px,.86fr)!important;gap:clamp(76px,9vw,144px)!important;align-items:center!important}
.vsx-hero-copy{padding-left:0!important;gap:17px!important;max-width:510px}
.vsx-hero-sub{font-size:16px!important;max-width:42ch!important}
.vsx-hero-art{min-height:330px!important;place-items:center!important}
.vsx-hero-art img{width:min(100%,430px)!important;max-width:430px!important;filter:drop-shadow(0 28px 44px rgba(0,0,0,.55))!important}
.vsx-hero-ambient{opacity:.16!important;inset:2% -4%!important}
.vsx-hero-shadow{opacity:.42!important;width:48%!important}
.vsx-hero-bgwave{height:31%!important;opacity:.48}
.vsx-hero-strip{max-width:390px!important;background:rgba(24,24,31,.76)!important}
.vsx-hero-chips{max-width:410px}

/* main product walkthrough: reduce giant duplicate plugin */
.vsx-modsec{padding-top:clamp(74px,9vw,122px)!important}
.vsx-modshow{max-width:1040px!important;grid-template-columns:minmax(0,.72fr) minmax(330px,.72fr)!important;gap:clamp(64px,7vw,100px)!important;margin-top:52px!important}
.vsx-modshow-art img{max-width:430px!important}
.vsx-hot{max-width:450px!important}
.vsx-modrow-h{margin-top:86px!important}
.vsx-modrow{gap:14px!important;margin-top:20px!important}
.vsx-modcard{width:min(70vw,320px)!important;border-radius:16px!important;background:#131219!important}
.vsx-modcard:hover{transform:translateY(-2px)!important}

/* audio: remove the random oversized cropped plugin at right */
.vsx-audio-shot{display:none!important}
.vsx-audiosec{padding-block:clamp(82px,10vw,132px)!important}
.vsx-dryup{max-width:940px}

/* Hub: desktop-app frame, slightly smaller and denser */
.vsx-hubsec{padding-block:clamp(88px,10vw,138px)!important}
.vsx-hubsec>.wrap{max-width:1120px!important}
.vsx-hub{margin-top:44px!important;grid-template-columns:190px 1fr!important;min-height:470px!important;border-radius:18px!important;box-shadow:0 38px 90px rgba(0,0,0,.42)!important}
.vsx-hub-panel{padding:36px!important}
.vsx-hub-product{padding:24px!important;grid-template-columns:42% 1fr!important}

/* Compatibility should read like a logo rail, not generic cards */
.vsx-compat{padding-block:clamp(72px,8vw,108px)!important}

/* purchase: editorial product page rather than giant screenshot + SaaS cards */
.vsx-buysec{padding-block:clamp(90px,10vw,140px)!important}
.vsx-buy-in{max-width:1120px!important;grid-template-columns:minmax(300px,.72fr) minmax(0,1.08fr)!important;gap:clamp(76px,8vw,120px)!important}
.vsx-buy-art img{max-width:390px!important;filter:drop-shadow(0 24px 34px rgba(0,0,0,.48))!important}
.vsx-plans{gap:14px!important;margin-top:28px!important}
.vsx-plan{background:#14131a!important;border-color:rgba(255,255,255,.09)!important;box-shadow:none!important}
.vsx-plan.on{border-color:rgba(201,138,255,.62)!important}
.vsx-product-stack{height:118px!important}
.vsx-product-stack img{max-height:105px!important}

/* final CTA: no huge plugin duplication; keep it as a restrained signature */
.vsx-final-shot{max-width:330px!important}

@media(max-width:900px){
 .vsx-hero-in{grid-template-columns:1fr!important;gap:34px!important}
 .vsx-hero-copy{max-width:none}
 .vsx-hero-art{order:0!important;min-height:220px!important}
 .vsx-hero-art img{max-width:330px!important}
 .vsx-modshow{grid-template-columns:1fr!important;gap:34px!important}
 .vsx-modshow-art img,.vsx-hot{max-width:390px!important}
 .vsx-buy-in{grid-template-columns:1fr!important;gap:42px!important}
 .vsx-buy-art img{max-width:340px!important}
}

/* === VocalSyrup v104 — tighter editorial system === */
:root{--vs-page-max:1120px}
.wrap{width:min(var(--vs-page-max),calc(100% - 48px));margin-inline:auto}
.vsx-h2,.vsx-story-title{letter-spacing:-.055em;line-height:.96}
.vsx-btn{border-radius:14px!important;min-height:52px;padding:0 24px!important;font-weight:750!important;letter-spacing:-.02em}

/* Comments — compact editorial card, ready for real comments */
.vsx-pfsec{padding:96px 0 108px!important}
.vsx-pf-in{grid-template-columns:300px minmax(0,520px)!important;justify-content:space-between;align-items:start;gap:70px!important}
.vsx-pf-head .vsx-h2{font-size:clamp(44px,5vw,66px)!important;max-width:7ch}
.vsx-pf-panel{border-radius:16px!important;box-shadow:0 24px 70px rgba(0,0,0,.3);border-color:rgba(255,255,255,.12)!important}
.vsx-pf-bar{min-height:52px!important;padding:0 16px!important}
.vsx-pf-empty{min-height:330px!important}

/* Product story — same editorial proportions as reference, VocalSyrup visual language */
.vsx-story{padding:92px 0 110px;border-top:1px solid rgba(255,255,255,.07)}
.vsx-story-head{margin-bottom:64px}.vsx-story-title{margin:14px 0 0;font-family:var(--ui);font-size:clamp(44px,5vw,66px);font-weight:800;max-width:9ch;color:var(--vs-white)}
.vsx-story-grid{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:72px;align-items:center}
.vsx-story-visual{position:relative;min-width:0;text-align:center}.vsx-story-glow{position:absolute;inset:10% 5% 22%;background:radial-gradient(circle,rgba(139,69,245,.18),transparent 65%);filter:blur(28px)}
.vsx-story-visual>img{position:relative;width:min(100%,520px);height:auto;display:block;margin:auto;filter:drop-shadow(0 28px 32px rgba(0,0,0,.4))}
.vsx-story-thumbs{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:38px;opacity:.58}.vsx-story-thumbs img{width:58px;height:44px;object-fit:contain;border-radius:7px;background:#15131a;padding:4px}.vsx-story-thumbs img:first-child{outline:2px solid var(--vs-lav);opacity:1}
.vsx-story-meta{display:flex;align-items:center;gap:12px;font:700 10px/1 var(--vs-mono);letter-spacing:.03em;color:rgba(243,240,234,.55)}.vsx-story-meta b{color:var(--vs-lav)}.vsx-story-meta span{padding:6px 9px;border-radius:999px;background:#1a1720}.vsx-story-meta em{font-style:normal}
.vsx-story-copy h3{margin:18px 0 12px;font:800 clamp(46px,5vw,68px)/.95 var(--ui);letter-spacing:-.06em}.vsx-story-copy h3 span{color:var(--vs-lav)}
.vsx-story-price{font:800 36px/1 var(--ui);letter-spacing:-.04em;margin:22px 0}.vsx-story-price small{font-size:12px;font-weight:600;color:rgba(243,240,234,.62);letter-spacing:0}.vsx-story-price small b{color:var(--vs-lav)}
.vsx-story-copy>p{font-size:15px;line-height:1.65;color:rgba(243,240,234,.68);max-width:56ch}
.vsx-story-callout{margin-top:24px;padding:16px 18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#14131a;display:flex;flex-direction:column;gap:3px}.vsx-story-callout b{font-size:14px}.vsx-story-callout span{font-size:12px;color:var(--vs-lav)}
.vsx-story-actions{display:flex;align-items:center;gap:18px;margin-top:20px}.vsx-story-link{font-weight:750;color:var(--vs-white);text-underline-offset:4px}
.vsx-story-daws{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}.vsx-story-daws span{width:42px;height:42px;border-radius:10px;background:#15141a;border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s}.vsx-story-daws span:hover{transform:translateY(-4px) scale(1.07);border-color:rgba(201,138,255,.5)}.vsx-story-daws img{display:block;width:28px;height:28px;object-fit:contain!important;object-position:center!important}.vsx-daw-word{font:800 8px/1 var(--ui)!important;color:#f3f0ea!important;text-align:center;padding:4px}
.vsx-story-spec{display:block;margin-top:12px;font:600 10px/1.3 var(--vs-mono);color:rgba(243,240,234,.42)}
@media(prefers-reduced-motion:reduce){.vsx-story-daws span{transition:none}.vsx-story-daws span:hover{transform:none}}

/* Hub before pricing */
.vsx-hubsec{border-top:1px solid rgba(255,255,255,.07)}

/* Pricing — two tall product cards, stack artwork instead of SaaS cards */
.vsx-buysec{padding:96px 0 120px!important;border-top:1px solid rgba(255,255,255,.07)}
.vsx-buy-in{display:block!important}.vsx-buy-art{display:none!important}.vsx-buy-info{max-width:none!important}
.vsx-buy-info>.vsx-num{display:inline-block;margin-bottom:10px}.vsx-buy-info>.vsx-h2{font-size:clamp(48px,6vw,74px)!important;max-width:10ch;margin-bottom:16px!important}.vsx-buy-desc{max-width:50ch!important}
.vsx-buy-list{display:none!important}.vsx-plans{margin-top:46px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
.vsx-plan{min-height:650px!important;border-radius:22px!important;padding:30px!important;background:#15141a!important;border:1px solid rgba(255,255,255,.12)!important;display:flex!important;flex-direction:column!important}.vsx-plan.on{border-color:var(--vs-lav)!important;box-shadow:0 20px 60px rgba(139,69,245,.08)}
.vsx-plan-h span{font-size:10px!important}.vsx-plan-h h3{font-size:36px!important;letter-spacing:-.05em!important;margin-top:8px!important}.vsx-product-stack{height:260px!important;margin:22px 0 10px!important;position:relative!important}.vsx-product-stack img{position:absolute!important;left:50%!important;top:50%!important;width:72%!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}.vsx-product-stack .s3{transform:translate(-66%,-55%) rotate(-7deg) scale(.76)!important;opacity:.62}.vsx-product-stack .s2{transform:translate(-34%,-56%) rotate(7deg) scale(.78)!important;opacity:.75}.vsx-product-stack .s1{transform:translate(-50%,-42%) scale(1)!important;z-index:3!important;opacity:1!important}.vsx-plan-p{margin-top:auto!important}.vsx-plan-p b{font-size:48px!important;letter-spacing:-.05em}.vsx-plan-go{width:100%;margin-top:18px!important}
@media(max-width:850px){.wrap{width:min(100% - 30px,var(--vs-page-max))}.vsx-pf-in,.vsx-story-grid{grid-template-columns:1fr!important}.vsx-pf-head .vsx-h2{max-width:10ch}.vsx-story-grid{gap:38px}.vsx-plans{grid-template-columns:1fr!important}.vsx-plan{min-height:590px!important}}

/* ===== VocalSyrup v105 — reference-driven layout correction ===== */
.vsx-story{padding:96px 0 108px}.vsx-story-in{max-width:1080px}.vsx-story-head{margin-bottom:44px}.vsx-story-title{font-size:clamp(38px,4.2vw,62px);line-height:.94;letter-spacing:-.055em;max-width:520px}.vsx-story-grid{grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr);gap:70px;align-items:center}.vsx-story-visual>img{width:88%;max-width:520px;margin-inline:auto}.vsx-story-copy h3{font-size:clamp(40px,4vw,58px);letter-spacing:-.055em}.vsx-story-copy p{font-size:15px;line-height:1.62;max-width:510px}.vsx-story-callout{border-radius:15px;padding:15px 18px}.vsx-story-actions .vsx-btn{border-radius:999px}.vsx-story-daws{gap:14px;margin-top:24px}.vsx-story-daws span{transition:transform .22s ease,filter .22s ease}.vsx-story-daws span:hover{transform:translateY(-3px) scale(1.08);filter:brightness(1.15)}
.vsx-buysec{padding:105px 0 120px}.vsx-buy-in{max-width:1080px;display:block}.vsx-buy-art{display:none}.vsx-buy-info{max-width:none}.vsx-buy-info>.vsx-h2{max-width:520px;font-size:clamp(42px,4.5vw,64px);line-height:.95;letter-spacing:-.055em}.vsx-buy-desc,.vsx-buy-list{display:none}.vsx-plans{max-width:760px;margin:50px auto 0;gap:20px}.vsx-plan{min-height:610px;border-radius:22px;padding:30px}.vsx-plan.on{border-color:#c98aff}.vsx-plan-h h3{font-size:40px;letter-spacing:-.045em}.vsx-product-stack{height:245px;margin:8px 0 12px}.vsx-product-stack img{max-height:215px}.vsx-plan-p b{font-size:48px}.vsx-plan-go{border-radius:999px;min-height:52px}.vsx-plan-badge{border-radius:999px}
.vsx-testimonials{padding-top:100px;padding-bottom:110px}
@keyframes vsDawPop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.035)}}
.vsx-story-daws span:nth-child(1){animation:vsDawPop 3.8s ease-in-out infinite}.vsx-story-daws span:nth-child(2){animation:vsDawPop 3.8s .18s ease-in-out infinite}.vsx-story-daws span:nth-child(3){animation:vsDawPop 3.8s .36s ease-in-out infinite}.vsx-story-daws span:nth-child(4){animation:vsDawPop 3.8s .54s ease-in-out infinite}.vsx-story-daws span:nth-child(5){animation:vsDawPop 3.8s .72s ease-in-out infinite}.vsx-story-daws span:nth-child(6){animation:vsDawPop 3.8s .9s ease-in-out infinite}.vsx-story-daws span:nth-child(7){animation:vsDawPop 3.8s 1.08s ease-in-out infinite}.vsx-story-daws span:nth-child(8){animation:vsDawPop 3.8s 1.26s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.vsx-story-daws span{animation:none!important}}
@media(max-width:800px){.vsx-story-grid{grid-template-columns:1fr;gap:38px}.vsx-story-visual>img{width:100%}.vsx-plans{grid-template-columns:1fr}.vsx-plan{min-height:auto}}

/* ============================================================
   VOCALSYRUP v106 — clean rebuild from approved light reference
   ============================================================ */
.template-index{--vs-pink:#ff2a9d;--vs-pink2:#ff49bd;--vs-lilac:#e7c9ff;--vs-ink:#0d0c10;--vs-muted:#69636d;--vs-line:#e6e1e7;background:#fff;color:var(--vs-ink)}
.template-index .vsx{background:#fff;color:var(--vs-ink)}
.template-index .wrap{max-width:1280px;padding-inline:28px}
.template-index .vsx-eyebrow{font-size:11px;font-weight:700;letter-spacing:.11em;color:#73687b}.template-index .vsx-eyebrow i{background:var(--vs-pink)}
.template-index .vsx-btn{border-radius:999px;min-height:56px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-weight:800;font-size:15px}.template-index .vsx-btn.p{background:var(--vs-pink);color:#fff;border:1px solid var(--vs-pink);box-shadow:0 14px 30px rgba(255,42,157,.16)}.template-index .vsx-btn.p i{font-style:normal;background:#fff;color:#111;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:24px}.template-index .vsx-btn.s{background:#fff;color:#111;border:1px solid #bbb3bf;box-shadow:none}
/* header */
.template-index .nav.vsx-nav{position:relative;background:#fff!important;border-color:#ece8ed;backdrop-filter:none}.template-index .nav.vsx-nav .row{max-width:1280px;padding:12px 28px;background:#fff!important}.template-index .vsx-navmark{font-size:29px!important;letter-spacing:-.06em}.template-index .vsx-navmark .w{color:#0b0a0c}.template-index .vsx-navmark .s{color:var(--vs-pink)}.template-index .vsx-nav .links{gap:12px}.template-index .vsx-nav .links>a,.template-index .vsx-nav .has-menu>a{padding:10px 20px;border-radius:999px;font-weight:600;color:#171419}.template-index .vsx-nav .links .on{background:#fae8f5;color:var(--vs-pink)}
/* hero */
.template-index .vsx-hero{padding:52px 0 44px!important;overflow:hidden;border-bottom:1px solid #eeeaf0;background:radial-gradient(circle at 68% 45%,rgba(255,42,157,.07),transparent 27%),#fff}.template-index .vsx-hero-bgwave{display:none!important}.template-index .vsx-hero-in{max-width:1280px!important;display:grid!important;grid-template-columns:minmax(430px,.88fr) minmax(570px,1.12fr)!important;gap:52px!important;align-items:center!important}.template-index .vsx-hero-copy{padding:0!important;gap:14px!important;max-width:560px!important}.template-index .vsx-h1{margin:4px 0 0;font:800 clamp(72px,7.1vw,112px)/.77 var(--ui);letter-spacing:-.085em;color:#0c0b0e}.template-index .vsx-h1 span,.template-index .vsx-h1 strong{display:block}.template-index .vsx-h1 strong{color:var(--vs-pink);font-weight:800}.template-index .vsx-hero-sub{font-size:19px!important;line-height:1.32!important;color:#625d67!important;max-width:520px!important}.template-index .vsx-hero-strip{max-width:540px!important;min-height:78px;padding:13px 16px!important;border:1px solid #ded9e0!important;border-radius:20px!important;background:#fff!important;box-shadow:0 14px 36px rgba(42,30,44,.06)!important}.template-index .vsx-hero-strip-play{width:48px;height:48px;flex-basis:48px;background:var(--vs-pink)!important;color:#fff!important}.template-index .vsx-hero-strip-txt b{font-size:16px!important;color:#181419!important}.template-index .vsx-hero-strip-txt span{font-size:12px!important;color:#79717d!important}.template-index .vsx-hero-strip-sw{font-family:var(--ui)!important;font-weight:700!important}.template-index .vsx-hero-strip-sw i{color:#756e78!important;background:transparent!important}.template-index .vsx-hero-strip-sw i.on{background:#f9dff1!important;color:var(--vs-pink)!important;padding:8px 12px!important}.template-index .vsx-hero-chips{gap:10px!important;margin:0!important}.template-index .vsx-pill.sm{padding:10px 17px;border:1px solid #cfc8d1;border-radius:999px;background:#fff;color:#28232a;font-weight:700}.template-index .vsx-hero-cta{margin-top:2px!important;gap:12px!important}.template-index .vsx-hero-art{min-height:500px!important;display:grid!important;place-items:center!important;position:relative!important}.template-index .vsx-hero-art img{width:100%!important;max-width:690px!important;height:auto!important;border-radius:0!important;filter:drop-shadow(0 28px 30px rgba(33,17,38,.2))!important;position:relative;z-index:2}.template-index .vsx-hero-pulse{position:absolute;inset:20% -5% 12%;background:radial-gradient(ellipse,rgba(255,42,157,.17),rgba(210,130,255,.07) 38%,transparent 69%);filter:blur(24px);z-index:0}.template-index .vsx-hero-daws{display:flex;gap:14px;margin-top:6px;align-items:flex-start}.template-index .vsx-hero-daws span{width:64px;height:64px;border:1px solid #e1dce3;border-radius:14px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(25,15,28,.04)}.template-index .vsx-hero-daws img{width:44px;height:44px;object-fit:contain!important}.template-index .vsx-hero-daws .word{font-weight:800;font-size:13px}.template-index .vsx-hero-daws .reaper{font-size:9px}.template-index .vsx-specs{color:#77717a!important;font-size:11px!important;letter-spacing:.06em!important}
/* comments */
.template-index .vsx-pfsec{padding:86px 0 94px!important}.template-index .vsx-pf-in{max-width:1120px!important;display:grid!important;grid-template-columns:320px 1fr!important;gap:90px!important;align-items:start!important}.template-index .vsx-pf-head .vsx-h2{font-size:clamp(52px,5vw,72px)!important;line-height:.9!important;letter-spacing:-.07em!important;color:#111!important;max-width:6ch!important;margin-top:26px!important}.template-index .vsx-pf-panel{min-height:440px!important;background:#fff!important;border:1px solid #dcd7de!important;border-radius:20px!important;box-shadow:0 20px 48px rgba(24,16,27,.06)!important;color:#19151b!important;overflow:hidden!important}.template-index .vsx-pf-bar{background:#faf9fa!important;border-color:#e6e2e7!important}.template-index .vsx-pf-live{color:#716a73!important}.template-index .vsx-pf-empty{min-height:310px!important;color:#5e5861!important}.template-index .vsx-pf-react{border-color:#ece8ed!important;color:#918a94!important;background:#fff!important}
/* product detail */
.template-index .vsx-story{padding:92px 0 108px!important;border-top:1px solid #eeeaf0!important}.template-index .vsx-story-in{max-width:1180px!important}.template-index .vsx-story-head{margin-bottom:58px!important}.template-index .vsx-story-title{font-size:clamp(48px,5vw,68px)!important;line-height:.92!important;letter-spacing:-.07em!important;color:#0d0c10!important;max-width:8ch!important}.template-index .vsx-story-grid{grid-template-columns:minmax(0,1fr) minmax(430px,.95fr)!important;gap:74px!important}.template-index .vsx-story-visual>img{width:100%!important;max-width:560px!important;filter:drop-shadow(0 24px 30px rgba(24,13,29,.14))!important}.template-index .vsx-story-thumbs{justify-content:flex-start!important;margin-top:18px!important;opacity:1!important}.template-index .vsx-story-thumbs img{background:#f4f1f4!important;border:1px solid #ded9df!important;width:56px!important;height:44px!important;object-fit:contain!important}.template-index .vsx-story-player{margin-top:18px;min-height:64px;border:1px solid #ded9df;border-radius:14px;display:flex;align-items:center;gap:14px;padding:10px 16px;color:#171319}.template-index .vsx-story-player>b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--vs-pink);color:#fff}.template-index .vsx-story-player span{display:flex;flex-direction:column}.template-index .vsx-story-player strong{font-size:13px}.template-index .vsx-story-player small{font-size:10px;color:#817a84}.template-index .vsx-story-meta{color:#89818b!important}.template-index .vsx-story-meta b{color:var(--vs-pink)!important}.template-index .vsx-story-meta span{background:#f4f1f4!important;color:#2b262d!important}.template-index .vsx-story-copy h3{color:#0e0d10!important;font-size:56px!important}.template-index .vsx-story-copy h3 span{color:var(--vs-pink)!important}.template-index .vsx-story-price{color:#111!important;font-size:38px!important}.template-index .vsx-story-price small{color:#6f6872!important}.template-index .vsx-story-copy>p{color:#69626c!important;font-size:15px!important}.template-index details.vsx-story-callout{display:block!important;background:#fff!important;border-color:#dcd7de!important;color:#161217!important;padding:0!important}.template-index .vsx-story-callout summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:20px}.template-index .vsx-story-callout summary::-webkit-details-marker{display:none}.template-index .vsx-story-callout summary span{color:var(--vs-pink)!important}.template-index .vsx-story-callout summary i{font-style:normal;color:var(--vs-pink);font-size:22px}.template-index .vsx-story-callout ul{margin:0;padding:0 22px 20px 38px;color:#6b646e}.template-index .vsx-story-link{color:#181419!important}.template-index .vsx-story-daws span{background:#fff!important;border-color:#ddd7df!important}.template-index .vsx-story-daws img{width:28px!important;height:28px!important;object-fit:contain!important}.template-index .vsx-daw-word{color:#171319!important}.template-index .vsx-story-spec{color:#807983!important}
/* hub */
.template-index .vsx-hubsec{padding:94px 0 106px!important;border-top:1px solid #eeeaf0!important}.template-index .vsx-hubsec>.wrap{max-width:1180px!important}.template-index .vsx-hubsec .vsx-h2{color:#0d0c10!important;font-size:clamp(50px,5vw,68px)!important;line-height:.94!important;letter-spacing:-.065em!important}.template-index .vsx-modsec-sub{color:#6d6670!important}.template-index .vsx-hub{margin-top:38px!important;min-height:470px!important;background:#fff!important;border:1px solid #d8d2dc!important;border-radius:22px!important;box-shadow:0 25px 60px rgba(29,17,33,.08)!important;grid-template-columns:210px 1fr!important}.template-index .vsx-hub-side{background:#0e0d12!important}.template-index .vsx-hub-main{background:#fff!important;color:#141116!important}.template-index .vsx-hub-top{color:#777078!important;border-color:#e6e1e7!important}.template-index .vsx-hub-panel h3{color:#efedf0!important}.template-index .vsx-hub-product{background:#17151b!important;color:#fff!important}.template-index .vsx-hub-foot{margin-top:18px!important}.template-index .vsx-hub-foot>span{font-size:11px;font-weight:700;color:#79727b;margin-left:18px}
/* pricing */
.template-index .vsx-buysec{padding:100px 0 112px!important;border-top:1px solid #eeeaf0!important}.template-index .vsx-buy-in{max-width:1180px!important;display:block!important}.template-index .vsx-buy-art{display:none!important}.template-index .vsx-buy-info{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:80px!important}.template-index .vsx-buy-info>.vsx-num{display:none!important}.template-index .vsx-buy-info>.vsx-h2{grid-column:1;font-size:clamp(54px,5vw,70px)!important;line-height:.91!important;letter-spacing:-.07em!important;color:#0e0c10!important;max-width:8ch!important}.template-index .vsx-plans{grid-column:1/-1!important;max-width:800px!important;width:100%!important;margin:48px auto 0!important;gap:20px!important}.template-index .vsx-plan{min-height:610px!important;border:1px solid #ded8e0!important;border-radius:24px!important;background:#fff!important;color:#111!important;padding:30px!important}.template-index .vsx-plan.on{border-color:var(--vs-pink)!important}.template-index .vsx-plan-h>span{color:#777078!important}.template-index .vsx-plan-h h3{color:#111!important}.template-index .vsx-product-stack{height:245px!important}.template-index .vsx-product-stack img{max-height:205px!important;filter:drop-shadow(0 15px 15px rgba(20,12,24,.14))!important}.template-index .vsx-plan-p{color:#111!important}.template-index .vsx-plan-p span{color:#7d7680!important}.template-index .vsx-plan-badge{background:#f4d9ff!important;color:#35143f!important;border:0!important}.template-index .vsx-plan-go{background:var(--vs-pink)!important;border-color:var(--vs-pink)!important}.template-index .vsx-plan-warn{color:#766f78!important}
@media(max-width:900px){.template-index .vsx-hero-in,.template-index .vsx-pf-in,.template-index .vsx-story-grid{grid-template-columns:1fr!important}.template-index .vsx-hero-art{order:0!important;min-height:330px!important}.template-index .vsx-hero-art img{max-width:600px!important}.template-index .vsx-pf-in{gap:34px!important}.template-index .vsx-pf-head .vsx-h2{max-width:9ch!important}.template-index .vsx-buy-info{display:block!important}.template-index .vsx-plans{grid-template-columns:1fr!important}.template-index .vsx-hub{grid-template-columns:72px 1fr!important}}
@media(max-width:600px){.template-index .wrap{padding-inline:18px}.template-index .vsx-h1{font-size:68px}.template-index .vsx-hero-daws{gap:7px;flex-wrap:wrap}.template-index .vsx-hero-daws span{width:48px;height:48px}.template-index .vsx-hero-daws img{width:34px;height:34px}.template-index .vsx-story-copy h3{font-size:44px!important}.template-index .vsx-plans{max-width:100%!important}}

/* === VocalSyrup v108 stable fixes: static-first, no hidden reveal states === */
.template-index .vsx-hero-copy,.template-index .vsx-hero-art,.template-index .vsx-pfsec,.template-index .vsx-story,.template-index .vsx-hubsec,.template-index .vsx-buysec,.template-index .vsx-faqsec,.template-index .vsx-finalcta{opacity:1!important;visibility:visible!important;transform:none!important}
.template-index .vsx-hero-art img,.template-index .vsx-story-main,.template-index .vsx-hub-product img,.template-index .vsx-product-stack img{filter:drop-shadow(0 24px 30px rgba(24,13,29,.14))!important;mix-blend-mode:normal!important;opacity:1!important}
.template-index .vsx-story-stage{width:100%;display:grid;place-items:center;min-height:360px}
.template-index .vsx-story-main{display:block;width:100%;max-width:560px;height:auto;object-fit:contain;transition:opacity .16s linear,transform .18s var(--ease-premium,cubic-bezier(.16,1,.3,1)),filter .16s ease}
/* reuses the hero's snap-settle timing/feel (v118/v119 above): a quick
   dip on the way out, the new shot settles in from a touch smaller -
   same durations/easing as #vs111-main. kept non-zero (never opacity:0)
   since this gallery has a single <img>, not a two-layer stack - a full
   fade would be exactly the "empty product stage" flash the brief warns
   against, so the dip stays shallow enough that the frame is never
   blank. */
.template-index .vsx-story-main.is-swapping{opacity:.55!important;transform:scale(.985)!important}
.template-index .vsx-story-thumbs{display:flex!important;justify-content:flex-start!important;gap:10px!important;overflow-x:auto!important;padding:4px 3px 10px!important;scrollbar-width:thin;opacity:1!important}
.template-index .vsx-story-thumbs button{flex:0 0 58px;width:58px;height:46px;padding:3px;border:1px solid #ded9df;border-radius:8px;background:#fff;cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.template-index .vsx-story-thumbs button:hover{transform:translateY(-2px)}
.template-index .vsx-story-thumbs button.is-active{border-color:var(--vs-pink);box-shadow:0 0 0 1px var(--vs-pink)}
.template-index .vsx-story-thumbs button img{width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;background:transparent!important;padding:0!important;outline:0!important}
.template-index .vsx-suite-stack{position:relative;overflow:visible}
.template-index .vsx-suite-stack .stk{position:absolute!important;left:50%;top:50%;width:min(78%,310px)!important;height:auto!important;max-height:190px!important;object-fit:contain!important;transform-origin:50% 85%;opacity:1!important}
.template-index .vsx-suite-stack .st1{z-index:9;transform:translate(-50%,-50%)}
.template-index .vsx-suite-stack .st2{z-index:8;transform:translate(-58%,-52%) rotate(-7deg);opacity:.82!important}
.template-index .vsx-suite-stack .st3{z-index:7;transform:translate(-42%,-52%) rotate(7deg);opacity:.82!important}
.template-index .vsx-suite-stack .st4{z-index:6;transform:translate(-64%,-49%) rotate(-12deg);opacity:.5!important}
.template-index .vsx-suite-stack .st5{z-index:5;transform:translate(-36%,-49%) rotate(12deg);opacity:.5!important}
.template-index .vsx-suite-stack .st6,.template-index .vsx-suite-stack .st7,.template-index .vsx-suite-stack .st8,.template-index .vsx-suite-stack .st9{opacity:0!important}
@media(prefers-reduced-motion:reduce){.template-index .vsx-story-main,.template-index .vsx-story-thumbs button{transition:none!important}}

/* === VocalSyrup v109 visual/interaction pass === */
.template-index{--vs-pink:#8d4dff;--vs-pink2:#b06cff;--vs-lilac:#e8ddff}
/* brand purple now matches the plugin; ticker stays distinct */
.template-index .vsx-navmark .s,.template-index .vsx-h1 strong,.template-index .vsx-story-copy h3 span{color:#8d4dff!important}
.template-index .vsx-btn.p,.template-index .vsx-hero-strip-play,.template-index .vsx-plan-go{background:#8d4dff!important;border-color:#8d4dff!important;box-shadow:0 14px 28px rgba(111,61,210,.18)!important}
.template-index .vsx-eyebrow i{background:#8d4dff!important}
.template-index .vsx-hero-strip-sw i.on{background:#eee6ff!important;color:#6f35d5!important}
/* header: reference-like compact tabs and dropdown above marquee */
.template-index .nav.vsx-nav{z-index:500!important;background:#0c0b10!important;border:0!important;overflow:visible!important}
.template-index .nav.vsx-nav .row{min-height:64px!important;padding:8px 28px!important;background:#0c0b10!important;overflow:visible!important}
.template-index .vsx-navmark .w{color:#fff!important}.template-index .vsx-navmark .s{color:#b78aff!important}
.template-index .vsx-nav .links{gap:4px!important}.template-index .vsx-nav .links>a,.template-index .vsx-nav .has-menu>a{min-height:40px!important;padding:0 18px!important;border-radius:20px!important;display:flex!important;align-items:center!important;font-size:14px!important;line-height:1!important;font-weight:700!important;color:#aaa5ad!important;letter-spacing:-.02em!important}
.template-index .vsx-nav .links .on,.template-index .vsx-nav .links>a:hover,.template-index .vsx-nav .has-menu>a:hover{background:#27153f!important;color:#e2cfff!important}
.template-index .vsx-nav .has-menu{position:relative;z-index:700!important}.template-index .vsx-nav .mega{z-index:900!important;top:calc(100% + 8px)!important}.template-index .vsx-nav .tools{color:#fff!important}
.template-index .vsx-ticker,.template-index .ticker{position:relative!important;z-index:100!important}
/* remove the black rectangular canvas visually without modifying plugin art */
.template-index .vsx-story-main,.template-index .vsx-story-thumbs img,.template-index .vsx-suite-stack .stk,.template-index .vsx-hub-product img{clip-path:inset(1.2% 1.2% 1.8% 1.2% round 7%)!important}
/* DAWs: icon + label, equal optical boxes */
.template-index .vsx-story-daws{align-items:flex-start!important;gap:10px!important}.template-index .vsx-story-daws>span{width:58px!important;height:auto!important;border:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important}.template-index .vsx-story-daws>span>img,.template-index .vsx-story-daws>span>b{width:42px!important;height:42px!important;border:1px solid #ddd7e3!important;border-radius:9px!important;background:#fff!important;display:grid!important;place-items:center!important;object-fit:contain!important;padding:6px!important;box-sizing:border-box!important}.template-index .vsx-story-daws small{font-size:8px;color:#746d77;white-space:nowrap}.template-index .vsx-story-daws .vsx-daw-word b{font-size:7px!important;line-height:.9!important;text-align:center!important}
/* pricing cards: feature lists and animated fan */
.template-index .vsx-plan{min-height:760px!important;display:flex!important;flex-direction:column!important}.template-index .vsx-product-stack{height:250px!important;margin:8px 0 4px!important}.template-index .vsx-plan-p{margin-top:0!important}.template-index .vsx-plan-kicker{font-size:12px;color:#746d77;margin:12px 0 14px;padding-bottom:14px;border-bottom:1px solid #e6e1e7}.template-index .vsx-plan-features{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px;font-size:12px;color:#373139}.template-index .vsx-plan-features li:before{content:'✓';color:#8d4dff;font-weight:900;margin-right:10px}.template-index .vsx-plan form,.template-index .vsx-plan>button.vsx-plan-go{margin-top:auto!important}.template-index .vsx-suite-stack .stk{transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease!important}.template-index .vsx-suite-stack .st6,.template-index .vsx-suite-stack .st7,.template-index .vsx-suite-stack .st8,.template-index .vsx-suite-stack .st9{opacity:.25!important}.template-index .vsx-suite-stack .st6{z-index:4;transform:translate(-69%,-47%) rotate(-16deg)}.template-index .vsx-suite-stack .st7{z-index:3;transform:translate(-31%,-47%) rotate(16deg)}.template-index .vsx-suite-stack .st8{z-index:2;transform:translate(-73%,-44%) rotate(-20deg)}.template-index .vsx-suite-stack .st9{z-index:1;transform:translate(-27%,-44%) rotate(20deg)}
.template-index .vsx-plan:hover .st2{transform:translate(-62%,-54%) rotate(-10deg)}.template-index .vsx-plan:hover .st3{transform:translate(-38%,-54%) rotate(10deg)}.template-index .vsx-plan:hover .st4{transform:translate(-70%,-50%) rotate(-16deg)}.template-index .vsx-plan:hover .st5{transform:translate(-30%,-50%) rotate(16deg)}.template-index .vsx-plan:hover .st6{transform:translate(-77%,-45%) rotate(-22deg)}.template-index .vsx-plan:hover .st7{transform:translate(-23%,-45%) rotate(22deg)}.template-index .vsx-plan:hover .st8{transform:translate(-83%,-40%) rotate(-28deg)}.template-index .vsx-plan:hover .st9{transform:translate(-17%,-40%) rotate(28deg)}
/* card-level hover: foreground lifts a touch, border/shadow strengthen,
   text never moves (only the card shell + image layers are touched) */
.template-index .vsx-plan{transition:transform .32s var(--ease-premium,cubic-bezier(.16,1,.3,1)),box-shadow .32s ease,border-color .32s ease!important}
.template-index .vsx-plan:hover{transform:translateY(-5px)!important;border-color:rgba(201,138,255,.45)!important;box-shadow:0 24px 50px rgba(20,10,35,.28)!important}
.template-index .vsx-plan .st3.stk-fg{transition:transform .32s var(--ease-premium,cubic-bezier(.16,1,.3,1)),opacity .32s ease!important}
.template-index .vsx-plan:hover .st3.stk-fg{transform:translate(-50%,-55%) scale(1.015)!important}
@media(prefers-reduced-motion:reduce){.template-index .vsx-plan,.template-index .vsx-plan .st3.stk-fg,.template-index .vsx-plan .stk{transition:none!important}.template-index .vsx-plan:hover{transform:none!important}}
/* safe motion: never hide content */
@supports (animation-timeline:view()){
 .template-index .vsx-story-title,.template-index .vsx-hubsec .vsx-h2,.template-index .vsx-buy-info>.vsx-h2,.template-index .vsx-pf-head .vsx-h2{animation:vsTypeRise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
 .template-index .vsx-story-stage,.template-index .vsx-hub{animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
 /* pricing: heading already covered above via .vsx-buy-info>.vsx-h2; the two
    cards get their own slightly offset ranges so the monthly card settles
    a beat before the one-time card, instead of the whole grid rising as
    one flat block - "heading first, then monthly card, then one-time
    card" per the brief. each card's own stack gets a quick scale+opacity
    "compose" on top of that, which reads as the layered shots arriving
    together rather than a flat panel sliding up. */
 .template-index .vsx-plans .vsx-plan:nth-child(1){animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 0% cover 36%}
 .template-index .vsx-plans .vsx-plan:nth-child(2){animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 8% cover 44%}
 .template-index .vsx-plan .vsx-product-stack{animation:vsStackCompose linear both;animation-timeline:view();animation-range:entry 10% cover 46%}
 .template-index .vsx-pf-panel{animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
 .template-index .vsx-hub-foot{animation:vsTypeRise linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
 /* DAW logo rows (hero + Meet VocalSyrup): each mark rises in on the same
    vsProductRise keyframe, with a per-item animation-delay so they land
    sequentially instead of as one flat row - still a single shared
    system, not a separate one, and animation-delay on a view()-timed
    animation offsets that item's progress along the same scroll range
    rather than adding real wall-clock delay. */
 .template-index .vs111-daws>*,.template-index .vsx-story-daws>*{animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 55% cover 90%}
 .template-index .vs111-daws>*:nth-child(1),.template-index .vsx-story-daws>*:nth-child(1){animation-delay:0ms}
 .template-index .vs111-daws>*:nth-child(2),.template-index .vsx-story-daws>*:nth-child(2){animation-delay:35ms}
 .template-index .vs111-daws>*:nth-child(3),.template-index .vsx-story-daws>*:nth-child(3){animation-delay:70ms}
 .template-index .vs111-daws>*:nth-child(4),.template-index .vsx-story-daws>*:nth-child(4){animation-delay:105ms}
 .template-index .vs111-daws>*:nth-child(5),.template-index .vsx-story-daws>*:nth-child(5){animation-delay:140ms}
 .template-index .vs111-daws>*:nth-child(6),.template-index .vsx-story-daws>*:nth-child(6){animation-delay:175ms}
 .template-index .vs111-daws>*:nth-child(7),.template-index .vsx-story-daws>*:nth-child(7){animation-delay:210ms}
 .template-index .vs111-daws>*:nth-child(8),.template-index .vsx-story-daws>*:nth-child(8){animation-delay:245ms}
 .template-index .vs111-daws>*:nth-child(9),.template-index .vsx-story-daws>*:nth-child(9){animation-delay:280ms}
 .template-index .vs111-daws>*:nth-child(10),.template-index .vsx-story-daws>*:nth-child(10){animation-delay:315ms}
}
@keyframes vsTypeRise{from{transform:translateY(22px);letter-spacing:-.09em}to{transform:translateY(0);letter-spacing:-.07em}}
@keyframes vsProductRise{from{transform:translateY(26px) scale(.985)}to{transform:translateY(0) scale(1)}}
/* the mini product-stack composing in: scaling just the container (never
   the individual .stk layers' own transforms) means the already-correct
   per-layer offsets/rotations stay intact throughout - at the smaller
   scale they simply read as closer together, then fan out to their real
   spacing as the container reaches scale(1). safe against the several
   generations of per-layer transform overrides above. */
@keyframes vsStackCompose{from{transform:scale(.88);opacity:.55}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.template-index *{scroll-behavior:auto!important}}
/* v111 — hero rebuilt from the reference proportions; static-first, animated state changes */
.template-index{--vs111:#8a4dff;--vs111-hot:#9a5bff;--vs111-ink:#09090d;background:#f7f6f3!important}.template-index #shopify-section-vs-ticker{display:block!important;order:-2}.template-index #shopify-section-header{order:-1}.template-index .vtk{background:var(--vs111)!important;color:#fff!important;height:40px!important;display:flex!important;align-items:center!important}.template-index .vtk-i{font-weight:800!important}.template-index .vtk-a{font-style:normal!important}.template-index .nav.vsx-nav,.template-index .nav.vsx-nav .row{background:#fff!important;color:#111!important}.template-index .nav.vsx-nav{border-bottom:1px solid #e2e0e4!important;z-index:1000!important}.template-index .nav.vsx-nav .row{min-height:58px!important;padding:6px 18px!important}.template-index .vs110-links{margin-left:auto!important;gap:2px!important}.template-index .vs110-links>a{height:38px!important;min-height:38px!important;padding:0 16px!important;border:1px solid transparent!important;border-radius:999px!important;background:transparent!important;color:#17161a!important;font-size:12px!important;font-weight:760!important}.template-index .vs110-links>a.on{background:#fff!important;border-color:#ddd9e0!important;box-shadow:0 3px 12px rgba(0,0,0,.07)!important}.template-index .vsx-nav .tools{color:#111!important}.vs111-hero{background:#f7f6f3;position:relative;overflow:hidden;border-bottom:1px solid #dedbe0;color:#09090d;background-image:radial-gradient(rgba(15,10,20,.045) .65px,transparent .65px);background-size:3px 3px}.vs111-stage{max-width:980px!important;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:'copy product' 'follow follow' 'bottom bottom';column-gap:52px;padding-top:62px!important;padding-bottom:46px!important}.vs111-copy{grid-area:copy;min-width:0}.vs111-kicker{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:760;color:#49454d;min-height:16px}.vs111-kicker i{width:6px;height:6px;border-radius:50%;background:var(--vs111)}.vs111-copy h1{margin:7px 0 0;display:flex;flex-direction:column;line-height:.78;letter-spacing:-.065em}.vs111-copy h1 small{font-size:clamp(25px,2.45vw,34px);line-height:1;font-weight:650;letter-spacing:-.055em;color:#4c4850;margin-bottom:4px}.vs111-copy h1 span{font-size:clamp(70px,7.6vw,105px);font-weight:500}.vs111-copy h1 span:last-child{color:var(--vs111)}.vs111-player{display:flex;align-items:center;gap:11px;margin-top:38px}.vs111-play{width:48px;height:48px;border:0;border-radius:50%;background:var(--vs111);color:#fff;box-shadow:0 12px 25px rgba(138,77,255,.27);cursor:pointer}.vs111-ab{display:flex;border:2px solid #d9c8ff;border-radius:999px;padding:3px;background:#fff}.vs111-ab button{height:36px;padding:0 18px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:12px;font-weight:760;cursor:pointer}.vs111-ab button.is-on{background:#f0eef1}.vs111-ab button:last-child{color:var(--vs111)}.vs111-hint{font-size:10px;color:#77727a;margin:7px 0 14px}.vs111-prompts{display:flex;flex-wrap:wrap;gap:7px;max-width:430px}.vs111-prompts button{border:1px solid #d6d2d8;border-radius:999px;background:#fff;padding:7px 13px;font-size:10px;font-weight:700;cursor:pointer}.vs111-prompts button.is-on{background:var(--vs111);border-color:var(--vs111);color:#fff}.vs111-product{grid-area:product;position:relative;min-height:355px;display:grid;place-items:center}.vs111-product img{z-index:2;width:min(100%,465px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(35,20,48,.14));transition:opacity .18s ease,transform .22s ease}.vs111-wave{position:absolute;left:-2%;right:-2%;top:49%;height:34px;opacity:.1;background:repeating-linear-gradient(90deg,transparent 0 9px,var(--vs111) 9px 10px)}.vs111-browse{position:absolute;z-index:3;right:6%;bottom:5px;display:flex;align-items:center;gap:18px;color:#8b868e;font-size:10px;font-weight:800;letter-spacing:.18em}.vs111-browse button{border:0;background:none;font-size:24px;color:#aaa5ad;cursor:pointer}.vs111-follow{grid-area:follow;margin-top:4px}.vs111-follow>p{font-size:10px;color:#77717b;margin:0 0 9px}.vs111-module-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}.vs111-module-scroll::-webkit-scrollbar{display:none}.vs111-module-scroll button{flex:0 0 auto;height:40px;border:1px solid #d7d3d9;border-radius:999px;background:#fff;padding:3px 13px 3px 4px;display:flex;align-items:center;gap:7px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}.vs111-module-scroll button:hover{transform:translateY(-1px)}.vs111-module-scroll .thumb{width:38px;height:30px;overflow:hidden;border-radius:7px;background:#0a080d;display:grid;place-items:center}.vs111-module-scroll .thumb img{width:100%;height:100%;object-fit:contain}.vs111-module-scroll button b{font-size:11px}.vs111-module-scroll button.is-on{background:var(--vs111);border-color:var(--vs111);color:#fff}.vs111-progress{height:2px;background:#ddd9de;position:relative;overflow:hidden}.vs111-progress i{position:absolute;inset:0;background:var(--vs111);transform-origin:left center;transition:transform .35s ease}.vs111-bottom{grid-area:bottom;padding-top:18px}.vs111-all{width:min(100%,350px);min-height:52px;display:flex;align-items:center;gap:11px;padding:5px 7px;border:1px solid #d8d4db;border-radius:13px;background:#fff;color:#17151a;text-decoration:none}.vs111-mini{display:flex;width:86px}.vs111-mini>span{width:39px;height:32px;overflow:hidden;border-radius:6px;background:#09080c;margin-right:-10px;display:grid;place-items:center}.vs111-mini img{width:100%;height:100%;object-fit:contain}.vs111-all>span:nth-child(2){display:flex;flex-direction:column}.vs111-all b{font-size:12px}.vs111-all small{font-size:8px;color:#77717b}.vs111-all>i{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--vs111);color:#fff;font-style:normal}.vs111-ctas{display:flex;align-items:center;gap:18px;margin-top:18px}.vs111-primary{display:flex;align-items:center;gap:20px;padding:5px 5px 5px 18px;min-height:50px;border-radius:999px;background:var(--vs111);color:#fff!important;text-decoration:none;font-size:13px;font-weight:800;box-shadow:0 12px 24px rgba(138,77,255,.25)}.vs111-primary i{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--vs111);display:grid;place-items:center;font-style:normal}.vs111-secondary{color:#111!important;font-size:12px;font-weight:760;text-decoration:underline!important;text-underline-offset:5px}.vs111-daws{display:grid;grid-template-columns:repeat(5,46px);justify-content:center;gap:13px 16px;margin-top:58px}.vs111-daws img{width:46px;height:46px;object-fit:contain;transition:transform .2s ease}.vs111-daws img:hover{transform:translateY(-4px) scale(1.05)}.vs111-spec{text-align:center;margin:8px 0 0;font-size:9px;font-weight:700;color:#77727a}.vs111-switching #vs111-main,.vs111-switching #vs111-title,.vs111-switching #vs111-sub,.vs111-switching #vs111-kicker{opacity:.15;transform:translateY(6px)}#vs111-title,#vs111-sub,#vs111-kicker{transition:opacity .16s ease,transform .18s ease}@media(max-width:800px){.vs111-stage{grid-template-columns:1fr;grid-template-areas:'copy' 'product' 'follow' 'bottom';padding-top:34px!important}.vs111-product{min-height:300px}.vs111-copy h1 span{font-size:clamp(64px,20vw,92px)}.vs111-daws{grid-template-columns:repeat(4,44px)}.template-index .vs110-links>a{padding:0 10px!important}}@media(prefers-reduced-motion:reduce){.vs111-product img,#vs111-title,#vs111-sub,#vs111-kicker,.vs111-progress i{transition:none!important}.vs111-module-scroll{scroll-behavior:auto!important}}

/* === VocalSyrup v113 — safe hero repair: original assets only === */
.template-index .vsx-navmark{font-size:22px!important;display:inline-flex!important;align-items:center!important;gap:0!important;line-height:1!important;text-decoration:none!important;min-width:112px!important}
.template-index .vsx-navmark .w{display:inline!important;color:#09090d!important;font-weight:900!important;letter-spacing:-.065em!important}
.template-index .vsx-navmark .s{display:inline!important;color:#8a4dff!important;font-weight:900!important;letter-spacing:-.065em!important}
.template-index .nav.vsx-nav,.template-index .nav.vsx-nav .row{background:#fff!important}
/* defensive stacking fix: the ticker (.vtk) later picked up z-index:1201
   (see v114 below) which outranked the header's 1100 - harmless today
   since the ticker sits above the header in normal flow and nothing
   from the header currently overlaps upward into it, but any future
   header dropdown must render above the ticker, not under it. Fixed at
   the source (one defined stacking order) instead of an arbitrary
   bigger number. */
.template-index .nav.vsx-nav{position:relative!important;z-index:1300!important}
.template-index .vs110-links>a{transition:background .22s var(--ease-premium,cubic-bezier(.16,1,.3,1)),color .18s ease,box-shadow .22s ease!important}
.template-index .vs110-links>a:not(.on):hover{background:#f1eff2!important}
@media(prefers-reduced-motion:reduce){.template-index .vs110-links>a{transition:none!important}}
.template-index .vtk{height:34px!important;background:#8a4dff!important}
.template-index .vtk-track{animation-duration:28s!important}
.vs111-stage{max-width:1000px!important;padding-top:52px!important;padding-bottom:42px!important;column-gap:58px!important}
.vs111-product{min-height:340px!important}
.vs111-product img{width:min(100%,440px)!important;max-height:330px!important;object-fit:contain!important;clip-path:none!important;mask:none!important;-webkit-mask:none!important;background:transparent!important}
.vs111-module-scroll .thumb{width:42px!important;height:30px!important;background:#0b0910!important;overflow:hidden!important}
.vs111-module-scroll .thumb img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important;clip-path:none!important;mask:none!important;-webkit-mask:none!important;filter:none!important}
.vs111-mini>span{background:#0b0910!important;overflow:hidden!important}
.vs111-mini img{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;clip-path:none!important;mask:none!important;-webkit-mask:none!important;filter:none!important}
.vs111-daws{margin-top:50px!important;grid-template-columns:repeat(4,48px)!important;gap:12px 18px!important}
.vs111-daws img{width:48px!important;height:48px!important;object-fit:contain!important}
@media(max-width:800px){.template-index .vsx-navmark{font-size:19px!important;min-width:auto!important}.vs111-stage{padding-top:32px!important}.vs111-product img{max-height:290px!important}.vs111-daws{grid-template-columns:repeat(4,44px)!important}}

/* === VocalSyrup v114 — premium hero / prepared product assets === */
:root{--vs114:#7c46ff;--vs114-dark:#5d2bd4;--vs114-ink:#0a090d;--vs114-paper:#f5f4f1}
.template-index .vtk{height:30px!important;background:var(--vs114)!important;border:0!important;position:relative!important;z-index:1201!important}.template-index .vtk-track{height:30px!important;font-size:11px!important;font-weight:800!important;letter-spacing:-.01em!important}
.template-index .nav.vsx-nav{background:#fff!important;color:#0b0a0d!important;box-shadow:0 1px 0 rgba(10,9,13,.09)!important}.template-index .nav.vsx-nav .row{max-width:1000px!important;min-height:58px!important;padding:7px 0!important}.template-index .vsx-navmark{font-family:var(--ui)!important;font-size:18px!important;font-weight:900!important;letter-spacing:-.07em!important}.template-index .vsx-navmark .s{color:var(--vs114)!important}.template-index .vs110-links>a{font-size:11px!important;font-weight:800!important;height:36px!important;min-height:36px!important;padding:0 15px!important}.template-index .vs110-links>a.on{border-color:#dedbe2!important;box-shadow:0 4px 12px rgba(20,15,25,.07)!important}
.vs111-hero{background-color:var(--vs114-paper)!important;background-image:radial-gradient(rgba(15,10,20,.052) .55px,transparent .7px)!important;background-size:3px 3px!important}.vs111-stage{max-width:930px!important;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr)!important;column-gap:68px!important;padding-top:68px!important;padding-bottom:58px!important}.vs111-kicker{font-weight:800!important;font-size:9.5px!important;letter-spacing:-.01em!important}.vs111-copy h1{margin-top:9px!important;line-height:.79!important;letter-spacing:-.025em!important}.vs111-copy h1 small{font-family:var(--brand)!important;font-size:31px!important;font-weight:400!important;letter-spacing:-.025em!important;line-height:.98!important;color:#47434a!important}.vs111-copy h1 span{font-family:var(--brand)!important;font-size:100px!important;font-weight:400!important;letter-spacing:-.015em!important}.vs111-copy h1 span:last-child{color:var(--vs114)!important}
.vs111-product{min-height:330px!important;isolation:isolate;perspective:1000px}.vs111-product:before{content:"";position:absolute;width:72%;height:42%;left:14%;bottom:14%;background:radial-gradient(ellipse,rgba(76,36,121,.25),rgba(76,36,121,.07) 45%,transparent 72%);filter:blur(24px);transform:translateY(24px) scaleX(1.12);z-index:0;pointer-events:none}.vs111-product:after{content:"";position:absolute;width:58%;height:14px;left:21%;bottom:17%;border-radius:50%;background:rgba(24,15,31,.19);filter:blur(10px);z-index:1;pointer-events:none}.vs111-product img{width:min(100%,405px)!important;max-height:315px!important;object-fit:contain!important;z-index:3!important;filter:drop-shadow(0 8px 8px rgba(15,9,20,.12)) drop-shadow(0 28px 28px rgba(44,20,66,.18))!important;transform:translateZ(0) rotateX(.4deg);transition:opacity .28s cubic-bezier(.22,.8,.25,1),transform .46s cubic-bezier(.16,1,.3,1),filter .35s ease!important}.vs111-product:hover img{transform:translateY(-5px) scale(1.012) rotateX(.4deg);filter:drop-shadow(0 10px 9px rgba(15,9,20,.13)) drop-shadow(0 34px 34px rgba(44,20,66,.22))!important}.vs111-wave{opacity:.065!important;filter:blur(.15px)}
.vs111-player{margin-top:30px!important}.vs111-play{background:var(--vs114)!important;box-shadow:0 12px 28px rgba(124,70,255,.30),0 0 34px rgba(124,70,255,.14)!important;transition:transform .22s ease,box-shadow .22s ease}.vs111-play:hover{transform:scale(1.07);box-shadow:0 14px 34px rgba(124,70,255,.38),0 0 44px rgba(124,70,255,.18)!important}.vs111-ab{border-color:#d5c5ff!important;box-shadow:inset 0 1px 0 #fff,0 5px 15px rgba(35,20,50,.05)}.vs111-ab button:last-child{color:var(--vs114)!important}.vs111-prompts{gap:6px!important}.vs111-prompts button{font-weight:800!important;box-shadow:0 2px 5px rgba(20,15,25,.025);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.vs111-prompts button:hover{transform:translateY(-1px);box-shadow:0 6px 13px rgba(20,15,25,.07)}.vs111-prompts button.is-on{background:var(--vs114)!important;border-color:var(--vs114)!important}
.vs111-follow{margin-top:13px!important}.vs111-module-scroll{gap:7px!important;scroll-behavior:smooth!important;padding:2px 0 12px!important}.vs111-module-scroll button{height:38px!important;padding-right:14px!important;box-shadow:0 3px 10px rgba(20,15,25,.035)!important}.vs111-module-scroll button.is-on{background:var(--vs114)!important;border-color:var(--vs114)!important;box-shadow:0 8px 18px rgba(124,70,255,.20)!important}.vs111-module-scroll .thumb{width:34px!important;height:28px!important;background:transparent!important}.vs111-module-scroll .thumb img{object-fit:contain!important}.vs111-progress{height:2px!important}.vs111-progress i{background:var(--vs114)!important;transition:transform .48s cubic-bezier(.16,1,.3,1)!important}
.vs111-all{box-shadow:0 8px 22px rgba(20,15,25,.06),inset 0 1px 0 #fff!important;transition:transform .22s ease,box-shadow .22s ease}.vs111-all:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(20,15,25,.09),inset 0 1px 0 #fff!important}.vs111-mini>span{background:transparent!important}.vs111-all>i{background:var(--vs114)!important;box-shadow:0 7px 18px rgba(124,70,255,.22)}.vs111-primary{background:var(--vs114)!important;min-width:245px!important;justify-content:space-between!important;box-shadow:0 14px 30px rgba(124,70,255,.30),0 0 42px rgba(124,70,255,.16)!important;transition:transform .22s ease,box-shadow .22s ease}.vs111-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(124,70,255,.38),0 0 52px rgba(124,70,255,.18)!important}.vs111-primary i{color:var(--vs114)!important;transition:transform .25s cubic-bezier(.16,1,.3,1)}.vs111-primary:hover i{transform:translateX(3px)}
.vs111-daws{margin-top:64px!important;grid-template-columns:repeat(4,44px)!important;gap:13px 18px!important}.vs111-daws img{width:44px!important;height:44px!important;filter:drop-shadow(0 5px 7px rgba(20,15,25,.08));transition:transform .28s cubic-bezier(.16,1,.3,1),filter .28s ease!important}.vs111-daws img:hover{transform:translateY(-5px) scale(1.07)!important;filter:drop-shadow(0 10px 12px rgba(20,15,25,.14))}.vs111-browse button{transition:transform .18s ease,color .18s ease}.vs111-browse button:hover{transform:scale(1.18);color:var(--vs114)!important}
.vs111-switching #vs111-main{opacity:0!important;transform:translateX(18px) translateY(7px) scale(.965) rotateY(-1.5deg)!important;filter:blur(2px) drop-shadow(0 20px 20px rgba(44,20,66,.10))!important}.vs111-switching #vs111-title,.vs111-switching #vs111-sub,.vs111-switching #vs111-kicker{opacity:0!important;transform:translateY(11px)!important;filter:blur(2px)}
/* note: the old unconditional #vs111-title/#vs111-sub/#vs111-kicker
   transition that lived here (v114) was removed in the v118 motion pass
   below - it fought the new, much shorter kicker crossfade with an
   !important of its own, and title/sub no longer transition as whole
   elements (see the .lc letter-span system). */
@media(max-width:800px){.vs111-stage{padding-top:38px!important}.vs111-copy h1 small{font-size:25px!important}.vs111-copy h1 span{font-size:78px!important}.vs111-product img{width:min(100%,390px)!important}.vs111-daws{grid-template-columns:repeat(4,42px)!important}}
@media(prefers-reduced-motion:reduce){.vs111-product img,.vs111-module-scroll button,.vs111-prompts button,.vs111-primary,.vs111-all,.vs111-daws img{transition:none!important;transform:none!important}}

/* === VocalSyrup v115 — full hero art-direction pass === */
:root{--vs115:#7d46f5;--vs115-deep:#6330d7;--vs115-ink:#09090d;--vs115-paper:#f6f5f2}
.template-index .vtk{height:32px!important;background:var(--vs115)!important;color:#fff!important}.template-index .vtk-track{height:32px!important;font-size:11px!important;font-weight:850!important;letter-spacing:-.015em!important}
.template-index .nav.vsx-nav{background:#fff!important;color:#0a090d!important;border:0!important;box-shadow:0 1px 0 rgba(10,9,13,.12)!important}.template-index .nav.vsx-nav .row{max-width:1040px!important;min-height:60px!important;padding:8px 0!important}.template-index .vsx-navmark{display:inline-flex!important;font-family:Arial Black,"Helvetica Neue",Arial,sans-serif!important;font-size:18px!important;line-height:1!important;min-width:126px!important;letter-spacing:-.075em!important}.template-index .vsx-navmark .w{display:inline!important;color:#0a090d!important;font-weight:900!important}.template-index .vsx-navmark .s{display:inline!important;color:var(--vs115)!important;font-weight:900!important}.template-index .vs110-links{gap:3px!important}.template-index .vs110-links>a{height:38px!important;min-height:38px!important;padding:0 17px!important;background:#f7f6f7!important;border:1px solid transparent!important;border-radius:999px!important;font-family:"Helvetica Neue",Arial,sans-serif!important;font-size:11px!important;font-weight:800!important;color:#18161b!important}.template-index .vs110-links>a.on{background:#fff!important;border-color:#d9d6dc!important;box-shadow:0 5px 14px rgba(20,15,25,.08)!important}
.vs111-hero{background:var(--vs115-paper)!important;background-image:radial-gradient(rgba(20,16,22,.025) .45px,transparent .55px)!important;background-size:4px 4px!important}.vs111-stage{max-width:1040px!important;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr)!important;column-gap:58px!important;padding-top:66px!important;padding-bottom:72px!important}.vs111-kicker{font-family:"Helvetica Neue",Arial,sans-serif!important;font-size:10px!important;font-weight:850!important;color:#47434b!important;letter-spacing:-.02em!important}.vs111-kicker i{background:var(--vs115)!important}.vs111-copy h1{margin-top:10px!important;line-height:.765!important;letter-spacing:-.07em!important}.vs111-copy h1 small{font-family:"Helvetica Neue",Arial,sans-serif!important;font-size:30px!important;font-weight:850!important;line-height:.94!important;letter-spacing:-.065em!important;color:#48444b!important;margin-bottom:8px!important}.vs111-copy h1 span{font-family:Arial Black,"Helvetica Neue",Arial,sans-serif!important;font-size:108px!important;font-weight:900!important;line-height:.76!important;letter-spacing:-.075em!important}.vs111-copy h1 span:last-child{color:var(--vs115)!important}
.vs111-product{min-height:382px!important;perspective:1100px!important;isolation:isolate!important}.vs111-product:before{width:76%!important;height:42%!important;left:12%!important;bottom:13%!important;background:radial-gradient(ellipse,rgba(83,44,131,.25),rgba(83,44,131,.09) 42%,transparent 72%)!important;filter:blur(28px)!important;transform:translateY(26px) scaleX(1.08)!important}.vs111-product:after{width:62%!important;height:16px!important;left:19%!important;bottom:17%!important;background:rgba(17,11,23,.22)!important;filter:blur(11px)!important}.vs111-product img{width:min(100%,505px)!important;max-height:360px!important;object-fit:contain!important;filter:drop-shadow(0 10px 8px rgba(13,8,18,.12)) drop-shadow(0 30px 30px rgba(55,27,79,.20))!important;transform:translateY(0) rotateX(.6deg) scale(1)!important;transform-origin:50% 68%!important;transition:opacity .34s cubic-bezier(.22,.8,.25,1),transform .62s cubic-bezier(.16,1,.3,1),filter .45s ease!important}.vs111-product:hover img{transform:translateY(-7px) rotateX(.6deg) scale(1.018)!important;filter:drop-shadow(0 12px 9px rgba(13,8,18,.14)) drop-shadow(0 38px 36px rgba(55,27,79,.24))!important}.vs111-wave{opacity:.08!important;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(125,70,245,.65) 10px 12px)!important;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)!important}
.vs111-player{margin-top:36px!important;gap:12px!important}.vs111-play{width:52px!important;height:52px!important;background:var(--vs115)!important;box-shadow:0 13px 30px rgba(125,70,245,.30),0 0 38px rgba(125,70,245,.12)!important}.vs111-ab{border:2px solid #d8c9fb!important;padding:3px!important;box-shadow:inset 0 1px 0 #fff,0 6px 15px rgba(28,18,39,.045)!important}.vs111-ab button{height:38px!important;padding:0 19px!important;font-size:12px!important;font-weight:800!important}.vs111-ab button:last-child{color:var(--vs115)!important}.vs111-hint{margin:8px 0 14px!important;font-size:10px!important}.vs111-prompts{gap:7px!important;max-width:430px!important}.vs111-prompts button{padding:8px 14px!important;font-size:10.5px!important;font-weight:800!important;background:#fff!important;border-color:#d6d1d8!important}.vs111-prompts button.is-on{background:var(--vs115)!important;border-color:var(--vs115)!important;color:#fff!important}.vs115-module-demo{display:grid;visibility:hidden;width:min(100%,340px);min-height:64px;padding:10px 14px;border:1px solid #d8d3da;border-radius:15px;background:rgba(255,255,255,.86);box-shadow:0 8px 22px rgba(20,15,25,.055);grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:11px;align-items:center}.vs115-module-demo span{grid-row:1/3;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#b999ff,var(--vs115) 55%,#4d21b8);box-shadow:0 7px 18px rgba(125,70,245,.24)}.vs115-module-demo b{font-size:12px;line-height:1.1}.vs115-module-demo small{font-size:9px;color:#77717b}
/* v122 - see the markup comment in vs-hero.liquid: .vs111-demo-stack holds
   the "live player" group and the "module preview" placeholder on the SAME
   grid cell (grid-area:1/1), so the stack is always exactly as tall as the
   taller of the two, in both states, with no hardcoded height to keep in
   sync. visibility (not display) does the showing/hiding here specifically
   because an invisible grid item still takes part in track sizing, which
   display:none would not - that's what made the two states' heights drift
   apart in the first place. */
.vs111-demo-stack{display:grid;margin-top:36px}
.vs111-demo-stack>*{grid-area:1/1;min-width:0}
.vs111-demo-live{visibility:visible;display:flex;flex-direction:column}
.vs111-demo-stack .vs111-player,.vs111-demo-stack .vs115-module-demo{margin-top:0!important}
.vs115-module-state .vs111-demo-live{visibility:hidden;pointer-events:none}
.vs115-module-state .vs115-module-demo{visibility:visible}
.vs111-follow{margin-top:24px!important}.vs111-follow>p{font-size:10px!important;margin-bottom:10px!important}.vs111-module-scroll{gap:9px!important;padding:3px 0 14px!important}.vs111-module-scroll button{height:44px!important;padding:4px 15px 4px 5px!important;gap:8px!important;background:#fff!important;border-color:#d6d2d8!important;box-shadow:0 4px 12px rgba(20,15,25,.035)!important}.vs111-module-scroll button b{font-size:11.5px!important;font-weight:850!important}.vs111-module-scroll button.is-on{background:var(--vs115)!important;border-color:var(--vs115)!important;box-shadow:0 9px 22px rgba(125,70,245,.22)!important}.vs111-module-scroll .thumb{width:42px!important;height:32px!important;border-radius:8px!important;background:transparent!important}.vs111-module-scroll .thumb img{width:100%!important;height:100%!important;object-fit:contain!important}.vs111-progress{height:2px!important;background:#d8d4d9!important}.vs111-progress i{background:var(--vs115)!important;transition:transform .58s cubic-bezier(.16,1,.3,1)!important}.vs111-browse{right:5%!important;bottom:2px!important;gap:20px!important}.vs111-browse span{font-size:10px!important;font-weight:850!important}.vs111-browse button{font-size:25px!important}
.vs111-bottom{padding-top:20px!important}.vs111-all{width:min(100%,390px)!important;min-height:58px!important;border-radius:15px!important;padding:6px 8px!important;box-shadow:0 9px 24px rgba(20,15,25,.065),inset 0 1px 0 #fff!important}.vs111-mini{width:100px!important}.vs111-mini>span{width:46px!important;height:38px!important;background:transparent!important;margin-right:-13px!important}.vs111-mini img{object-fit:contain!important}.vs111-all b{font-size:13px!important}.vs111-all small{font-size:8.5px!important}.vs111-all>i{width:42px!important;height:42px!important;background:var(--vs115)!important}.vs111-ctas{margin-top:20px!important;gap:20px!important}.vs111-primary{min-width:278px!important;min-height:56px!important;padding:6px 6px 6px 22px!important;font-size:14px!important;background:var(--vs115)!important;box-shadow:0 15px 32px rgba(125,70,245,.31),0 0 44px rgba(125,70,245,.14)!important}.vs111-primary i{width:43px!important;height:43px!important;color:var(--vs115)!important}.vs111-secondary{font-size:12.5px!important;font-weight:850!important}.vs111-daws{margin-top:70px!important;grid-template-columns:repeat(8,48px)!important;gap:14px!important}.vs111-daws img{width:48px!important;height:48px!important;object-fit:contain!important;filter:drop-shadow(0 5px 8px rgba(20,15,25,.09))!important}.vs111-spec{margin-top:10px!important;font-size:9.5px!important;font-weight:750!important}
@media(max-width:800px){.template-index .nav.vsx-nav .row{padding:8px 14px!important}.template-index .vsx-navmark{font-size:17px!important;min-width:auto!important}.vs111-stage{padding-top:38px!important;grid-template-columns:1fr!important;grid-template-areas:"copy" "product" "follow" "bottom"!important}.vs111-copy h1 small{font-size:24px!important}.vs111-copy h1 span{font-size:78px!important}.vs111-product{min-height:320px!important}#vs111-main,#vs111-main2{width:min(100%,430px)!important;max-height:310px!important}.vs111-daws{grid-template-columns:repeat(4,46px)!important}}

/* === VocalSyrup v116 — header+ticker+hero pass =========================
   Real fixes only, on top of v115 (kept above, still the active base):
   1) true two-layer image crossfade (#vs111-main / #vs111-main2) so a
      module swap never shows an empty/white frame — JS preloads every
      module asset on load and decode()s the incoming layer before it
      animates in, see vs-hero.liquid.
   2) text (eyebrow/descriptor/title) now staggers instead of moving as
      one simultaneous block.
   3) "Presets" added as the 13th module stop (vs-hero.liquid) — no
      dedicated Presets-panel screenshot was supplied, so it reuses the
      real "NOW POURING" readout from the Home shot rather than a
      fabricated panel.
   4) Studio One / Reaper added to the hero DAW row as plain text
      wordmarks (.dawtxt) — same honesty rule as vs-compat.liquid: no
      drawn/guessed logo for a DAW we don't have a real asset for.
========================================================================= */
/* pre-existing grid-blowout bug, found while testing 768px: the mobile
   layout collapses .vs111-stage to a single `1fr` column shared by
   copy/product/follow/bottom, but the module rail (.vs111-module-scroll)
   is a non-wrapping, horizontally-scrollable row of 13 pills - its
   min-content width (everything unscrolled, ~1400px+) is what a `1fr`
   track sizes itself to unless every item in that column gets
   min-width:0, so the whole column - and with it the product photo -
   was ballooning past the viewport and getting silently cropped by
   .vs111-hero's overflow:hidden. min-width:0 on the grid items is the
   standard fix for "a flex/grid child with scrollable content blows out
   its ancestor". */
.vs111-product{isolation:isolate}
.vs111-product,.vs111-copy,.vs111-follow,.vs111-bottom{min-width:0!important}
.vs111-module-scroll{min-width:0!important}
.vs116-stack{position:absolute;inset:0}
/* v118 motion pass: the reference (vocalessential.com/vst) was studied
   frame-by-frame (60fps capture around each module click). Its product
   panel does NOT crossfade/slide - it's a hard, instant cut to the new
   device, every single time, with zero blend frames. What reads as
   "premium" there is the SNAP itself (like swapping a real cartridge)
   plus a typewriter-style per-letter reveal on the big title that plays
   independently afterward. We keep a two-layer stack (never an empty
   frame) but shrink the crossfade to a fast settle instead of a slow
   650-900ms slide, which was closer to the written brief than to the
   actual reference footage - the recording is the primary reference. */
#vs111-main,#vs111-main2{position:absolute;inset:0;margin:auto;width:min(100%,505px);max-height:360px;object-fit:contain;z-index:3;filter:drop-shadow(0 10px 8px rgba(13,8,18,.12)) drop-shadow(0 30px 30px rgba(55,27,79,.20));transition:opacity .16s linear,transform .18s cubic-bezier(.16,1,.3,1),filter .16s ease}
.vs116-hidden{opacity:0!important;pointer-events:none}
@keyframes vs116ProductIn{0%{opacity:0;transform:scale(1.012)}100%{opacity:1;transform:scale(1)}}
/* ambient idle float: a few px, slow, paused while a swap is in flight
   and under reduced motion */
@keyframes vs118Idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.vs118-idle #vs111-main:not(.vs116-hidden):not(.vs116-leave):not(.vs116-enter){animation:vs118Idle 6.5s ease-in-out infinite}
.vs111-busy .vs118-idle #vs111-main{animation-play-state:paused}
/* kicker: short instant-feeling crossfade (matches reference - the small
   label line swaps with no visible reveal animation of its own) */
#vs111-kicker{display:inline-block;transition:opacity .14s ease,transform .16s ease}
.vs116-textleave #vs111-kicker{opacity:0;transform:translateY(6px)}
.vs116-textenter #vs111-kicker{animation:vs116TextIn .18s ease both}
@keyframes vs116TextIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}
/* title + subtitle: letter-by-letter reveal, rebuilt fresh on every
   pick() so each character is a newly-inserted node and the animation
   always restarts cleanly, even under rapid clicking - no JS timers to
   race or cancel. */
#vs111-title,#vs111-sub{display:inline-block}
#vs111-title .lc,#vs111-sub .lc{display:inline-block;opacity:0;transform:translateY(55%);filter:blur(3px);animation:vs118LetterIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 38ms)}
#vs111-sub .lc{animation-duration:.4s}
/* v122b — root-cause fix for a second, pre-existing font-size leak found
   while verifying the height fix above: .vs111-copy h1 span{font-size:
   108px!important} (the Arial Black art-direction rule) targets ANY span
   descendant of h1, not just the title's own <span>. Since the letter-
   reveal feature turns #vs111-sub's plain text into <span class="lc">
   letters too, those spans were ALSO matching that rule and rendering the
   subtitle at the title's 108px instead of its own (much smaller) size -
   invisible in a quick glance but very visible on screen, and a real
   contributor to the original height-shift bug since a 108px subtitle
   overflows its column by a huge margin. font-size:inherit here makes
   every letter span simply take on whatever size its OWN immediate
   parent (title or sub) actually resolves to - including the live
   fitToColumn() shrink - instead of racing the Arial Black rule on
   specificity. */
#vs111-title .lc,#vs111-sub .lc{font-size:inherit!important}
/* v122c — closes the last, much smaller residual height gap: .vs111-copy
   h1 span's line-height:.76 is a unitless ratio, so when fitToColumn()
   shrinks a long module name's font-size the line box shrinks right along
   with it (line-height is relative to font-size), making the hero a few
   px shorter for DOUBLE/CHORUS/PRESETS than for a short word that never
   needs shrinking. Pinning #vs111-title's line-height to the natural,
   un-shrunk pixel value (108px font-size * .76 line-height, measured
   directly) keeps the line box constant no matter what font-size
   fitToColumn ends up choosing - the static "VOCAL" span is never
   shrunk, so this fixed value matches it exactly in the normal case. */
#vs111-title{line-height:82.08px!important}
@keyframes vs118LetterIn{0%{opacity:0;transform:translateY(55%);filter:blur(3px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
/* v121 — root-cause fix for the hero text-wrap / height-shift bug:
   #vs111-title and #vs111-sub are flex items of an align-items:stretch
   column (.vs111-copy h1), so they're always exactly as wide as the
   copy column - but with no white-space guard, a long word like
   PRESETS/CHORUS/DOUBLE wrapped letter-by-letter (.lc is inline-block,
   which is itself a valid line-break opportunity) broke into a one- or
   two-letter-per-line stack and inflated .vs111-hero's height on every
   click. white-space:nowrap stops the wrap outright; the matching JS
   fit-to-width pass (see vs-hero.liquid) shrinks font-size per word so
   it still never overflows the column - so every module now renders at
   a single, predictable line height and the hero's height never moves
   between states. */
#vs111-title,#vs111-sub{white-space:nowrap;max-width:100%}
.vs111-daws{grid-template-columns:repeat(10,48px)!important;align-items:center!important}
.dawtxt{width:48px;height:48px;display:flex;align-items:center;justify-content:center;text-align:center}
.dawtxt b{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:9.5px;line-height:1.05;letter-spacing:-.01em;color:#2c2930}
@media(max-width:800px){.vs111-daws{grid-template-columns:repeat(5,44px)!important}}
@media(prefers-reduced-motion:reduce){#vs111-main,#vs111-main2,#vs111-kicker{transition:none!important}.vs116-enter,.vs116-textenter #vs111-kicker{animation:none!important}.vs116-leave,.vs116-textleave #vs111-kicker{opacity:1!important;transform:none!important}#vs111-title .lc,#vs111-sub .lc{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}.vs118-idle #vs111-main{animation:none!important}}

/* === VocalSyrup v119 — global motion tokens + travelling indicators +
   click micro-interactions ===============================================
   Durations/eases used across the whole motion pass, named so nothing
   below reaches for an arbitrary number. Micro = tap/hover feedback,
   fast = small UI swaps (kicker, pills), medium = text/card entrances,
   product = the hero image settle, premium/product eases match the
   frame-by-frame reference analysis above. */
:root{
  --motion-micro:.14s;--motion-fast:.22s;--motion-medium:.42s;--motion-product:.6s;
  --ease-premium:cubic-bezier(.16,1,.3,1);--ease-product:cubic-bezier(.22,.8,.25,1);
  --stagger-small:38ms;
}

/* module rail + Dry/VocalSyrup switch: a single highlight that slides
   between targets instead of each pill disappearing/reappearing. See
   vs-hero.liquid for the JS that positions these. */
.vs111-module-scroll{position:relative!important}
.vs111-rail-hl{position:absolute;bottom:3px;left:0;width:0;height:3px;border-radius:999px;background:var(--vs115);opacity:0;pointer-events:none;z-index:0;transition:left .32s var(--ease-premium),width .32s var(--ease-premium),opacity .18s ease}
.vs111-ab{position:relative!important}
.vs111-ab-hl{position:absolute;top:3px;left:3px;width:0;height:38px;border-radius:999px;background:#f0eef1;opacity:0;pointer-events:none;z-index:0;transition:left .28s var(--ease-premium),width .28s var(--ease-premium),opacity .16s ease}
.vs111-ab button{position:relative;z-index:1}
/* .vs111-hl-ready is added by JS once the sliding highlight is live, so
   a no-JS visitor still sees the original instant background swap as a
   correct (if less fancy) fallback - see vs-hero.liquid. */
.vs111-ab.vs111-hl-ready button.is-on{background:transparent!important}

/* click compression: primary CTA, rail pills, prompt pills, browse
   arrows all get a brief press-down instead of only a hover state */
.vs111-primary{transition:transform .22s ease,box-shadow .22s ease!important}
.vs111-primary:active{transform:scale(.97)!important;transition-duration:.08s!important}
.vs111-module-scroll button{transition:background .2s,border-color .2s,color .2s,transform .2s!important}
.vs111-module-scroll button:active{transform:scale(.96) translateY(0)!important;transition-duration:.08s!important}
.vs111-prompts button:active{transform:scale(.95)!important;transition-duration:.08s!important}
.vs111-browse button:active{transform:scale(.88)!important;transition-duration:.08s!important}
.vs111-play:active{transform:scale(.93)!important;transition-duration:.08s!important}

@media(prefers-reduced-motion:reduce){.vs111-rail-hl,.vs111-ab-hl{transition:none!important}.vs111-primary,.vs111-module-scroll button,.vs111-prompts button,.vs111-browse button,.vs111-play{transition:none!important}.vs111-primary:active,.vs111-module-scroll button:active,.vs111-prompts button:active,.vs111-browse button:active,.vs111-play:active{transform:none!important}}

/* === VocalSyrup v117 — precision QA/fix pass ===========================
   Targeted fixes on top of v116 (kept above). Each numbered block below
   corresponds to one item from the QA list; see report to the user for
   what was verified visually for each.
========================================================================= */
/* 1) header wordmark: the v111/v113/v114/v115 layers above left a stale
   ::after('vocalsyrup') pseudo-element hack from v111 (now deleted) and a
   4-generation chain of !important overrides on .vsx-navmark/.w/.s - that
   chain was rendering correctly in isolated testing, but it's fragile and
   exactly the kind of thing that can break. Replacing it with a single,
   final, simple rule: real markup (<span class="w">vocal</span><span
   class="s">syrup</span>), a webfont already loaded by the page (Outfit,
   not a system "Arial Black" that can render inconsistently) at a normal,
   collision-safe letter-spacing - no pseudo-elements, no clipping. */
.template-index .vsx-navmark{display:inline-flex!important;align-items:baseline!important;
  font-family:var(--ui)!important;font-size:21px!important;font-weight:800!important;
  line-height:1!important;letter-spacing:-.02em!important;min-width:0!important}
.template-index .vsx-navmark .w{display:inline!important;color:#0a090d!important;font-weight:800!important}
.template-index .vsx-navmark .s{display:inline!important;color:var(--vs115,#7d46f5)!important;font-weight:800!important}
@media(max-width:800px){.template-index .vsx-navmark{font-size:19px!important}}

/* 3) hero headline: v115 used Arial Black at -.075em letter-spacing — very
   condensed/aggressive. Switch to the page's own heavy grotesk (Outfit
   800) at a natural, non-collapsing letter-spacing, and lighten the
   descriptor so only the headline itself carries the heavy weight. */
.vs111-copy h1{letter-spacing:-.02em!important}
.vs111-copy h1 small{font-family:var(--ui)!important;font-weight:500!important;
  letter-spacing:-.01em!important;color:#5c5760!important}
.vs111-copy h1 span{font-family:var(--ui)!important;font-weight:800!important;
  letter-spacing:-.025em!important}

/* 4) hero product: slightly smaller, nudged up, softer environmental glow.
   The product grid cell was stretching to match the taller copy column
   (align-self:stretch by default), leaving ~130px of dead air below the
   image before BROWSE - which is also most of why BROWSE/arrows read as
   detached (issue 5). align-self:start + a tighter min-height makes the
   cell hug the image instead. Desktop-only (min-width:801px): below
   800px the stage collapses to a single column (no stretch to fight),
   and this unscoped 380px min-height was winning the cascade over the
   smaller mobile min-height set in the 800px media query, leaving the
   exact same dead-air gap on mobile this rule exists to remove. */
@media(min-width:801px){.vs111-product{min-height:380px!important;align-self:start!important}}
.vs111-product:before{opacity:.75!important}
.vs111-product:after{opacity:.75!important}
#vs111-main,#vs111-main2{width:min(100%,460px)!important;max-height:330px!important;
  margin-top:-18px!important;
  filter:drop-shadow(0 7px 6px rgba(13,8,18,.10)) drop-shadow(0 20px 20px rgba(55,27,79,.15))!important}
.vs111-browse{bottom:10px!important}

/* 6) "Hear the whole chain" card: the v115 override fixed .vs111-mini at
   width:100px, but 3 thumbs at 46px with -13px overlap need 112px - the
   12px overflow bled the images over the text next to them (and clipped
   its first letter). Rebuilding with widths that actually match the
   overlap math, plus a hard-bounded, non-wrapping text column so this
   can't happen again regardless of copy length. */
.vs111-all{gap:14px!important}
.vs111-mini{width:84px!important;flex:0 0 auto!important}
.vs111-mini>span{width:36px!important;height:36px!important;margin-right:-12px!important;
  border-radius:50%!important;border:2px solid #fff!important;box-shadow:0 1px 3px rgba(20,15,25,.12)!important;
  position:relative!important}
.vs111-mini>span:nth-child(1){z-index:3}
.vs111-mini>span:nth-child(2){z-index:2}
.vs111-mini>span:nth-child(3){z-index:1}
.vs111-all>span:nth-child(2){min-width:0!important;flex:1 1 auto!important;overflow:hidden!important}
.vs111-all b{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.vs111-all small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.vs111-all>i{flex:0 0 auto!important}

/* 7) CTA -> DAW composition: drop Pro Tools (the asset was a mislabeled
   near-duplicate of the Logic icon - two silver dials) and Soundtrap (not
   on the approved 6-DAW list) from the hero row; vs-hero.liquid now marks
   up exactly FL/Ableton/Logic/Studio One/Cubase/Reaper. The 70px top
   margin that made the row float disconnected from the CTA above it is
   cut down so DAWs read as a continuation of that block, not a separate
   floating row. */
.vs111-daws{margin-top:28px!important;grid-template-columns:repeat(6,48px)!important}
@media(max-width:800px){.vs111-daws{grid-template-columns:repeat(3,48px)!important;margin-top:24px!important}}

/* 8) comments ("Pour Feed") section: max-width:6ch on the headline was
   forcing "What artists" (already broken onto its own line by the <br>
   in the content) to wrap AGAIN down to one or two words per line - 4
   lines total instead of the intended 2. The empty-state panel was also
   sized (440/310px min-height) and spaced (90px gap, 86-94px section
   padding) for a panel meant to hold rows of real reactions - oversized
   and disconnected from the heading while the feed is still empty. */
.template-index .vsx-pfsec{padding:52px 0 60px!important}
.template-index .vsx-pf-in{gap:40px!important}
.template-index .vsx-pf-head .vsx-h2{font-size:clamp(38px,3.6vw,52px)!important;max-width:none!important;white-space:normal!important}
.template-index .vsx-pf-panel{min-height:200px!important}
.template-index .vsx-pf-empty{min-height:170px!important}
@media(max-width:900px){.template-index .vsx-pf-in{gap:24px!important}}

/* 9) product section: heading copy change is in vs-product-story.liquid
   ("One plugin. One vocal chain." -> "Meet VocalSyrup."). The thumbnail
   rail itself was fine (overflow-x:auto, flex:0 0 58px items) but its
   right edge visually clipped because the rail had no right-side
   breathing room and the stage/card right edge coincided exactly with
   the last thumbnail's right edge - a 1px border + no padding reads as
   "cut off". Giving the rail its own right padding and a fade mask at
   the end instead of a hard edge fixes this without changing the
   two-column structure. */
.template-index .vsx-story-thumbs{padding:4px 14px 10px 3px!important;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)!important;
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%)!important}
.template-index .vsx-story-thumbs button:last-child{margin-right:14px!important}

/* 10) Hub: preserve the design, just turn the whole mock app window down
   a notch - it was sized like a real standalone section hero rather than
   a supporting visual. */
.template-index .vsx-hubsec{padding:70px 0 84px!important}
.template-index .vsx-hub{min-height:400px!important;margin-top:30px!important}
.template-index .vsx-hub-panel{padding:28px!important}
.template-index .vsx-hub-panel h3{font-size:clamp(24px,2.5vw,34px)!important;margin:8px 0 20px!important}
.template-index .vsx-hub-product{padding:18px!important;gap:22px!important}
.template-index .vsx-hub-product img{max-height:150px!important}
.template-index .vsx-hub-product h4{font-size:22px!important;margin:6px 0 4px!important}
/* bug found during this pass: .vsx-hub-brand span ("VocalSyrup Hub" label
   next to the VS badge) had no color of its own, so it inherited the
   page's dark body-text color - invisible against the hub sidebar's own
   dark background. Giving it the same light tone as the other sidebar
   labels. */
.template-index .vsx-hub-brand span{color:rgba(243,240,234,.78)!important}
/* third bug found during this pass, mobile only: the base (non-responsive)
   .vsx-hub-product rule sets grid-template-columns:42% 1fr with
   !important and no max-width guard, so it silently wins over the
   800px-breakpoint rule that was supposed to stack it to one column
   (that rule has no !important). Below 700px the image column and text
   column were squeezed to ~73px/152px, pushing "VocalSyrup", the
   description and the OPEN/REINSTALL buttons straight off the edge of
   the card. Re-stacking it with a guarded, !important mobile rule. */
@media(max-width:700px){
  .template-index .vsx-hub-product{grid-template-columns:1fr!important;text-align:center!important}
  .template-index .vsx-hub-product img{max-width:200px!important;margin:0 auto!important}
  .template-index .vsx-hub-actions{justify-content:center!important}
}

/* 13) global QA sweep: fourth bug found, around 950-1180px (between the
   800px mobile breakpoint and the ~1180px desktop max-width, e.g. a
   1024px tablet/laptop screen). The copy column at that width is
   narrower than the "Get VocalSyrup · $49.99 ›" button's natural
   content width, and the flex row (button + "go monthly" link) had no
   wrap/shrink rule, so flexbox shrank the button itself and its text
   wrapped to two lines inside the pill instead of the row wrapping.
   Keeping the pill single-line and letting the row wrap the secondary
   link under it when space is tight. */
.template-index .vsx-story-actions{flex-wrap:wrap!important;row-gap:12px!important}
.template-index .vsx-story-actions .vsx-btn.p{white-space:nowrap!important;flex:0 0 auto!important}

/* 11) Pricing cards rebuilt. vs-purchase.liquid now gives both cards the
   SAME clean sibling structure (price block, then kicker <p>, then
   features <ul>, matching what the one-time card already had) - the
   monthly card's price/kicker/features were previously all nested
   inside one <b>, which is what bolded and visually overlapped the
   whole block. The 9-image "fan" (st1-st9) is cut down in the markup to
   3 images per card: two restrained, faded, rotated background layers
   (st1/st2) and one sharp, full-opacity foreground product (st3, also
   flagged .stk-fg). Re-mapping the layering here instead of relying on
   the old st1=hero/st2..9=fan-out convention. */
.template-index .vsx-suite-stack .stk{width:min(60%,230px)!important;max-height:170px!important;opacity:1!important}
.template-index .vsx-suite-stack .st1{z-index:1!important;opacity:.4!important;
  transform:translate(-68%,-46%) rotate(-11deg) scale(.82)!important}
.template-index .vsx-suite-stack .st2{z-index:2!important;opacity:.5!important;
  transform:translate(-32%,-46%) rotate(11deg) scale(.82)!important}
.template-index .vsx-suite-stack .st3.stk-fg{z-index:9!important;opacity:1!important;
  transform:translate(-50%,-52%) scale(1)!important;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))!important}
.template-index .vsx-plan:hover .st1{transform:translate(-73%,-44%) rotate(-15deg) scale(.8)!important}
.template-index .vsx-plan:hover .st2{transform:translate(-27%,-44%) rotate(15deg) scale(.8)!important}
.template-index .vsx-plan{min-height:640px!important}
.template-index .vsx-product-stack{height:210px!important;margin:4px 0 2px!important}
@media(max-width:850px){.template-index .vsx-plan{min-height:560px!important}}
/* second bug found during this pass: .template-index .vsx-plan-p set the
   PRICE ROW's color to #111 but that only reaches the <span> ("/mo",
   "one-time") - the price <b> itself has its own color rule from the
   dark-theme base (.vsx-plan-p b{color:var(--vs-white)}) which, being a
   direct rule on <b> rather than inherited, wins over the parent's
   color regardless of !important. Result: near-white price text on a
   white card. Giving <b> (and <s>) their own light-mode colors fixes it
   independent of whether a real product price is linked. */
.template-index .vsx-plan-p b{color:#111!important}

/* ---------- v124: ONE reusable DAW compatibility chip ----------
   Used by the hero, Meet VocalSyrup, and anywhere else DAWs are shown
   (snippets/vs-daw-row.liquid emits the markup; see that file for the
   policy comment). Every chip shares one bounding box per container
   (--vs-daw-box) with object-fit:contain, so FL Studio's square tile,
   Studio One's wide transparent-padded mark and the bare-mark Cubase
   file (no tile of its own) all read at the same perceived size,
   centered, never cropped - and the compatibility name sits in its own
   line below, so it can never overlap the artwork. This replaces the
   old hand-rolled <img> lists in the hero/story sections, which had no
   real logo for Studio One or REAPER yet and fell back to plain text;
   both now use the real attached files like every other DAW here. Old
   per-section ".vs111-daws img"/".dawtxt"/".vsx-daw-word" rules from
   earlier generations are superseded (the img is now nested one level
   deeper, inside .vs-daw-ico) rather than deleted, to avoid hunting
   every !important across the file - they simply no longer match
   anything and are harmless. */
.vs-daw-chip{display:flex;flex-direction:column;align-items:center;gap:6px}
.vs-daw-ico{width:var(--vs-daw-box,48px);height:var(--vs-daw-box,48px);display:grid;place-items:center;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.vs-daw-ico img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.vs-daw-chip:hover .vs-daw-ico{transform:translateY(-4px) scale(1.06)}
.vs-daw-chip small{font-family:var(--ui);font-weight:700;font-size:9px;line-height:1.1;text-align:center;white-space:nowrap;opacity:.72}
@media(prefers-reduced-motion:reduce){.vs-daw-chip:hover .vs-daw-ico{transform:none!important}}

.vs111-daws{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:16px 22px!important;margin-top:40px!important}
.vs111-daws .vs-daw-chip{--vs-daw-box:40px}
.vs111-daws .vs-daw-chip small{color:#5c5762}
@media(max-width:800px){.vs111-daws{gap:12px 16px!important}.vs111-daws .vs-daw-chip{--vs-daw-box:34px}}

.vsx-story-daws{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:22px!important;margin-top:28px!important}
.vsx-story-daws .vs-daw-chip{--vs-daw-box:56px}
.template-index .vsx-story-daws .vs-daw-chip small{color:#5c5762}
.template-index .vs111-daws>*,.template-index .vsx-story-daws>*{animation:vsProductRise linear both;animation-timeline:view();animation-range:entry 55% cover 90%}
.template-index .vs111-daws>*:nth-child(1),.template-index .vsx-story-daws>*:nth-child(1){animation-delay:0ms}
.template-index .vs111-daws>*:nth-child(2),.template-index .vsx-story-daws>*:nth-child(2){animation-delay:35ms}
.template-index .vs111-daws>*:nth-child(3),.template-index .vsx-story-daws>*:nth-child(3){animation-delay:70ms}
.template-index .vs111-daws>*:nth-child(4),.template-index .vsx-story-daws>*:nth-child(4){animation-delay:105ms}
.template-index .vs111-daws>*:nth-child(5),.template-index .vsx-story-daws>*:nth-child(5){animation-delay:140ms}
.template-index .vs111-daws>*:nth-child(6),.template-index .vsx-story-daws>*:nth-child(6){animation-delay:175ms}
@media(max-width:800px){.vsx-story-daws{gap:16px!important}.vsx-story-daws .vs-daw-chip{--vs-daw-box:46px}}

/* ---------- v123: Comments ("Pour Feed") compositional rebuild ---------- */
/* The brief's own words for the old panel: "wrong in scale and
   placement... far too large, too wide, feels like an empty dashboard."
   This isn't a resize - it's a different panel: narrow (~400px, roughly
   a third of the section's own max-width) instead of the old 640px,
   vertically oriented like a real comment feed, and visually CENTERED in
   the remaining space next to the heading (justify-self:center within
   its own grid column) instead of pinned flush to the far right edge.
   The heading keeps its own column on the left, unchanged. */
.template-index .vsx-pf-in{grid-template-columns:minmax(260px,360px) minmax(0,1fr)!important;align-items:start!important}
.template-index .vsx-pf-panel{max-width:400px!important;width:100%!important;justify-self:center!important;margin-inline:auto!important;min-height:0!important}

/* Second, separate bug found while rebuilding this panel (not caused by
   the rebuild): the panel's light/white skin only ever recolored the bar,
   the live pill, the empty-state and the react strip - every actual
   comment ROW (name/role/platform/timestamp/quote/track/heart, plus the
   avatar's own background) was still using the ORIGINAL dark-panel
   white-on-transparent colors. Invisible in every past QA pass because
   the panel only ever had blocks added, now getting real dark-on-white
   colors so a merchant's real comments are actually legible. */
.template-index .vsx-pf-row{border-bottom-color:#eeebef!important}
.template-index .vsx-pf-av{background:color-mix(in srgb,var(--vs-purple) 12%,transparent)!important;color:var(--vs-purple)!important}
.template-index .vsx-pf-line1 b{color:#1b171d!important}
.template-index .vsx-pf-role,.template-index .vsx-pf-plat{color:#8a838d!important}
.template-index .vsx-pf-ts{color:#a8a1aa!important}
.template-index .vsx-pf-quote{color:#413c43!important}
.template-index .vsx-pf-quote a:hover{color:var(--vs-purple)!important}
.template-index .vsx-pf-track{color:var(--vs-purple)!important}
.template-index .vsx-pf-heart{color:#a8a1aa!important}
.template-index .vsx-pf-react i{color:#a39ca6!important}
.template-index .vsx-pf-react i.pink{color:var(--vs-pink)!important}

/* Compact row sizing (~400px column needs tighter rhythm than the old
   640px one) + the new per-row "Reply" affordance + bottom comment
   composer the brief asked for. Both are purely visual chrome, same as
   the existing REACT strip - no backend, so they stay non-interactive
   (tabindex="-1", aria-hidden) rather than pretending to work. */
.template-index .vsx-pf-bar{padding:13px 16px!important}
.template-index .vsx-pf-label{font-family:var(--ui);font-weight:800;font-size:12.5px;color:#19151b;letter-spacing:-.01em}
.template-index .vsx-pf-list{max-height:400px!important}
.template-index .vsx-pf-row{padding:12px 16px!important;gap:10px!important}
.template-index .vsx-pf-av{flex:0 0 28px!important;width:28px!important;height:28px!important;font-size:11px!important}
.template-index .vsx-pf-line1 b{font-size:12.5px!important}
.template-index .vsx-pf-quote{font-size:12.5px!important;line-height:1.5!important}
.template-index .vsx-pf-rowfoot{display:flex;align-items:center;gap:10px;margin-top:3px}
.template-index .vsx-pf-reply{font-family:var(--ui);font-weight:700;font-size:11px;color:#9a939d;background:none;border:0;padding:0;cursor:default}
.template-index .vsx-pf-thumb{flex:0 0 32px!important;width:32px!important;height:32px!important;border-radius:7px!important;margin-left:auto}
.template-index .vsx-pf-empty{min-height:220px!important;padding:40px 20px 46px!important}
.template-index .vsx-pf-react{padding:11px 16px!important;gap:12px!important}
.template-index .vsx-pf-compose{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid #ece8ed}
.template-index .vsx-pf-av-me{flex:0 0 26px;width:26px;height:26px;font-size:11px}
.template-index .vsx-pf-compose-field{flex:1 1 auto;min-width:0;font-family:var(--ui);font-size:12px;color:#aea7b0}
.template-index .vsx-pf-post{flex:0 0 auto;font-family:var(--ui);font-weight:800;font-size:11.5px;color:var(--vs-purple);background:none;border:0;padding:0;cursor:default}

/* Entrance: eyebrow/heading already reveal via the shared type-rise
   system; the panel rises as a whole (existing vsProductRise), and here
   each row gets its own tiny extra stagger on top of that so the feed
   doesn't pop in as one flat block once it has real content. */
.template-index .vsx-pf-row{animation:vsRowRise .5s var(--ease-premium,cubic-bezier(.16,1,.3,1)) both;animation-timeline:view();animation-range:entry 0% cover 28%}
@keyframes vsRowRise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.template-index .vsx-pf-in{grid-template-columns:1fr!important}.template-index .vsx-pf-panel{max-width:440px!important;justify-self:stretch!important}}
@media(prefers-reduced-motion:reduce){.template-index .vsx-pf-row{animation:none!important;opacity:1!important;transform:none!important}}
.template-index .vsx-plan-p s{color:#a79fab!important}

/* ---------- v125: Meet VocalSyrup compositional rebalance ---------- */
/* Atmospheric product glow (section 13): the old .vsx-story-glow div was
   defined in CSS but never actually in the markup, so it never rendered -
   dead rule. Now actually placed behind the stage, tuned for the light
   template and the white back from the one and given a slow, independent
   breathing motion (not a static blob). */
.vsx-story-glow{inset:-6% -4% -2%!important;background:radial-gradient(circle,rgba(141,77,255,.38),rgba(176,108,255,.14) 46%,transparent 72%)!important;filter:blur(30px)!important;animation:vsStoryGlowBreathe 7s ease-in-out infinite;pointer-events:none!important;z-index:0}
@keyframes vsStoryGlowBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@media(prefers-reduced-motion:reduce){.vsx-story-glow{animation:none!important}}
.vsx-story-stage{position:relative;z-index:1}

/* Carousel presentation (section 14): separate prev/next arrows, an edge
   fade on the thumbnail rail instead of a hard clip, and a thin progress
   bar mirroring the hero's module rail - replaces the plain unstyled
   thumbnail-strip-only version with no nav or progress. */
.vsx-story-carousel{display:flex!important;align-items:center;gap:8px;margin-top:18px}
.vsx-story-nav{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid #ddd7df;background:#fff;color:#45404a;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .16s ease,border-color .16s ease,color .16s ease}
.vsx-story-nav:hover{transform:translateY(-1px);border-color:var(--vs-purple);color:var(--vs-purple)}
.vsx-story-carousel .vsx-story-thumbs{margin-top:0!important;flex:1 1 auto;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.template-index .vsx-story-thumbs button{flex:0 0 46px!important;width:46px!important;height:38px!important}
.template-index .vsx-story-thumbs{gap:8px!important}
.vsx-story-progress{height:2px;background:#e9e5ea;border-radius:2px;overflow:hidden;margin-top:10px}
.vsx-story-progress i{display:block;height:100%;width:100%;background:var(--vs-purple);transform-origin:left center;transform:scaleX(0.0833);transition:transform .32s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.vsx-story-progress i{transition:none}}

/* Integrated audio player (section 15): less "bordered box", more part of
   the visual column's own rhythm. */
.template-index .vsx-story-player{margin-top:14px!important;padding:9px 14px!important;min-height:0!important;border-color:#e4dfe6!important}
.template-index .vsx-story-player>b{background:var(--vs-purple)!important;width:34px!important;height:34px!important}

/* Compact "What's inside" accordion (section 17): the summary now has
   THREE real children (icon / title+subtitle group / chevron), matching
   the grid's three columns - the previous four-children version (icon,
   title, subtitle, chevron all as siblings) silently overflowed the
   defined grid-template-columns:1fr auto auto and wrapped the chevron
   onto its own row, which is exactly the "two stray + signs with a gap
   between them" look the brief's reference screenshot shows. Closed
   state is now a single compact row; only ul padding grows on open. */
.template-index .vsx-story-callout{border-radius:14px!important}
.template-index .vsx-story-callout summary{grid-template-columns:auto 1fr auto!important;padding:14px 16px!important;gap:14px!important}
.template-index .vsx-story-callout summary i{font-size:17px!important;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--vs-purple) 10%,transparent);display:grid;place-items:center;flex:0 0 auto}
.vsx-story-callout-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.template-index .vsx-story-callout-txt b{font-size:13px!important;color:#161217}
.template-index .vsx-story-callout-txt small{font-size:11px;color:#8a838d}
.template-index .vsx-story-callout summary::after{content:none}
.template-index .vsx-story-callout summary em{font-style:normal;color:#b7b0bb!important;transition:transform .2s ease}
.template-index .vsx-story-callout[open] summary em{transform:rotate(90deg)}
.template-index .vsx-story-callout ul{padding:0 16px 16px 60px!important;font-size:12.5px;line-height:1.7}

/* CTA refinement (section 18): stronger pill, premium shadow/glow, a
   clearer arrow circle - no change to branding or copy. */
.template-index .vsx-story-actions .vsx-btn.p{box-shadow:0 16px 34px rgba(141,77,255,.28),0 0 0 1px rgba(141,77,255,.06)!important;padding:14px 8px 14px 22px!important;font-size:13.5px!important}
.template-index .vsx-story-actions .vsx-btn.p:hover{box-shadow:0 20px 42px rgba(141,77,255,.36),0 0 0 1px rgba(141,77,255,.08)!important}
.template-index .vsx-story-actions .vsx-btn.p i{width:36px!important;height:36px!important;font-size:18px!important}

/* Hierarchy + breathing room rebalance (section 12/16): slightly looser
   grid, meta pills instead of flat mono text, constrained description
   width for readability. */
.template-index .vsx-story-grid{gap:84px!important}
.template-index .vsx-story-meta b{background:color-mix(in srgb,var(--vs-purple) 10%,transparent);color:var(--vs-purple)!important;padding:3px 8px;border-radius:999px;font-weight:800}
.template-index .vsx-story-meta span{border-radius:999px;padding:3px 9px!important}
.template-index .vsx-story-copy>p{max-width:46ch!important}

/* Layered entrance timing (section 20): glow/product settle slower than
   the small UI below it, each a touch later than the last. */
.template-index .vsx-story-glow,.template-index .vsx-story-main{animation:vsProductRise .7s var(--ease-product,cubic-bezier(.22,1,.36,1)) both;animation-timeline:view();animation-range:entry 0% cover 40%}
.template-index .vsx-story-copy>*{animation:vsRowRise .5s var(--ease-premium,cubic-bezier(.16,1,.3,1)) both;animation-timeline:view();animation-range:entry 0% cover 30%}
.template-index .vsx-story-copy>*:nth-child(1){animation-delay:0ms}
.template-index .vsx-story-copy>*:nth-child(2){animation-delay:40ms}
.template-index .vsx-story-copy>*:nth-child(3){animation-delay:80ms}
.template-index .vsx-story-copy>*:nth-child(4){animation-delay:120ms}
.template-index .vsx-story-copy>*:nth-child(5){animation-delay:160ms}
.template-index .vsx-story-copy>*:nth-child(6){animation-delay:200ms}
.template-index .vsx-story-copy>*:nth-child(7){animation-delay:240ms}
@media(prefers-reduced-motion:reduce){.template-index .vsx-story-glow,.template-index .vsx-story-main,.template-index .vsx-story-copy>*{animation:none!important;opacity:1!important;transform:none!important}}
@media(max-width:800px){.vsx-story-carousel{margin-top:14px}.template-index .vsx-story-grid{gap:38px!important}}

/* ===== v126 — Hub rebuild (section 19/Hub task) =====
   Rebuilt from the real VocalSyrup Hub screen recording (source of
   truth), replacing the old invented "Presets/Account" nav + fake
   titlebar. The mockup stays a dark device island (the real app is
   dark-mode) framed on the page's own light background, with a real
   sidebar (Home/My products/Updates/Licenses/Help + a licensed
   indicator), a product card matching the real layout (shot, title,
   format badges, install status+version, Reinstall/Manage, show-in-
   folder, waveform strip) and the real "Brewing next" locked-module
   row. Overrides every earlier .vsx-hub* generation. */
.template-index .vsx-hub{display:grid!important;grid-template-columns:232px 1fr!important;min-height:0!important;background:#111015!important;border:1px solid rgba(170,130,255,.16)!important;border-radius:20px!important;box-shadow:0 36px 90px rgba(20,10,30,.22)!important;overflow:hidden;color:#f1eef6}
.template-index .vsx-hub-side{background:#0c0b10!important;border-right:1px solid rgba(255,255,255,.06);padding:22px 16px;display:flex;flex-direction:column;gap:4px}
.template-index .vsx-hub-brand{padding:4px 6px 20px;display:flex;align-items:center;gap:10px}
.vsx-hub-mark{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font:800 13px var(--ui);color:#fff;background:linear-gradient(145deg,var(--vs-purple),#5a2fc2);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 6px 14px rgba(139,69,245,.35)}
.vsx-hub-brandtxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.vsx-hub-brandtxt strong{font-size:13px;font-weight:700;color:#fff}
.vsx-hub-brandtxt small{font:700 9px var(--vs-mono);letter-spacing:.14em;color:#6f6a7c}
.template-index .vsx-hub-nav{display:flex;flex-direction:column;gap:2px}
.template-index .vsx-hub-nav span{font:600 12.5px var(--ui);color:#8c859a;padding:9px 12px;border-radius:9px;cursor:default}
.template-index .vsx-hub-nav span.is-active{color:#fff;background:rgba(255,255,255,.055);position:relative}
.template-index .vsx-hub-nav span.is-active::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--vs-purple)}
.template-index .vsx-hub-acct{margin-top:auto;display:flex;align-items:center;gap:10px;padding:14px 10px 2px;border-top:1px solid rgba(255,255,255,.06)}
.vsx-hub-acct i{width:7px;height:7px;border-radius:50%;background:var(--vs-purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--vs-purple) 22%,transparent);flex:0 0 auto}
.vsx-hub-acct div{display:flex;flex-direction:column;gap:1px;min-width:0}
.vsx-hub-acct b{font-size:11px;font-weight:700;color:#e9e4f2}
.vsx-hub-acct small{font-size:10px;color:#6f6a7c}
.template-index .vsx-hub-main{background:radial-gradient(circle at 76% 10%,rgba(139,69,245,.14),transparent 38%),#131218!important;color:#f1eef6!important;padding:30px 32px 32px;min-width:0}
.vsx-hub-tag{display:block;font:800 10px var(--vs-mono);letter-spacing:.16em;color:var(--vs-purple);margin-bottom:14px}
.template-index .vsx-hub-card{background:#1a1920;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px 24px 18px}
.vsx-hub-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.vsx-hub-shot{border-radius:12px;overflow:hidden;aspect-ratio:3/2;background:#0a090d;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.vsx-hub-shot img{width:100%;height:100%;object-fit:cover;display:block}
.vsx-hub-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.vsx-hub-info h3{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0}
.vsx-hub-info>p{font-size:12.5px;color:#8c859a;margin:0 0 6px}
.vsx-hub-fmt{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.vsx-hub-fmt span{font:700 9.5px var(--vs-mono);letter-spacing:.1em;color:#938d9f}
.vsx-hub-fmt i{width:3px;height:3px;border-radius:50%;background:#4a4556}
.vsx-hub-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#9b94a8;margin-bottom:16px}
.vsx-hub-status i{width:7px;height:7px;border-radius:50%;background:var(--vs-purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--vs-purple) 20%,transparent)}
.vsx-hub-status em{font-style:normal;opacity:.5}
.vsx-hub-status b{color:#cfc8db;font-weight:700}
.vsx-hub-btns{display:flex;gap:8px;margin-bottom:10px}
.template-index .vsx-hub-btns button{font:700 11.5px var(--ui);padding:10px 18px;border-radius:999px;border:1px solid transparent;cursor:default}
.template-index .vsx-hub-btns button.p{background:#e3d6ff;color:#241049}
.template-index .vsx-hub-btns button:not(.p){background:transparent;border-color:rgba(255,255,255,.14);color:#e3dfeb}
.vsx-hub-folder{font:600 11px var(--ui);color:var(--vs-purple);text-decoration:none}
.vsx-hub-wave{display:flex;align-items:flex-end;gap:2.5px;height:22px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.vsx-hub-wave i{flex:1 1 0;min-width:1px;max-width:3px;border-radius:2px;background:color-mix(in srgb,var(--vs-purple) 55%,#443f52);align-self:flex-end}
.vsx-hub-nexthead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
.vsx-hub-nexthead small{font:800 10px var(--vs-mono);letter-spacing:.14em;color:#817b8f}
.vsx-hub-nexthead a{font:700 11.5px var(--ui);color:var(--vs-purple);text-decoration:none}
.vsx-hub-nextgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vsx-hub-nextcard{position:relative;border-radius:12px;overflow:hidden;background:#17151c;border:1px solid rgba(255,255,255,.06);padding-bottom:9px}
.vsx-hub-nextcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:brightness(.4) saturate(.8)}
.vsx-hub-lock{position:absolute;left:50%;top:calc(50% - 10px);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(10,9,13,.6);backdrop-filter:blur(2px);display:grid;place-items:center;color:#cfc8db}
.vsx-hub-lock svg{width:14px;height:14px}
.vsx-hub-nextcard small{display:block;text-align:center;font:700 10px var(--vs-mono);letter-spacing:.06em;color:#938d9f;margin-top:9px}
.template-index .vsx-hub-foot{display:flex;align-items:center;gap:18px}
.template-index .vsx-hub-foot span{font:700 10.5px var(--vs-mono);letter-spacing:.1em;color:#938d9f}

.vsx-hub,.vsx-hub-nexthead,.vsx-hub-nextcard{animation:vsProductRise .6s var(--ease-product,cubic-bezier(.22,1,.36,1)) both;animation-timeline:view();animation-range:entry 0% cover 34%}
.vsx-hub-nextcard:nth-child(2){animation-delay:60ms}.vsx-hub-nextcard:nth-child(3){animation-delay:120ms}.vsx-hub-nextcard:nth-child(4){animation-delay:180ms}
@media(prefers-reduced-motion:reduce){.vsx-hub,.vsx-hub-nexthead,.vsx-hub-nextcard{animation:none!important;opacity:1!important;transform:none!important}}

@media(max-width:900px){
  .template-index .vsx-hub{grid-template-columns:1fr!important}
  .template-index .vsx-hub-side{display:none!important}
  .template-index .vsx-hub-main{padding:24px!important}
  .vsx-hub-row{grid-template-columns:1fr;gap:18px}
  .vsx-hub-nextgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .vsx-hub-info h3{font-size:19px}
  .vsx-hub-btns{flex-wrap:wrap}
  .vsx-hub-wave{display:none}
}

/* ===== v127 — fix: DAW-row rise animation (vsProductRise, translateY
   up to 26px, entry 55% cover 90%) can visually overlap the spec
   caption directly beneath it mid-scroll, since the caption itself
   isn't animated and sits only ~10px below the row's resting box.
   Give both spec lines enough headroom to clear the chips' maximum
   transform offset so there's never a collision while scrolling. */
.template-index .vs111-spec{margin-top:30px!important}
.template-index .vsx-story-spec{margin-top:30px!important}

/* fix: "see what's inside" was squeezed into a narrow flex column next
   to the primary CTA at phone widths and wrapped across 3 lines. Let
   it drop to its own full-width line underneath instead. */
@media(max-width:560px){
  .template-index .vs111-ctas{flex-wrap:wrap;row-gap:12px}
  .template-index .vs111-secondary{flex:0 0 100%}
}

/* ========================================================================
   v128 — brand/commerce pass: one centralized accent token, the header
   wordmark fixed at its real cause, the 2-item nav rebalanced, a single
   CTA button language rolled out to pricing/cart, and the legacy pink
   badge/CTA colors retired in favor of the token. Placed last on purpose
   so each rule here is the final, authoritative word for its property —
   every earlier generation above is left in place for history/other
   properties it still carries (sizing, spacing, motion).
   ======================================================================== */

/* ---- 1) ONE accent, reusing the names already in use instead of a
   parallel system. Every legacy accent-ish variable (--vs-purple/-electric
   /-lav/-pink/-pink2/-lilac and the generic --acc/-lt/-soft) now resolves
   to the exact same color, on both the homepage (.template-index) and the
   restored Presets page (.tpl-presets) — change --vs-accent here and the
   whole surface recolors. Kept close to the purple already in heavy use
   (the hero/CTA #8a4dff family) rather than picking a new hue, since no
   final palette (Electric Iris / Ultraviolet / Royal Violet) was chosen. */
.template-index,.tpl-presets{
  --vs-accent:#8A4DFF;
  --vs-accent-hover:#A463FF;
  --vs-accent-active:#6B32D9;
  --vs-accent-soft:#E4C4FF;
  --vs-accent-border:color-mix(in srgb,var(--vs-accent) 45%,transparent);
  --vs-accent-glow:color-mix(in srgb,var(--vs-accent) 38%,transparent);
  --vs-ink:#0D0C10;
  --vs-muted:#69636D;
  --vs-surface:#F7F5F2;
  --vs-surface-dark:var(--vs-bg,#09090D);
  --vs-purple:var(--vs-accent); --vs-electric:var(--vs-accent-hover); --vs-lav:var(--vs-accent-soft);
  --vs-pink:var(--vs-accent); --vs-pink2:var(--vs-accent-hover); --vs-lilac:var(--vs-accent-soft);
  --acc:var(--vs-accent); --acc-lt:var(--vs-accent-hover); --acc-soft:var(--vs-accent-soft);
}

/* ---- 2) header wordmark, fixed at the source ----
   Root cause: the dark header background (".template-index .nav", set
   with color-mix(var(--vs-bg)) a few generations up) legitimately wins
   the cascade over the later ".nav.vsx-nav{background:#fff}" attempts
   below it (confirmed by inspecting the live computed styles, not just
   the source text) because a shadowed CSS custom property inside a
   shorthand resolves in a way those later rules didn't account for — so
   the header really is dark, and v117's near-black "vocal" was colored
   for a white background that was never actually there, which is why it
   disappeared. Fix: color the two spans for the background that actually
   renders, as one final rule, with no pseudo-elements, no opacity, no
   blend modes — just the real markup's two real spans. */
/* Both rules in this section, and the whole of #3 below, now also target
   .tpl-presets: header.liquid's use_vs_shell flag (template.name=='index'
   OR template.suffix=='presets') means the Presets page renders this
   exact same dark header markup, so it needs this exact same "final
   word" fix — not just the color tokens from #1 above. */
.template-index .vsx-navmark,.tpl-presets .vsx-navmark{gap:.01em!important}
.template-index .vsx-navmark .w,.tpl-presets .vsx-navmark .w{color:var(--vs-surface)!important;opacity:1!important}
.template-index .vsx-navmark .s,.tpl-presets .vsx-navmark .s{color:var(--vs-accent)!important;opacity:1!important}

/* ---- 3) nav rebalanced for 2 items (Presets, Plugins) instead of 3 ----
   header.liquid now renders only .vs128-links, so this is free of the
   many earlier 3-item generations above (.links/.vs110-links) and their
   cascade history — a clean, intentional pill pair instead of a leftover
   gap where "Software" used to sit. */
.template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{display:flex!important;align-items:center;gap:6px!important;margin-left:auto}
.template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{
  height:42px!important;min-height:42px!important;padding:0 22px!important;display:inline-flex!important;align-items:center!important;
  border-radius:999px!important;font-family:var(--ui)!important;font-size:13px!important;font-weight:700!important;letter-spacing:-.01em!important;
  color:color-mix(in srgb,var(--vs-surface) 70%,transparent)!important;
  background:transparent!important;border:1px solid color-mix(in srgb,var(--vs-surface) 14%,transparent)!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.template-index .nav.vsx-nav .vs128-links>a:hover,.tpl-presets .nav.vsx-nav .vs128-links>a:hover{
  background:color-mix(in srgb,var(--vs-accent) 16%,transparent)!important;
  color:var(--vs-surface)!important;border-color:transparent}
.template-index .nav.vsx-nav .vs128-links>a.on,.tpl-presets .nav.vsx-nav .vs128-links>a.on{
  background:var(--vs-accent)!important;color:#fff!important;border-color:var(--vs-accent)!important;
  box-shadow:0 10px 22px -10px var(--vs-accent-glow)}
.template-index .nav.vsx-nav .vs128-links>a:focus-visible,.tpl-presets .nav.vsx-nav .vs128-links>a:focus-visible{outline:2px solid var(--vs-accent-soft);outline-offset:2px}
@media(max-width:800px){
  /* guarantee the logo keeps its real (max-content) width and the pill
     pair is the thing that shrinks, instead of the two overlapping —
     the inherited 3-column nav grid (1fr auto 1fr -> auto 1fr auto at
     this breakpoint) could resolve the logo's auto column smaller than
     its own content at very narrow widths, which is what caused the
     wordmark/"Presets" collision on phone. */
  .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{grid-template-columns:minmax(max-content,auto) minmax(0,1fr) auto!important;gap:10px!important}
  .template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{gap:2px!important;justify-content:flex-end!important;min-width:0}
  .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{padding:0 12px!important;font-size:12px!important;height:34px!important;min-height:34px!important;white-space:nowrap!important;min-width:0!important}
  .template-index .nav.vsx-nav .vs128-links>a.on,.tpl-presets .nav.vsx-nav .vs128-links>a.on{padding:0 16px!important}
  .template-index .nav.vsx-nav .tools,.tpl-presets .nav.vsx-nav .tools{gap:10px!important}
}
@media(max-width:360px){
  .template-index .vsx-navmark,.tpl-presets .vsx-navmark{font-size:16px!important}
  .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{gap:6px!important}
  .template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{gap:1px!important}
  .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{padding:0 7px!important;font-size:10.5px!important}
  .template-index .nav.vsx-nav .vs128-links>a.on,.tpl-presets .nav.vsx-nav .vs128-links>a.on{padding:0 11px!important}
  .template-index .nav.vsx-nav .tools,.tpl-presets .nav.vsx-nav .tools{gap:6px!important}
}

/* ---- 4) pricing CTA system: compact pill, saturated fill, white label,
   a real circular white arrow control (new markup in vs-purchase.liquid)
   instead of the flat, oversized, washed-out-lavender rectangle (the old
   .vsx-btn.p default was literally var(--vs-lav), a pale tint meant for
   secondary use, not a primary purchase button). ---- */
.template-index .vsx-plan-go{
  position:relative!important;display:inline-flex!important;align-items:center!important;
  justify-content:space-between!important;gap:14px!important;width:100%!important;
  min-height:58px!important;padding:6px 7px 6px 26px!important;border-radius:999px!important;
  border:0!important;cursor:pointer;background:var(--vs-accent)!important;border-color:var(--vs-accent)!important;
  box-shadow:0 16px 34px -14px var(--vs-accent-glow)!important;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease!important;
}
.template-index .vsx-plan-go-txt{color:#fff!important;font-size:14.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;line-height:1}
.template-index .vsx-plan-go-arrow{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:var(--vs-accent);
  transition:transform .22s cubic-bezier(.16,1,.3,1),scale .22s ease}
.template-index .vsx-plan-go:hover:not([disabled]){
  transform:translateY(-1px);box-shadow:0 22px 46px -14px var(--vs-accent-glow)!important}
.template-index .vsx-plan-go:hover:not([disabled]) .vsx-plan-go-arrow{transform:translateX(3px) scale(1.04)}
.template-index .vsx-plan-go:active:not([disabled]){transform:scale(.985)!important}
.template-index .vsx-plan-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.template-index .vsx-plan-go[disabled]{opacity:.45!important;cursor:not-allowed;box-shadow:none!important}
@media(max-width:560px){
  .template-index .vsx-plan-go{min-height:54px!important;padding:5px 6px 5px 20px!important}
  .template-index .vsx-plan-go-txt{font-size:13px}
  .template-index .vsx-plan-go-arrow{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .template-index .vsx-plan-go,.template-index .vsx-plan-go-arrow{transition:none!important}
}
.template-index .vsx-plan-badge{background:var(--vs-accent)!important;color:#fff!important;border:0!important;font-weight:800!important;letter-spacing:.08em!important}

/* ---- 5) cart drawer CTA: same accent, pill shape, a confident lift on
   hover/press — sized for the narrow drawer (no arrow-circle control
   here, per the brief's own allowance for different cart sizing), with
   the legacy hot-pink gradient already retired above (section 1) since
   .cd-btn.go reads var(--acc)/var(--acc-lt), which now resolve purple on
   both the homepage and the Presets page. Secondary actions (back/skip)
   keep .cd-btn.ghost's quiet, non-competing look untouched. */
.cd-btn{border-radius:999px!important}
.cd-btn.go{
  box-shadow:0 14px 30px -12px color-mix(in srgb,var(--acc) 60%,transparent)!important;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,filter .2s ease!important;
}
.cd-btn.go:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 18px 36px -12px color-mix(in srgb,var(--acc) 68%,transparent)!important}
.cd-btn.go:active:not([disabled]){transform:scale(.985)!important}
.cd-btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cd-btn.go{transition:none!important}}

/* === VocalSyrup v131 — VISUAL CORRECTION PASS (Gabi's 22-point review of
   the v130 pass, against the reference recording - not a new feature
   pass). v130's own comments below are kept where the fix they
   describe is still correct and untouched; every block that the
   correction actually asked to change has a short note explaining
   what changed and why. Homepage only throughout; Presets is not
   touched by anything in this section. =================================

   1) HEADER. v130 added a width override on `.template-index .nav.vsx-nav
   .row` to match the widened hero stage below. That rule was never
   actually required by the brief (only the stage itself needed more
   room) and is the most likely self-inflicted risk in the whole pass -
   a calc()-heavy width on the sticky/in-flow nav row during reflow.
   Reverted outright: the nav keeps its original, known-stable width
   formula. The wordmark/nav-pill COLOR fix further down this file
   (".template-index .vsx-navmark .w", ".vs128-links>a") is unrelated
   to this and stays - that one is a genuine contrast bug, confirmed by
   computed-style, not a layout risk. */

/* 3) HERO SCALE - rebalanced, not just enlarged. v130 pushed the
   headline to clamp(92,7.8vw,142px) and the stage to 1560px, which
   overcorrected: VOCAL/SYRUP became disproportionately dominant over
   the product. Pulling the headline back toward its pre-v130 size
   (108px) and giving the extra authority to the PRODUCT side instead
   (bigger image, not bigger type) is what the correction actually
   asked for - "rebalance as one composition," not "shrink everything
   back down." Stage width/gap also pulled back to a calmer breakout. */
@media(min-width:801px){
  .vs111-stage{width:min(1320px,calc(100% - 64px))!important;max-width:none!important;column-gap:68px!important}
  .vs111-copy h1 span{font-size:clamp(76px,6vw,112px)!important}
  .vs111-copy h1 small{font-size:clamp(26px,2.3vw,34px)!important}
  #vs111-main,#vs111-main2{width:min(100%,640px)!important;max-height:450px!important}
  .vs111-product{min-height:460px!important;align-self:start!important}
  .vs111-prompts{max-width:560px!important}
  .vs111-daws{--vs-daw-box:44px}
}
@media(min-width:1301px){.vs111-stage{column-gap:78px!important}}

/* 6) PROMPT CHIPS - two rows stays correct (unchanged), but the chip
   itself read as a generic Shopify filter tag: flat white pill, heavy
   dark border, bold tiny caps. Lighter border, quieter weight, a touch
   more breathing room, and a background that matches the Dry/
   VocalSyrup card right above it so the two controls read as one
   family instead of two unrelated UI kits. "Surprise me" still hidden
   from the default two-row set, per the brief's own explicit
   allowance. */
.vs111-prompts button:last-child{display:none}
.vs111-prompts{gap:8px 7px!important}
.vs111-prompts button{
  border:1px solid color-mix(in srgb,var(--vs111-ink) 10%,transparent)!important;
  background:color-mix(in srgb,var(--vs111-ink) 3%,#fff)!important;
  font-weight:650!important;font-size:10.5px!important;letter-spacing:.01em!important;
  padding:7px 13px!important;box-shadow:none!important;color:color-mix(in srgb,var(--vs111-ink) 78%,transparent)!important;
}
.vs111-prompts button.is-on{color:#fff!important;box-shadow:0 4px 12px color-mix(in srgb,var(--vs111) 35%,transparent)!important}
.vs111-prompts button:hover{box-shadow:none!important;border-color:color-mix(in srgb,var(--vs111-ink) 20%,transparent)!important}

/* 4/5) PRODUCT PHYSICALITY. The brief is explicit: do not fix flatness
   with more hover animation - fix it with real grounding, and make the
   motion that remains nearly imperceptible. Three changes: (a) the
   idle float loses its rotation entirely (rotation reads as "demo
   wobble," not weight) and drops to a 2px drift; (b) hover loses its
   scale entirely, keeping only a 2px lift - "a physical object lifting
   a few pixels," nothing more; (c) the existing contact/ambient shadow
   pseudo-elements (already on .vs111-product from earlier passes, not
   a new mechanism) are strengthened - larger, darker, less blurred
   right under the product - so it reads as sitting on a surface at
   rest, before any interaction happens at all. */
@keyframes vs130Idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.vs118-idle #vs111-main:not(.vs116-hidden):not(.vs116-leave):not(.vs116-enter){animation:vs130Idle 8.5s ease-in-out infinite!important}
.vs111-product img{transform:none!important}
@media(prefers-reduced-motion:reduce){.vs111-product:hover #vs111-main{transform:none!important}}
.vs111-product:before{
  width:66%!important;height:30%!important;left:17%!important;bottom:17%!important;
  background:radial-gradient(ellipse,rgba(24,14,38,.34),rgba(24,14,38,.1) 48%,transparent 74%)!important;
  filter:blur(16px)!important;opacity:1!important;transform:translateY(10px) scaleX(1.04)!important;
}
.vs111-product:after{
  width:46%!important;height:11px!important;left:27%!important;bottom:19.5%!important;
  background:rgba(14,9,20,.3)!important;filter:blur(6px)!important;opacity:1!important;
}
@keyframes vs116ProductIn{0%{opacity:0;transform:scale(1.015) translateY(-5px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* 7) DRY/VOCALSYRUP - labels already permanent (confirmed in the JS,
   unchanged). The breathing pulse itself needed to get even quieter:
   smaller shadow delta, a 2px ring instead of 5px, slower cycle. Still
   shadow/glow only - the pill's own size never moves. */
@keyframes vs130Breathe{0%,100%{box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(28,18,39,.04),0 0 0 0 rgba(138,77,255,.16)}50%{box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(28,18,39,.05),0 0 0 2px rgba(138,77,255,0)}}
.vs111-ab{animation:vs130Breathe 4.4s ease-in-out infinite}
.vs111-busy .vs111-ab{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.vs111-ab{animation:none!important}}

/* 14/15/16/17) PRICING STACK - rebuilt as an actual fan/deck, not "more
   semi-transparent PNGs." Five real positions - BACK LEFT (st5), MID
   LEFT (st1), FRONT (st3.stk-fg), MID RIGHT (st2), BACK RIGHT (st4) -
   each at a clearly different depth: back layers are smaller, more
   rotated, pushed further out and genuinely behind the front card in
   z-order AND in overlap (front overlaps mid, mid overlaps back - real
   occlusion, not just stacked opacity). The front product is now a
   MAJOR element (62% -> 78% of the stage) so the whole stack reads as
   the card's dominant visual, not a timid decoration above the price.
   Motion: idle float removed almost entirely (front keeps a bare 1px
   drift so it doesn't look frozen; mid/back are fully still) - depth
   now comes from the static composition, exactly as asked, and the
   scroll-entry/hover motion already in vs-purchase/vsProductRise
   handles the "assembles into place" feel without extra JS. */
.template-index .vsx-suite-stack{overflow:visible!important}
.template-index .vsx-suite-stack .stk{width:min(78%,300px)!important;max-height:225px!important}
.template-index .vsx-suite-stack .st5{z-index:1!important;opacity:.7!important;filter:none!important}
.template-index .vsx-suite-stack .st4{z-index:2!important;opacity:.76!important;filter:none!important}
.template-index .vsx-suite-stack .st1{z-index:3!important;opacity:.94!important}
.template-index .vsx-suite-stack .st2{z-index:4!important;opacity:.94!important}
.template-index .vsx-suite-stack .st3.stk-fg{z-index:9!important;opacity:1!important}
/* monthly card (first .vsx-plan): wider fan, BACK LEFT/RIGHT pushed
   further out and clearly smaller so they read as sitting behind */
.template-index .vsx-plan:nth-child(1) .st1{transform:translate(-80%,-48%) rotate(-11deg) scale(.82)!important}
.template-index .vsx-plan:nth-child(1) .st2{transform:translate(-20%,-48%) rotate(11deg) scale(.82)!important}
.template-index .vsx-plan:nth-child(1) .st5{transform:translate(-94%,-42%) rotate(-19deg) scale(.64)!important}
.template-index .vsx-plan:nth-child(1) .st4{transform:translate(-6%,-42%) rotate(19deg) scale(.64)!important}
.template-index .vsx-plan:nth-child(1) .st3.stk-fg{transform:translate(-50%,-54%) scale(1.02)!important}
/* one-time card (second .vsx-plan): tighter fan, stronger front product */
.template-index .vsx-plan:nth-child(2) .st1{transform:translate(-72%,-49%) rotate(-7deg) scale(.85)!important}
.template-index .vsx-plan:nth-child(2) .st2{transform:translate(-28%,-49%) rotate(7deg) scale(.85)!important}
.template-index .vsx-plan:nth-child(2) .st5{transform:translate(-84%,-44%) rotate(-13deg) scale(.68)!important}
.template-index .vsx-plan:nth-child(2) .st4{transform:translate(-16%,-44%) rotate(13deg) scale(.68)!important}
.template-index .vsx-plan:nth-child(2) .st3.stk-fg{transform:translate(-50%,-55%) scale(1.07)!important}
.template-index .vsx-suite-stack .st3.stk-fg{filter:drop-shadow(0 20px 26px rgba(0,0,0,.44))!important}
.template-index .vsx-suite-stack .st1,.template-index .vsx-suite-stack .st2{filter:drop-shadow(0 10px 14px rgba(0,0,0,.26))!important}
.template-index .vsx-suite-stack .st4,.template-index .vsx-suite-stack .st5{filter:drop-shadow(0 6px 9px rgba(0,0,0,.18))!important}
/* hover: front lifts a few px, rear layers fan out only slightly -
   small distances, nothing that "dances" */
.template-index .vsx-plan:hover .st3.stk-fg{transform:translate(-50%,-57%) scale(1.03)!important}
.template-index .vsx-plan:nth-child(2):hover .st3.stk-fg{transform:translate(-50%,-58%) scale(1.085)!important}
.template-index .vsx-plan:nth-child(1):hover .st1{transform:translate(-84%,-47%) rotate(-14deg) scale(.8)!important}
.template-index .vsx-plan:nth-child(1):hover .st2{transform:translate(-16%,-47%) rotate(14deg) scale(.8)!important}
.template-index .vsx-plan:nth-child(2):hover .st1{transform:translate(-76%,-48%) rotate(-9deg) scale(.83)!important}
.template-index .vsx-plan:nth-child(2):hover .st2{transform:translate(-24%,-48%) rotate(9deg) scale(.83)!important}
/* idle motion almost entirely removed - only the front layer keeps a
   barely-there 1px drift so the composition doesn't look frozen; mid
   and back layers are fully stationary, exactly per the brief ("almost
   stationary... tiny float only if it genuinely helps") */
@keyframes vs130StkFloatA{0%,100%{margin-top:0}50%{margin-top:-1px}}
.template-index .vsx-suite-stack .st3.stk-fg{animation:vs130StkFloatA 6.5s ease-in-out infinite}
.template-index .vsx-plan:hover .stk{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.template-index .vsx-suite-stack .stk{animation:none!important}}
@media(max-width:850px){
  .template-index .vsx-suite-stack .st4,.template-index .vsx-suite-stack .st5{opacity:.55!important}
}

@media(prefers-reduced-motion:reduce){
  .vs118-idle #vs111-main{animation:none!important}
  .vs111-ab{animation:none!important}
}

/* found only by actually rendering the header (not by reading the source):
   the shared ".template-index .vsx-navmark .w,.tpl-presets .vsx-navmark
   .w{color:var(--vs-surface)}" rule a few blocks up was written for ONE
   shared dark header - correct on Presets, where the header really is
   dark (verified: computed background-color is ~rgb(9,9,13) @ 92%) - but
   the homepage's own header legitimately renders solid white (verified
   the same way), so that light, near-white wordmark color was landing on
   a light background there and reading as almost invisible. Same bug on
   "Presets" in the nav pills - color-mix(...,var(--vs-surface)...) is a
   light-on-light color there too. Splitting the homepage case out with a
   dark ink color instead of touching the shared rule (which stays
   correct for Presets exactly as-is). */
.template-index .vsx-navmark .w{color:var(--vs-ink)!important}
.template-index .nav.vsx-nav .vs128-links>a{
  color:color-mix(in srgb,var(--vs-ink) 68%,transparent)!important;
  border-color:color-mix(in srgb,var(--vs-ink) 14%,transparent)!important}
.template-index .nav.vsx-nav .vs128-links>a:hover{color:var(--vs-ink)!important}

/* found only by actually rendering at 768/390 (not visible at 1440, which
   is why earlier passes missed it): v117's "4) hero product" block
   (#vs111-main,#vs111-main2{width:min(100%,460px);max-height:330px;
   margin-top:-18px;...}) has no media query, so - being later in the
   file than v115's own correctly mobile-scoped 430px/310px version - it
   silently wins at EVERY width, including mobile, where .vs111-product's
   own mobile min-height is only 300-320px. A 330px-tall image with an
   extra -18px pulled upward inside a ~300px box overflows both into the
   prompt chips above it and the module rail below it. Restoring real
   mobile sizing, as its own final, later, explicitly-scoped rule. */
@media(max-width:800px){
  #vs111-main,#vs111-main2{width:min(100%,320px)!important;max-height:260px!important;margin-top:0!important}
  .vs111-product{min-height:280px!important;margin-top:18px!important}
}

/* 17) Meet VocalSyrup: the product name already enters with real weight
   via the shared vsx-story-copy stagger above (v12x) - this adds the
   masked line-reveal the brief calls for specifically on the headline,
   CSS-only (clip-path, no new wrapper markup needed in
   vs-product-story.liquid): the line is clipped away and translated down
   slightly, then wipes up into place on the same scroll-trigger system
   as everything else in this section, so it still joins the existing
   staggered sequence instead of running as a separate effect. */
.template-index .vsx-story-copy h3{
  animation:vsx130LineReveal .62s var(--ease-product,cubic-bezier(.22,1,.36,1)) both,vsRowRise .5s var(--ease-premium,cubic-bezier(.16,1,.3,1)) both!important;
  animation-timeline:view(),view()!important;
  animation-range:entry 0% cover 30%,entry 0% cover 30%!important;
}
@keyframes vsx130LineReveal{0%{clip-path:inset(0 0 105% 0)}100%{clip-path:inset(0 0 0% 0)}}
@media(prefers-reduced-motion:reduce){.template-index .vsx-story-copy h3{animation:none!important;clip-path:none!important}}

/* 8) MODULE RAIL ("pick your module - the page follows"). Read as "13
   navigation buttons" because every pill had equal weight and the row
   just ran off the right edge with no signal that it scrolls. Same
   edge-mask technique already used on the Meet VocalSyrup thumbnail
   carousel (vsx-story-thumbs) applied here for consistency, plus more
   breathing room between pills, a lighter rest state, and a clearer
   selected state (the active module gets real contrast + a soft lift,
   not just a color swap) so the row reads as "browse through the
   product" rather than a toolbar. */
.vs111-module-scroll{
  gap:10px!important;padding:2px 4px 12px!important;scroll-padding-inline:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
}
.vs111-module-scroll button{
  border-color:color-mix(in srgb,var(--vs111-ink) 9%,transparent)!important;
  background:color-mix(in srgb,var(--vs111-ink) 2.5%,#fff)!important;
  opacity:.72;transition:background .2s,border-color .2s,color .2s,transform .2s,opacity .2s,box-shadow .2s!important;
}
.vs111-module-scroll button:hover{opacity:1!important;transform:translateY(-1px)!important}
.vs111-module-scroll button.is-on{
  opacity:1!important;box-shadow:0 8px 18px color-mix(in srgb,var(--vs111) 30%,transparent)!important;
  transform:translateY(-1px)!important;
}
.vs111-module-scroll .thumb{background:#0a080d!important}
@media(prefers-reduced-motion:reduce){.vs111-module-scroll button{transition:none!important}}

/* 9) DAW ROW - optically rebuilt within the 6-DAW shared chip system
   (snippets/vs-daw-row.liquid). The shared bounding box + object-fit
   already gives every logo the same CSS footprint; what it can't fix
   is that some of the supplied marks carry more internal transparent
   padding than others (Ableton's circular mark and REAPER/Cubase's
   bare wordmark sit smaller inside the same box than FL Studio or
   Logic's full-bleed tiles). Nudging those specific logos up in scale
   - a pure CSS transform, never a redraw/recolor/recrop of the locked
   artwork itself - makes the row read as one consistent set instead of
   "some bigger, some smaller." A thin top rule also separates the row
   from the CTA above, so the six logos read as one designed group. */
.vs-daw-ico img[alt="Ableton Live"]{transform:scale(1.14)}
.vs-daw-ico img[alt="Cubase"]{transform:scale(1.1)}
.vs-daw-ico img[alt="REAPER"]{transform:scale(1.08)}
.vs-daw-ico img[alt="Studio One"]{transform:scale(1.05)}
.vs111-daws{padding-top:20px!important;border-top:1px solid color-mix(in srgb,var(--vs111-ink) 7%,transparent)!important}
.template-index .vsx-story-daws{padding-top:18px!important;border-top:1px solid #e8e4ea!important}

/* 11/12/13) MEET VOCALSYRUP - the product now gets real mass instead of
   another reveal animation: a bigger stage, the same contact/ambient-
   glow treatment strengthened (not reinvented - vsx-story-glow already
   existed), and the thumbnail rail pushed further into the background
   so the main image is unmistakably the section's hero, not one of
   several equal images. CTA and price get the precision pass the
   brief asked for - exact height/padding/letter-spacing/arrow-circle
   proportions, not a bigger button; price text gets an explicit, much
   smaller/muted secondary line instead of inheriting the big number's
   size. */
.template-index .vsx-story-stage{min-height:420px!important}
.template-index .vsx-story-main{max-width:640px!important}
.template-index .vsx-story-glow{opacity:.9!important}
.template-index .vsx-story-thumbs{opacity:.8!important}
.template-index .vsx-story-thumbs button{opacity:.52!important;transition:opacity .2s ease,transform .16s ease,border-color .16s ease!important}
.template-index .vsx-story-thumbs button.is-active{opacity:1!important}
.template-index .vsx-story-thumbs button:hover{opacity:.85!important}
.template-index .vsx-story-price{display:flex!important;align-items:baseline!important;gap:9px!important;font-size:34px!important;font-weight:800!important;letter-spacing:-.02em!important}
.template-index .vsx-story-price small{font-size:13px!important;font-weight:600!important;letter-spacing:0!important;color:#857e89!important}
.template-index .vsx-story-actions{align-items:center!important}
.template-index .vsx-story-actions .vsx-btn.p{
  min-height:58px!important;padding:0 7px 0 24px!important;display:inline-flex!important;
  align-items:center!important;gap:14px!important;font-size:14px!important;font-weight:800!important;
  letter-spacing:-.01em!important;
}
.template-index .vsx-story-actions .vsx-btn.p i{width:40px!important;height:40px!important;font-size:17px!important}
.template-index .vsx-story-link{font-size:13px!important;font-weight:700!important}
@media(max-width:800px){
  .template-index .vsx-story-stage{min-height:300px!important}
  .template-index .vsx-story-main{max-width:420px!important}
}

/* 18) VERTICAL RHYTHM audit. Hero -> Comments, Hub -> Pricing and
   "pricing heading -> cards" all had noticeably larger gaps than any
   other section-to-section transition on the page, read as dead space
   rather than deliberate pacing. Trimming the worst offenders only -
   every other section-to-section gap on the page was already in the
   same ~90-100px band and is left alone. */
.template-index .vsx-pfsec{padding:62px 0 94px!important}
.template-index .vsx-hubsec{padding:70px 0 90px!important}
.template-index .vsx-buysec{padding:58px 0 100px!important}
.template-index .vsx-plans{margin:30px auto 0!important}

/* bonus correctness fix, found while auditing vertical rhythm (not one
   of the 22 points, but a real bug on the same page, same root cause
   class as the header wordmark bug): .vsx-h2's own base color is
   var(--vs-white), a near-white token meant for a dark background.
   Every other homepage section re-points it with a .template-index
   override (.vsx-pf-head .vsx-h2, .vsx-hubsec .vsx-h2, .vsx-buy-info>
   .vsx-h2 above) - the FAQ section's heading was simply missed, so
   "Good to know." rendered as near-invisible ghosted text on the light
   background, and .vsx-faqq / .vsx-faqa p (same var(--vs-white)
   dependency) had the identical problem below it. Scoped the same way
   every other section's fix is scoped - only .template-index; Presets'
   own (dark) FAQ instance is untouched. */
.template-index .vsx-faqsec .vsx-h2{color:#0d0c10!important}
.template-index .vsx-faqq{color:#141116!important}
.template-index .vsx-faqitem{border-color:#e9e5ea!important}
.template-index .vsx-faqa p{color:#5c5661!important}

/* 10) COMMENTS ("The Pour Feed") demo-content styling. Real reactions
   (n>0) are completely unaffected by any of this. When there are none
   yet, the panel now shows static example rows instead of a big empty
   card - each one explicitly tagged "Example" (never "verified", never
   a fabricated reaction count or timestamp) so it reads as presentation
   content, not live user data. */
.vsx-pf-demo-tag{
  font-family:var(--ui);font-weight:700;font-size:10.5px;letter-spacing:.02em;
  color:#857e89;background:color-mix(in srgb,#857e89 12%,transparent);
  border-radius:999px;padding:4px 10px;
}
.vsx-pf-row-demo{opacity:.92}
.vsx-pf-demo-chip{
  font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.04em;text-transform:uppercase;
  color:#9a8fa3;border:1px solid #e3dde8;border-radius:999px;padding:2px 7px;margin-left:auto;
}
.vsx-pf-demo-foot{font-family:var(--ui);font-size:10.5px;color:#9a93a0;text-align:center;margin:12px 0 0;padding:0 4px}
.template-index .vsx-pf-demo-tag{color:#716a73!important;background:#f1eef2!important}
.template-index .vsx-pf-demo-chip{color:#8a818e!important;border-color:#e2dce4!important}
.template-index .vsx-pf-demo-foot{color:#948c98!important}

/* === VocalSyrup v132 — safe visual refinement; no routing/template changes === */
.template-index .vs111-stage{max-width:1280px!important}
.template-index .vs111-product{filter:drop-shadow(0 30px 38px rgba(31,18,42,.16)) drop-shadow(0 8px 10px rgba(20,10,25,.10));transform:translateZ(0)}
.template-index .vs116-stack:after{content:"";position:absolute;left:18%;right:18%;bottom:8%;height:8%;border-radius:50%;background:rgba(58,35,72,.16);filter:blur(20px);z-index:-1;pointer-events:none}
.template-index .vs111-prompts{max-width:650px!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.template-index .vs111-prompts button{min-width:0!important;white-space:nowrap!important;border-radius:999px!important;padding:9px 12px!important;font-size:11px!important}
.template-index .vs111-ab{box-shadow:0 0 0 1px rgba(141,77,255,.12),0 7px 20px rgba(78,43,115,.08)}
.template-index .vs111-ab:has(button:nth-of-type(2).is-on){animation:vsABBreath 3.6s ease-in-out infinite}
@keyframes vsABBreath{0%,100%{box-shadow:0 0 0 1px rgba(141,77,255,.12),0 7px 20px rgba(78,43,115,.08)}50%{box-shadow:0 0 0 4px rgba(141,77,255,.06),0 9px 24px rgba(78,43,115,.13)}}
.template-index .vs111-module-scroll{mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);scroll-behavior:smooth}
.template-index .vs111-module-scroll button{transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s ease,border-color .28s ease!important;opacity:.62}
.template-index .vs111-module-scroll button.is-on{opacity:1;transform:translateY(-2px)}

.template-index .vsx-pfsec{padding:78px 0 86px!important}
.template-index .vsx-pf-in{grid-template-columns:300px minmax(0,540px)!important;gap:72px!important;align-items:center!important}
.template-index .vsx-pf-panel{min-height:0!important}
.template-index .vsx-pf-list{max-height:410px!important}
.template-index .vsx-pf-row{padding:11px 16px!important;gap:11px!important}
.template-index .vsx-pf-av{width:36px!important;height:36px!important;flex-basis:36px!important;background:#eeeaf1!important}
.template-index .vsx-pf-quote{font-size:12.5px!important;line-height:1.42!important}
.template-index .vsx-pf-demo-foot{padding:8px 16px!important;margin:0!important;font-size:9.5px!important;color:#938b96!important;border-top:1px solid #eeeaf0}

.template-index .vsx-story-grid{grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr)!important;gap:64px!important}
.template-index .vsx-story-stage{min-height:390px!important;position:relative}
.template-index .vsx-story-stage:after{content:"";position:absolute;width:62%;height:12%;left:19%;bottom:7%;border-radius:50%;background:rgba(68,39,82,.13);filter:blur(22px);z-index:-1}
.template-index .vsx-story-main{max-width:600px!important;filter:drop-shadow(0 34px 38px rgba(28,15,34,.16)) drop-shadow(0 8px 10px rgba(28,15,34,.08))!important}
.template-index .vsx-story-price{font-size:40px!important;font-weight:760!important;letter-spacing:-.045em!important}
.template-index .vsx-story-actions .vsx-btn.p{min-height:50px!important;padding:6px 7px 6px 20px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;gap:15px!important}
.template-index .vsx-story-actions .vsx-btn.p i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#5f2ac7;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.template-index .vsx-story-actions .vsx-btn.p:hover{transform:translateY(-1px)}
.template-index .vsx-story-actions .vsx-btn.p:hover i{transform:translateX(2px)}
.template-index .vsx-story-daws span{animation:none!important;transform:none!important}
.template-index .vsx-story-daws span:hover{transform:translateY(-2px)!important}

.template-index .vsx-buysec{padding:82px 0 100px!important}
.template-index .vsx-buy-info{display:block!important}
.template-index .vsx-buy-info>.vsx-h2{max-width:520px!important}
.template-index .vsx-plans{max-width:980px!important;margin:34px auto 0!important;gap:24px!important}
.template-index .vsx-plan{min-height:620px!important;padding:28px!important;overflow:hidden!important}
.template-index .vsx-product-stack{height:285px!important;margin:0 -8px 8px!important;perspective:1000px}
.template-index .vsx-suite-stack .stk{width:min(82%,360px)!important;max-height:245px!important;filter:drop-shadow(0 18px 18px rgba(24,13,29,.14))!important;transition:transform .65s cubic-bezier(.16,1,.3,1)!important}
.template-index .vsx-suite-stack .st3{z-index:10!important;transform:translate(-50%,-48%) scale(1)!important;opacity:1!important}
.template-index .vsx-suite-stack .st1{z-index:8!important;transform:translate(-68%,-52%) rotate(-5deg) scale(.91)!important;opacity:.96!important}
.template-index .vsx-suite-stack .st2{z-index:8!important;transform:translate(-32%,-52%) rotate(5deg) scale(.91)!important;opacity:.96!important}
.template-index .vsx-suite-stack .st4{z-index:6!important;transform:translate(-80%,-49%) rotate(-9deg) scale(.82)!important;opacity:.82!important}
.template-index .vsx-suite-stack .st5{z-index:6!important;transform:translate(-20%,-49%) rotate(9deg) scale(.82)!important;opacity:.82!important}
.template-index .vsx-plan:hover .vsx-suite-stack .st3{transform:translate(-50%,-51%) scale(1.01)!important}
.template-index .vsx-plan:hover .vsx-suite-stack .st1{transform:translate(-71%,-52%) rotate(-6deg) scale(.91)!important}
.template-index .vsx-plan:hover .vsx-suite-stack .st2{transform:translate(-29%,-52%) rotate(6deg) scale(.91)!important}
.template-index .vsx-plan:hover .vsx-suite-stack .st4{transform:translate(-83%,-49%) rotate(-10deg) scale(.82)!important}
.template-index .vsx-plan:hover .vsx-suite-stack .st5{transform:translate(-17%,-49%) rotate(10deg) scale(.82)!important}
.template-index .vsx-plan-p b{font-size:44px!important;font-weight:780!important;letter-spacing:-.045em!important}
.template-index .vsx-plan-go{width:auto!important;min-width:230px!important;min-height:50px!important;border-radius:999px!important;padding:6px 7px 6px 18px!important;display:inline-flex!important;justify-content:space-between!important;gap:14px!important}
.template-index .vsx-plan-go-arrow{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#5f2ac7;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.template-index .vsx-plan-go:hover{transform:translateY(-1px)}
.template-index .vsx-plan-go:hover .vsx-plan-go-arrow{transform:translateX(2px)}
@media(max-width:900px){.template-index .vs111-prompts{grid-template-columns:repeat(2,minmax(0,1fr))!important}.template-index .vsx-pf-in{grid-template-columns:1fr!important;gap:30px!important;align-items:start!important}.template-index .vsx-story-grid{grid-template-columns:1fr!important}.template-index .vsx-plans{grid-template-columns:1fr!important;max-width:560px!important}.template-index .vsx-plan{min-height:0!important}}
@media(max-width:600px){.template-index .vs111-prompts{display:flex!important;flex-wrap:wrap!important}.template-index .vs111-prompts button{flex:1 1 calc(50% - 8px)}.template-index .vsx-product-stack{height:240px!important}.template-index .vsx-suite-stack .stk{max-height:205px!important}.template-index .vsx-plan-go{width:100%!important}}
@media(prefers-reduced-motion:reduce){.template-index .vs111-ab:has(button:nth-of-type(2).is-on){animation:none!important}.template-index .vs116-layer,.template-index .vs111-module-scroll button,.template-index .vsx-suite-stack .stk{transition:none!important}}

/* === VS 2026-10-02 FINAL VISUAL QA PATCH ===
   Scoped to homepage only. No template/routing/cart/schema changes. */
.template-index .vsx-nav .row{grid-template-columns:minmax(150px,1fr) auto minmax(96px,1fr)!important;overflow:visible!important}
.template-index .vsx-navmark{display:inline-flex!important;visibility:visible!important;opacity:1!important;width:auto!important;min-width:150px!important;white-space:nowrap!important;overflow:visible!important;position:relative!important;z-index:3!important}
.template-index .vsx-navmark .w,.template-index .vsx-navmark .s{display:inline!important;visibility:visible!important;opacity:1!important}
.template-index .vsx-navmark .w{color:#f5f1eb!important}
.template-index .vsx-navmark .s{color:var(--vs-lav)!important}
.template-index .vs128-links{display:flex!important;visibility:visible!important;opacity:1!important;white-space:nowrap!important;position:relative!important;z-index:3!important}
.template-index .vs128-links>a{display:inline-flex!important}

/* compatibility: larger, optically consistent and intentionally grouped */
.template-index .vsx-dawrow{gap:18px 24px!important;margin-top:24px!important}
.template-index .vsx-daw{gap:7px!important;min-width:62px!important}
.template-index .vsx-daw-tile{width:62px!important;height:62px!important;border-radius:14px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.08)!important;padding:8px!important}
.template-index .vsx-daw-tile img{width:100%!important;height:100%!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important;margin:auto!important}
.template-index .vsx-daw-name{font-size:11.5px!important;line-height:1.15!important;white-space:nowrap!important}
.template-index .vsx-story-daws{margin-top:22px!important}
.template-index .vsx-story-daws .vsx-dawrow{justify-content:flex-start!important;gap:12px 14px!important;margin-top:0!important}
.template-index .vsx-story-daws .vsx-daw{min-width:52px!important}
.template-index .vsx-story-daws .vsx-daw-tile{width:52px!important;height:52px!important;padding:7px!important}
.template-index .vsx-story-daws .vsx-daw-tile img{max-width:38px!important;max-height:38px!important}

/* comments: denser two-column editorial composition */
.template-index .vsx-pfsec{padding:78px 0 88px!important}
.template-index .vsx-pf-in{grid-template-columns:minmax(260px,.78fr) minmax(520px,1.22fr)!important;gap:clamp(44px,6vw,92px)!important;align-items:center!important}
.template-index .vsx-pf-head{align-self:center!important}
.template-index .vsx-pf-panel{width:100%!important;max-width:620px!important;justify-self:end!important;box-shadow:0 28px 70px rgba(17,9,24,.16)!important}
.template-index .vsx-pf-list{max-height:460px!important}
.template-index .vsx-pf-row{padding:12px 16px!important;gap:11px!important}
.template-index .vsx-pf-av{width:38px!important;height:38px!important;flex:0 0 38px!important}
.template-index .vsx-pf-av img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Meet: close the dead gap while keeping the existing composition */
.template-index .vsx-story{padding:78px 0 92px!important}
.template-index .vsx-story-head{margin-bottom:30px!important}
.template-index .vsx-story-grid{gap:clamp(44px,5vw,72px)!important;align-items:center!important}
.template-index .vsx-story-stage{min-height:350px!important}
.template-index .vsx-story-main{filter:drop-shadow(0 30px 34px rgba(29,15,37,.18))!important}
.template-index .vsx-story-glow{opacity:.72!important}

/* pricing: cards enter the composition sooner and the deck reads as physical depth */
.template-index .vsx-buysec{padding-top:68px!important;padding-bottom:92px!important}
.template-index .vsx-buy-in{display:block!important}
.template-index .vsx-buy-art{display:none!important}
.template-index .vsx-buy-info{max-width:1120px!important;margin:0 auto!important}
.template-index .vsx-buy-info>.vsx-h2{max-width:760px!important;margin-bottom:0!important}
.template-index .vsx-plans{max-width:980px!important;margin-top:28px!important;gap:22px!important}
.template-index .vsx-plan{min-height:680px!important;padding:28px!important;overflow:hidden!important}
.template-index .vsx-product-stack{height:285px!important;margin:8px -8px 8px!important;perspective:1000px!important}
.template-index .vsx-suite-stack .stk{width:min(80%,350px)!important;max-height:245px!important;transform-origin:50% 70%!important}
.template-index .vsx-plan:nth-child(1) .st5{transform:translate(-89%,-45%) rotate(-13deg) scale(.72)!important;opacity:.78!important}
.template-index .vsx-plan:nth-child(1) .st1{transform:translate(-70%,-50%) rotate(-6deg) scale(.9)!important;opacity:.96!important}
.template-index .vsx-plan:nth-child(1) .st3{transform:translate(-50%,-49%) scale(1.04)!important;opacity:1!important}
.template-index .vsx-plan:nth-child(1) .st2{transform:translate(-30%,-50%) rotate(6deg) scale(.9)!important;opacity:.96!important}
.template-index .vsx-plan:nth-child(1) .st4{transform:translate(-11%,-45%) rotate(13deg) scale(.72)!important;opacity:.78!important}
.template-index .vsx-plan:nth-child(2) .st5{transform:translate(-82%,-46%) rotate(-10deg) scale(.75)!important;opacity:.8!important}
.template-index .vsx-plan:nth-child(2) .st1{transform:translate(-67%,-51%) rotate(-5deg) scale(.91)!important;opacity:.96!important}
.template-index .vsx-plan:nth-child(2) .st3{transform:translate(-50%,-50%) scale(1.07)!important;opacity:1!important}
.template-index .vsx-plan:nth-child(2) .st2{transform:translate(-33%,-51%) rotate(5deg) scale(.91)!important;opacity:.96!important}
.template-index .vsx-plan:nth-child(2) .st4{transform:translate(-18%,-46%) rotate(10deg) scale(.75)!important;opacity:.8!important}
.template-index .vsx-suite-stack .st3{filter:drop-shadow(0 24px 26px rgba(35,18,45,.2))!important}
.template-index .vsx-suite-stack .st1,.template-index .vsx-suite-stack .st2{filter:drop-shadow(0 14px 18px rgba(35,18,45,.13))!important}
.template-index .vsx-plan-go{width:auto!important;min-width:240px!important;align-self:flex-start!important;border-radius:999px!important;padding:6px 7px 6px 18px!important;min-height:50px!important;justify-content:space-between!important;gap:16px!important;background:var(--vs-purple)!important;color:#fff!important;border:0!important;box-shadow:0 12px 28px rgba(111,55,203,.16)!important}
.template-index .vsx-plan form{width:max-content!important;max-width:100%!important}
.template-index .vsx-plan form .vsx-plan-go{width:auto!important}
.template-index .vsx-plan-go-arrow{background:#fff!important;color:var(--vs-purple)!important;flex:0 0 36px!important}

@media(max-width:900px){
 .template-index .vsx-pf-in{grid-template-columns:1fr!important;gap:30px!important}.template-index .vsx-pf-panel{justify-self:stretch!important;max-width:none!important}
 .template-index .vsx-story-head{margin-bottom:24px!important}.template-index .vsx-story-stage{min-height:300px!important}
 .template-index .vsx-plans{grid-template-columns:1fr!important;max-width:620px!important}.template-index .vsx-plan{min-height:640px!important}
}
@media(max-width:560px){
 .template-index .vsx-nav .row{grid-template-columns:1fr auto!important}.template-index .vs128-links{display:none!important}.template-index .vsx-navmark{min-width:0!important;font-size:20px!important}
 .template-index .vsx-dawrow{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:18px 10px!important}
 .template-index .vsx-story{padding:58px 0 72px!important}.template-index .vsx-story-stage{min-height:250px!important}
 .template-index .vsx-product-stack{height:240px!important}.template-index .vsx-suite-stack .stk{max-height:205px!important}
 .template-index .vsx-plan{padding:22px!important;min-height:620px!important}.template-index .vsx-plan-go{width:100%!important}.template-index .vsx-plan form{width:100%!important}
}
\n\n/* === VS 2026-10-02 COMPACT / SHARED-SHELL FIX ===\n   Final cascade layer. Shared visual shell only; no routing/cart/product logic. */\n:root{--vs-shell-accent:#7d46f5;--vs-shell-paper:#f7f6f3;--vs-shell-ink:#0b0a0d}\n\n/* Home + Presets: identical ticker and header geometry/palette. */\n.template-index .vtk,.tpl-presets .vtk{\n  height:32px!important;min-height:32px!important;padding:0!important;\n  display:flex!important;align-items:center!important;background:var(--vs-shell-accent)!important;\n  color:#fff!important;border:0!important;position:relative!important;z-index:1201!important\n}\n.template-index .vtk-track,.tpl-presets .vtk-track{height:32px!important;align-items:center!important}\n.template-index .vtk-i,.tpl-presets .vtk-i{font-size:11px!important;font-weight:800!important;line-height:32px!important}\n\n.template-index .nav.vsx-nav,.tpl-presets .nav.vsx-nav{\n  background:#fff!important;color:var(--vs-shell-ink)!important;border:0!important;\n  border-bottom:1px solid #e6e2e8!important;box-shadow:none!important;backdrop-filter:none!important\n}\n.template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{\n  width:calc(100% - 36px)!important;max-width:1040px!important;min-height:58px!important;\n  margin:0 auto!important;padding:7px 0!important;background:#fff!important;\n  grid-template-columns:minmax(140px,1fr) auto minmax(88px,1fr)!important;gap:14px!important;overflow:visible!important\n}\n.template-index .vsx-navmark,.tpl-presets .vsx-navmark{\n  display:inline-flex!important;visibility:visible!important;opacity:1!important;min-width:140px!important;\n  color:var(--vs-shell-ink)!important;font-size:18px!important;line-height:1!important;white-space:nowrap!important\n}\n.template-index .vsx-navmark .w,.tpl-presets .vsx-navmark .w{color:var(--vs-shell-ink)!important;opacity:1!important}\n.template-index .vsx-navmark .s,.tpl-presets .vsx-navmark .s{color:var(--vs-shell-accent)!important;opacity:1!important}\n.template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{display:flex!important;visibility:visible!important;opacity:1!important;gap:4px!important;margin-left:0!important}\n.template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{\n  display:inline-flex!important;visibility:visible!important;opacity:1!important;height:36px!important;min-height:36px!important;\n  padding:0 15px!important;border-radius:999px!important;background:transparent!important;border:1px solid transparent!important;\n  color:#2b2830!important;font-size:11.5px!important;font-weight:800!important;box-shadow:none!important\n}\n.template-index .nav.vsx-nav .vs128-links>a:hover,.tpl-presets .nav.vsx-nav .vs128-links>a:hover{background:#f1edf7!important;color:var(--vs-shell-ink)!important}\n.template-index .nav.vsx-nav .vs128-links>a.on,.tpl-presets .nav.vsx-nav .vs128-links>a.on{\n  background:var(--vs-shell-accent)!important;color:#fff!important;border-color:var(--vs-shell-accent)!important;\n  box-shadow:0 5px 14px rgba(125,70,245,.18)!important\n}\n.template-index .nav.vsx-nav .tools,.tpl-presets .nav.vsx-nav .tools{color:var(--vs-shell-ink)!important;justify-self:end!important}\n.template-index .nav.vsx-nav .tools a,.tpl-presets .nav.vsx-nav .tools a{color:var(--vs-shell-ink)!important}\n\n/* Hero: return to the compact, editorial scale of the reference. */\n.template-index .vs111-stage{max-width:920px!important;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;column-gap:46px!important;padding-top:44px!important;padding-bottom:54px!important}\n.template-index .vs111-copy h1 small{font-size:25px!important;margin-bottom:6px!important}\n.template-index .vs111-copy h1 span{font-size:88px!important;line-height:.78!important}\n.template-index #vs111-title{line-height:.78!important}\n.template-index .vs111-product{min-height:320px!important}\n.template-index #vs111-main,.template-index #vs111-main2,.template-index .vs111-product img{width:min(100%,410px)!important;max-height:305px!important}\n.template-index .vs111-product:hover img{transform:translateY(-3px) rotateX(.25deg) scale(1.006)!important}\n.template-index .vs111-player{margin-top:27px!important}\n.template-index .vs111-demo-stack{margin-top:27px!important}\n.template-index .vs111-play{width:46px!important;height:46px!important}\n.template-index .vs111-ab button{height:34px!important;padding:0 16px!important;font-size:11px!important}\n.template-index .vs111-prompts{max-width:390px!important;gap:6px!important}\n.template-index .vs111-prompts button{padding:7px 11px!important;font-size:9.5px!important}\n.template-index .vs111-follow{margin-top:14px!important}\n.template-index .vs111-module-scroll button{height:40px!important;padding:3px 12px 3px 4px!important}\n.template-index .vs111-module-scroll .thumb{width:37px!important;height:29px!important}\n.template-index .vs111-bottom{padding-top:16px!important}\n.template-index .vs111-daws{margin-top:48px!important}\n\n/* Premium breathing ring around the A/B control. The control itself never grows. */\n.template-index .vs111-ab{position:relative!important;isolation:isolate!important}\n.template-index .vs111-ab:after{content:"";position:absolute;inset:-4px;border-radius:999px;pointer-events:none;z-index:-1;border:1px solid rgba(125,70,245,.30);box-shadow:0 0 0 0 rgba(125,70,245,.16);opacity:.45;animation:vsABBreath 3.4s ease-in-out infinite}\n@keyframes vsABBreath{0%,100%{opacity:.30;box-shadow:0 0 0 0 rgba(125,70,245,.12)}50%{opacity:.8;box-shadow:0 0 0 5px rgba(125,70,245,.045)}}\n\n@media(max-width:800px){\n .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{width:calc(100% - 28px)!important;grid-template-columns:max-content minmax(0,1fr) auto!important;gap:8px!important}\n .template-index .vsx-navmark,.tpl-presets .vsx-navmark{min-width:0!important;font-size:16px!important}\n .template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{display:flex!important;justify-content:flex-end!important}\n .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{height:32px!important;min-height:32px!important;padding:0 9px!important;font-size:10px!important}\n .template-index .vs111-stage{padding-top:32px!important;grid-template-columns:1fr!important}\n .template-index .vs111-copy h1 span{font-size:72px!important}\n .template-index .vs111-product{min-height:270px!important}\n .template-index #vs111-main,.template-index #vs111-main2,.template-index .vs111-product img{width:min(100%,365px)!important;max-height:265px!important}\n}\n@media(max-width:430px){\n .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{width:calc(100% - 20px)!important}\n .template-index .nav.vsx-nav .tools,.tpl-presets .nav.vsx-nav .tools{gap:6px!important}\n .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{padding:0 7px!important;font-size:9.5px!important}\n}\n@media(prefers-reduced-motion:reduce){.template-index .vs111-ab:after{animation:none!important}}\n

/* === VS 2026-10-02 VERIFIED MP4 CORRECTION ===
   Final cascade overrides based on rendered storefront, not code assumptions. */
:root{--vs-shell-accent:#7d46f5!important}

/* Presets uses the legacy .tk ticker, Home uses .vtk. Force the SAME violet. */
.template-index .vtk,
.tpl-presets .tk{
  background:#7d46f5!important;
  color:#fff!important;
  height:32px!important;min-height:32px!important;padding:0!important;
  border:0!important;display:flex!important;align-items:center!important;
}
.tpl-presets .tk{--tk-bg:#7d46f5!important;--tk-fg:#fff!important}
.tpl-presets .tk-track{height:32px!important;align-items:center!important}
.tpl-presets .tk-i{color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:32px!important}
.tpl-presets .tk-a{color:rgba(255,255,255,.55)!important}

/* One identical dark shell on Plugins + Presets. */
.template-index .nav.vsx-nav,.tpl-presets .nav.vsx-nav{
  background:#0d0b10!important;color:#f7f4fa!important;
  border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
.template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{
  width:calc(100% - 36px)!important;max-width:1040px!important;
  min-height:58px!important;height:58px!important;margin:0 auto!important;padding:0!important;
  background:#0d0b10!important;grid-template-columns:minmax(140px,1fr) auto minmax(88px,1fr)!important;
  gap:14px!important;overflow:visible!important;
}
.template-index .vsx-navmark,.tpl-presets .vsx-navmark{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;
  min-width:140px!important;font-size:18px!important;line-height:1!important;white-space:nowrap!important;
}
.template-index .vsx-navmark .w,.tpl-presets .vsx-navmark .w{display:inline!important;color:#f7f4fa!important;opacity:1!important;visibility:visible!important}
.template-index .vsx-navmark .s,.tpl-presets .vsx-navmark .s{display:inline!important;color:#8d4dff!important;opacity:1!important;visibility:visible!important}
.template-index .nav.vsx-nav .vs128-links,.tpl-presets .nav.vsx-nav .vs128-links{
  display:flex!important;visibility:visible!important;opacity:1!important;gap:4px!important;margin:0!important;
}
.template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{
  display:inline-flex!important;visibility:visible!important;opacity:1!important;
  align-items:center!important;justify-content:center!important;height:34px!important;min-height:34px!important;
  padding:0 14px!important;border-radius:999px!important;background:transparent!important;
  border:1px solid transparent!important;color:rgba(247,244,250,.72)!important;
  font-size:11px!important;font-weight:800!important;box-shadow:none!important;
}
.template-index .nav.vsx-nav .vs128-links>a:hover,.tpl-presets .nav.vsx-nav .vs128-links>a:hover{color:#fff!important;background:rgba(255,255,255,.07)!important}
.template-index .nav.vsx-nav .vs128-links>a.on,.tpl-presets .nav.vsx-nav .vs128-links>a.on{
  background:#7d46f5!important;color:#fff!important;border-color:#7d46f5!important;
  box-shadow:0 5px 14px rgba(125,70,245,.20)!important;
}
.template-index .nav.vsx-nav .tools,.tpl-presets .nav.vsx-nav .tools,
.template-index .nav.vsx-nav .tools a,.tpl-presets .nav.vsx-nav .tools a{color:#f7f4fa!important}

/* Hero: genuinely compact. Previous pass was still visually oversized in the MP4. */
.template-index .vs111-stage{
  width:calc(100% - 40px)!important;max-width:840px!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  column-gap:38px!important;padding-top:34px!important;padding-bottom:42px!important;
}
.template-index .vs111-copy h1 small{font-size:21px!important;line-height:1.05!important;margin-bottom:6px!important}
.template-index .vs111-copy h1 span{font-size:76px!important;line-height:.80!important;letter-spacing:-.055em!important}
.template-index #vs111-title{line-height:.80!important}
.template-index .vs111-product{min-height:280px!important}
.template-index #vs111-main,.template-index #vs111-main2,.template-index .vs111-product img{
  width:min(100%,365px)!important;max-height:272px!important;
}
.template-index .vs111-product:hover img{transform:translateY(-2px) scale(1.003)!important}
.template-index .vs111-demo-stack{margin-top:20px!important}
.template-index .vs111-player{margin-top:0!important}
.template-index .vs111-play{width:42px!important;height:42px!important}
.template-index .vs111-ab button{height:32px!important;padding:0 14px!important;font-size:10.5px!important}
.template-index .vs111-hint{margin-top:5px!important;font-size:9px!important}
.template-index .vs111-prompts{max-width:350px!important;gap:5px!important;margin-top:8px!important}
.template-index .vs111-prompts button{padding:6px 9px!important;font-size:9px!important}
.template-index .vs111-follow{margin-top:10px!important}
.template-index .vs111-module-scroll button{height:36px!important;padding:3px 10px 3px 4px!important;font-size:10px!important}
.template-index .vs111-module-scroll .thumb{width:32px!important;height:26px!important}
.template-index .vs111-bottom{padding-top:12px!important}

/* The A/B is permanent on HOME/TUNE/GATE/EQ/etc. Never show “EQ Preview”. */
.template-index .vs111-demo-live{visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.template-index .vs115-module-demo{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.template-index .vs115-module-state .vs111-demo-live{visibility:visible!important;opacity:1!important;pointer-events:auto!important}

/* Visible but restrained pulse. No scaling, therefore no layout/size change. */
.template-index .vs111-ab{
  position:relative!important;animation:vsVerifiedABPulse 3.2s ease-in-out infinite!important;
}
@keyframes vsVerifiedABPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(125,70,245,.13),0 5px 15px rgba(49,26,75,.07),0 0 0 0 rgba(125,70,245,0)}
  50%{box-shadow:0 0 0 1px rgba(125,70,245,.30),0 7px 19px rgba(49,26,75,.10),0 0 0 5px rgba(125,70,245,.075)}
}
.template-index .vs111-ab:after{display:none!important}
.template-index .vs111-busy .vs111-ab{animation:vsVerifiedABPulse 3.2s ease-in-out infinite!important}

@media(max-width:800px){
 .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{width:calc(100% - 24px)!important;height:54px!important;min-height:54px!important;grid-template-columns:max-content minmax(0,1fr) auto!important;gap:7px!important}
 .template-index .vsx-navmark,.tpl-presets .vsx-navmark{min-width:0!important;font-size:15px!important}
 .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{height:30px!important;min-height:30px!important;padding:0 8px!important;font-size:9.5px!important}
 .template-index .vs111-stage{width:calc(100% - 28px)!important;grid-template-columns:1fr!important;padding-top:28px!important}
 .template-index .vs111-copy h1 span{font-size:64px!important}
 .template-index .vs111-product{min-height:245px!important}
 .template-index #vs111-main,.template-index #vs111-main2,.template-index .vs111-product img{width:min(100%,330px)!important;max-height:240px!important}
}
@media(prefers-reduced-motion:reduce){.template-index .vs111-ab{animation:none!important}}

/* === VS 2026-10-02 HERO BALANCE PASS ===
   Restore reference-like scale without returning to the oversized version.
   Keep the verified shell, permanent A/B and pulse fixes intact. */
@media(min-width:801px){
  .template-index .vs111-stage{
    width:calc(100% - 48px)!important;
    max-width:920px!important;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)!important;
    column-gap:50px!important;
    padding-top:52px!important;
    padding-bottom:56px!important;
  }
  .template-index .vs111-copy h1 small{
    font-size:23px!important;
    margin-bottom:7px!important;
  }
  .template-index .vs111-copy h1 span{
    font-size:82px!important;
    line-height:.80!important;
  }
  .template-index .vs111-product{
    min-height:325px!important;
    transform:translateY(24px)!important;
  }
  .template-index #vs111-main,
  .template-index #vs111-main2,
  .template-index .vs111-product img{
    width:min(100%,395px)!important;
    max-height:296px!important;
  }
  .template-index .vs111-demo-stack{margin-top:27px!important}
  .template-index .vs111-play{width:44px!important;height:44px!important}
  .template-index .vs111-ab button{height:34px!important;padding:0 15px!important;font-size:10.75px!important}
  .template-index .vs111-hint{margin-top:7px!important;margin-bottom:15px!important}
  .template-index .vs111-prompts{max-width:375px!important;gap:7px!important;margin-top:11px!important}
  .template-index .vs111-prompts button{padding:7px 10px!important;font-size:9.5px!important}
  .template-index .vs111-follow{margin-top:24px!important}
  .template-index .vs111-module-scroll{padding-top:2px!important;padding-bottom:12px!important}
  .template-index .vs111-module-scroll button{height:38px!important;padding:3px 11px 3px 4px!important}
  .template-index .vs111-module-scroll .thumb{width:34px!important;height:27px!important}
  .template-index .vs111-bottom{padding-top:22px!important}
}


/* ================================================================
   VS PRICING — editorial density pass 2026-10-02
   Final scoped override. Keeps Shopify product/price/form logic intact.
   ================================================================ */
.template-index .vsx-buysec{
  padding:88px 0 104px!important;
  background:#fbfaf9!important;
}
.template-index .vsx-buy-in{max-width:1120px!important}
.template-index .vsx-buy-info{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,390px)!important;
  column-gap:86px!important;
  align-items:end!important;
}
.template-index .vsx-buy-info>.vsx-h2{
  grid-column:1!important;
  margin:0!important;
  max-width:9ch!important;
  font-size:clamp(46px,4.15vw,60px)!important;
  line-height:.94!important;
  letter-spacing:-.06em!important;
}
.template-index .vsx-buy-info>.vsx-buy-desc{
  display:block!important;
  grid-column:2!important;
  margin:0 0 5px!important;
  max-width:38ch!important;
  color:#4e4850!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.template-index .vsx-plans{
  grid-column:1/-1!important;
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin:36px auto 0!important;
  gap:16px!important;
  align-items:stretch!important;
}
.template-index .vsx-plan{
  min-height:620px!important;
  padding:28px 27px 24px!important;
  border-radius:20px!important;
  border:1px solid #ddd8df!important;
  background:#fff!important;
  box-shadow:0 12px 34px rgba(29,20,33,.045)!important;
  overflow:visible!important;
}
.template-index .vsx-plan.on{
  border-color:rgba(141,77,255,.78)!important;
  box-shadow:0 18px 46px rgba(93,49,155,.10)!important;
}
.template-index .vsx-plan-h>span{
  display:flex!important;align-items:center!important;gap:7px!important;
  color:#6e6870!important;font-size:9px!important;font-weight:800!important;
  letter-spacing:.08em!important;
}
.template-index .vsx-plan-h>span:before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--vs-accent,#8d4dff);display:block;
}
.template-index .vsx-plan-h h3{
  margin:8px 0 0!important;
  font-size:32px!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
.template-index .vsx-plan-h p{
  margin:7px 0 0!important;
  color:#7d7680!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.template-index .vsx-plan-badge{
  top:-10px!important;left:20px!important;
  padding:6px 10px!important;
  background:var(--vs-accent,#8d4dff)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(141,77,255,.18)!important;
}
/* Product deck: deliberately smaller than the card with visible air around it. */
.template-index .vsx-product-stack{
  height:230px!important;
  margin:10px -2px 2px!important;
  isolation:isolate!important;
}
.template-index .vsx-product-stack:after{
  content:'';position:absolute;left:17%;right:17%;bottom:23px;height:24px;
  background:rgba(68,29,91,.14);filter:blur(18px);border-radius:50%;z-index:0;
}
.template-index .vsx-product-stack img{
  width:62%!important;
  max-height:180px!important;
  filter:drop-shadow(0 12px 14px rgba(25,13,31,.18))!important;
  transform-origin:50% 72%!important;
}
/* monthly: wider fan */
.template-index .vsx-plan:nth-child(1) .st5{z-index:1!important;opacity:.92!important;transform:translate(-88%,-45%) rotate(-12deg) scale(.72)!important}
.template-index .vsx-plan:nth-child(1) .st4{z-index:1!important;opacity:.92!important;transform:translate(-12%,-45%) rotate(12deg) scale(.72)!important}
.template-index .vsx-plan:nth-child(1) .st1{z-index:2!important;opacity:.97!important;transform:translate(-69%,-49%) rotate(-6deg) scale(.84)!important}
.template-index .vsx-plan:nth-child(1) .st2{z-index:2!important;opacity:.97!important;transform:translate(-31%,-49%) rotate(6deg) scale(.84)!important}
.template-index .vsx-plan:nth-child(1) .st3.stk-fg{z-index:5!important;opacity:1!important;transform:translate(-50%,-43%) scale(.98)!important}
/* own forever: tighter, stronger center */
.template-index .vsx-plan:nth-child(2) .st5{z-index:1!important;opacity:.9!important;transform:translate(-80%,-45%) rotate(-9deg) scale(.72)!important}
.template-index .vsx-plan:nth-child(2) .st4{z-index:1!important;opacity:.9!important;transform:translate(-20%,-45%) rotate(9deg) scale(.72)!important}
.template-index .vsx-plan:nth-child(2) .st1{z-index:2!important;opacity:.97!important;transform:translate(-65%,-49%) rotate(-4deg) scale(.85)!important}
.template-index .vsx-plan:nth-child(2) .st2{z-index:2!important;opacity:.97!important;transform:translate(-35%,-49%) rotate(4deg) scale(.85)!important}
.template-index .vsx-plan:nth-child(2) .st3.stk-fg{z-index:5!important;opacity:1!important;transform:translate(-50%,-43%) scale(1.01)!important}
.template-index .vsx-plan-p{margin:0!important;gap:5px!important;align-items:baseline!important}
.template-index .vsx-plan-p b{
  font-size:43px!important;font-weight:850!important;line-height:.95!important;
  letter-spacing:-.055em!important;color:#111!important;
}
.template-index .vsx-plan-p span{font-size:11px!important;color:#777078!important}
.template-index .vsx-plan-p s{font-size:11px!important;margin-bottom:2px!important}
.template-index .vsx-plan-kicker{
  margin:10px 0 13px!important;padding-bottom:13px!important;
  font-size:10.5px!important;line-height:1.35!important;color:#716a73!important;
  border-bottom:1px solid #e8e3e9!important;
}
.template-index .vsx-plan-features{
  margin:0 0 18px!important;gap:9px!important;
  font-size:11px!important;line-height:1.3!important;color:#3d3740!important;
}
.template-index .vsx-plan-features li:before{margin-right:9px!important}
.template-index .vsx-plan form,.template-index .vsx-plan>button.vsx-plan-go{margin-top:auto!important}
.template-index .vsx-plan-go{
  width:auto!important;max-width:100%!important;min-height:48px!important;
  padding:5px 6px 5px 18px!important;
  border-radius:999px!important;
  background:var(--vs-accent,#8d4dff)!important;
  border-color:var(--vs-accent,#8d4dff)!important;
  box-shadow:0 10px 24px rgba(141,77,255,.22)!important;
  align-self:flex-start!important;
}
.template-index .vsx-plan-go-txt{font-size:12.5px!important;font-weight:800!important}
.template-index .vsx-plan-go-arrow{width:36px!important;height:36px!important;margin-left:14px!important;background:#fff!important;color:#6f35dc!important}
.template-index .vsx-plan-go[disabled]{opacity:.72!important;filter:saturate(.9)!important}
.template-index .vsx-plan:hover{transform:translateY(-2px)!important;box-shadow:0 20px 44px rgba(30,18,35,.09)!important}
.template-index .vsx-plan:hover .vsx-product-stack .stk-fg{transform:translate(-50%,-45%) scale(1.01)!important}
@media(max-width:900px){
 .template-index .vsx-buy-info{display:block!important}
 .template-index .vsx-buy-info>.vsx-buy-desc{margin-top:18px!important;max-width:46ch!important}
 .template-index .vsx-plans{grid-template-columns:1fr!important;max-width:390px!important;margin-top:30px!important}
 .template-index .vsx-plan{min-height:590px!important}
}
@media(max-width:600px){
 .template-index .vsx-buysec{padding:68px 0 82px!important}
 .template-index .vsx-buy-info>.vsx-h2{font-size:46px!important}
 .template-index .vsx-plan{padding:24px 20px 21px!important;border-radius:18px!important}
 .template-index .vsx-product-stack{height:215px!important}
 .template-index .vsx-product-stack img{width:64%!important;max-height:170px!important}
}

/* ================================================================
   VS PRICING — motion + value inserts + contrast pass 2026-10-02
   ================================================================ */
.template-index .vsx-plan-h h3,
.template-index .vsx-plan-p b,
.template-index .vsx-plan-features li{
  color:#09080a!important;
}
.template-index .vsx-plan-h h3{font-weight:900!important}
.template-index .vsx-plan-p b{font-weight:900!important}
.template-index .vsx-plan-features{font-weight:620!important}
.template-index .vsx-plan-kicker{color:#5f5961!important;font-weight:540!important}

/* Product artwork is intentionally brighter than the previous pass. */
.template-index .vsx-product-stack img{
  filter:brightness(1.13) saturate(1.08) contrast(1.04) drop-shadow(0 12px 14px rgba(25,13,31,.16))!important;
  will-change:transform,filter;
}

/* Reference-like merchandising inserts without inventing testimonials or fake discounts. */
.template-index .vsx-value-inserts{
  display:flex!important;align-items:center!important;gap:8px!important;
  min-height:28px!important;margin:-2px 0 10px!important;
  position:relative!important;z-index:8!important;
}
.template-index .vsx-inside-pill{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  min-height:28px!important;padding:4px 11px 4px 5px!important;border-radius:999px!important;
  background:#0b0a0c!important;color:#fff!important;font-size:9.5px!important;font-weight:850!important;
  letter-spacing:-.01em!important;box-shadow:0 7px 15px rgba(12,8,15,.18)!important;
}
.template-index .vsx-inside-pill b{
  display:grid!important;place-items:center!important;width:20px!important;height:20px!important;
  border-radius:50%!important;background:#fff!important;color:var(--vs-accent,#8d4dff)!important;
  font-size:7.5px!important;letter-spacing:-.04em!important;
}
.template-index .vsx-save-pill{
  display:inline-flex!important;align-items:center!important;min-height:22px!important;
  padding:3px 8px!important;border-radius:999px!important;background:var(--vs-accent,#8d4dff)!important;
  color:#fff!important;font-size:8.5px!important;font-weight:850!important;text-transform:uppercase!important;
  letter-spacing:.035em!important;box-shadow:0 6px 13px rgba(141,77,255,.17)!important;
}
.template-index .vsx-plan-p s{
  color:#777178!important;font-size:12px!important;font-weight:750!important;text-decoration-thickness:1.5px!important;
  margin-right:3px!important;
}

/* Always-on, asynchronous product motion. Each layer has its own path/timing. */
.template-index .vsx-plan:nth-child(1) .st5{animation:vsDeckM5 7.9s ease-in-out infinite!important}
.template-index .vsx-plan:nth-child(1) .st4{animation:vsDeckM4 8.6s ease-in-out -.8s infinite!important}
.template-index .vsx-plan:nth-child(1) .st1{animation:vsDeckM1 7.2s ease-in-out -1.7s infinite!important}
.template-index .vsx-plan:nth-child(1) .st2{animation:vsDeckM2 8.1s ease-in-out -2.4s infinite!important}
.template-index .vsx-plan:nth-child(1) .st3{animation:vsDeckM3 6.8s ease-in-out -.5s infinite!important}
.template-index .vsx-plan:nth-child(2) .st5{animation:vsDeckO5 8.4s ease-in-out -2s infinite!important}
.template-index .vsx-plan:nth-child(2) .st4{animation:vsDeckO4 7.6s ease-in-out -.6s infinite!important}
.template-index .vsx-plan:nth-child(2) .st1{animation:vsDeckO1 8.9s ease-in-out -3s infinite!important}
.template-index .vsx-plan:nth-child(2) .st2{animation:vsDeckO2 7.4s ease-in-out -1.2s infinite!important}
.template-index .vsx-plan:nth-child(2) .st3{animation:vsDeckO3 6.9s ease-in-out -2.2s infinite!important}
@keyframes vsDeckM5{0%,100%{transform:translate(-88%,-45%) rotate(-12deg) scale(.72)}50%{transform:translate(-90%,-47%) rotate(-12.7deg) scale(.725)}}
@keyframes vsDeckM4{0%,100%{transform:translate(-12%,-45%) rotate(12deg) scale(.72)}50%{transform:translate(-10%,-47%) rotate(12.7deg) scale(.725)}}
@keyframes vsDeckM1{0%,100%{transform:translate(-69%,-49%) rotate(-6deg) scale(.84)}50%{transform:translate(-70.5%,-51%) rotate(-6.5deg) scale(.845)}}
@keyframes vsDeckM2{0%,100%{transform:translate(-31%,-49%) rotate(6deg) scale(.84)}50%{transform:translate(-29.5%,-50.5%) rotate(6.5deg) scale(.845)}}
@keyframes vsDeckM3{0%,100%{transform:translate(-50%,-43%) scale(.98)}50%{transform:translate(-50%,-45%) scale(.985)}}
@keyframes vsDeckO5{0%,100%{transform:translate(-80%,-45%) rotate(-9deg) scale(.72)}50%{transform:translate(-81.5%,-47%) rotate(-9.6deg) scale(.725)}}
@keyframes vsDeckO4{0%,100%{transform:translate(-20%,-45%) rotate(9deg) scale(.72)}50%{transform:translate(-18.5%,-47%) rotate(9.6deg) scale(.725)}}
@keyframes vsDeckO1{0%,100%{transform:translate(-65%,-49%) rotate(-4deg) scale(.85)}50%{transform:translate(-66.5%,-51%) rotate(-4.5deg) scale(.855)}}
@keyframes vsDeckO2{0%,100%{transform:translate(-35%,-49%) rotate(4deg) scale(.85)}50%{transform:translate(-33.5%,-50.5%) rotate(4.5deg) scale(.855)}}
@keyframes vsDeckO3{0%,100%{transform:translate(-50%,-43%) scale(1.01)}50%{transform:translate(-50%,-45%) scale(1.016)}}

@media (prefers-reduced-motion:reduce){
 .template-index .vsx-product-stack img{animation:none!important}
}
\n\n/* ================================================================
   VS PRICING — reference density pass + clean DAWs 2026-10-03
   ================================================================ */
.template-index .vsx-plans{max-width:690px!important;gap:18px!important}
.template-index .vsx-plan{padding:27px 24px 22px!important;min-height:610px!important}
.template-index .vsx-plan-h h3{font-size:32px!important;line-height:.98!important;letter-spacing:-.045em!important;color:#080709!important;font-weight:900!important}
.template-index .vsx-plan-h span{font-size:9px!important;font-weight:850!important;color:#5b545e!important;letter-spacing:.11em!important}
.template-index .vsx-plan-h p{font-size:11px!important;color:#6a636d!important;font-weight:560!important;margin-top:7px!important}
.template-index .vsx-product-stack{height:218px!important;margin:5px -4px 0!important}
.template-index .vsx-product-stack img{width:59%!important;max-height:172px!important;filter:brightness(1.20) saturate(1.10) contrast(1.035) drop-shadow(0 11px 13px rgba(25,13,31,.14))!important}
.template-index .vsx-value-inserts{margin:-5px 0 8px!important;min-height:28px!important}
.template-index .vsx-monthly-inserts{justify-content:flex-start!important}
.template-index .vsx-compare-merch{display:inline-flex;align-items:center;gap:8px;min-height:26px}
.template-index .vsx-compare-merch s{font-size:12px;font-weight:800;color:#7c757e;text-decoration-thickness:1.5px}
.template-index .vsx-compare-merch b{display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border-radius:999px;background:var(--vs-accent,#8d4dff);color:#fff;font-size:9px;font-weight:900;box-shadow:0 6px 14px rgba(141,77,255,.2)}
.template-index .vsx-plan:nth-child(1) .vsx-plan-p b{color:var(--vs-accent,#8d4dff)!important;font-size:46px!important;text-shadow:0 7px 18px rgba(141,77,255,.10)}
.template-index .vsx-plan:nth-child(2) .vsx-plan-p b{font-size:44px!important;color:#080709!important}
.template-index .vsx-plan-p span{font-size:11px!important;font-weight:650!important;color:#68616a!important}
.template-index .vsx-plan-kicker{font-size:10.5px!important;color:#5b555d!important;font-weight:600!important}
.template-index .vsx-plan-features{font-size:11.5px!important;font-weight:720!important;gap:9px!important;color:#171419!important}
.template-index .vsx-plan-go-txt{font-size:12.5px!important;font-weight:850!important}
/* User-supplied transparent DAW art: no tile/background treatment, only an optical box. */
.vs-daw-ico{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.vs-daw-ico img{object-fit:contain!important;background:transparent!important;padding:0!important;border:0!important}
.template-index .vsx-story-daws>span>img,.template-index .vsx-story-daws>span>b{background:transparent!important;border:0!important;padding:0!important}
@media(max-width:900px){.template-index .vsx-plans{max-width:390px!important}.template-index .vsx-plan{min-height:590px!important}}

/* === VS 2026-10-03 HEADER + TICKER PARITY PASS ===
   Strictly unifies the Plugins homepage and Presets page shell. */
:root{--vs-shell-purple:#8d4dff;--vs-shell-header:#0b0b0f;--vs-shell-white:#f7f4fa}

/* Both ticker implementations (.vtk on Plugins, .tk on Presets) must render identically. */
.template-index .vtk,
.tpl-presets .tk{
  --tk-bg:var(--vs-shell-purple)!important;
  --tk-fg:#fff!important;
  box-sizing:border-box!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  background:var(--vs-shell-purple)!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.template-index .vtk-track,
.tpl-presets .tk-track{height:34px!important;align-items:center!important}
.template-index .vtk-run,
.tpl-presets .tk-run{height:34px!important;align-items:center!important}
.template-index .vtk-i,
.tpl-presets .tk-i{
  color:#fff!important;
  font-family:var(--ui)!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:34px!important;
  letter-spacing:-.01em!important;
  padding:0 20px!important;
}
.template-index .vtk-a,
.tpl-presets .tk-a{color:rgba(255,255,255,.62)!important;opacity:1!important}

/* One identical dark navigation shell on both pages. */
.template-index .nav.vsx-nav,
.tpl-presets .nav.vsx-nav{
  box-sizing:border-box!important;
  height:58px!important;
  min-height:58px!important;
  background:var(--vs-shell-header)!important;
  color:var(--vs-shell-white)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
.template-index .nav.vsx-nav .row,
.tpl-presets .nav.vsx-nav .row{
  box-sizing:border-box!important;
  width:calc(100% - 36px)!important;
  max-width:1040px!important;
  height:58px!important;
  min-height:58px!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  grid-template-columns:minmax(160px,1fr) auto minmax(96px,1fr)!important;
  gap:14px!important;
  align-items:center!important;
  overflow:visible!important;
}
/* Raise the actual header content slightly while retaining the same 58px shell. */
.template-index .vsx-navmark,
.tpl-presets .vsx-navmark,
.template-index .nav.vsx-nav .vs128-links,
.tpl-presets .nav.vsx-nav .vs128-links,
.template-index .nav.vsx-nav .tools,
.tpl-presets .nav.vsx-nav .tools{transform:translateY(-3px)!important}

/* Larger, identical VocalSyrup wordmark. */
.template-index .vsx-navmark,
.tpl-presets .vsx-navmark{
  display:inline-flex!important;
  align-items:center!important;
  min-width:160px!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  color:var(--vs-shell-white)!important;
  visibility:visible!important;
  opacity:1!important;
}
.template-index .vsx-navmark .w,
.tpl-presets .vsx-navmark .w{display:inline!important;color:var(--vs-shell-white)!important;opacity:1!important;visibility:visible!important}
.template-index .vsx-navmark .s,
.tpl-presets .vsx-navmark .s{display:inline!important;color:var(--vs-shell-purple)!important;opacity:1!important;visibility:visible!important}

/* Plugins left, Presets right; identical size/position on both pages. */
.template-index .nav.vsx-nav .vs128-links,
.tpl-presets .nav.vsx-nav .vs128-links{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  margin:0!important;
  visibility:visible!important;
  opacity:1!important;
}
.template-index .nav.vsx-nav .vs128-links>a,
.tpl-presets .nav.vsx-nav .vs128-links>a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 15px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#ddd8e3!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:none!important;
  visibility:visible!important;
  opacity:1!important;
}
.template-index .nav.vsx-nav .vs128-links>a:hover,
.tpl-presets .nav.vsx-nav .vs128-links>a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.template-index .nav.vsx-nav .vs128-links>a.on,
.tpl-presets .nav.vsx-nav .vs128-links>a.on{
  background:var(--vs-shell-purple)!important;
  border-color:var(--vs-shell-purple)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(141,77,255,.24)!important;
}
.template-index .nav.vsx-nav .tools,
.tpl-presets .nav.vsx-nav .tools,
.template-index .nav.vsx-nav .tools a,
.tpl-presets .nav.vsx-nav .tools a{color:var(--vs-shell-white)!important}

@media(max-width:800px){
 .template-index .nav.vsx-nav .row,.tpl-presets .nav.vsx-nav .row{width:calc(100% - 24px)!important;grid-template-columns:max-content minmax(0,1fr) auto!important;gap:8px!important}
 .template-index .vsx-navmark,.tpl-presets .vsx-navmark{min-width:0!important;font-size:18px!important}
 .template-index .nav.vsx-nav .vs128-links>a,.tpl-presets .nav.vsx-nav .vs128-links>a{height:31px!important;min-height:31px!important;padding:0 9px!important;font-size:9.5px!important}
}

/* === VS HEADER ROOT-CAUSE FIX 2026-10-03 ===
   Both index and page.presets are rendered with sections/vs-ticker.liquid,
   therefore BOTH use .vtk. Previous parity rules incorrectly targeted
   .tpl-presets .tk (legacy ticker), so they never affected Presets. */
:root{--vs-shell-purple:#8d4dff;--vs-shell-header:#0b0b0f;--vs-shell-white:#f8f6fb}

/* Target the ACTUAL static section and actual .vtk class on both templates. */
.template-index #shopify-section-vs-ticker,
.tpl-presets #shopify-section-vs-ticker{
  display:block!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  background:var(--vs-shell-purple)!important;
  overflow:hidden!important;
}
.template-index #shopify-section-vs-ticker .vtk,
.tpl-presets #shopify-section-vs-ticker .vtk{
  box-sizing:border-box!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  background:var(--vs-shell-purple)!important;
  background-color:var(--vs-shell-purple)!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.template-index #shopify-section-vs-ticker .vtk-track,
.tpl-presets #shopify-section-vs-ticker .vtk-track,
.template-index #shopify-section-vs-ticker .vtk-run,
.tpl-presets #shopify-section-vs-ticker .vtk-run{
  height:34px!important;
  min-height:34px!important;
  align-items:center!important;
}
.template-index #shopify-section-vs-ticker .vtk-i,
.tpl-presets #shopify-section-vs-ticker .vtk-i{
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:34px!important;
  padding:0 20px!important;
}
.template-index #shopify-section-vs-ticker .vtk-a,
.tpl-presets #shopify-section-vs-ticker .vtk-a{color:rgba(255,255,255,.62)!important}

/* One exact header box on both pages. */
.template-index #shopify-section-header .nav.vsx-nav,
.tpl-presets #shopify-section-header .nav.vsx-nav{
  box-sizing:border-box!important;
  height:58px!important;
  min-height:58px!important;
  margin:0!important;
  padding:0!important;
  background:var(--vs-shell-header)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:none!important;
}
.template-index #shopify-section-header .nav.vsx-nav .row,
.tpl-presets #shopify-section-header .nav.vsx-nav .row{
  box-sizing:border-box!important;
  width:calc(100% - 36px)!important;
  max-width:1040px!important;
  height:58px!important;
  min-height:58px!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(175px,1fr) auto minmax(96px,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
/* Raise all header controls, and make the brand visibly larger. */
.template-index #shopify-section-header .vsx-navmark,
.tpl-presets #shopify-section-header .vsx-navmark{
  transform:translateY(-5px)!important;
  min-width:175px!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.055em!important;
  color:var(--vs-shell-white)!important;
}
.template-index #shopify-section-header .vsx-navmark .w,
.tpl-presets #shopify-section-header .vsx-navmark .w{color:var(--vs-shell-white)!important}
.template-index #shopify-section-header .vsx-navmark .s,
.tpl-presets #shopify-section-header .vsx-navmark .s{color:var(--vs-shell-purple)!important}
.template-index #shopify-section-header .vs128-links,
.tpl-presets #shopify-section-header .vs128-links,
.template-index #shopify-section-header .tools,
.tpl-presets #shopify-section-header .tools{transform:translateY(-5px)!important}
.template-index #shopify-section-header .vs128-links,
.tpl-presets #shopify-section-header .vs128-links{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  margin:0!important;
}
.template-index #shopify-section-header .vs128-links>a,
.tpl-presets #shopify-section-header .vs128-links>a{
  box-sizing:border-box!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#ddd8e3!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1!important;
  box-shadow:none!important;
}
.template-index #shopify-section-header .vs128-links>a.on,
.tpl-presets #shopify-section-header .vs128-links>a.on{
  background:var(--vs-shell-purple)!important;
  border-color:var(--vs-shell-purple)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(141,77,255,.24)!important;
}
.template-index #shopify-section-header .tools,
.tpl-presets #shopify-section-header .tools,
.template-index #shopify-section-header .tools a,
.tpl-presets #shopify-section-header .tools a{color:var(--vs-shell-white)!important}

@media(max-width:800px){
 .template-index #shopify-section-header .nav.vsx-nav .row,
 .tpl-presets #shopify-section-header .nav.vsx-nav .row{width:calc(100% - 24px)!important;grid-template-columns:max-content minmax(0,1fr) auto!important;gap:8px!important}
 .template-index #shopify-section-header .vsx-navmark,
 .tpl-presets #shopify-section-header .vsx-navmark{min-width:0!important;font-size:19px!important;transform:translateY(-3px)!important}
 .template-index #shopify-section-header .vs128-links,
 .tpl-presets #shopify-section-header .vs128-links,
 .template-index #shopify-section-header .tools,
 .tpl-presets #shopify-section-header .tools{transform:translateY(-3px)!important}
 .template-index #shopify-section-header .vs128-links>a,
 .tpl-presets #shopify-section-header .vs128-links>a{height:31px!important;min-height:31px!important;padding:0 9px!important;font-size:9.5px!important}
}

/* ================================================================
   VS PRICING — reference deck placement + continuous drift 2026-10-03
   Measured from the supplied reference recording: compact central cluster,
   shallow fan, rear panels visible above/at the sides, constant micro-drift.
   ================================================================ */
.template-index .vsx-product-stack{
  height:214px!important;
  margin:7px -2px 2px!important;
  perspective:1100px!important;
  overflow:visible!important;
}
.template-index .vsx-product-stack:after{
  left:24%!important;right:24%!important;bottom:20px!important;height:19px!important;
  background:rgba(76,34,98,.12)!important;filter:blur(16px)!important;
}
.template-index .vsx-product-stack img{
  width:55%!important;
  max-height:166px!important;
  top:50%!important;
  transform-origin:50% 68%!important;
  filter:brightness(1.24) saturate(1.08) contrast(1.025) drop-shadow(0 9px 11px rgba(25,13,31,.13))!important;
  backface-visibility:hidden!important;
}
/* Reference-like placement: compact cluster, not a wide card fan. */
.template-index .vsx-plan:nth-child(1) .st5{z-index:1!important;opacity:.94!important;animation:vsRefM5 7.6s ease-in-out -2.1s infinite!important}
.template-index .vsx-plan:nth-child(1) .st4{z-index:1!important;opacity:.94!important;animation:vsRefM4 8.2s ease-in-out -.9s infinite!important}
.template-index .vsx-plan:nth-child(1) .st1{z-index:2!important;opacity:.98!important;animation:vsRefM1 6.9s ease-in-out -3.2s infinite!important}
.template-index .vsx-plan:nth-child(1) .st2{z-index:3!important;opacity:.99!important;animation:vsRefM2 7.4s ease-in-out -1.4s infinite!important}
.template-index .vsx-plan:nth-child(1) .st3{z-index:5!important;opacity:1!important;animation:vsRefM3 6.4s ease-in-out -.4s infinite!important}
.template-index .vsx-plan:nth-child(2) .st5{z-index:1!important;opacity:.94!important;animation:vsRefO5 8.0s ease-in-out -1.8s infinite!important}
.template-index .vsx-plan:nth-child(2) .st4{z-index:1!important;opacity:.94!important;animation:vsRefO4 7.3s ease-in-out -.7s infinite!important}
.template-index .vsx-plan:nth-child(2) .st1{z-index:2!important;opacity:.98!important;animation:vsRefO1 8.4s ease-in-out -2.8s infinite!important}
.template-index .vsx-plan:nth-child(2) .st2{z-index:3!important;opacity:.99!important;animation:vsRefO2 7.1s ease-in-out -1.1s infinite!important}
.template-index .vsx-plan:nth-child(2) .st3{z-index:5!important;opacity:1!important;animation:vsRefO3 6.6s ease-in-out -2.0s infinite!important}

/* Monthly: rear-left / rear-high / mid-right / front. 2–5px continuous travel. */
@keyframes vsRefM5{
  0%,100%{transform:translate(-79%,-43%) rotate(-7.5deg) scale(.72)}
  32%{transform:translate(-80.5%,-45%) rotate(-8deg) scale(.724)}
  68%{transform:translate(-77.5%,-44%) rotate(-7deg) scale(.718)}
}
@keyframes vsRefM4{
  0%,100%{transform:translate(-21%,-44%) rotate(7.5deg) scale(.72)}
  38%{transform:translate(-19.5%,-46%) rotate(8deg) scale(.724)}
  72%{transform:translate(-22.5%,-43%) rotate(7deg) scale(.718)}
}
@keyframes vsRefM1{
  0%,100%{transform:translate(-65%,-55%) rotate(-3.8deg) scale(.82)}
  35%{transform:translate(-66%,-57%) rotate(-4.2deg) scale(.824)}
  70%{transform:translate(-63.8%,-55.5%) rotate(-3.4deg) scale(.818)}
}
@keyframes vsRefM2{
  0%,100%{transform:translate(-35%,-53%) rotate(3.8deg) scale(.84)}
  42%{transform:translate(-33.8%,-55%) rotate(4.2deg) scale(.844)}
  76%{transform:translate(-36.2%,-52%) rotate(3.4deg) scale(.838)}
}
@keyframes vsRefM3{
  0%,100%{transform:translate(-50%,-39%) rotate(0deg) scale(.94)}
  36%{transform:translate(-50.5%,-41.2%) rotate(-.25deg) scale(.944)}
  72%{transform:translate(-49.4%,-40%) rotate(.2deg) scale(.942)}
}
/* One-time: almost the same cluster, fractionally tighter as in reference. */
@keyframes vsRefO5{
  0%,100%{transform:translate(-76%,-44%) rotate(-6deg) scale(.73)}
  34%{transform:translate(-77.3%,-46%) rotate(-6.5deg) scale(.734)}
  70%{transform:translate(-74.8%,-43.5%) rotate(-5.6deg) scale(.728)}
}
@keyframes vsRefO4{
  0%,100%{transform:translate(-24%,-44%) rotate(6deg) scale(.73)}
  40%{transform:translate(-22.7%,-46%) rotate(6.5deg) scale(.734)}
  74%{transform:translate(-25.2%,-43.5%) rotate(5.6deg) scale(.728)}
}
@keyframes vsRefO1{
  0%,100%{transform:translate(-63%,-55%) rotate(-3deg) scale(.83)}
  38%{transform:translate(-64.2%,-57%) rotate(-3.4deg) scale(.834)}
  72%{transform:translate(-61.8%,-54.5%) rotate(-2.7deg) scale(.828)}
}
@keyframes vsRefO2{
  0%,100%{transform:translate(-37%,-53%) rotate(3deg) scale(.85)}
  44%{transform:translate(-35.8%,-55%) rotate(3.4deg) scale(.854)}
  78%{transform:translate(-38.2%,-52%) rotate(2.7deg) scale(.848)}
}
@keyframes vsRefO3{
  0%,100%{transform:translate(-50%,-39%) rotate(0deg) scale(.95)}
  37%{transform:translate(-50.4%,-41.1%) rotate(-.2deg) scale(.954)}
  73%{transform:translate(-49.5%,-40%) rotate(.18deg) scale(.952)}
}
/* Don't let card hover replace the always-on reference motion. */
.template-index .vsx-plan:hover .vsx-product-stack .stk,
.template-index .vsx-plan:hover .vsx-product-stack .stk-fg{animation-play-state:running!important}
@media (prefers-reduced-motion:reduce){
 .template-index .vsx-product-stack img{animation:none!important}
 .template-index .vsx-plan:nth-child(1) .st5{transform:translate(-79%,-43%) rotate(-7.5deg) scale(.72)!important}
 .template-index .vsx-plan:nth-child(1) .st4{transform:translate(-21%,-44%) rotate(7.5deg) scale(.72)!important}
 .template-index .vsx-plan:nth-child(1) .st1{transform:translate(-65%,-55%) rotate(-3.8deg) scale(.82)!important}
 .template-index .vsx-plan:nth-child(1) .st2{transform:translate(-35%,-53%) rotate(3.8deg) scale(.84)!important}
 .template-index .vsx-plan:nth-child(1) .st3{transform:translate(-50%,-39%) scale(.94)!important}
 .template-index .vsx-plan:nth-child(2) .st5{transform:translate(-76%,-44%) rotate(-6deg) scale(.73)!important}
 .template-index .vsx-plan:nth-child(2) .st4{transform:translate(-24%,-44%) rotate(6deg) scale(.73)!important}
 .template-index .vsx-plan:nth-child(2) .st1{transform:translate(-63%,-55%) rotate(-3deg) scale(.83)!important}
 .template-index .vsx-plan:nth-child(2) .st2{transform:translate(-37%,-53%) rotate(3deg) scale(.85)!important}
 .template-index .vsx-plan:nth-child(2) .st3{transform:translate(-50%,-39%) scale(.95)!important}
}

/* ================================================================
   VS PRICING — DENSE FLOATING BOUQUET 2026-10-03
   Final override: matches the zoomed reference — deep overlap, compact
   silhouette, independent perpetual float. Replaces the previous fan.
   ================================================================ */
.template-index .vsx-product-stack.vsx-suite-stack{
  height:224px!important;
  margin:4px -4px 5px!important;
  perspective:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.template-index .vsx-product-stack.vsx-suite-stack:after{
  content:""!important;position:absolute!important;z-index:0!important;
  left:27%!important;right:27%!important;bottom:25px!important;height:17px!important;
  border-radius:50%!important;background:rgba(52,22,70,.14)!important;
  filter:blur(14px)!important;transform:none!important;
}
.template-index .vsx-suite-stack .stk{
  position:absolute!important;left:50%!important;top:50%!important;
  width:min(64%,250px)!important;max-height:174px!important;height:auto!important;
  object-fit:contain!important;opacity:1!important;
  transform-origin:50% 55%!important;backface-visibility:hidden!important;
  filter:brightness(1.28) saturate(1.08) contrast(1.035) drop-shadow(0 8px 10px rgba(23,12,28,.13))!important;
  transition:none!important;will-change:transform!important;
}
/* Seven tightly overlapped panels: rear crown, side shoulders, front face. */
.template-index .vsx-suite-stack .st6{z-index:1!important;animation:vsBouquet6 8.8s ease-in-out -4.2s infinite!important}
.template-index .vsx-suite-stack .st7{z-index:2!important;animation:vsBouquet7 7.9s ease-in-out -1.7s infinite!important}
.template-index .vsx-suite-stack .st4{z-index:3!important;animation:vsBouquet4 8.3s ease-in-out -5.1s infinite!important}
.template-index .vsx-suite-stack .st5{z-index:4!important;animation:vsBouquet5 7.5s ease-in-out -2.8s infinite!important}
.template-index .vsx-suite-stack .st1{z-index:5!important;animation:vsBouquet1 7.1s ease-in-out -3.7s infinite!important}
.template-index .vsx-suite-stack .st2{z-index:6!important;animation:vsBouquet2 8.0s ease-in-out -1.1s infinite!important}
.template-index .vsx-suite-stack .st3{z-index:8!important;animation:vsBouquetFront 6.9s ease-in-out -2.4s infinite!important;filter:brightness(1.32) saturate(1.09) contrast(1.04) drop-shadow(0 12px 15px rgba(23,12,28,.17))!important}

@keyframes vsBouquet6{0%,100%{transform:translate(-50%,-68%) rotate(-.8deg) scale(.77)}45%{transform:translate(-50.8%,-71%) rotate(-1.1deg) scale(.775)}72%{transform:translate(-49.4%,-69%) rotate(-.5deg) scale(.772)}}
@keyframes vsBouquet7{0%,100%{transform:translate(-50%,-61%) rotate(.8deg) scale(.80)}38%{transform:translate(-49.2%,-64%) rotate(1.1deg) scale(.804)}70%{transform:translate(-50.7%,-62%) rotate(.5deg) scale(.798)}}
@keyframes vsBouquet4{0%,100%{transform:translate(-67%,-50%) rotate(-4.2deg) scale(.82)}42%{transform:translate(-68%,-53%) rotate(-4.6deg) scale(.824)}75%{transform:translate(-66.1%,-51%) rotate(-3.8deg) scale(.818)}}
@keyframes vsBouquet5{0%,100%{transform:translate(-33%,-50%) rotate(4.2deg) scale(.82)}36%{transform:translate(-32%,-53%) rotate(4.6deg) scale(.824)}73%{transform:translate(-34%,-50.8%) rotate(3.8deg) scale(.818)}}
@keyframes vsBouquet1{0%,100%{transform:translate(-60%,-48%) rotate(-2.1deg) scale(.89)}41%{transform:translate(-60.8%,-51%) rotate(-2.4deg) scale(.894)}76%{transform:translate(-59.3%,-49%) rotate(-1.8deg) scale(.887)}}
@keyframes vsBouquet2{0%,100%{transform:translate(-40%,-48%) rotate(2.1deg) scale(.89)}34%{transform:translate(-39.2%,-51%) rotate(2.4deg) scale(.894)}69%{transform:translate(-40.7%,-49%) rotate(1.8deg) scale(.887)}}
@keyframes vsBouquetFront{0%,100%{transform:translate(-50%,-39%) rotate(0deg) scale(.98)}43%{transform:translate(-50.2%,-41.2%) rotate(-.12deg) scale(.982)}78%{transform:translate(-49.8%,-40%) rotate(.1deg) scale(.981)}}

/* Both cards share the same bouquet logic; tiny phase offsets avoid mirroring. */
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st6{animation-delay:-1.2s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st7{animation-delay:-4.5s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st4{animation-delay:-2.2s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st5{animation-delay:-5.4s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st1{animation-delay:-.8s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st2{animation-delay:-3.1s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st3{animation-delay:-4.0s!important}
/* Hover never replaces the perpetual float. */
.template-index .vsx-plan:hover .vsx-suite-stack .stk{animation-play-state:running!important}
@media(max-width:600px){
 .template-index .vsx-product-stack.vsx-suite-stack{height:205px!important}
 .template-index .vsx-suite-stack .stk{width:min(67%,235px)!important;max-height:160px!important}
}
@media(prefers-reduced-motion:reduce){
 .template-index .vsx-suite-stack .stk{animation:none!important}
 .template-index .vsx-suite-stack .st6{transform:translate(-50%,-68%) rotate(-.8deg) scale(.77)!important}
 .template-index .vsx-suite-stack .st7{transform:translate(-50%,-61%) rotate(.8deg) scale(.80)!important}
 .template-index .vsx-suite-stack .st4{transform:translate(-67%,-50%) rotate(-4.2deg) scale(.82)!important}
 .template-index .vsx-suite-stack .st5{transform:translate(-33%,-50%) rotate(4.2deg) scale(.82)!important}
 .template-index .vsx-suite-stack .st1{transform:translate(-60%,-48%) rotate(-2.1deg) scale(.89)!important}
 .template-index .vsx-suite-stack .st2{transform:translate(-40%,-48%) rotate(2.1deg) scale(.89)!important}
 .template-index .vsx-suite-stack .st3{transform:translate(-50%,-39%) scale(.98)!important}
}

/* ================================================================
   VS PRICING — TRUE PERPETUAL FLOAT 2026-10-03
   Static placement lives on wrapper; motion lives on inner image.
   This prevents transform/hover rules from cancelling the animation.
   ================================================================ */
.template-index .vsx-suite-stack .stk{
  position:absolute!important;left:50%!important;top:50%!important;
  width:min(64%,250px)!important;height:auto!important;
  display:block!important;transition:none!important;
  animation:none!important; /* wrappers never animate */
  transform-origin:50% 55%!important;
  pointer-events:none!important;
}
.template-index .vsx-suite-stack .stk .vs-float-img{
  display:block!important;width:100%!important;height:auto!important;max-height:174px!important;
  object-fit:contain!important;opacity:1!important;
  filter:brightness(1.28) saturate(1.08) contrast(1.035) drop-shadow(0 8px 10px rgba(23,12,28,.13))!important;
  transition:none!important;transform:translate3d(0,0,0)!important;
  will-change:transform!important;pointer-events:none!important;
}
/* compact bouquet placement — wrapper transforms are static */
.template-index .vsx-suite-stack .st6{z-index:1!important;transform:translate(-50%,-68%) rotate(-.8deg) scale(.77)!important}
.template-index .vsx-suite-stack .st7{z-index:2!important;transform:translate(-50%,-61%) rotate(.8deg) scale(.80)!important}
.template-index .vsx-suite-stack .st4{z-index:3!important;transform:translate(-67%,-50%) rotate(-4.2deg) scale(.82)!important}
.template-index .vsx-suite-stack .st5{z-index:4!important;transform:translate(-33%,-50%) rotate(4.2deg) scale(.82)!important}
.template-index .vsx-suite-stack .st1{z-index:5!important;transform:translate(-60%,-48%) rotate(-2.1deg) scale(.89)!important}
.template-index .vsx-suite-stack .st2{z-index:6!important;transform:translate(-40%,-48%) rotate(2.1deg) scale(.89)!important}
.template-index .vsx-suite-stack .st3{z-index:8!important;transform:translate(-50%,-39%) scale(.98)!important}
.template-index .vsx-suite-stack .st3 .vs-float-img{filter:brightness(1.32) saturate(1.09) contrast(1.04) drop-shadow(0 12px 15px rgba(23,12,28,.17))!important}

/* ALWAYS-ON motion. No hover dependency. Noticeable but still premium. */
.template-index .vsx-suite-stack .st6 .vs-float-img{animation:vsAlwaysFloatA 4.8s ease-in-out -1.1s infinite alternate!important}
.template-index .vsx-suite-stack .st7 .vs-float-img{animation:vsAlwaysFloatB 5.6s ease-in-out -3.2s infinite alternate!important}
.template-index .vsx-suite-stack .st4 .vs-float-img{animation:vsAlwaysFloatC 4.4s ease-in-out -2.0s infinite alternate!important}
.template-index .vsx-suite-stack .st5 .vs-float-img{animation:vsAlwaysFloatD 5.1s ease-in-out -.6s infinite alternate!important}
.template-index .vsx-suite-stack .st1 .vs-float-img{animation:vsAlwaysFloatE 4.7s ease-in-out -3.6s infinite alternate!important}
.template-index .vsx-suite-stack .st2 .vs-float-img{animation:vsAlwaysFloatF 5.4s ease-in-out -1.8s infinite alternate!important}
.template-index .vsx-suite-stack .st3 .vs-float-img{animation:vsAlwaysFloatFront 5.9s ease-in-out -2.7s infinite alternate!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st6 .vs-float-img{animation-delay:-3.7s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st7 .vs-float-img{animation-delay:-.8s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st4 .vs-float-img{animation-delay:-4.1s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st5 .vs-float-img{animation-delay:-2.4s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st1 .vs-float-img{animation-delay:-1.0s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st2 .vs-float-img{animation-delay:-4.5s!important}
.template-index .vsx-plan:nth-child(2) .vsx-suite-stack .st3 .vs-float-img{animation-delay:-.3s!important}
@keyframes vsAlwaysFloatA{0%{transform:translate3d(-2px,4px,0)!important}100%{transform:translate3d(2px,-7px,0)!important}}
@keyframes vsAlwaysFloatB{0%{transform:translate3d(2px,-3px,0)!important}100%{transform:translate3d(-2px,7px,0)!important}}
@keyframes vsAlwaysFloatC{0%{transform:translate3d(-1px,5px,0)!important}100%{transform:translate3d(2px,-6px,0)!important}}
@keyframes vsAlwaysFloatD{0%{transform:translate3d(2px,-5px,0)!important}100%{transform:translate3d(-1px,6px,0)!important}}
@keyframes vsAlwaysFloatE{0%{transform:translate3d(-2px,3px,0)!important}100%{transform:translate3d(1px,-7px,0)!important}}
@keyframes vsAlwaysFloatF{0%{transform:translate3d(1px,-4px,0)!important}100%{transform:translate3d(-2px,6px,0)!important}}
@keyframes vsAlwaysFloatFront{0%{transform:translate3d(0,2px,0)!important}100%{transform:translate3d(0,-4px,0)!important}}
/* Explicitly neutralize every hover transform/animation in the product cluster. */
.template-index .vsx-plan:hover .vsx-suite-stack,
.template-index .vsx-plan:hover .vsx-suite-stack .stk{transform-origin:inherit!important}
.template-index .vsx-plan:hover .vsx-suite-stack .stk .vs-float-img{
  animation-play-state:running!important;filter:inherit;transition:none!important;
}
@media(prefers-reduced-motion:reduce){
 .template-index .vsx-suite-stack .stk .vs-float-img{animation:none!important;transform:none!important}
}

/* ================================================================
   VS PRICING — VISIBILITY + NO-HOVER CLEAN FIX 2026-10-03
   Keep placement on wrappers, perpetual motion on inner images.
   ================================================================ */
.template-index .vsx-plan,
.template-index .vsx-plan:hover{
  transform:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1!important;
  box-shadow:0 12px 34px rgba(28,18,34,.075)!important;
  transition:none!important;
}
.template-index .vsx-plan.on,
.template-index .vsx-plan.on:hover{
  box-shadow:0 14px 38px rgba(141,77,255,.10)!important;
}
.template-index .vsx-suite-stack,
.template-index .vsx-plan:hover .vsx-suite-stack{
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}
.template-index .vsx-suite-stack .stk,
.template-index .vsx-plan:hover .vsx-suite-stack .stk{
  opacity:1!important;
  filter:none!important;
  transition:none!important;
  animation:none!important;
}
.template-index .vsx-suite-stack .stk .vs-float-img,
.template-index .vsx-plan:hover .vsx-suite-stack .stk .vs-float-img{
  position:static!important;
  left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  display:block!important;
  width:100%!important;height:auto!important;max-width:none!important;max-height:174px!important;
  opacity:1!important;
  object-fit:contain!important;
  transition:none!important;
  filter:brightness(1.30) saturate(1.08) contrast(1.04) drop-shadow(0 8px 10px rgba(23,12,28,.13))!important;
  animation-play-state:running!important;
}
.template-index .vsx-suite-stack .st3 .vs-float-img,
.template-index .vsx-plan:hover .vsx-suite-stack .st3 .vs-float-img{
  filter:brightness(1.34) saturate(1.09) contrast(1.045) drop-shadow(0 12px 15px rgba(23,12,28,.16))!important;
}
/* Static bouquet placement remains on wrappers. */
.template-index .vsx-suite-stack .st6{transform:translate(-50%,-68%) rotate(-.8deg) scale(.77)!important}
.template-index .vsx-suite-stack .st7{transform:translate(-50%,-61%) rotate(.8deg) scale(.80)!important}
.template-index .vsx-suite-stack .st4{transform:translate(-67%,-50%) rotate(-4.2deg) scale(.82)!important}
.template-index .vsx-suite-stack .st5{transform:translate(-33%,-50%) rotate(4.2deg) scale(.82)!important}
.template-index .vsx-suite-stack .st1{transform:translate(-60%,-48%) rotate(-2.1deg) scale(.89)!important}
.template-index .vsx-suite-stack .st2{transform:translate(-40%,-48%) rotate(2.1deg) scale(.89)!important}
.template-index .vsx-suite-stack .st3{transform:translate(-50%,-39%) scale(.98)!important}
/* Perpetual float only; hover changes nothing. */
.template-index .vsx-suite-stack .st6 .vs-float-img{animation:vsFloatFixedA 4.8s ease-in-out -1.1s infinite alternate!important}
.template-index .vsx-suite-stack .st7 .vs-float-img{animation:vsFloatFixedB 5.6s ease-in-out -3.2s infinite alternate!important}
.template-index .vsx-suite-stack .st4 .vs-float-img{animation:vsFloatFixedC 4.4s ease-in-out -2s infinite alternate!important}
.template-index .vsx-suite-stack .st5 .vs-float-img{animation:vsFloatFixedD 5.1s ease-in-out -.6s infinite alternate!important}
.template-index .vsx-suite-stack .st1 .vs-float-img{animation:vsFloatFixedE 4.7s ease-in-out -3.6s infinite alternate!important}
.template-index .vsx-suite-stack .st2 .vs-float-img{animation:vsFloatFixedF 5.4s ease-in-out -1.8s infinite alternate!important}
.template-index .vsx-suite-stack .st3 .vs-float-img{animation:vsFloatFixedFront 5.9s ease-in-out -2.7s infinite alternate!important}
@keyframes vsFloatFixedA{from{transform:translate3d(-2px,4px,0)}to{transform:translate3d(2px,-7px,0)}}
@keyframes vsFloatFixedB{from{transform:translate3d(2px,-3px,0)}to{transform:translate3d(-2px,7px,0)}}
@keyframes vsFloatFixedC{from{transform:translate3d(-1px,5px,0)}to{transform:translate3d(2px,-6px,0)}}
@keyframes vsFloatFixedD{from{transform:translate3d(2px,-5px,0)}to{transform:translate3d(-1px,6px,0)}}
@keyframes vsFloatFixedE{from{transform:translate3d(-2px,3px,0)}to{transform:translate3d(1px,-7px,0)}}
@keyframes vsFloatFixedF{from{transform:translate3d(1px,-4px,0)}to{transform:translate3d(-2px,6px,0)}}
@keyframes vsFloatFixedFront{from{transform:translate3d(0,2px,0)}to{transform:translate3d(0,-4px,0)}}
@media(prefers-reduced-motion:reduce){
 .template-index .vsx-suite-stack .stk .vs-float-img{animation:none!important;transform:none!important}
}

/* ================================================================
   VS HERO — REFERENCE PRODUCT-SLIDE MOTION 2026-10-03
   Applies ONLY to the module showcase above pricing. Pricing untouched.
   ================================================================ */
.template-index .vs116-stack{
  position:relative!important;
  width:100%!important;
  height:350px!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
}
/* v133 fix 2026-10-04: opacity/transform used to be pinned here with
   !important. Per the CSS cascade, an !important author rule always
   outranks a running Web Animations API effect on the same property -
   so this was silently overriding every frame the JS swap animation
   computed, the whole time. The swap LOOKED like an instant pop
   because it effectively was one: the layer only ever rendered at
   this resting opacity/transform, no matter what swapLayers() in
   vs-hero.liquid was animating toward. JS now owns opacity/transform
   completely (inline style + element.animate()); this rule only
   supplies the non-conflicting static box model. */
.template-index .vs116-layer{
  position:absolute!important;
  inset:auto!important;
  margin:0!important;
  width:min(100%,430px)!important;
  max-height:325px!important;
  object-fit:contain!important;
  transform-origin:50% 55%!important;
  filter:drop-shadow(0 10px 10px rgba(16,8,21,.10)) drop-shadow(0 28px 32px rgba(70,36,92,.16))!important;
  transition:none!important;
  will-change:transform,opacity!important;
}
.template-index .vs116-layer.vs116-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@keyframes vsHeroSlideInRight{
  0%{opacity:0;transform:translate3d(115px,12px,0) scale(.965);filter:blur(1.5px) drop-shadow(0 18px 24px rgba(70,36,92,.10))}
  38%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) drop-shadow(0 10px 10px rgba(16,8,21,.10)) drop-shadow(0 28px 32px rgba(70,36,92,.16))}
}
@keyframes vsHeroSlideOutLeft{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  62%{opacity:.48}
  100%{opacity:0;transform:translate3d(-105px,-7px,0) scale(.975)}
}
@keyframes vsHeroSlideInLeft{
  0%{opacity:0;transform:translate3d(-115px,12px,0) scale(.965);filter:blur(1.5px) drop-shadow(0 18px 24px rgba(70,36,92,.10))}
  38%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0) drop-shadow(0 10px 10px rgba(16,8,21,.10)) drop-shadow(0 28px 32px rgba(70,36,92,.16))}
}
@keyframes vsHeroSlideOutRight{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  62%{opacity:.48}
  100%{opacity:0;transform:translate3d(105px,-7px,0) scale(.975)}
}
/* The glow follows the transition subtly instead of the image tilting on hover. */
.template-index .vs111-product:before{
  transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .4s ease!important;
}
/* Resting shot: extremely restrained breathing float after a transition. */
.template-index .vs118-idle .vs116-layer:not(.vs116-hidden):not(.vs116-leave):not(.vs116-enter){animation:vsHeroRestFloat 7.8s ease-in-out infinite!important}
@keyframes vsHeroRestFloat{0%,100%{transform:translate3d(0,1px,0)}50%{transform:translate3d(0,-3px,0)}}
@media(max-width:800px){
 .template-index .vs116-stack{height:285px!important}
 .template-index .vs116-layer{width:min(100%,365px)!important;max-height:270px!important}}

/* ================================================================
   VS HERO — REFERENCE MOTION / STAGE BALANCE FINAL 2026-10-04
   More negative space around the product makes the lateral travel read.
   No hover animation; only module navigation drives the transition.
   ================================================================ */
@media (min-width:801px){
  .template-index .vs111-stage{
    max-width:1040px!important;
    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)!important;
    column-gap:72px!important;
  }
  .template-index .vs111-product{
    min-height:350px!important;
    overflow:visible!important;
    padding-top:26px!important;
  }
  .template-index #vs111-main,
  .template-index #vs111-main2,
  .template-index .vs111-product .vs116-layer{
    width:min(100%,372px)!important;
    max-height:282px!important;
  }
  .template-index .vs111-product:before{
    width:70%!important;
    height:24px!important;
    bottom:34px!important;
    filter:blur(15px)!important;
    opacity:.46!important;
  }
}
/* Product stays inert to pointer hover (v133): no CSS transform rule
   at all for these elements on hover any more - not even a "neutral"
   translate3d(0,0,0), because ANY !important transform declaration
   here, even one that looks like a no-op at rest, would still win the
   cascade over the live swap animation while the mouse happens to be
   over the product mid-transition. Absence of a rule is the fix. */
/* During a module transition both images must remain paintable in the same stage. */
.template-index .vs111-busy .vs116-layer{visibility:visible!important}


/* === VS HERO SMOOTH COMPOSITOR MOTION 2026-10-04 ===
   WAAPI owns the swap. Keep expensive paint effects static. */
.template-index .vs116-layer{
  transition:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:flat!important;
  contain:paint!important;
  filter:drop-shadow(0 12px 20px rgba(45,24,62,.14))!important;
}
.template-index .vs111-busy .vs116-layer{animation:none!important;transition:none!important}
.template-index .vs111-busy .vs111-product:before{transition:none!important;transform:translate3d(0,0,0)!important}
.template-index .vs111-product:hover .vs116-layer{transition:none!important}
/* Rest motion is deliberately on the stage, never on the layer being swapped. */
.template-index .vs118-idle:not(.vs111-busy) .vs116-layer:not(.vs116-hidden){animation:vsHeroRestFloatSmooth 8.6s ease-in-out infinite!important}
@keyframes vsHeroRestFloatSmooth{0%,100%{transform:translate3d(0,1px,0)}50%{transform:translate3d(0,-2px,0)}}

/* === v18: cleaner hero proof + DAW grid from supplied artwork === */
.template-index .vs111-flow{display:flex;align-items:center;gap:10px;margin-top:11px;max-width:390px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.025)}
.template-index .vs111-flow>span{display:flex;align-items:center;gap:6px;min-width:0}
.template-index .vs111-flow b{font-size:9.5px;line-height:1.05;color:#b8b3bd;white-space:nowrap;font-weight:720}
.template-index .vs111-flow em{font-style:normal;color:#7c5cff;opacity:.75;font-size:12px}
.template-index .vs111-flow i{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:900;color:#fff;background:#17131e;border:1px solid rgba(124,92,255,.35);box-shadow:0 0 18px rgba(124,92,255,.08)}
.template-index .vs111-flow-syrup{background:#7c5cff!important;box-shadow:0 0 20px rgba(124,92,255,.24)!important}
.template-index .vs111-flow-wave{font-size:16px!important;color:#c7b7ff!important}
.template-index .vs111-daw-title{text-align:center;margin:46px 0 12px;font-size:10px;line-height:1;font-weight:850;letter-spacing:.18em;color:#d8d3dc}
.template-index .vs111-daws{margin-top:0!important;padding-top:0!important;border-top:0!important;display:grid!important;grid-template-columns:repeat(8,42px)!important;gap:12px!important;justify-content:center!important}
.template-index .vs111-daws .vs-daw-chip{display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;min-width:0!important}
.template-index .vs111-daws .vs-daw-ico{width:42px!important;height:42px!important;display:grid!important;place-items:center!important;overflow:visible!important}
.template-index .vs111-daws .vs-daw-ico img{width:42px!important;height:42px!important;object-fit:contain!important;transform:none!important;border-radius:9px!important;filter:none!important}
.template-index .vs111-daws .vs-daw-chip small{font-size:7.5px!important;line-height:1.05!important;text-align:center!important;color:#77727d!important;white-space:nowrap!important}
.template-index .vs111-spec{margin-top:10px!important;color:#8d8792!important;font-size:9px!important}
@media(max-width:800px){.template-index .vs111-flow{max-width:100%}.template-index .vs111-daws{grid-template-columns:repeat(4,42px)!important;row-gap:16px!important}.template-index .vs111-daw-title{margin-top:38px}}
@media(max-width:430px){.template-index .vs111-flow{gap:7px;padding:9px}.template-index .vs111-flow b{font-size:8.5px}.template-index .vs111-flow i{width:21px;height:21px}.template-index .vs111-daws{grid-template-columns:repeat(4,38px)!important}.template-index .vs111-daws .vs-daw-ico,.template-index .vs111-daws .vs-daw-ico img{width:38px!important;height:38px!important}}
\n/* === v19 hero cleanup: fixed SYRUP wordmark, clean process line, optical DAW row === */
.template-index #vs111-title{color:#f4f2f7!important}
.template-index #vs111-title .vs111-p{color:#7c5cff!important;text-shadow:0 0 24px rgba(124,92,255,.16)}
.template-index .vs111-process{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:0;border:0;background:none;color:#8e8995;font-size:9px;font-weight:800;letter-spacing:.13em;white-space:nowrap}
.template-index .vs111-process span:first-child{color:#d8d4de}
.template-index .vs111-process i{display:block;width:24px;height:1px;background:linear-gradient(90deg,rgba(124,92,255,.25),rgba(124,92,255,.9));position:relative}
.template-index .vs111-process i:after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-radius:50%;background:#7c5cff;box-shadow:0 0 9px rgba(124,92,255,.5)}
.template-index .vs111-daw-title{margin:52px 0 16px!important;text-align:center!important;font-size:10px!important;letter-spacing:.2em!important;color:#d8d3dc!important}
.template-index .vs111-daws{width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;margin:0 auto!important;padding:0!important;filter:none!important;opacity:1!important}
.template-index .vs111-daws .vs-daw-chip{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;flex:0 0 44px!important}
.template-index .vs111-daws .vs-daw-ico{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;overflow:hidden!important;border-radius:10px!important}
.template-index .vs111-daws .vs-daw-ico img{display:block!important;width:44px!important;height:44px!important;max-width:none!important;object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;transform:none!important;filter:none!important;border-radius:10px!important}
.template-index .vs111-daws .vs-daw-chip small{display:none!important}
.template-index .vs111-spec{margin:12px 0 0!important;text-align:center!important;line-height:1.2!important;font-size:9px!important;color:#77727d!important}
@media(max-width:800px){.template-index .vs111-process{justify-content:center;white-space:normal}.template-index .vs111-daws{gap:10px!important;flex-wrap:wrap!important;max-width:230px!important}.template-index .vs111-daw-title{margin-top:38px!important}}
@media(max-width:430px){.template-index .vs111-process{font-size:8px;gap:7px}.template-index .vs111-process i{width:16px}.template-index .vs111-daws .vs-daw-chip,.template-index .vs111-daws .vs-daw-ico,.template-index .vs111-daws .vs-daw-ico img{width:40px!important;height:40px!important;flex-basis:40px!important}}

/* v20 — final hero compatibility strip: isolated vertical flow, no collisions */
.template-index .vs111-bottom .vs111-daw-title{
  display:block!important;
  width:100%!important;
  margin:48px 0 18px!important;
  padding:0!important;
  text-align:center!important;
  position:static!important;
  transform:none!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.2em!important;
  color:#d8d3dc!important;
}
.template-index .vs111-bottom .vs111-daws{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:12px!important;
  overflow:visible!important;
}
.template-index .vs111-bottom .vs111-daws .vs-daw-chip{
  width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important;
  display:block!important;margin:0!important;padding:0!important;position:static!important;
}
.template-index .vs111-bottom .vs111-daws .vs-daw-ico{
  width:44px!important;height:44px!important;display:block!important;margin:0!important;padding:0!important;
  overflow:hidden!important;border-radius:10px!important;position:static!important;
}
.template-index .vs111-bottom .vs111-daws .vs-daw-ico img{
  width:44px!important;height:44px!important;display:block!important;margin:0!important;padding:0!important;
  object-fit:cover!important;object-position:center!important;border-radius:10px!important;transform:none!important;
}
.template-index .vs111-bottom .vs111-spec{
  display:block!important;width:100%!important;margin:16px 0 0!important;padding:0!important;
  position:static!important;transform:none!important;text-align:center!important;
  font-size:9px!important;line-height:1.4!important;font-weight:650!important;color:#77727d!important;
  white-space:normal!important;
}
@media(max-width:800px){
 .template-index .vs111-bottom .vs111-daws{flex-wrap:wrap!important;max-width:260px!important;margin-left:auto!important;margin-right:auto!important;gap:10px!important}
 .template-index .vs111-bottom .vs111-daw-title{margin-top:38px!important}
 .template-index .vs111-bottom .vs111-spec{margin-top:14px!important}
}

/* v21 — DAW strip spacing correction */
.template-index .vs111-bottom .vs111-daws{
  margin:0 auto 20px!important;
}
.template-index .vs111-bottom .vs111-spec{
  margin:0!important;
  clear:both!important;
}
@media(max-width:800px){
 .template-index .vs111-bottom .vs111-daws{margin:0 auto 18px!important}
 .template-index .vs111-bottom .vs111-spec{margin:0!important}
}