/* DJGO landing additions: live now, reels, features, path, mobile menu, empty events. Uses the intro.v3 palette. */
.hl-hero-actions{flex-wrap:wrap}
.hl-listen{background:#ffffff08}
.hl-onair{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 14px 8px 10px;border:1px solid #ff5a6433;border-radius:100px;background:#ff5a640d;font-size:12px;color:#ffd7da;pointer-events:auto}
.hl-onair[hidden]{display:none}
.hl-onair i{width:8px;height:8px;border-radius:50%;background:#ff5a64;box-shadow:0 0 12px #ff5a64;animation:hl-pulse 1.6s infinite}
@keyframes hl-pulse{50%{opacity:.35}}
.hl-navdot{display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:2px;border-radius:50%;background:#ff5a64;box-shadow:0 0 10px #ff5a64}
.hl-navdot[hidden]{display:none}

/* ---------- live now ---------- */
.hl-now{padding-top:110px}
.hl-live{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.hl-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:228px;padding:20px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(160deg,#ffffff0c,#ffffff03);transition:border-color .25s,transform .25s}
a.hl-card:hover{border-color:#cbbcff66;transform:translateY(-2px)}
.hl-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.hl-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.12em;padding:5px 9px;border-radius:6px;border:1px solid #ffffff1f;color:#c9cdd8;align-self:flex-start}
.is-live .hl-badge{color:#ffd7da;border-color:#ff5a6466;background:#ff5a6414}
.is-live .hl-badge:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#ff5a64;box-shadow:0 0 10px #ff5a64;animation:hl-pulse 1.6s infinite}
.is-soon .hl-badge{color:#cbbcff;border-color:#cbbcff44}
.hl-viewers{font-size:12px;color:#9499a8}
.hl-dj{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hl-title{font-size:14px;color:#d5d8e0;line-height:1.4}
.hl-meta{font-size:12px;color:#9499a8}
.hl-wave{display:flex;align-items:center;justify-content:space-between;gap:3px;height:28px;margin-top:auto;overflow:hidden}
.hl-wave i{flex:0 0 4px;height:30%;border-radius:2px;background:#cbbcff;opacity:.75;animation:hl-bar 1.1s ease-in-out infinite}
.hl-wave i:nth-child(3n){animation-delay:-.4s}.hl-wave i:nth-child(3n+1){animation-delay:-.75s}.hl-wave i:nth-child(4n){animation-duration:.9s}
@keyframes hl-bar{50%{height:100%}}
.hl-card-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid #ffffff10;font-size:12px;color:#9499a8}
.is-live .hl-wave+.hl-card-foot{margin-top:10px}
.hl-go{color:#cbbcff;font-weight:600}
.hl-empty{grid-column:1/-1;min-height:0;padding:28px}
.hl-empty strong{font-size:26px;font-weight:600;letter-spacing:-.03em}
.hl-empty p{margin:0;max-width:560px;font-size:14px;color:#9499a8}
.hl-empty-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.hl-live[data-count="2"] .hl-empty,.hl-live[data-count="3"] .hl-empty,.hl-live[data-count="4"] .hl-empty,.hl-live[data-count="5"] .hl-empty{grid-column:span 1}

/* ---------- reels ---------- */
.hl-reels-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:54px 0 18px}
.hl-reels-head[hidden],.hl-reels[hidden]{display:none}
.hl-reels-head h3{font-size:28px;font-weight:600;letter-spacing:-.04em}
.hl-reels-head p{margin:0;max-width:330px;font-size:13px;color:#9499a8}
.hl-reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,210px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.hl-reel{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#10131c;border:1px solid #ffffff14;scroll-snap-align:start}
.hl-reel video{width:100%;height:100%;object-fit:cover;display:block}
.hl-reel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,#000000c0);pointer-events:none}
.hl-reel-play{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#00000080;border:1px solid #ffffff30;font-size:13px}
.hl-reel-info{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:3px}
.hl-reel-info strong{font-size:15px}
.hl-reel-info small{font-size:11px;color:#c9cdd8}

/* ---------- features ---------- */
.hl-feat{padding-top:130px}

/* ---------- events empty state ---------- */
.hl-ev-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:min(380px,calc(100% - 40px));padding:24px;border:1px solid #ffffff1c;border-radius:18px;background:#0b0e16e8;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.hl-ev-empty[hidden]{display:none}
.hl-ev-empty strong{font-size:22px;letter-spacing:-.03em}
.hl-ev-empty p{margin:0 0 6px;font-size:13px;color:#9499a8}
.event-scene{position:relative}
.event-note.hl-hide{visibility:hidden}

/* ---------- final CTA ---------- */
.final-cta .hl-final-actions{flex-direction:row;flex-wrap:wrap;justify-content:center}

/* ---------- mobile menu ---------- */
.hl-menu{display:none;position:relative;border:0;padding:0}
.hl-menu:last-child{border:0}
.hl-menu summary:after{display:none}
.hl-menu summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid #ffffff1c;border-radius:10px;background:#15171e;cursor:pointer}
.hl-menu summary::-webkit-details-marker{display:none}
.hl-menu summary svg{width:20px;height:20px}
.hl-menu-panel{position:absolute;right:0;top:52px;z-index:20;display:flex;flex-direction:column;gap:2px;width:min(270px,calc(100vw - 32px));padding:10px;border:1px solid #ffffff1c;border-radius:16px;background:#0d1018;box-shadow:0 20px 60px #000c}
body:not(.studio-page) .header .hl-menu .hl-menu-panel a{display:flex;align-items:center}
.hl-menu-panel a:not(.pill){padding:13px 12px;border-radius:10px;font-size:15px;color:#e3e5ea}
.hl-menu-panel a:not(.pill):active{background:#ffffff0d}
.hl-menu-panel .pill{margin-top:8px;justify-content:space-between}

@media(max-width:1000px){
}
@media(max-width:760px){
  body:not(.studio-page) .header nav:not(.hl-menu-panel){display:none}
  .hl-menu{display:block}
  .header{gap:10px}
  .header .entry-form{margin-left:auto}
  .hl-now,.hl-feat{padding-top:85px}
  .hl-live{grid-template-columns:1fr}
  .hl-live .hl-empty{grid-column:1/-1}
  .hl-reels-head{display:block}
  .hl-reels-head p{margin-top:6px}
  .hl-reels{grid-auto-columns:46%}
}
@media(max-width:600px){
  .hl-card{min-height:0}
  .hl-empty strong{font-size:22px}
  .hl-empty-actions .pill,.hl-hero-actions .pill,.hl-final-actions .pill{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .hl-wave i,.hl-onair i,.is-live .hl-badge:before{animation:none}
  a.hl-card:hover{transform:none}
}

/* ---------- hero card: the round button switches the demo «on air» ---------- */
.signal-card #ignite{position:relative;transition:background .35s,color .35s,box-shadow .35s,transform .2s}
.signal-card #ignite:active{transform:scale(.92)}
.signal-card #ignite:before,.signal-card #ignite:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #ff3b4d;opacity:0;pointer-events:none}
.signal-card.signal-highlighted #ignite{background:radial-gradient(circle at 35% 30%,#ff8a8f,#ff3b4d 55%,#d81f33);color:#fff;box-shadow:0 0 0 4px #ff3b4d33,0 0 26px #ff3b4daa}
.signal-card.signal-highlighted #ignite:before{animation:hl-ring 1.8s ease-out infinite}
.signal-card.signal-highlighted #ignite:after{animation:hl-ring 1.8s ease-out .9s infinite}
@keyframes hl-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.3);opacity:0}}
.hero .world .signal-card.signal-highlighted{border-color:#ff5a6488;box-shadow:0 28px 80px #000a,0 0 60px #ff3b4d2e}
.signal-card.signal-highlighted:before{border-top-color:#ff8a8f}
.signal-card .mini-icon{transition:background .3s,color .3s}
.signal-card.signal-highlighted .mini-icon{background:#ff3b4d;color:#fff;border-color:#ff3b4d;box-shadow:0 0 14px #ff3b4d99;animation:hl-pulse 1.4s infinite}
.signal-card .waveform i{transition:background .4s}
.signal-card.signal-highlighted .waveform i{background:linear-gradient(#ff8a8f,#ff3b4d)}
.signal-card .signal-footer>span{transition:color .3s}
.signal-card.signal-highlighted .signal-footer>span{color:#ffb3b8}
@media(prefers-reduced-motion:reduce){.signal-card.signal-highlighted #ignite:before,.signal-card.signal-highlighted #ignite:after,.signal-card.signal-highlighted .mini-icon{animation:none}}

/* ================= planet panel: who is on air, from where ================= */
.hl-world{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;margin-bottom:16px;border:1px solid #ffffff14;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 30% 40%,#141a2c 0,#0a0c13 60%)}
.hl-world[hidden]{display:none}
.hl-world-main{position:relative;padding:20px 22px 18px;min-width:0}
.hl-world-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hl-pulse{width:8px;height:8px;border-radius:50%;background:#ff5a64;box-shadow:0 0 0 0 #ff5a6480;animation:hl-beacon 2s infinite}
@keyframes hl-beacon{70%{box-shadow:0 0 0 10px #ff5a6400}100%{box-shadow:0 0 0 0 #ff5a6400}}
.hl-w-sum{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.04em;color:#dfe2ea}
.hl-w-sum b{color:#fff;font-size:15px;margin-right:4px}
.hl-w-sum em{font-style:normal;color:#5d6475;margin:0 8px}
.hl-legend{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;color:#9499a8}
.hl-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:8px}
.hl-legend i.d{background:#ff5a64;box-shadow:0 0 8px #ff5a64}
.hl-legend i.t{background:#cbbcff;box-shadow:0 0 8px #cbbcff}
.hl-map{position:relative;aspect-ratio:2/1;margin:14px 0 6px}
.hl-map>img{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hl-map-pts{position:absolute;inset:0}
.hl-pt{position:absolute;width:0;height:0}
.hl-pt i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#cbbcff;box-shadow:0 0 8px #cbbcffaa;opacity:0;animation:hl-pt-in .6s ease forwards,hl-twinkle 3.2s ease-in-out infinite}
.hl-pt.djgo i{left:-5px;top:-5px;width:10px;height:10px;background:#ff5a64;box-shadow:0 0 0 3px #ff5a6433,0 0 16px #ff5a64}
.hl-pt.djgo:after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid #ff5a64;animation:hl-ring 2.4s ease-out infinite}
@keyframes hl-pt-in{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes hl-twinkle{50%{filter:brightness(1.6)}}
.hl-k{margin:0 0 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#9499a8}
.hl-streamers-wrap{border-top:1px solid #ffffff10;padding-top:14px}
.hl-streamers{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.hl-streamers::-webkit-scrollbar{display:none}
.hl-st{flex:none;display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border:1px solid #ffffff17;border-radius:100px;background:#ffffff06;transition:border-color .2s,background .2s}
.hl-st:hover{border-color:#cbbcff66;background:#cbbcff0d}
.hl-st-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#10131c;background:linear-gradient(140deg,#cbbcff,#6fb6ff)}
.hl-st>span:not(.hl-st-av){display:flex;flex-direction:column;line-height:1.2}
.hl-st strong{font-size:13px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-st small{font-size:11px;color:#9499a8;white-space:nowrap}
.hl-world-side{display:flex;flex-direction:column;padding:20px;border-left:1px solid #ffffff10;background:#0b0e16b0}
.hl-countries{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px;align-content:start;flex:1}
.hl-countries li{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;overflow:hidden;font-size:13px}
.hl-countries li>i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:linear-gradient(90deg,#cbbcff26,#cbbcff08);border-right:1px solid #cbbcff55;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.hl-countries li>*{position:relative}
.hl-countries .f{font-size:16px}
.hl-countries b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#fff}
.hl-countries small{color:#9499a8;font-size:11px;margin-left:6px}
.hl-world-side .pill{justify-content:space-between}
.hl-upd{margin-top:10px;font-size:10px;color:#6f7584}

/* ================= features: a bento of small working instruments ================= */
.hl-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.hl-b{position:relative;display:flex;flex-direction:column;border:1px solid #ffffff12;border-radius:20px;background:linear-gradient(165deg,#141824,#0b0d14);overflow:hidden;isolation:isolate;grid-column:span 2}
.hl-b:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#cbbcff1c,transparent 60%)}
.hl-b:hover:before{opacity:1}
.hl-b:hover{border-color:#ffffff22}
.hl-b-route{grid-column:span 4}
.hl-b-reel{grid-column:span 6}
.hl-b-viz{position:relative;flex:1;min-height:190px;display:flex;align-items:center;justify-content:center;gap:12px;padding:24px 22px 8px}
.hl-b-copy{padding:6px 22px 22px}
.hl-b-copy h3{font-size:19px;letter-spacing:-.03em;margin-bottom:7px}
.hl-b-copy p{margin:0;font-size:13px;line-height:1.55;color:#9499a8;max-width:520px}
.hl-bento.in-view .hl-b *{animation-play-state:running}

/* routing */
.hl-src{margin:0;padding:0;list-style:none;display:grid;gap:5px;flex:none}
.hl-src li{padding:5px 11px;border:1px solid #ffffff1a;border-radius:100px;font-size:12px;font-weight:600;background:#ffffff06;white-space:nowrap;text-align:right}
.hl-src li:last-child{font-weight:400;color:#9499a8;border-style:dashed}
.hl-beams{flex:1;min-width:40px;max-width:150px;height:170px;overflow:visible}
.hl-beams path{fill:none;stroke:#cbbcff;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:4 7;opacity:.55;animation:hl-flow 1.4s linear infinite paused}
.hl-beams.out{max-width:90px}
.hl-beams.out path{stroke:#ff5a64;opacity:.8;stroke-width:1.6}
@keyframes hl-flow{to{stroke-dashoffset:-22}}
.hl-node{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 14px 12px;border:1px solid #cbbcff55;border-radius:16px;background:#cbbcff0e;box-shadow:0 0 40px #cbbcff14}
.hl-node img{width:44px;height:auto}
.hl-node span{font-size:11px;color:#c9cdd8}
.hl-vu{display:flex;gap:3px;height:34px;align-items:flex-end}
.hl-vu i{width:6px;height:40%;border-radius:2px;background:linear-gradient(0deg,#79e5b6 0,#79e5b6 60%,#cbbcff 85%,#ff5a64);animation:hl-vu .9s ease-in-out infinite alternate paused}
.hl-vu i+i{animation-duration:.73s}
@keyframes hl-vu{0%{height:30%}60%{height:78%}100%{height:55%}}
.hl-node.live{border-color:#ff5a6466;background:#ff5a640f;box-shadow:0 0 40px #ff5a641c;padding:14px 16px}
.hl-node.live b{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.12em;color:#ffd7da}
.hl-node.live b:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5a64;margin-right:7px;box-shadow:0 0 10px #ff5a64}

/* sound check */
.hl-b-probe .hl-b-viz{justify-content:flex-start;gap:20px}
.hl-ring{position:relative;width:104px;height:104px;flex:none}
.hl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hl-ring circle{fill:none;stroke-width:8}
.hl-ring .bg{stroke:#ffffff10}
.hl-ring .fg{stroke:#79e5b6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:hl-probe 6s ease-in-out infinite paused;filter:drop-shadow(0 0 6px #79e5b680)}
.hl-ring span{position:absolute;inset:0;display:grid;place-items:center;font:600 18px ui-monospace,SFMono-Regular,Menlo,monospace}
@keyframes hl-probe{0%{stroke-dashoffset:100}55%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.hl-checks{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.hl-checks li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c9cdd8;opacity:.25;animation:hl-check 6s infinite paused}
.hl-checks li:before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#79e5b622;color:#79e5b6;font-size:12px;font-weight:700}
.hl-checks li:nth-child(2){animation-delay:.6s}.hl-checks li:nth-child(3){animation-delay:1.2s}
@keyframes hl-check{0%,22%{opacity:.25}30%,90%{opacity:1}100%{opacity:.25}}

/* phone as a camera */
.hl-b-phone .hl-b-viz{gap:18px}
.hl-phone{position:relative;width:92px;height:168px;border:2px solid #ffffff2e;border-radius:20px;background:#07080c;padding:20px 9px 9px;flex:none;transform:rotate(-6deg);box-shadow:0 20px 50px #0009}
.hl-phone-cam{position:absolute;top:8px;left:50%;width:22px;height:5px;margin-left:-11px;border-radius:5px;background:#ffffff22}
.hl-phone-screen{position:relative;height:100%;border-radius:10px;background:#f5f5f7;display:grid;place-items:center;overflow:hidden;padding:8px}
.hl-qr{width:100%;height:auto;fill:#10131c}
.hl-scan{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,transparent,#cbbcff99 85%,#cbbcff);mix-blend-mode:multiply;animation:hl-scan 2.4s ease-in-out infinite alternate paused}
@keyframes hl-scan{to{top:78%}}
.hl-phone-label{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9499a8}

/* reconnect */
.hl-b-net .hl-b-viz{flex-direction:column;gap:16px}
.hl-net{width:240px;max-width:100%;height:60px;overflow:visible}
.hl-net .l{stroke:#cbbcff;stroke-width:2;stroke-linecap:round}
.hl-net .gap{stroke:#ff5a64;stroke-width:2;stroke-dasharray:3 6;animation:hl-gap 6s infinite paused}
.hl-net .dot{fill:#fff;filter:drop-shadow(0 0 6px #cbbcff);animation:hl-dot 6s ease-in-out infinite paused}
@keyframes hl-dot{0%{transform:translateX(0)}30%,55%{transform:translateX(92px)}85%,100%{transform:translateX(232px)}}
@keyframes hl-gap{0%,25%{stroke:#ffffff22}30%,55%{stroke:#ff5a64}60%,100%{stroke:#79e5b6;stroke-dasharray:0}}
.hl-net-st{position:relative;height:30px;width:200px}
.hl-net-st span{position:absolute;inset:0;display:grid;place-items:center;border-radius:100px;font-size:12px;font-weight:600;opacity:0;animation:hl-st 6s infinite paused}
.hl-net-st .a{background:#ff5a641a;color:#ffb3b8;border:1px solid #ff5a6444}
.hl-net-st .b{background:#cbbcff14;color:#e1d8fc;border:1px solid #cbbcff44;animation-delay:2s}
.hl-net-st .c{background:#79e5b614;color:#b7f3d8;border:1px solid #79e5b644;animation-delay:4s}
@keyframes hl-st{0%{opacity:0;transform:translateY(6px)}5%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-6px)}}

/* REC */
.hl-b-rec .hl-b-viz{flex-direction:column;align-items:stretch;gap:12px;padding-inline:26px}
.hl-rec{display:flex;align-items:center;gap:10px;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#ffb3b8}
.hl-rec i{width:12px;height:12px;border-radius:50%;background:#ff5a64;box-shadow:0 0 12px #ff5a64;animation:hl-pulse 1.2s infinite}
.hl-rec b{margin-left:auto;font-size:24px;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.hl-rec-bar{height:34px;border-radius:8px;background:repeating-linear-gradient(90deg,#ffffff10 0 2px,transparent 2px 5px);position:relative;overflow:hidden}
.hl-rec-bar span{position:absolute;inset:0 30% 0 0;background:repeating-linear-gradient(90deg,#ff5a64aa 0 2px,transparent 2px 5px);animation:hl-recbar 8s linear infinite paused}
@keyframes hl-recbar{from{right:60%}to{right:5%}}
.hl-rec-meta{font-size:11px;color:#9499a8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* reel */
.hl-b-reel .hl-b-viz{gap:22px;padding:28px 28px 8px}
.hl-set{position:relative;flex:1;max-width:640px;height:120px;padding-top:26px}
.hl-set-k{position:absolute;top:0;left:0;font:10px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#9499a8}
.hl-set-wave{width:100%;height:80px;fill:#ffffff2a}
.hl-fire{position:absolute;top:2px;transform:translateX(-50%);font:600 11px ui-monospace,monospace;padding:3px 7px;border-radius:6px;background:#ff5a641f;color:#ffd7da;border:1px solid #ff5a6444;white-space:nowrap}
.hl-fire.f1{left:18%}.hl-fire.f2{left:46%;background:#cbbcff1a;color:#e1d8fc;border-color:#cbbcff44}.hl-fire.f3{left:63%}.hl-fire.f4{left:86%;background:#6fb6ff1a;color:#cfe6ff;border-color:#6fb6ff44}
.hl-pick{position:absolute;top:26px;height:80px;width:6%;margin-left:-3%;border-radius:6px;background:#cbbcff26;border:1px solid #cbbcff88;box-shadow:0 0 18px #cbbcff33;animation:hl-pick 5s infinite paused}
.hl-pick.k1{left:18%}.hl-pick.k2{left:46%;animation-delay:.4s}.hl-pick.k3{left:63%;animation-delay:.8s}.hl-pick.k4{left:86%;animation-delay:1.2s}
@keyframes hl-pick{0%,10%{opacity:0;transform:scaleY(.6)}20%,80%{opacity:1;transform:none}100%{opacity:0}}
.hl-arrow{font-size:28px;color:#cbbcff;flex:none}
.hl-reelphone{position:relative;flex:none;width:96px;height:170px;border:2px solid #ffffff2e;border-radius:18px;overflow:hidden;background:#07080c;display:grid;grid-template-rows:repeat(4,1fr);gap:2px;padding:4px;box-shadow:0 20px 50px #0009}
.hl-reelphone span{border-radius:6px;animation:hl-clip 5s infinite paused}
.hl-reelphone .c1{background:linear-gradient(135deg,#ff5a64,#7a2a6a)}
.hl-reelphone .c2{background:linear-gradient(135deg,#cbbcff,#4a3a8c);animation-delay:.4s}
.hl-reelphone .c3{background:linear-gradient(135deg,#ff8a5c,#8c2a3a);animation-delay:.8s}
.hl-reelphone .c4{background:linear-gradient(135deg,#6fb6ff,#2a3a7a);animation-delay:1.2s}
@keyframes hl-clip{0%,20%{opacity:.15;transform:translateX(-30%)}32%,85%{opacity:1;transform:none}100%{opacity:.15}}
.hl-reelphone b{position:absolute;right:8px;bottom:8px;font:600 11px ui-monospace,monospace;padding:3px 6px;border-radius:5px;background:#000a}

/* ================= path: five hot cues on a track ================= */
.hl-deck{margin-top:22px;padding:26px 26px 28px;border:1px solid #ffffff12;border-radius:22px;background:linear-gradient(180deg,#10131c,#0a0c12)}
.hl-deck-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hl-deck-head .eyebrow{margin:0}
.hl-deck-meta{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#6f7584}
.hl-track{position:relative;height:96px;border-radius:12px;background:#07080c;border:1px solid #ffffff10;overflow:hidden}
.hl-track-wave{position:absolute;inset:3px 0;width:100%;height:calc(100% - 6px);fill:#6fb6ff55}
.hl-cue{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--c)}
.hl-cue b{position:absolute;top:0;left:0;padding:2px 6px;border-radius:0 0 5px 0;background:var(--c);color:#0b0d14;font:700 11px ui-monospace,monospace}
.q1{--c:#ff5a64}.q2{--c:#ffb35c}.q3{--c:#6fb6ff}.q4{--c:#79e5b6}.q5{--c:#cbbcff}
.hl-cue.q1{left:6%}.hl-cue.q2{left:25%}.hl-cue.q3{left:45%}.hl-cue.q4{left:66%}.hl-cue.q5{left:87%}
.hl-playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 12px #fff,0 0 0 1px #0006;animation:hl-play 10s linear infinite paused}
.hl-playhead:before{content:"";position:absolute;top:-1px;left:-5px;border:6px solid transparent;border-top-color:#fff}
@keyframes hl-play{from{left:0}to{left:100%}}
.hl-pads{margin:16px 0 24px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hl-pads li{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;border:1px solid #ffffff12;background:#ffffff05;animation:hl-padhit 10s linear infinite paused}
.hl-pad-k{display:grid;place-items:center;width:100%;height:40px;border-radius:10px;background:color-mix(in srgb,var(--c) 22%,#0b0d14);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);color:var(--c);font:700 15px ui-monospace,monospace;box-shadow:inset 0 -3px 0 #0005}
.hl-pads strong{display:block;font-size:16px;margin-bottom:5px}
.hl-pads p{margin:0;font-size:12.5px;line-height:1.5;color:#9499a8}
.hl-pads .q1{animation-delay:.6s}.hl-pads .q2{animation-delay:2.5s}.hl-pads .q3{animation-delay:4.5s}.hl-pads .q4{animation-delay:6.6s}.hl-pads .q5{animation-delay:8.7s}
@keyframes hl-padhit{0%{border-color:var(--c);box-shadow:0 0 30px color-mix(in srgb,var(--c) 35%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent)}14%,100%{border-color:#ffffff12;box-shadow:none;background:#ffffff05}}
.hl-deck.in-view .hl-playhead,.hl-deck.in-view .hl-pads li,.hl-bento.in-view .hl-beams path,.hl-bento.in-view .hl-vu i,.hl-bento.in-view .hl-ring .fg,.hl-bento.in-view .hl-checks li,.hl-bento.in-view .hl-scan,.hl-bento.in-view .hl-net .gap,.hl-bento.in-view .hl-net .dot,.hl-bento.in-view .hl-net-st span,.hl-bento.in-view .hl-rec-bar span,.hl-bento.in-view .hl-pick,.hl-bento.in-view .hl-reelphone span{animation-play-state:running}

@media(max-width:1000px){
  .hl-world{grid-template-columns:1fr}
  .hl-world-side{border-left:0;border-top:1px solid #ffffff10}
  .hl-countries{grid-template-columns:1fr 1fr}
  .hl-bento{grid-template-columns:repeat(2,1fr)}
  .hl-b,.hl-b-route,.hl-b-reel{grid-column:span 1}
  .hl-b-route,.hl-b-reel{grid-column:span 2}
  .hl-pads{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .hl-world-main{padding:16px 14px 14px}
  .hl-legend{margin-left:0;width:100%}
  .hl-countries{grid-template-columns:1fr}
  .hl-bento{grid-template-columns:1fr;gap:10px}
  .hl-b,.hl-b-route,.hl-b-reel{grid-column:auto}
  .hl-b-viz{min-height:170px;padding:20px 16px 6px}
  .hl-b-copy{padding:4px 18px 18px}
  .hl-b-route .hl-b-viz{flex-wrap:nowrap;gap:6px}
  .hl-src li{font-size:10.5px;padding:4px 8px}
  .hl-beams{min-width:24px;height:150px}
  .hl-beams.out{max-width:30px}
  .hl-node{padding:10px 9px}
  .hl-node img{width:34px}
  .hl-node.live{padding:10px}
  .hl-b-reel .hl-b-viz{flex-direction:column;align-items:stretch}
  .hl-arrow{transform:rotate(90deg);align-self:center;line-height:1}
  .hl-reelphone{align-self:center}
  .hl-deck{padding:18px 14px 20px}
  .hl-track{height:70px}
  .hl-pads{grid-template-columns:1fr}
  .hl-pads li{flex-direction:row;align-items:flex-start}
  .hl-pad-k{width:44px;height:44px;flex:none}
}
@media(prefers-reduced-motion:reduce){
  .hl-b *,.hl-playhead,.hl-pads li,.hl-pt i,.hl-pt.djgo:after,.hl-pulse{animation:none!important}
  .hl-ring .fg{stroke-dashoffset:0}.hl-checks li{opacity:1}.hl-net-st .c{opacity:1}.hl-pick,.hl-reelphone span{opacity:1}
}
@media(max-width:760px){
  .hl-pulse{display:none}
  .hl-set-k{display:none}
  .hl-countries li:nth-child(n+6){display:none}
}

/* hero card: the DJ name is typed right in the card (only an example, nothing is published) */
.hl-name{position:relative;display:flex;align-items:center;gap:8px;pointer-events:auto;cursor:text}
.hl-name input{width:100%;min-width:0;padding:2px 0 4px;border:0;border-bottom:1px dashed #cbbcff55;background:transparent;color:#fff;font:inherit;letter-spacing:inherit;outline:none;caret-color:#cbbcff;transition:border-color .2s}
.hl-name input::placeholder{color:#fff;opacity:1}
.hl-name input:focus{border-bottom-color:#cbbcff}
.hl-name input:focus::placeholder{color:#ffffff55}
.hl-name svg{flex:none;width:18px;height:18px;color:#cbbcff;opacity:.8}
.hl-name:focus-within svg{opacity:0}
.signal-card .signal-title small{margin-top:8px}
.hl-name input:focus,.hl-name input:focus-visible{outline:none;box-shadow:none}

/* ================= flags: real round SVG flags (emoji flags are letters on Windows) ================= */
.hl-flag{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:6px;box-shadow:0 0 0 1px #ffffff26;flex:none}
.hl-countries .f .hl-flag{width:22px;height:22px;margin:0}
.hl-st-av{position:relative}
.hl-st-av .on-av{position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;margin:0;box-shadow:0 0 0 2px #10131c}

/* LIVE ticker of countries */
.hl-ticker{grid-column:1/-1;display:flex;align-items:center;gap:0;border-bottom:1px solid #ffffff10;background:#07080ccc;min-width:0}
.hl-ticker-k{flex:none;display:flex;align-items:center;gap:8px;padding:12px 16px;border-right:1px solid #ffffff10;font:700 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#ffd7da;background:#ff5a640f}
.hl-ticker-k i{width:7px;height:7px;border-radius:50%;background:#ff5a64;box-shadow:0 0 10px #ff5a64;animation:hl-pulse 1.4s infinite}
.hl-ticker-win{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hl-ticker-track{display:flex;gap:10px;width:max-content;padding:9px 12px}
.hl-ticker-track.run{animation:hl-tick 40s linear infinite}
.hl-ticker:hover .hl-ticker-track{animation-play-state:paused}
@keyframes hl-tick{to{transform:translateX(-50%)}}
.hl-tk{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;border-radius:100px;border:1px solid #ffffff14;background:#ffffff06;white-space:nowrap}
.hl-tk .hl-flag{width:22px;height:22px;margin:0}
.hl-tk b{font-size:13px;font-weight:600}
.hl-tk em{font-style:normal;font:600 11px ui-monospace,monospace;padding:2px 7px;border-radius:100px;background:#cbbcff1f;color:#e1d8fc}

/* flag pins on the map: one per country, size by the number of streams */
.hl-pt i{opacity:.55}
.hl-fpin{position:absolute;z-index:2;width:var(--s,26px);height:var(--s,26px);margin:calc(var(--s,26px) / -2) 0 0 calc(var(--s,26px) / -2);opacity:0;animation:hl-pin .6s cubic-bezier(.2,.9,.3,1.3) forwards}
.hl-fpin .hl-flag{width:100%;height:100%;margin:0;box-shadow:0 0 0 2px #0b0d14,0 0 0 3px #ffffff40,0 6px 18px #000a}
.hl-fpin b{position:absolute;right:-8px;top:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center;background:#cbbcff;color:#10131c;font:700 10px ui-monospace,monospace;box-shadow:0 0 0 2px #0b0d14}
.hl-fpin.top b{background:#ff5a64;color:#fff}
.hl-fpin.top:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #ff5a6499;animation:hl-ring 2.4s ease-out infinite}
.hl-fpin:hover{z-index:5}
.hl-fpin:hover .hl-flag{box-shadow:0 0 0 2px #0b0d14,0 0 0 3px #cbbcff,0 0 22px #cbbcff88}
@keyframes hl-pin{from{opacity:0;transform:translateY(-10px) scale(.6)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .hl-ticker-k{padding:10px 12px}
  .hl-fpin.top:before{display:none}
  .hl-fpin b{display:none}
}
@media(prefers-reduced-motion:reduce){.hl-ticker-track.run,.hl-fpin,.hl-fpin.top:before,.hl-ticker-k i{animation:none!important;opacity:1}.hl-ticker-track{flex-wrap:wrap;width:auto}}

/* ================= our own streams (DJGO) stand out everywhere in the planet panel ================= */
.hl-w-own{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:4px 10px 4px 8px;border-radius:100px;background:#ff5a641f;border:1px solid #ff5a6466;color:#ffd7da;font-size:12px}
.hl-w-own i{width:7px;height:7px;border-radius:50%;background:#ff5a64;box-shadow:0 0 10px #ff5a64;animation:hl-pulse 1.4s infinite}
.hl-w-own b{color:#fff;font-size:13px;margin:0}
/* map: the DJGO pin — our mark in a glowing ring with radar waves and the DJ's name */
.hl-dpin{position:absolute;z-index:6;width:0;height:0;opacity:0;animation:hl-pin .7s cubic-bezier(.2,.9,.3,1.3) forwards}
.hl-dpin-mark{position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ff8a8f,#ff3b4d 60%,#c4162a);box-shadow:0 0 0 3px #0b0d14,0 0 0 4px #ff5a64,0 0 28px #ff3b4dcc}
.hl-dpin-mark img{width:68%;height:auto;filter:drop-shadow(0 1px 2px #0006)}
.hl-dpin:before,.hl-dpin:after{content:"";position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;border:2px solid #ff5a64;animation:hl-radar 2.4s ease-out infinite;pointer-events:none}
.hl-dpin:after{animation-delay:1.2s}
@keyframes hl-radar{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.hl-dpin-tag{position:absolute;left:0;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:9px;background:#0b0d14f0;border:1px solid #ff5a6488;white-space:nowrap;box-shadow:0 8px 24px #000a}
.hl-dpin.below .hl-dpin-tag{bottom:auto;top:30px}
.hl-dpin-tag i{width:6px;height:6px;border-radius:50%;background:#ff5a64;box-shadow:0 0 8px #ff5a64;animation:hl-pulse 1.4s infinite}
.hl-dpin-tag b{font-size:12px;color:#fff}
.hl-dpin-tag small{font-size:11px;color:#ffb3b8}
.hl-dpin:hover .hl-dpin-mark{box-shadow:0 0 0 3px #0b0d14,0 0 0 4px #fff,0 0 34px #ff3b4d}
/* ticker chip */
.hl-tk.djgo{border-color:#ff5a6488;background:linear-gradient(90deg,#ff5a6426,#ff5a640a)}
.hl-tk-djgo{padding:3px 7px;border-radius:100px;background:#ff3b4d;color:#fff;font:700 10px ui-monospace,monospace;letter-spacing:.08em}
.hl-tk.djgo em{background:#ff5a6426;color:#ffd7da}
/* countries list and streamers */
.hl-own-tag{margin-left:8px;padding:1px 6px;border-radius:5px;background:#ff3b4d;color:#fff;font:700 9px ui-monospace,monospace;letter-spacing:.06em;vertical-align:2px}
.hl-countries li.has-own{box-shadow:inset 0 0 0 1px #ff5a6455}
.hl-st.djgo{border-color:#ff5a6488;background:linear-gradient(90deg,#ff5a6424,#ff5a6406)}
.hl-st.djgo .hl-st-av{background:radial-gradient(circle at 35% 30%,#ff8a8f,#ff3b4d 60%,#c4162a)}
.hl-st-logo{width:70%;height:auto}
.hl-st.djgo small{color:#ffb3b8}
@media(max-width:760px){
  .hl-w-own{margin:8px 0 0}
  .hl-dpin-mark,.hl-dpin:before,.hl-dpin:after{left:-15px;top:-15px;width:30px;height:30px}
  .hl-dpin-tag{bottom:22px;padding:3px 7px}
  .hl-dpin.below .hl-dpin-tag{top:22px}
  .hl-dpin-tag small{display:none}
}
@media(prefers-reduced-motion:reduce){.hl-dpin,.hl-dpin:before,.hl-dpin:after,.hl-w-own i,.hl-dpin-tag i{animation:none!important;opacity:1}.hl-dpin:before,.hl-dpin:after{display:none}}
.hl-live[hidden]{display:none}

/* RU / EN switch (same idea as inside the app) */
.hl-lang{display:inline-flex;gap:2px;padding:3px;margin-left:10px;border:1px solid #ffffff1c;border-radius:10px;background:#15171e}
.hl-lang button{min-width:34px;height:32px;padding:0 8px;border:0;border-radius:7px;background:transparent;color:#9499a8;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.hl-lang button[aria-pressed="true"]{background:#cbbcff;color:#10131c}
.hl-lang button:not([aria-pressed="true"]):hover{color:#fff}
.header{gap:0}
.header nav:not(.hl-menu-panel){margin-inline:auto}
@media(max-width:760px){.hl-lang{margin-left:6px}.hl-lang button{min-width:30px;height:30px;padding:0 6px;font-size:11px}.hl-menu{margin-left:6px}}
@media(max-width:380px){.header .header-cta{padding:6px 7px 6px 11px;gap:8px;font-size:11px}}
@media(max-width:760px){.hl-w-sum{flex:1 1 100%;min-width:0;line-height:1.8}}

/* ===== DJGO motion v19: soft, springy micro-animations in the brand lilac — buttons lift and glow, cards breathe,
   icons nudge in the direction they point. Everything is off for people who ask for less motion. ===== */
:root{--hl-ease:cubic-bezier(.22,1,.36,1);--hl-lilac:#cbbcff;--hl-glow:0 10px 34px -10px #cbbcff66}
/* icons: Phosphor bold, same size as the old ones */
.hl-ar{display:inline-grid;place-items:center;width:1.15em;height:1.15em;line-height:0}
.hl-ar svg{width:100%;height:100%;transition:transform .35s var(--hl-ease)}
.community-symbol svg{width:1em;height:1em}
.radio-badge{font-size:0!important}
.radio-badge::before{content:"";display:block;width:14px;height:14px;background:currentColor;-webkit-mask:url(./ico/arrow-up-right.svg) center/contain no-repeat;mask:url(./ico/arrow-up-right.svg) center/contain no-repeat;transition:transform .35s var(--hl-ease)}
/* the menu icon sits exactly in the middle of its button */
.hl-menu summary{justify-content:center;align-content:center;padding:0;transition:background .25s,border-color .25s,transform .25s var(--hl-ease)}
.hl-menu summary svg{width:22px;height:22px;display:block}
.hl-menu summary:hover{border-color:#cbbcff55;background:#1b1e29}
.hl-menu[open] summary{border-color:var(--hl-lilac);background:#cbbcff1a;color:var(--hl-lilac)}
.hl-menu-panel{transform-origin:top right;animation:hl-pop .28s var(--hl-ease)}
@keyframes hl-pop{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.hl-menu-panel a:not(.pill){transition:background .2s,color .2s,padding .25s var(--hl-ease)}
.hl-menu-panel a:not(.pill):hover{background:#cbbcff12;color:#fff;padding-left:16px}

/* buttons: lift, glow, press */
.pill{transition:transform .3s var(--hl-ease),background .25s,border-color .25s,box-shadow .3s,color .25s}
.pill:hover{transform:translateY(-2px);border-color:#cbbcff66;box-shadow:var(--hl-glow)}
.pill:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.pill:focus-visible,.hl-lang button:focus-visible,.hl-b:focus-visible,.hl-card:focus-visible{outline:2px solid var(--hl-lilac);outline-offset:3px}
.pill.primary:hover{box-shadow:0 14px 40px -12px #cbbcffaa,0 0 0 4px #cbbcff1f}
.pill:hover .hl-ar svg,.hl-card:hover .hl-ar svg,.station-entry button:hover + .x,.pill:hover>svg{transform:translate(2px,-2px) scale(1.1)}
.pill:hover .hl-ar.down svg{transform:translateY(3px) scale(1.1)}
.pill:hover .hl-arrow svg{transform:translateX(3px)}
.station-entry button:hover .radio-badge::before{transform:translate(2px,-2px) scale(1.12)}
.hl-lang button{transition:background .2s,color .2s,transform .25s var(--hl-ease)}
.hl-lang button:hover:not([aria-pressed=true]){color:#fff;background:#ffffff12}
.hl-lang button:active{transform:scale(.92)}
.header nav:not(.hl-menu-panel) a{position:relative;transition:color .2s}
.header nav:not(.hl-menu-panel) a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--hl-lilac);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--hl-ease)}
.header nav:not(.hl-menu-panel) a:hover{color:#fff}
.header nav:not(.hl-menu-panel) a:hover::after{transform:scaleX(1)}

/* cards: the card lifts a little, its picture grows (group-hover:scale-105), the border lights up */
.hl-b,.hl-card,.hl-reel,.hl-w-row,.hl-st,.station-entry button,.source,.hl-step,.hl-pick{transition:transform .45s var(--hl-ease),border-color .3s,box-shadow .45s var(--hl-ease),background .3s}
.hl-b:hover{transform:translateY(-4px);border-color:#cbbcff40;box-shadow:0 24px 60px -28px #cbbcff55}
.hl-b .hl-b-viz{transition:transform .6s var(--hl-ease)}
.hl-b:hover .hl-b-viz{transform:scale(1.05)}
.hl-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -26px #cbbcff66}
.hl-reel:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 50px -24px #000}
.hl-reel video,.hl-reel img{transition:transform .6s var(--hl-ease)}
.hl-reel:hover video,.hl-reel:hover img{transform:scale(1.05)}
.hl-w-row:hover{transform:translateX(3px)}
.hl-st:hover{transform:translateY(-2px)}
.station-entry button:hover{transform:translateX(3px);border-color:#cbbcff55}
.source:hover{transform:translateY(-2px)}
.hl-pick:hover{transform:translateY(-3px)}
.hl-fpin .hl-flag{transition:transform .3s var(--hl-ease),box-shadow .3s}
.hl-fpin:hover .hl-flag{transform:scale(1.18)}
.feature-strip>*{transition:color .25s}
.feature-strip>*:hover{color:#fff}
.feature-strip>*:hover svg{transform:scale(1.15) rotate(-6deg)}
.feature-strip svg{transition:transform .4s var(--hl-ease)}
details.faq-item summary,.faq details summary{transition:color .2s,padding .3s var(--hl-ease)}
.faq details summary:hover{color:#fff;padding-left:4px}

@media (hover:none){.hl-b:hover,.hl-card:hover,.hl-reel:hover,.pill:hover,.hl-st:hover,.station-entry button:hover,.source:hover,.hl-pick:hover,.hl-w-row:hover{transform:none;box-shadow:none}.hl-b:hover .hl-b-viz{transform:none}}
@media (prefers-reduced-motion:reduce){.pill,.hl-b,.hl-card,.hl-reel,.hl-w-row,.hl-st,.station-entry button,.source,.hl-pick,.hl-b .hl-b-viz,.hl-ar svg,.hl-menu-panel{transition:none!important;animation:none!important}.pill:hover,.hl-b:hover,.hl-card:hover,.hl-reel:hover{transform:none}}

/* «Моя студия» — record for yourself */
.hl-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hl-self-btn{border-color:#e4f22266;color:#e4f222}.hl-self-btn:hover{border-color:#e4f222;box-shadow:0 14px 40px -14px #e4f222aa}
.hl-self-rec{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;color:#ff2d55}.hl-self-rec svg{width:18px;height:18px}
.hl-self-btn:hover .hl-self-rec{animation:hl-self-pulse 1s ease-in-out infinite}
@keyframes hl-self-pulse{50%{transform:scale(.82)}}
.hl-self{margin-top:18px;max-width:640px;padding:14px 18px;border-left:2px solid #e4f222;background:#e4f22208;border-radius:0 12px 12px 0}
.hl-self strong{display:block;margin-bottom:4px;color:#fff}.hl-self p{margin:0;color:#b9bfca;font-size:14.5px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.hl-self-btn:hover .hl-self-rec{animation:none}}

/* «Своя онлайн-студия» */
.hl-ms{padding-top:90px;padding-bottom:40px}
.hl-ms-head{max-width:760px}.hl-ms-head .section-text{margin:16px 0 22px}
.hl-ms-main{margin:36px 0 0;border-radius:22px;overflow:hidden;border:1px solid #ffffff1c;box-shadow:0 40px 120px -40px #6b4cff66}
.hl-ms-main img{display:block;width:100%;height:auto}
.hl-ms-main figcaption{padding:12px 18px;font-size:13px;color:#a9aec0;background:#0d0f17}
.hl-ms-grid{display:grid;grid-template-columns:1.25fr .8fr 1fr;gap:16px;margin-top:16px}
.hl-ms-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#0f1118;border:1px solid #ffffff17;transition:transform .3s,border-color .3s}
.hl-ms-card:hover{transform:translateY(-3px);border-color:#e4f22255}
.hl-ms-card img{display:block;width:100%;height:220px;object-fit:cover;object-position:top}
.hl-ms-card>div{padding:16px 18px 18px}.hl-ms-card h3{margin:0 0 6px;font-size:18px;color:#fff}.hl-ms-card p{margin:0;color:#b9bfca;line-height:1.55;font-size:14.5px}
.hl-ms-list{justify-content:center}.hl-ms-list ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:10px;color:#b9bfca;font-size:14.5px;line-height:1.45}
.hl-ms-list li{padding-left:16px;position:relative}.hl-ms-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:#e4f222}
.hl-ms-list b{color:#fff;font-weight:600}
@media(max-width:900px){.hl-ms{padding-top:60px}.hl-ms-grid{grid-template-columns:1fr}.hl-ms-card img{height:200px}}

/* two directions: online studio · studio in Moscow */
.hl-two{padding-top:56px;padding-bottom:10px}
.hl-two-title{margin:0 0 20px;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em}
.hl-two-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hl-two-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#0f1118;border:1px solid #ffffff17;color:inherit;text-decoration:none;transition:transform .35s var(--hl-ease,ease),border-color .3s,box-shadow .35s}
.hl-two-card:hover{transform:translateY(-4px);border-color:#cbbcff55;box-shadow:0 30px 70px -30px #6b4cff77}
.hl-two-card.moscow:hover{border-color:#e4f22255;box-shadow:0 30px 70px -30px #e4f22244}
.hl-two-pic{position:relative;aspect-ratio:16/9;overflow:hidden}
.hl-two-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--hl-ease,ease)}
.hl-two-card:hover .hl-two-pic img{transform:scale(1.04)}
.hl-two-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.hl-two-body h3{margin:0;font-size:24px;color:#fff;letter-spacing:-.01em}.hl-two-body p:not(.eyebrow){margin:0 0 8px;color:#b9bfca;line-height:1.55}
.hl-two-body .pill{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.hl-two-grid{grid-template-columns:1fr}}
/* Soft CRT on the online-studio screenshot: subtle noise, scanlines and a slow signal sweep. */
.hl-grain{position:relative;isolation:isolate}
.hl-grain-fx{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.078) 3px,rgba(0,0,0,.078) 4px)}
.hl-grain-fx::before{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(transparent,rgba(180,165,255,.025),transparent);animation:hl-crt-sweep 11s linear infinite}
.hl-grain-fx::after{content:"";position:absolute;inset:-64px;background:url(./grain.png) 0 0/150px 150px;opacity:.035;mix-blend-mode:screen;animation:hl-grain .55s steps(1) infinite}
@keyframes hl-grain{0%,100%{transform:translate(0,0)}17%{transform:translate(-21px,14px)}33%{transform:translate(18px,-25px)}50%{transform:translate(-11px,28px)}67%{transform:translate(28px,7px)}83%{transform:translate(-25px,-18px)}}
@keyframes hl-crt-sweep{from{transform:translateY(110%)}to{transform:translateY(-1000%)}}
@media (prefers-reduced-motion:reduce){.hl-grain-fx::after{animation:none}.hl-grain-fx::before{animation:none;display:none}}
/* v31: full online-studio shot in the two cards, autoplay studio video with sound toggle */
.hl-two-pic{aspect-ratio:16/10}
.hl-two-pic.hl-fit{background:#0b0c14}
.hl-two-pic.hl-fit img{object-fit:contain}
.hl-two-card:hover .hl-two-pic.hl-fit img{transform:none}
.hl-two-card.moscow{display:flex;flex-direction:column}
.hl-two-card.moscow .hl-two-body{display:flex;color:inherit;text-decoration:none;flex:1}
.hl-vid{background:#07080d}
.hl-vid video{display:block;width:100%;height:100%;object-fit:cover}
.hl-vlabel{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:#07080dcc;backdrop-filter:blur(8px);font:600 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;color:#fff}
.hl-vsound{position:absolute;right:12px;bottom:12px;z-index:2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff33;background:#07080dcc;backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.hl-vsound:hover,.hl-vsound[aria-pressed="true"]{background:#e4f222;color:#07080d;border-color:#e4f222}
.hl-vsound svg{width:19px;height:19px}
.hl-vsound:focus-visible{outline:2px solid #e4f222;outline-offset:3px}
.hl-ms-main>.hl-grain>img{display:block;width:100%;height:auto}
.physical-studio .studio-film{aspect-ratio:16/9}
.physical-studio .studio-film video{object-fit:cover}
/* v32: hero — the studio for yourself, no request needed */
.hl-mystudio{gap:10px}
.hl-nomod{font:600 9.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:5px 7px;border-radius:999px;background:#e4f2221f;color:#e4f222;border:1px solid #e4f22255}
/* v32: «Что получишь» on the studio picture (in the spirit of the feature cards above: mono tags, REC, live bars) */
.hl-ms-main>.hl-grain{position:relative}
.hl-get{position:absolute;left:2.4%;bottom:4%;z-index:3;width:min(330px,34%);padding:14px 14px 12px;border-radius:16px;background:linear-gradient(160deg,#10121bf0,#0a0b11f2);border:1px solid #ffffff1f;box-shadow:0 30px 70px -20px #000c,0 0 0 1px #6b4cff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hl-get-k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 10.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:#cbbcff}
.hl-get-k>i{width:8px;height:8px;border-radius:50%;background:#ff2d55;box-shadow:0 0 10px #ff2d55;animation:hl-get-blink 1.2s steps(2,jump-none) infinite}
.hl-get-t{margin-left:auto;color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hl-get ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hl-get li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;background:#ffffff07;border:1px solid #ffffff10;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1)}
.hl-get.on li{opacity:1;transform:none}
.hl-get.on li:nth-child(2){transition-delay:.12s}.hl-get.on li:nth-child(3){transition-delay:.24s}.hl-get.on li:nth-child(4){transition-delay:.36s}
.hl-get-tag{display:grid;place-items:center;height:28px;border-radius:8px;font:600 10.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;color:#0a0b11;background:#e4f222}
.hl-get li:nth-child(2) .hl-get-tag{background:#cbbcff}.hl-get li:nth-child(3) .hl-get-tag{background:linear-gradient(180deg,#ff5a7a,#8b6cff);color:#fff}.hl-get li:nth-child(4) .hl-get-tag{background:#79e5b6}
.hl-get li b{display:block;font-size:13.5px;line-height:1.2;color:#fff}
.hl-get li small{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:#a9aec0}
.hl-get-wave{display:flex;align-items:center;gap:2px;height:22px}
.hl-get-wave i{width:2px;height:40%;border-radius:2px;background:#ff5a7a;animation:hl-get-wave 1.1s ease-in-out infinite}
.hl-get-wave i:nth-child(3n){animation-delay:-.3s}.hl-get-wave i:nth-child(3n+1){animation-delay:-.65s}.hl-get-wave i:nth-child(4n){animation-delay:-.9s;background:#cbbcff}
.hl-get-cpu{width:34px;height:6px;border-radius:4px;background:#ffffff14;overflow:hidden}
.hl-get-cpu i{display:block;height:100%;width:22%;border-radius:4px;background:#79e5b6;animation:hl-get-cpu 3s ease-in-out infinite}
@keyframes hl-get-blink{50%{opacity:.25}}
@keyframes hl-get-wave{0%,100%{height:25%}50%{height:95%}}
@keyframes hl-get-cpu{50%{width:34%}}
@media (prefers-reduced-motion:reduce){.hl-get-k>i,.hl-get-wave i,.hl-get-cpu i{animation:none}.hl-get li{opacity:1;transform:none;transition:none}}
/* on narrower screens the card sits under the picture instead of covering it */
@media (max-width:1100px){.hl-get{width:min(300px,40%)}.hl-get li small{display:none}}
@media (max-width:760px){.hl-get{position:static;width:auto;margin:0;border-radius:0;border-width:1px 0 0;box-shadow:none;backdrop-filter:none}.hl-get li small{display:block}.hl-get ul{grid-template-columns:1fr 1fr}.hl-get li{grid-template-columns:36px 1fr}.hl-get-wave,.hl-get-cpu{display:none}}
@media (max-width:420px){.hl-get ul{grid-template-columns:1fr}}

/* v35 */
.hl-twitch-note{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#aca7bc;font-size:12px;text-decoration:none}.hl-twitch-note i{width:6px;height:6px;background:#cbbcff;border-radius:50%}.hl-twitch-note:hover{color:#e3daff}
.hl-relay{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding-top:40px;padding-bottom:44px;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;margin-top:28px;margin-bottom:40px}.hl-relay h2{font-size:clamp(25px,3vw,40px);line-height:1.15;margin:12px 0 18px;letter-spacing:-.035em}.hl-relay p:not(.eyebrow){font-size:15px;line-height:1.65;color:#a5a6b0;max-width:560px}.hl-relay a{display:inline-block;color:#cbbcff;font-size:13px;margin-top:13px;text-decoration:none}.hl-relay-card{padding:24px;border-radius:16px;background:#cbbcff06;border:1px solid #cbbcff20}.hl-relay-card h3{font-size:23px;margin:15px 0 12px}.hl-relay-card small{font-size:12px;color:#92919f}.hl-relay-chip{font:10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#cbbcff}.faq a{color:#cbbcff;font-size:13px}
@media(max-width:700px){.hl-relay{grid-template-columns:1fr;gap:24px;padding-top:28px;padding-bottom:28px;margin-top:20px}.hl-relay-card{padding:20px}.hl-twitch-note{font-size:11px}}
/* v36 (Claude): «Один сет — три пути» + твой профиль в эфире (QR) */
.hl-relay{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:64px;padding-top:72px;padding-bottom:72px}
.hl-rl-copy h2{margin:14px 0 30px;font-size:clamp(34px,4vw,54px);line-height:1.02;letter-spacing:-.04em;font-weight:500}
.hl-rl-copy h2 span{color:#cbbcff}
.hl-paths{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:p}
.hl-paths li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #ffffff12}
.hl-paths li:last-child{border-bottom:1px solid #ffffff12}
.hl-paths b{display:block;font-size:17px;font-weight:600;color:#f5f5f7;letter-spacing:-.01em}
.hl-paths small{display:block;margin-top:3px;font-size:13.5px;color:#9499a8;line-height:1.45}
.hl-p-ico{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid #ffffff1c;background:#10131c;display:grid;place-items:center}
.hl-p-ico::before{content:"";width:12px;height:12px;border-radius:50%}
.hl-p-ico.rec::before{background:#ff5a64;box-shadow:0 0 14px #ff5a64aa;animation:hl-get-blink 1.4s steps(2,jump-none) infinite}
.hl-p-ico.live::before{width:16px;height:16px;background:radial-gradient(circle,#e4f222 0 30%,transparent 32%),conic-gradient(from 0deg,#e4f22200,#e4f222aa,#e4f22200);animation:hl-spin 2.8s linear infinite}
.hl-p-ico.tw::before{width:18px;height:14px;border-radius:3px;background:linear-gradient(#cbbcff,#9d86ff);clip-path:polygon(0 0,100% 0,100% 70%,60% 70%,40% 100%,40% 70%,0 70%)}
@keyframes hl-spin{to{transform:rotate(360deg)}}
/* the visual: a stream frame with the DJ card + a phone scanning it */
.hl-follow{margin:0;display:grid;gap:22px}
.hl-fv{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid #ffffff1c;background:radial-gradient(120% 90% at 30% 110%,#3a1d5c 0%,#14101f 45%,#08090e 100%);box-shadow:0 40px 100px -40px #6b4cff80}
.hl-fv-light{position:absolute;width:55%;height:140%;top:-20%;filter:blur(30px);opacity:.55;mix-blend-mode:screen}
.hl-fv-light.a{left:-10%;background:linear-gradient(180deg,#6b4cff66,transparent 70%);transform:rotate(18deg);animation:hl-sway 7s ease-in-out infinite}
.hl-fv-light.b{right:15%;background:linear-gradient(180deg,#ff5a6455,transparent 70%);transform:rotate(-14deg);animation:hl-sway 9s ease-in-out infinite reverse}
@keyframes hl-sway{50%{transform:rotate(-6deg) translateX(8%)}}
.hl-fv-live{position:absolute;left:4%;top:6%;display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:6px;background:#ff2d55;font:700 10px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:#fff}
.hl-fv-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:hl-get-blink 1.2s steps(2,jump-none) infinite}
.hl-fv-views{position:absolute;left:4%;bottom:7%;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;color:#ffffffb0}
.hl-fv-card{position:absolute;right:4%;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:#07080dcc;border:1px solid #ffffff22;backdrop-filter:blur(8px)}
.hl-qr{width:72px;height:72px;display:block;border-radius:6px}
.hl-fv-card small{display:block;font:600 9px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:#cbbcff}
.hl-fv-card b{display:block;margin-top:6px;font-size:16px;color:#fff;letter-spacing:-.01em}
.hl-fv-card span{display:block;margin-top:2px;font-size:12px;color:#a9aec0}
.hl-fv-card em{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:5px;background:#e4f222;color:#0a0b11;font:700 9.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;font-style:normal}
.hl-phone{position:absolute;left:30%;bottom:-14%;width:20%;aspect-ratio:9/17;border-radius:18px;border:2px solid #ffffff40;background:#0b0c12;padding:8% 7%;box-shadow:0 20px 50px #000c;transform:rotate(-8deg);animation:hl-phone 6s cubic-bezier(.4,0,.2,1) infinite}
.hl-phone-scr{position:relative;height:100%;border-radius:10px;overflow:hidden;background:#1a1d29;display:grid;place-items:start center;padding-top:18%}
.hl-qr.sm{width:70%;height:auto;border-radius:3px;opacity:.95}
.hl-scan{position:absolute;left:8%;right:8%;height:2px;top:18%;background:#e4f222;box-shadow:0 0 10px #e4f222;animation:hl-scan 6s ease-in-out infinite}
.hl-toast{position:absolute;left:50%;top:-14%;transform:translate(-50%,6px);white-space:nowrap;padding:6px 10px;border-radius:999px;background:#79e5b6;color:#06231a;font:700 11px/1 "Inter Tight",system-ui,sans-serif;opacity:0;animation:hl-toast 6s ease infinite}
@keyframes hl-phone{0%,12%{transform:translate(-30%,30%) rotate(-14deg);opacity:0}24%,88%{transform:translate(0,0) rotate(-8deg);opacity:1}100%{transform:translate(-30%,30%) rotate(-14deg);opacity:0}}
@keyframes hl-scan{0%,28%{top:18%;opacity:0}32%{opacity:1}52%{top:62%;opacity:1}56%,100%{top:62%;opacity:0}}
@keyframes hl-toast{0%,56%{opacity:0;transform:translate(-50%,8px)}62%,84%{opacity:1;transform:translate(-50%,0)}92%,100%{opacity:0;transform:translate(-50%,-4px)}}
.hl-follow figcaption{display:grid;gap:8px;max-width:520px}
.hl-follow figcaption h3{margin:4px 0 0;font-size:22px;letter-spacing:-.02em;color:#fff;font-weight:600}
.hl-follow figcaption p{margin:0;color:#9499a8;font-size:15px;line-height:1.55}
.hl-follow .hl-relay-chip{justify-self:start}
@media (prefers-reduced-motion:reduce){.hl-p-ico::before,.hl-fv-light,.hl-phone,.hl-scan,.hl-toast,.hl-fv-live i{animation:none}.hl-phone{opacity:1}.hl-toast{opacity:1;transform:translate(-50%,0)}}
@media (max-width:900px){.hl-relay{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:56px}}
@media (max-width:560px){.hl-fv-card{right:3%;padding:7px 9px 7px 7px;gap:8px;border-radius:10px}.hl-qr{width:46px;height:46px}.hl-fv-card b{font-size:12.5px;margin-top:4px}.hl-fv-card span{font-size:10px}.hl-fv-card em{margin-top:5px;font-size:8px;padding:3px 5px}.hl-fv-card small{font-size:7.5px}.hl-phone{border-radius:12px;border-width:1.5px}.hl-toast{font-size:9.5px;padding:4px 7px}}
.hl-phone{left:38%;bottom:-22%;width:19%;padding:7px;border-radius:20px}
.hl-phone::before{content:"";position:absolute;top:10px;left:50%;width:26%;height:5px;border-radius:4px;background:#000;transform:translateX(-50%);z-index:2}
.hl-phone-scr{border-radius:14px;background:radial-gradient(100% 70% at 50% 30%,#2a2340,#0e0f16);place-items:start center;padding-top:22%}
.hl-phone-scr::before{content:"";position:absolute;left:12%;right:12%;top:18%;aspect-ratio:1;border:2px solid #ffffff99;border-radius:8px;-webkit-mask:linear-gradient(#000 0 0) top left/26% 26% no-repeat,linear-gradient(#000 0 0) top right/26% 26% no-repeat,linear-gradient(#000 0 0) bottom left/26% 26% no-repeat,linear-gradient(#000 0 0) bottom right/26% 26% no-repeat;mask:linear-gradient(#000 0 0) top left/26% 26% no-repeat,linear-gradient(#000 0 0) top right/26% 26% no-repeat,linear-gradient(#000 0 0) bottom left/26% 26% no-repeat,linear-gradient(#000 0 0) bottom right/26% 26% no-repeat}
.hl-qr.sm{width:64%;margin-top:4%}
.hl-scan{top:22%;left:14%;right:14%}
@keyframes hl-scan{0%,28%{top:22%;opacity:0}32%{opacity:1}52%{top:66%;opacity:1}56%,100%{top:66%;opacity:0}}
.hl-toast{top:-12%}
@media (max-width:560px){.hl-phone{padding:4px;border-radius:12px;left:34%}.hl-phone::before{top:6px;height:3px}.hl-phone-scr{border-radius:9px}}
/* v36: repeated sections are hidden; FAQ is one compact disclosure */
.experience[hidden],.audience[hidden]{display:none!important}
.faq-all{border:1px solid #ffffff17;border-radius:18px;background:#0d0f16;overflow:hidden}
.faq-all>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:20px 24px;cursor:pointer;font-size:17px;font-weight:600;color:#f5f5f7}
.faq-all>summary::-webkit-details-marker{display:none}
.faq-all>summary em{font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;font-style:normal;padding:5px 8px;border-radius:999px;background:#ffffff12;color:#cbbcff}
.faq-all>summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid #cbbcff;border-bottom:2px solid #cbbcff;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.faq-all[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq-all>summary:hover{background:#ffffff06}
.faq-all>summary:focus-visible{outline:2px solid #cbbcff;outline-offset:-2px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;padding:0 24px 12px;border-top:1px solid #ffffff12}
.faq-grid>details{border-top:0!important;border-bottom:1px solid #ffffff10}
.faq-grid>details>summary{padding-top:14px!important;padding-bottom:14px!important;font-size:14px!important}
@media (max-width:760px){.faq-grid{grid-template-columns:1fr;padding:0 16px 8px}.faq-all>summary{padding:18px 16px}}
.faq-all{padding:0!important;border-bottom:1px solid #ffffff17!important}
.faq-all>summary::after{content:""!important}
.faq-grid{display:block;columns:2;column-gap:40px}
.faq-grid>details{break-inside:avoid;padding:0!important}
.faq-grid>details:not([open])>summary::after{content:"+"}
.faq-grid>details[open]>summary::after{content:"−"}
.faq-grid>details>p{margin:0 0 16px!important;font-size:13px!important;line-height:1.6;color:#9aa1ad!important}
@media (max-width:760px){.faq-grid{columns:1}}
/* v37: Twitch + QR — one quiet line instead of a section */
.hl-strip{border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;margin-top:28px;margin-bottom:8px}
.hl-strip p{margin:0;padding:15px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font:500 11px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#8d92a8;text-align:center}
.hl-strip i{width:6px;height:6px;border-radius:50%;background:#cbbcff;box-shadow:0 0 8px #cbbcff;margin-right:2px}
.hl-strip-sep{color:#ffffff30}
@media (max-width:560px){.hl-strip p{font-size:10px;letter-spacing:.05em;padding:13px 0}.hl-strip-sep{display:none}}
.hl-strip{border-top:0;margin-top:0}
.hl-strip p>span{display:inline-flex;align-items:center;gap:8px}
@media (max-width:560px){.hl-strip p{flex-direction:column;gap:6px}}
@media (max-width:560px){.hl-strip p>.hl-strip-sep{display:none}}

/* v38: reels — the video already carries the DJ name and DJGO mark, so the caption goes under the frame */
.hl-reel{aspect-ratio:auto;overflow:visible;background:none;border:0;border-radius:0;display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.hl-reel:after{content:none}
.hl-reel-frame{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#10131c;border:1px solid #ffffff14;transition:border-color .3s,box-shadow .45s var(--hl-ease,ease)}
.hl-reel-frame video{width:100%;height:100%;object-fit:cover;display:block}
.hl-reel-play{top:auto;bottom:10px;right:10px;width:30px;height:30px;background:#000000a0;border-color:#ffffff38;backdrop-filter:blur(6px);font-size:0}
.hl-reel-play:before{content:"";width:0;height:0;margin-left:2px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.hl-reel-info{position:static;padding:0 2px;gap:2px;min-width:0}
.hl-reel-info strong{font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-reel-info small{font-size:12px;color:#8d92a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-reel-info small:empty{display:none}
.hl-reel:hover{transform:none;box-shadow:none}
.hl-reel:hover .hl-reel-frame{border-color:#ffffff30;box-shadow:0 22px 50px -24px #000}
.hl-reel:focus-visible{outline:none}.hl-reel:focus-visible .hl-reel-frame{outline:2px solid #cbbcff;outline-offset:3px}
@media (max-width:760px){
  .hl-reels{grid-auto-columns:40%;gap:12px;margin:0 -20px;padding:0 20px 6px;scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain}
  .hl-reels::-webkit-scrollbar{display:none}
}

/* v39: scroll cue under the hero — a channel fader whose knob slides down, plus what is below */
.hl-scroll{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:10px 16px 10px 12px;border:1px solid #ffffff14;border-radius:14px;background:linear-gradient(180deg,#ffffff08,#ffffff02);color:#c9cbe0;transition:border-color .3s,background .3s,transform .3s}
.hl-scroll:hover{border-color:#cbbcff55;background:#cbbcff0d;transform:translateY(1px)}
.hl-scroll-fader{position:relative;flex:none;width:14px;height:38px;border-radius:8px;border:1px solid #ffffff2e;background:repeating-linear-gradient(180deg,transparent 0 6px,#ffffff14 6px 7px)}
.hl-scroll-fader i{position:absolute;left:1px;right:1px;top:3px;height:8px;border-radius:3px;background:#cbbcff;box-shadow:0 0 12px #cbbcffaa;animation:hl-fader 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes hl-fader{0%,12%{top:3px}55%,72%{top:25px;opacity:1}86%{top:25px;opacity:0}87%{top:3px;opacity:0}100%{top:3px;opacity:1}}
.hl-scroll-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.hl-scroll-txt b{font:600 11px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#f5f5f7}
.hl-scroll-txt em{font-style:normal;font-size:12.5px;color:#8d92a8;white-space:nowrap}
.hl-scroll-ar{flex:none;width:18px;height:18px;color:#cbbcff;animation:hl-bob 2.4s ease-in-out infinite}
@keyframes hl-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hl-scroll-fader i,.hl-scroll-ar{animation:none}.hl-scroll-fader i{top:25px}}
@media (max-width:760px){.hl-scroll{display:flex;margin-top:22px;width:100%}.hl-scroll-txt{flex:1}.hl-scroll-txt em{white-space:normal}}

/* v40: the Moscow studio card shows a real stream frame — Twitch note on top, the DJ card with a QR on the right,
   the DJGO mark in the corner (same places as in a DJGO stream) */
.hl-two-card.moscow .hl-two-pic{container-type:inline-size}
.hl-two-card.moscow .hl-vlabel{top:12px;bottom:auto;left:12px;max-width:calc(100% - 76px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}
.hl-vlabel-tw svg{flex:none;width:13px;height:13px;color:#b48cff}
.hl-two-card.moscow .hl-vsound{top:10px;bottom:auto}
.hl-sample{position:absolute;inset:0;z-index:1;pointer-events:none}
.hl-sample-card{position:absolute;right:2.8cqw;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:2.1cqw;padding:1.6cqw 2.6cqw 1.6cqw 1.6cqw;border-radius:1.2cqw;background:linear-gradient(90deg,rgba(8,9,13,.62),rgba(8,9,13,.38));backdrop-filter:blur(2px)}
.hl-two-pic .hl-sample-card>img{object-fit:contain;transform:none!important;display:block;width:12cqw;height:12cqw;border-radius:2px;image-rendering:pixelated}
.hl-sample-card>span{display:flex;flex-direction:column;gap:.35cqw;text-shadow:0 1px 3px #000c;font-family:Arial,Helvetica,sans-serif}
.hl-sample-card small{font-size:max(8px,1.35cqw);color:#e3daff;letter-spacing:.04em}
.hl-sample-card b{font-size:max(12px,2.9cqw);font-weight:600;color:#fff;line-height:1.05}
.hl-sample-card i{font-style:normal;font-size:max(9px,1.75cqw);color:#e0e1e7}
.hl-sample-card em{font-style:normal;font-weight:600;font-size:max(8px,1.5cqw);color:#fff;margin-top:.5cqw;letter-spacing:.06em}
.hl-two-pic .hl-sample-mark{object-fit:contain;transform:none!important;position:absolute;right:2.2cqw;bottom:2.2cqw;width:9cqw;height:auto;opacity:.85;filter:drop-shadow(0 2px 6px #0008)}
/* the DJ studio block: what you get in the studio */
.studio-perks{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:10px}
.studio-perks li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;color:#b9bdcb}
.studio-perks li b{color:#f5f5f7;font-weight:600}
.studio-perks svg{flex:none;width:20px;height:20px;margin-top:1px;color:#cbbcff}
.physical-studio-copy .studio-details-link{display:inline-flex}
.studio-booking .studio-booking-link{display:inline-flex;align-items:center;gap:8px}

/* Legal entry: quiet footer link; separate tab preserves studio state. */
.footer:has(.hl-legal-link){flex-wrap:wrap}.hl-legal-link{display:inline-flex;align-items:center;min-height:44px;color:#a5adbd;font-size:12px;line-height:1.4;text-decoration:none;text-underline-offset:4px}.hl-legal-link:hover{color:#e4f222;text-decoration:underline}.hl-legal-link:focus-visible{outline:2px solid #e4f222;outline-offset:4px}