/* Compact header inspired by Sol FM's structure; Permyak brand palette. */
html{scroll-padding-top:150px}
.header{position:sticky;top:0;z-index:20;background:linear-gradient(115deg,#3b0b3df5,#591b50f5 65%,#73334df5);color:#fffcdd;box-shadow:0 6px 28px #3b0b3d30;backdrop-filter:blur(18px);border-top:3px solid #ff9023}
.header-inner{max-width:1320px;min-height:88px;padding:10px 28px;display:grid;grid-template-columns:minmax(205px,1fr) auto minmax(205px,1fr);gap:24px}
.brand{display:flex;flex-direction:row;align-items:center;gap:12px;transform:none;min-width:0}
.brand .brand-picture{position:relative;display:block;width:78px;height:48px;margin:0;flex-shrink:0}
.brand-picture img{position:absolute;width:100%;height:auto;top:50%;left:0;transform:translateY(-50%);filter:drop-shadow(0 2px 5px #17051d50)}
.brand .brand-text{display:flex;flex-direction:column;gap:6px;margin:0;letter-spacing:0;line-height:1.1}
.brand-text strong{font-size:17px;font-weight:800;white-space:nowrap}
.brand-text small{font-size:9px;letter-spacing:2px;color:#ffc954}
.player{flex:none;display:flex;justify-content:center;gap:14px;padding:9px 12px;border:1px solid #ffd57335;border-radius:17px;background:#260b2e80;box-shadow:inset 0 1px #fff1;min-width:0}
.play{border-radius:11px;background:linear-gradient(120deg,#ffd33d,#ff9b21 65%,#ff7320);color:#46112d;min-width:144px;min-height:42px;padding:12px 16px;font-size:12px;box-shadow:0 4px 15px #ff8a1625}
.play:hover{background:linear-gradient(120deg,#ffdf63,#ffad35);box-shadow:0 5px 20px #ff8a1645}
#play-label{white-space:nowrap}.quality{gap:4px}.quality>span{font-size:8px;letter-spacing:1.2px;color:#eacedd;opacity:1}.quality select{color:#fff1cf;max-width:none;font-size:11px;padding-right:10px}.quality option{background:#431446;color:#fffcdd}
.volume{gap:6px;color:#ffd373}.volume input{width:66px;accent-color:#ffbc30}.volume svg{width:17px}.volume output{font-size:9px;width:26px;color:#eacedd}
.header-nav{justify-self:end;display:flex;align-items:center;gap:18px;font-size:11px;white-space:nowrap}.header-nav a{padding:10px 0;color:#f9e6d9;transition:color .2s}.header-nav a:hover{color:#ffc80b}.header-nav span{color:#ffb32e;margin-left:3px}
.on-air{background:#fffae9;border-top:1px solid #ffc96035;color:#4b1749}.on-air-inner{max-width:1264px;padding:10px 0;min-height:38px;gap:20px}.live{font-weight:700;font-size:8px;letter-spacing:1.3px}.live i{background:#ef6920;box-shadow:0 0 0 3px #ef692015}#track{font-weight:700;font-size:11px}#status{color:#815b77;font-size:9px}
.hero h1{color:#531346;text-shadow:2px 3px #fffcdd}.frequency strong{color:#6a245c}.contact-section{background:linear-gradient(120deg,#411044,#5b1a4a)}.contact-intro h2 span{color:#ffb62d}.email{color:#ffbd43}
@media(max-width:1200px){.header-inner{gap:16px;padding:10px 22px;grid-template-columns:minmax(190px,1fr) auto}.header-nav{display:none}.on-air-inner{padding:10px 24px}.player{justify-self:end}}
@media(max-width:760px){html{scroll-padding-top:200px}.header-inner{grid-template-columns:1fr;gap:12px;padding:13px 16px;min-height:0}.brand{justify-content:center;gap:10px}.brand .brand-picture{width:65px;height:34px}.brand-text strong{font-size:16px}.brand-text small{font-size:8px}.player{order:initial;width:100%;justify-self:stretch;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:14px}.play{min-width:122px;padding:12px 10px;font-size:11px}.quality select{font-size:10px;max-width:105px}.volume input{width:45px}.volume output{display:none}.volume svg{width:16px}.on-air-inner{gap:10px;padding:9px 16px;flex-wrap:wrap}.live{font-size:7px;letter-spacing:.8px}#track{font-size:10px}#status{font-size:8px;flex-basis:100%}.hero{padding-top:12px}.logo-wrap{height:245px}}
@media(max-width:370px){.player{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quality{justify-self:center}.volume{grid-column:1/-1;justify-content:center}.volume input{width:130px}.volume output{display:block}.play{min-width:0}.header-inner{padding:10px 12px;gap:9px}html{scroll-padding-top:225px}}
@media(max-height:500px) and (orientation:landscape){.header{position:relative}html{scroll-padding-top:20px}}
/* Hero and frequency panels: the same diagonal rhythm as the background. */
.hero{max-width:1240px;margin:0 auto;min-height:610px;padding:75px 30px 48px;display:grid;grid-template-columns:1fr 1.18fr;grid-template-rows:1fr auto;column-gap:35px;text-align:left;align-items:center}
.hero .logo-wrap{grid-column:2;grid-row:1;width:100%;height:350px;isolation:isolate;filter:drop-shadow(0 16px 20px #5a173535);animation:float 6s ease-in-out infinite}
.logo-wrap::before{content:'';position:absolute;inset:12% -3%;z-index:-1;background:radial-gradient(ellipse,#fff1a7aa 0%,#ffb51d77 38%,#ff631d25 60%,transparent 74%);filter:blur(22px);transform:rotate(-12deg);animation:brandGlow 5s ease-in-out infinite}
.hero h1{grid-column:1;grid-row:1;justify-self:center;font-size:clamp(64px,7.2vw,100px);line-height:1.08;letter-spacing:-5px;color:#fff8d9;text-shadow:3px 4px 0 #581143,-2px -2px 0 #581143,0 8px 22px #3b0b3d30;animation:heroSlogan 7s ease-in-out infinite}
.hero .discover{grid-column:1/-1;justify-self:center;margin-top:30px}
@keyframes brandGlow{50%{opacity:.65;transform:rotate(-8deg) scale(1.09)}}
@keyframes heroSlogan{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-6px)}}
.cities{position:relative;isolation:isolate;overflow:hidden;background:#fffae5;padding:44px 44px 40px;border-radius:0;border-top:5px solid #ff9922;box-shadow:0 18px 48px #3b0b3d25}
.cities::before{content:'';position:absolute;right:-70px;top:-100px;width:250px;height:650px;background:repeating-linear-gradient(90deg,transparent 0 17px,#e9ab4122 17px 23px);transform:skew(33.75deg);z-index:-1;pointer-events:none}
.section-heading{padding-bottom:30px}.section-heading h2{font-size:40px;font-weight:900;font-style:italic;letter-spacing:-1.5px}
.frequencies{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;border:0}
.frequency,.frequency:not(:nth-child(4n+1)){position:relative;isolation:isolate;overflow:hidden;border:0;padding:24px 20px;gap:15px;background:linear-gradient(125deg,#47114a,#65265d);color:#fff9db;box-shadow:0 6px 15px #45104417;min-height:133px}
.frequency::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(56.25deg,transparent 0 72%,#883b8b 72% 79%,#ffc80b 79% 83%,#ff9320 83% 100%);opacity:.9}
.frequency::after{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:#ffaf28}
.frequency strong{color:#ffd14e;font-size:41px;font-weight:700}.frequency small{color:#fffae4;opacity:.85;font-size:10px}.city{font-size:12px;position:relative;z-index:1}.frequency .city em{border-color:#ffdd9e80;color:#ffefc2;background:#45104499}
.frequency.soon{opacity:1;background:#765273}.frequency.soon::before{opacity:.3}.frequency.soon strong{color:#f6ddb3}
.contacts .contact-value{display:flex;flex-direction:column;gap:9px}.contacts .contact-value small{margin:0;font-size:11px;font-weight:400;color:#e8cadd;letter-spacing:.2px}
@media(max-width:1000px){.hero{column-gap:20px;padding-left:28px;padding-right:28px}.hero h1{font-size:72px}.hero .logo-wrap{height:300px}.frequencies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hero{min-height:560px;padding:38px 20px 36px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:10px}.hero h1{grid-column:1;grid-row:1;font-size:61px;letter-spacing:-3px;text-align:center;line-height:1}.hero h1 br{display:none}.hero h1 span{white-space:nowrap}.hero .logo-wrap{grid-column:1;grid-row:2;width:min(460px,100%);justify-self:center;height:240px}.hero .discover{grid-row:3;margin-top:12px}.cities{padding:30px 20px}.section-heading h2{font-size:31px}.frequencies{gap:10px}.frequency,.frequency:not(:nth-child(4n+1)),.frequency:nth-child(even){padding:20px 12px;border:0;min-height:124px}.city{font-size:11px;min-height:26px;align-items:start}.frequency strong{font-size:32px}.frequency::before{background:linear-gradient(56.25deg,transparent 0 78%,#883b8b 78% 84%,#ffb524 84% 89%,#f78620 89% 100%)}.contacts .contact-value small{font-size:10px}}
@media(max-width:370px){.hero h1{font-size:52px}.hero .logo-wrap{height:205px}.hero{min-height:480px}.cities{padding:28px 16px}.frequency strong{font-size:29px}.section-heading h2{font-size:28px}}

@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}.hero h1{min-width:0;max-width:100%;font-size:58px}.hero h1 br{display:block}.hero .logo-wrap{min-width:0;max-width:100%}.hero{padding-top:30px}.hero .discover{margin-top:8px}}
@media(max-width:370px){.hero h1{font-size:50px}}

/* Keep the advertising section reachable from the mobile header. */
@media(max-width:1200px){.header-nav{display:flex;grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:center;gap:clamp(18px,4vw,42px);padding:1px 0 7px;border-top:1px solid #ffd57335}.header-nav a{padding:7px 4px;color:#fff0cf}}
@media(max-width:760px){.header-nav{grid-row:3;margin-top:1px;padding:2px 0 0;gap:clamp(14px,6vw,30px);font-size:11px}.header-inner{gap:8px}.header-nav a:last-child{color:#ffd05c;font-weight:700}}
@media(max-width:420px){.hero h1{font-size:clamp(44px,12vw,52px)}.frequency strong{font-size:clamp(25px,8vw,31px)}}