:root {
  --cyan:#00e5ff; --cyan-dim:rgba(0,229,255,0.13); --cyan-glow:rgba(0,229,255,0.4);
  --green:#00ff88; --purple:#7c3aed; --orange:#f59e0b;
  --bg:#0a0c10; --card:rgba(255,255,255,0.04); --border:rgba(0,229,255,0.18);
  --text:#e8eaf0; --muted:rgba(232,234,240,0.42);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;overflow-x:hidden;}

/* INTRO */
#intro{position:fixed;inset:0;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:32px;}
.iline{font-family:'Unbounded',sans-serif;font-weight:900;opacity:0;transform:translateY(40px) scale(.95);letter-spacing:-.02em;text-align:center;pointer-events:none;}
.iline.l1{font-size:clamp(2.5rem,7vw,5.5rem);color:#fff;animation:rvl 1s cubic-bezier(.16,1,.3,1) .3s forwards;}
.iline.l2{font-size:clamp(1rem,2.5vw,1.5rem);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);animation:rvl 1s cubic-bezier(.16,1,.3,1) 1.9s forwards;}
@keyframes rvl{to{opacity:1;transform:translateY(0) scale(1)}}
.ibar{width:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;animation:xbar 1.2s ease 2.8s forwards;max-width:420px;}
@keyframes xbar{to{width:420px;opacity:1}}

/* BG */
#main{opacity:0;transition:opacity .8s ease;min-height:100vh;}
#main.visible{opacity:1;}
.bg-canvas{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(90px);animation:drift linear infinite;opacity:.16;}
.o1{width:520px;height:520px;background:radial-gradient(circle,#00e5ff,transparent 70%);top:-120px;left:-120px;animation-duration:22s;}
.o2{width:420px;height:420px;background:radial-gradient(circle,#7c3aed,transparent 70%);bottom:-60px;right:-60px;animation-duration:18s;animation-delay:-6s;}
.o3{width:320px;height:320px;background:radial-gradient(circle,#00ff88,transparent 70%);top:45%;left:50%;animation-duration:28s;animation-delay:-12s;}
.o4{width:260px;height:260px;background:radial-gradient(circle,#f59e0b,transparent 70%);top:22%;right:18%;animation-duration:20s;animation-delay:-4s;}
@keyframes drift{0%{transform:translate(0,0) scale(1)}25%{transform:translate(40px,-30px) scale(1.1)}50%{transform:translate(-20px,50px) scale(.9)}75%{transform:translate(60px,20px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
.grid-overlay{position:fixed;inset:0;z-index:0;background-image:linear-gradient(rgba(0,229,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;}

/* LAYOUT */
.pw{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding: 20px 20px 80px;}

/* HEADER */
.ph{text-align:center;margin-bottom:56px;opacity:0;transform:translateY(30px);transition:all .9s cubic-bezier(.16,1,.3,1) .1s;}
.ph.show{opacity:1;transform:translateY(0);}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:6px 16px;border-radius:100px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:26px;background:var(--cyan-dim);}
.badge span{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.pt{font-family:'Unbounded',sans-serif;font-size:clamp(1.8rem,5vw,3.6rem);font-weight:900;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px;}
.pt em{color:var(--cyan);font-style:normal;}
.ps{color:var(--muted);font-size:.95rem;max-width:500px;margin:0 auto;line-height:1.75;}

/* SELECTOR */
.sel-section{opacity:0;transform:translateY(24px);transition:all .8s cubic-bezier(.16,1,.3,1) .15s;margin-bottom:44px;}
.sel-section.show{opacity:1;transform:translateY(0);}
.sel-title{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;text-align:center;}
.sel-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.sel-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 20px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);cursor:pointer;transition:all .25s;min-width:88px;
  color:var(--muted);
}
.sel-btn:hover{border-color:var(--cyan);color:var(--text);background:var(--cyan-dim);transform:translateY(-3px);}
.sel-btn.active{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 18px var(--cyan-glow);}
.sname{font-family:'Unbounded',sans-serif;font-size:.9rem;font-weight:700;}
.sdesc{font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.4;text-align:center;}
.sdots{display:flex;gap:3px;align-items:center;justify-content:center;margin-bottom:2px;flex-wrap:wrap;max-width:72px;}
.sdots i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0;}
.sdots i.sub{width:9px;height:9px;background:var(--purple);}
.sdots i.h{background:var(--orange);}

/* STAGE */
.stage-section{opacity:0;transform:translateY(50px);transition:all 1s cubic-bezier(.16,1,.3,1) .2s;}
.stage-section.show{opacity:1;transform:translateY(0);}
.slabel{text-align:center;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:32px;}
.slabel strong{color:var(--cyan);}
.room{position:relative;background:radial-gradient(ellipse at 50% 35%,rgba(0,229,255,.06) 0%,transparent 60%),linear-gradient(180deg,rgba(0,229,255,.03) 0%,rgba(124,58,237,.04) 100%);border:1px solid rgba(0,229,255,.12);border-radius:24px;padding:44px 36px 56px;overflow:hidden;}
.room::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 48%,rgba(0,229,255,.03) 50%,transparent 52%),linear-gradient(to bottom left,transparent 48%,rgba(0,229,255,.03) 50%,transparent 52%);pointer-events:none;}
.screen-bar{width:52%;height:5px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),var(--cyan),rgba(0,229,255,.5),transparent);margin:0 auto 7px;border-radius:4px;box-shadow:0 0 20px var(--cyan-glow),0 0 40px rgba(0,229,255,.15);}
.screen-lbl{text-align:center;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,229,255,.35);margin-bottom:32px;}
.room-inner{transition:opacity .32s ease;}
.room-inner.fade{opacity:0;}

/* rows */
.row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.row.crow{justify-content:center;gap:20px;margin-bottom:28px;}
.row.lrow{justify-content:center;margin:0 0 28px;}
.row.rrow{align-items:flex-end;padding:0 8px;}
.row.hrow{justify-content:space-between;padding:0 4px;margin-bottom:8px;}

/* SPK */
.spk{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;position:relative;transition:transform .2s;user-select:none;-webkit-tap-highlight-color:transparent;}
.spk:hover{transform:scale(1.08);}
.spk:active{transform:scale(.94);}
.si{position:relative;width:68px;height:68px;border-radius:15px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s;}
.spk:hover .si{border-color:var(--cyan);background:var(--cyan-dim);box-shadow:0 0 20px var(--cyan-glow);}
.spk.playing .si{border-color:var(--cyan);background:var(--cyan-dim);animation:pglow .6s ease infinite alternate;}
@keyframes pglow{from{box-shadow:0 0 15px var(--cyan-glow)}to{box-shadow:0 0 40px var(--cyan-glow),0 0 80px rgba(0,229,255,.15)}}
.si svg{width:30px;height:30px;}
.rings{position:absolute;inset:-2px;border-radius:17px;pointer-events:none;}
.ring{position:absolute;inset:0;border-radius:17px;border:2px solid var(--cyan);opacity:0;}
.spk.playing .ring:nth-child(1){animation:xring 1.2s ease infinite;}
.spk.playing .ring:nth-child(2){animation:xring 1.2s ease .4s infinite;}
.spk.playing .ring:nth-child(3){animation:xring 1.2s ease .8s infinite;}
@keyframes xring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.slbl{font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.4;transition:color .3s;}
.spk:hover .slbl,.spk.playing .slbl{color:var(--cyan);}

/* SUB */
.spk.sub .si{width:80px;height:80px;border-radius:50%;border-color:rgba(124,58,237,.4);}
.spk.sub:hover .si,.spk.sub.playing .si{border-color:var(--purple);background:rgba(124,58,237,.15);box-shadow:0 0 28px rgba(124,58,237,.5);}
.spk.sub .rings .ring{border-color:var(--purple);border-radius:50%;}
.spk.sub.playing .si{animation:subpulse .45s ease infinite alternate;}
@keyframes subpulse{from{box-shadow:0 0 20px rgba(124,58,237,.4);transform:scale(1)}to{box-shadow:0 0 60px rgba(124,58,237,.7);transform:scale(1.05)}}
.spk.sub .rings{border-radius:50%;}
.spk.sub .slbl{color:rgba(124,58,237,.6);}
.spk.sub:hover .slbl,.spk.sub.playing .slbl{color:var(--purple);}

/* CENTER */
.spk.center .si{width:96px;height:50px;border-radius:12px;}

/* REAR smaller */
.spk.rear .si{width:56px;height:56px;border-radius:12px;}

/* HEIGHT */
.spk.height .si{width:54px;height:54px;border-radius:12px;border-color:rgba(245,158,11,.35);}
.spk.height:hover .si,.spk.height.playing .si{border-color:var(--orange);background:rgba(245,158,11,.12);box-shadow:0 0 22px rgba(245,158,11,.45);}
.spk.height.playing .si{animation:hpulse .6s ease infinite alternate;}
@keyframes hpulse{from{box-shadow:0 0 12px rgba(245,158,11,.4)}to{box-shadow:0 0 36px rgba(245,158,11,.7)}}
.spk.height .rings .ring{border-color:var(--orange);}
.spk.height .slbl{color:rgba(245,158,11,.5);}
.spk.height:hover .slbl,.spk.height.playing .slbl{color:var(--orange);}
.hbadge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);}

/* WAVE */
.wv{display:flex;align-items:flex-end;gap:2px;height:14px;opacity:0;transition:opacity .3s;justify-content:center;}
.spk.playing .wv{opacity:1;}
.wb{width:3px;background:var(--cyan);border-radius:2px;animation:wbounce .5s ease infinite alternate;}
.spk.sub.playing .wb{background:var(--purple);}
.spk.height.playing .wb{background:var(--orange);}
.wb:nth-child(1){height:4px;animation-delay:0s}
.wb:nth-child(2){height:10px;animation-delay:.1s}
.wb:nth-child(3){height:14px;animation-delay:.05s}
.wb:nth-child(4){height:8px;animation-delay:.15s}
.wb:nth-child(5){height:11px;animation-delay:.07s}
@keyframes wbounce{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* LISTENER */
.listener{display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.4;}
.lc{width:46px;height:46px;border-radius:50%;border:1px dashed rgba(0,229,255,.28);display:flex;align-items:center;justify-content:center;}
.listener span{font-size:.57rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

/* WARNING */
.vwarn{display:flex;align-items:center;gap:12px;padding:13px 18px;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);border-radius:12px;margin-bottom:32px;font-size:.8rem;color:rgba(245,158,11,.82);opacity:0;transition:opacity .6s .5s;}
.vwarn.show{opacity:1;}
.vwarn svg{flex-shrink:0;width:17px;height:17px;}

/* BUTTONS */
.btns-wrap{text-align:center;margin-top:44px;opacity:0;transform:translateY(20px);transition:all .8s ease .5s;}
.btns-wrap.show{opacity:1;transform:translateY(0);}
.btn-main{display:inline-flex;align-items:center;gap:11px;padding:17px 44px;background:linear-gradient(135deg,var(--cyan),#0080ff);border:none;border-radius:100px;color:#000;font-family:'Unbounded',sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 30px rgba(0,229,255,.28);transition:all .3s;position:relative;overflow:hidden;}
.btn-main::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent);opacity:0;transition:opacity .3s;}
.btn-main:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(0,229,255,.5),0 10px 40px rgba(0,0,0,.4);}
.btn-main:hover::after{opacity:1;}
.btn-reset{display:inline-flex;align-items:center;gap:7px;padding:13px 28px;background:transparent;border:1px solid var(--border);border-radius:100px;color:var(--muted);font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:all .3s;margin-left:14px;}
.btn-reset:hover{border-color:var(--cyan);color:var(--cyan);}

/* RESULT */
.rp{margin-top:44px;padding:24px 30px;background:var(--card);border:1px solid var(--border);border-radius:20px;opacity:0;transition:opacity .6s;display:flex;gap:26px;flex-wrap:wrap;align-items:center;}
.rp.show{opacity:1;}
.ri{display:flex;flex-direction:column;gap:4px;}
.rk{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.rv{font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:700;color:var(--cyan);}
.rv.ok{color:var(--green);}
.rv.warn{color:var(--orange);}
.rdiv{width:1px;height:38px;background:var(--border);}

/* INFO */
.info-section{margin-top:72px;opacity:0;transform:translateY(28px);transition:all .9s ease .3s;}
.info-section.show{opacity:1;transform:translateY(0);}
.sec-title{font-family:'Unbounded',sans-serif;font-size:1.3rem;font-weight:700;margin-bottom:26px;letter-spacing:-.02em;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px;}
.card{padding:24px;background:var(--card);border:1px solid var(--border);border-radius:16px;transition:all .3s;}
.card:hover{border-color:rgba(0,229,255,.28);background:rgba(0,229,255,.04);transform:translateY(-4px);}
.ci{width:40px;height:40px;border-radius:11px;background:var(--cyan-dim);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.ci svg{width:20px;height:20px;color:var(--cyan);}
.ct{font-size:.88rem;font-weight:600;margin-bottom:7px;}
.cx{font-size:.78rem;color:var(--muted);line-height:1.6;}

footer{text-align:center;margin-top:72px;padding-top:26px;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted);}

@media(max-width:600px){
  .si{width:52px!important;height:52px!important;}
  .spk.sub .si{width:62px!important;height:62px!important;}
  .spk.center .si{width:76px!important;height:42px!important;}
  .room{padding:26px 10px 36px;}
  .sel-btn{min-width:74px;padding:10px 10px;}
  .row.rrow{padding:0;}
}
header {
    fill: #9d9dab;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--border);
    background: var(--card);
    padding: 15px 25px;
    border-radius: 14px;
    margin-bottom: 35px;
    align-items: center;
}

.menu-header svg {
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all .25s;
}
.menu-header svg:hover {
    color: var(--text);
    transform: translateY(-3px);
}
.menuburger-header {
    position: absolute;
    right: 20px;
    border: 1px solid #00e5ff2e;
    background: #0b0c11fa;
    width: 400px;
    height: 400px;
    z-index: 9999;
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 25px;
    display: none;
    margin-top: 35px;
}
.menuburger-header.active {display: block;}

.menuburger-block {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: .2s;
    padding: 10px;
    border-radius: 10px;
    border: solid 1px #363a4285;
    color: white;
    text-decoration: none;
}

.menuburger-block svg {
    fill: #00e5ffd1;
}

.menuburger-block:hover {transform: scale(1.01);transition: .2s;text-decoration: underline;}
.menuburger-blocks {
    display: flex;
    margin: 29px 0;
}

.phead {
    text-align: left;
    color: #afb7c9;
}
a {
    text-decoration: none;
}
.logo img {
    width: 8%;
}

div#btn-abs {
    line-height: 0;
}
.language-switcher a.active {
    font-weight: 700;
    background: #4b6da5;
}

.language-switcher a {
    color: #ffffff;
    background: #2b4068;
    padding: 4px 7px;
    border-radius: 10px;
    font-size: 13px;
    transition: .2s;
}
.lang {
    color: white;
    font-size: 13px;
    padding: 4px 20px;
    border-radius: 10px;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    margin-bottom: 25px;
}

.language-switcher a:hover {
 transform: scale(1.03);
 transition: .2s;
}