:root{
  --bg:#020d22;
  --bg2:#031a3c;
  --blue:#1385ff;
  --cyan:#00b7ff;
  --line:rgba(40,139,255,.45);
  --white:#f8fbff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:"Vazirmatn",sans-serif;background:radial-gradient(circle at 50% 40%,#082858 0,#031a3c 30%,#020d22 72%,#010714 100%);color:var(--white)}
body{overflow:hidden}
.page-shell{width:100%;height:100svh;padding:10px}
.hero{position:relative;width:100%;height:calc(100svh - 20px);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 16px;overflow:hidden;box-shadow:inset 0 0 46px rgba(0,90,255,.07)}
.hero:before,.hero:after{content:"";position:absolute;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan)}
.hero:before{top:0}.hero:after{bottom:0}

.logo-orbit{position:relative;width:min(24vw,280px);aspect-ratio:1;display:grid;place-items:center;margin:0 0 4px;z-index:2}
.logo-card{width:60%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(40,139,255,.82);box-shadow:0 0 24px rgba(0,145,255,.4);background:#03152f;display:grid;place-items:center}
.logo-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.orbit{position:absolute;border:2px solid rgba(35,132,255,.5);border-top-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:pulse 2.4s ease-in-out infinite}
.orbit-1{inset:8%}.orbit-2{inset:-3%;animation-delay:.35s}.orbit-3{inset:-14%;animation-delay:.7s}
@keyframes pulse{50%{transform:scale(1.035);opacity:.4}}

h1{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.2;margin:0;font-weight:800;text-shadow:0 4px 20px rgba(0,0,0,.7);z-index:2}
.brand-title{letter-spacing:-.025em}
.brand-radio{color:#f8fbff}
.brand-sun{color:#ff9f2f;text-shadow:0 0 18px rgba(255,159,47,.22),0 4px 20px rgba(0,0,0,.7)}
.brand-en{z-index:2;margin:2px 0 0;font-size:clamp(.66rem,1vw,.82rem);font-weight:700;letter-spacing:.18em;color:#a9c9ee}
.brand-en span{color:#ffb14d}
.tagline{font-size:clamp(.92rem,1.4vw,1.15rem);margin:2px 0 12px;color:#eaf2ff;z-index:2}
.live-label em{font-style:normal;color:#ff3b3b;text-shadow:0 0 12px rgba(255,59,59,.45)}
.live-button{border:1px solid var(--cyan);background:linear-gradient(180deg,rgba(6,44,99,.95),rgba(2,18,49,.96));color:#fff;min-width:min(78vw,430px);height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:16px;font:600 clamp(1rem,1.6vw,1.25rem) "Vazirmatn";cursor:pointer;box-shadow:0 0 16px rgba(0,174,255,.38),inset 0 0 20px rgba(0,134,255,.12);transition:.25s;z-index:2}
.live-button:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 0 28px rgba(0,174,255,.62)}
.live-button[aria-pressed="true"]{border-color:rgba(255,70,70,.8);box-shadow:0 0 22px rgba(255,50,50,.22),inset 0 0 20px rgba(255,50,50,.08)}
.live-button[aria-pressed="true"] .live-label{color:#fff}
.live-button[aria-pressed="true"] .live-label::first-letter{color:inherit}
.live-button i{width:36px;height:36px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-items:center}
.status{height:18px;margin:5px 0 9px;font-size:.74rem;color:#8fb8ea;z-index:2}
.mini-bars{direction:ltr;display:flex;align-items:flex-end;gap:4px;height:26px}.mini-bars b{width:4px;background:linear-gradient(#00c9ff,#006cff);border-radius:5px;animation:bars .8s ease-in-out infinite alternate}.mini-bars b:nth-child(1){height:9px}.mini-bars b:nth-child(2){height:18px;animation-delay:.2s}.mini-bars b:nth-child(3){height:25px;animation-delay:.4s}.mini-bars b:nth-child(4){height:14px;animation-delay:.1s}@keyframes bars{to{height:7px}}

.socials{display:flex;flex-wrap:nowrap;justify-content:center;gap:12px;z-index:4}
.socials a{position:relative;width:66px;color:#fff;text-decoration:none;text-align:center;transition:transform .22s ease,color .22s ease;outline:none}

.socials a::before{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,8px) scale(.96);width:max-content;max-width:220px;padding:9px 12px;border:1px solid rgba(160,214,255,.28);border-radius:12px;background:linear-gradient(135deg,rgba(11,35,72,.78),rgba(3,18,47,.62));backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);box-shadow:0 10px 34px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.12);color:#f7fbff;font-size:.72rem;line-height:1.55;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;z-index:20}
.socials a::after{content:"";position:absolute;left:50%;bottom:calc(100% + 8px);width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:rgba(7,27,59,.84);border-right:1px solid rgba(160,214,255,.22);border-bottom:1px solid rgba(160,214,255,.22);opacity:0;visibility:hidden;transition:.22s;z-index:19}
.socials a:hover::before,.socials a:focus-visible::before{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.socials a:hover::after,.socials a:focus-visible::after{opacity:1;visibility:visible}

.socials i{width:48px;height:48px;border:1px solid rgba(34,130,255,.72);border-radius:50%;display:grid;place-items:center;margin:auto;font-size:22px;background:rgba(4,24,57,.78);box-shadow:0 0 12px rgba(0,115,255,.16);transition:color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;color:#fff}
.socials span{display:block;font-size:.66rem;margin-top:5px;color:#d9e9ff;transition:color .22s ease}
.socials a:hover{transform:translateY(-5px) scale(1.06)}
.socials a:hover i{transform:scale(1.08);background:#fff;border-color:#fff}
.socials a:nth-child(1):hover i{color:#E4405F;box-shadow:0 0 24px rgba(228,64,95,.7)}
.socials a:nth-child(2):hover i{color:#229ED9;box-shadow:0 0 24px rgba(34,158,217,.7)}
.socials a:nth-child(3):hover i{color:#1877F2;box-shadow:0 0 24px rgba(24,119,242,.7)}
.socials a:nth-child(4):hover i{color:#FF0000;box-shadow:0 0 24px rgba(255,0,0,.65)}
.socials a:nth-child(5):hover i{color:#111;box-shadow:0 0 24px rgba(255,255,255,.55)}
.socials a:nth-child(6):hover i{color:#25D366;box-shadow:0 0 24px rgba(37,211,102,.65)}
.socials a:nth-child(7):hover i{color:#111;box-shadow:0 0 24px rgba(255,255,255,.55)}

.app-button{margin-top:12px;border:0;font-family:"Vazirmatn",sans-serif;cursor:pointer;min-width:min(78vw,470px);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;border:1px solid rgba(0,183,255,.85);border-radius:15px;color:white;text-decoration:none;background:rgba(2,20,52,.9);box-shadow:0 0 16px rgba(0,134,255,.22);z-index:2}
.app-button strong,.app-button small{display:block}.app-button strong{font-size:.9rem}.app-button small{font-size:.68rem;color:#b8d2f5}.app-icon{width:42px;height:42px;border-radius:11px;background:linear-gradient(145deg,#06448a,#031532);display:grid;place-items:center;font-size:20px}.stores{display:flex;gap:10px;font-size:24px}.app-button:hover{transform:translateY(-2px);box-shadow:0 0 25px rgba(0,160,255,.34);background:rgba(5,29,67,.94)}

.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,7,22,.48);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:100;opacity:0;transition:opacity .28s ease}
.modal-backdrop.is-open{opacity:1}
.modal-backdrop[hidden]{display:none}
.glass-modal{position:relative;width:min(92vw,430px);padding:34px 28px 28px;text-align:center;border:1px solid rgba(137,207,255,.34);border-radius:24px;background:linear-gradient(145deg,rgba(12,43,86,.74),rgba(2,17,45,.7));backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 35px rgba(0,140,255,.18),inset 0 1px rgba(255,255,255,.13);transform:translateY(18px) scale(.96);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.modal-backdrop.is-open .glass-modal{transform:translateY(0) scale(1);opacity:1}
.modal-close{position:absolute;top:12px;left:12px;width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;font-size:16px}
.modal-close:hover{background:rgba(255,255,255,.14)}
.modal-symbol{width:68px;height:68px;margin:0 auto 15px;border-radius:20px;display:grid;place-items:center;font-size:28px;color:#71c7ff;border:1px solid rgba(80,180,255,.45);background:rgba(0,103,220,.12);box-shadow:0 0 25px rgba(0,145,255,.18)}
.modal-symbol i{animation:modalSpin 3s linear infinite}
@keyframes modalSpin{to{transform:rotate(360deg)}}
.glass-modal h2{font-size:1.35rem;margin:0 0 10px}.glass-modal p{font-size:1.03rem;margin:0 0 7px;color:#fff}.glass-modal small{color:#b8d3f3;font-size:.78rem}
body.modal-open{overflow:hidden}

.equalizer{position:absolute;top:50%;translate:0 -50%;width:32%;height:118px;opacity:.52;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,112,255,.95) 7px 10px);mask-image:linear-gradient(to bottom,transparent 0,black 22%,black 78%,transparent 100%);clip-path:polygon(0 44%,5% 31%,10% 55%,15% 18%,20% 66%,25% 36%,30% 74%,35% 16%,40% 60%,45% 29%,50% 70%,55% 20%,60% 61%,65% 33%,70% 72%,75% 28%,80% 62%,85% 20%,90% 54%,95% 32%,100% 46%,100% 54%,95% 68%,90% 46%,85% 80%,80% 38%,75% 72%,70% 28%,65% 67%,60% 39%,55% 80%,50% 30%,45% 71%,40% 40%,35% 84%,30% 26%,25% 64%,20% 34%,15% 82%,10% 44%,5% 70%,0 56%);z-index:0}
.equalizer-left{left:0}.equalizer-right{right:0;transform:scaleX(-1)}

@media(max-width:820px){
  .socials a::before{max-width:175px;font-size:.66rem;bottom:calc(100% + 12px)}
  body{overflow:auto}
  .page-shell{min-height:100svh;height:auto;padding:7px}
  .hero{min-height:calc(100svh - 14px);height:auto;border-radius:18px;padding:18px 8px}
  .logo-orbit{width:min(54vw,240px)}
  .equalizer{top:31%;width:26%;height:90px;opacity:.28}
  .socials{flex-wrap:wrap;gap:8px;max-width:430px}
  .socials a{width:58px}.socials i{width:44px;height:44px;font-size:20px}.socials span{font-size:.61rem}
  .live-button{min-width:min(90vw,420px);height:54px}
  .app-button{min-width:min(90vw,450px)}
}
@media(max-height:760px) and (min-width:821px){
  .logo-orbit{width:min(20vw,210px)}
  h1{font-size:clamp(1.45rem,2.5vw,2.2rem)}
  .tagline{margin-bottom:8px}
  .live-button{height:52px}
  .socials i{width:44px;height:44px;font-size:20px}
  .app-button{margin-top:9px;padding:7px 12px}
}