@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@400;600;800&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0b0402;color:#fff2cf;font-family:Inter,Arial,sans-serif}

.menu{position:fixed;top:0;left:0;right:0;z-index:50;min-height:76px;padding:10px clamp(10px,4vw,70px);display:grid;grid-template-columns:64px repeat(4,1fr);gap:14px;background:rgba(12,5,2,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(217,165,70,.55)}
.mini-logo{width:58px;height:58px;object-fit:cover;border-radius:50%;align-self:center;justify-self:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.btn{display:grid;place-items:center;min-height:54px;padding:12px;border-radius:10px;border:1px solid rgba(255,226,160,.65);color:#fff2cf;text-decoration:none;font-family:"Libre Baskerville",serif;font-weight:700;text-transform:uppercase;box-shadow:0 8px 22px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.15);transition:.25s}
.btn:hover{transform:translateY(-3px);filter:brightness(1.15)}
.b1{background:linear-gradient(#8b241d,#52100c)}
.b2{background:linear-gradient(#714319,#3c210a)}
.b3{background:linear-gradient(#0b572b,#062c18)}
.b4{background:linear-gradient(#164b86,#0c2849)}

.hero-logo{
    width: min(420px, 85vw);
    display: block;
    margin: 0 auto 20px;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,.45));
    animation: float 5s ease-in-out infinite;
}

.hero{position:relative;min-height:100vh;padding:85px 20px 70px;display:grid;place-items:start center;overflow:hidden;isolation:isolate;background:linear-gradient(#351405,#a85a1a 42%,#1b0c04 43%,#0b0402 100%)}
.hero:before{content:"";position:absolute;inset:0;z-index:-4;background:radial-gradient(circle at 22% 33%,#fff0a3 0 32px,#ffaf3d 33px 62px,transparent 64px),radial-gradient(ellipse at 50% 24%,rgba(255,178,58,.50),transparent 42%),repeating-linear-gradient(170deg,transparent 0 42px,rgba(70,35,11,.35) 43px 46px),linear-gradient(180deg,#44200b 0%,#b86720 38%,#2b1206 70%,#100602 100%)}
.hero:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-12%;height:48%;z-index:-3;background:radial-gradient(ellipse at 50% 15%,rgba(7,3,1,.85) 0 35%,transparent 36%),linear-gradient(180deg,rgba(40,18,5,.7),#090302);border-radius:50% 50% 0 0 / 20% 20% 0 0}
.sun{position:absolute;top:210px;left:18%;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle,#fff1aa,#f7a326 45%,transparent 72%);filter:blur(2px);opacity:.8}
.fence{position:absolute;left:0;right:0;bottom:95px;height:65px;z-index:-1;opacity:.65;background:linear-gradient(90deg,transparent 0 12%,#4a2b12 12.5% 13.4%,transparent 13.8% 25%,#4a2b12 25.5% 26.4%,transparent 26.8% 73%,#4a2b12 73.5% 74.4%,transparent 74.8% 86%,#4a2b12 86.5% 87.4%,transparent 87.8%),linear-gradient(0deg,transparent 42%,#6c3d18 45% 52%,transparent 55%)}

.center{width:min(920px,100%);text-align:center;position:relative;z-index:5;margin-top:10px}
h1,h2,h3{font-family:"Libre Baskerville",Georgia,serif}
h1{margin:0;font-size:clamp(42px,6vw,76px);line-height:.98;text-transform:uppercase;color:#ffe7a5;text-shadow:0 5px 0 rgba(0,0,0,.45),0 16px 35px #000}
h2{margin:2px 0;font-size:clamp(34px,4vw,54px);color:#d9a546;text-shadow:0 8px 22px #000}
.slogan{margin:4px 0;font-family:"Libre Baskerville",serif;font-style:italic;font-size:clamp(25px,3vw,38px);color:#fff;text-shadow:0 8px 18px #000}
.place{margin:5px 0 10px;color:#ffe7a5;font-weight:800;text-shadow:0 4px 12px #000}

.player{width:min(720px,100%);margin:-4px auto 0;padding:18px 24px 20px;border-radius:18px;border:1px solid rgba(255,230,170,.7);background:radial-gradient(circle at 50% 0%,rgba(255,201,98,.18),transparent 48%),linear-gradient(180deg,rgba(45,20,7,.92),rgba(10,4,2,.94));box-shadow:0 18px 45px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.05)}
.live{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 18px;border-radius:999px;background:linear-gradient(#b7291d,#61120c);color:white;font-weight:800;letter-spacing:1px}
.live span{width:10px;height:10px;border-radius:50%;background:#ff2b1d;box-shadow:0 0 18px #ff2b1d;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.22}}
.player h3{margin:0;color:#ffe7a5;font-size:24px}
.player p{margin:4px 0 12px;color:#d8c5a2}

.play-button{width:min(430px,100%);min-height:78px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:16px;border:2px solid #f0c56d;border-radius:999px;cursor:pointer;color:#2b1004;background:linear-gradient(180deg,#ffe7a5,#d9a546);box-shadow:0 14px 32px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.55);font-size:24px;font-family:"Libre Baskerville",serif;font-weight:700;transition:.2s ease}
.play-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.play-button span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(#b7291d,#61120c);box-shadow:0 5px 14px rgba(0,0,0,.35);padding-left:3px}
.play-button.playing{background:linear-gradient(180deg,#b7291d,#61120c);color:#fff2cf;border-color:#ffe7a5}
.play-button.playing span{background:#2b1004}

.eq{height:34px;margin:5px auto 8px;display:flex;align-items:end;justify-content:center;gap:6px}
.eq i{width:9px;height:12px;border-radius:8px 8px 0 0;background:linear-gradient(#ffe08a,#df8b20);animation:eq .95s ease-in-out infinite}
.eq i:nth-child(2n){animation-delay:.12s}.eq i:nth-child(3n){animation-delay:.23s}.eq i:nth-child(4n){animation-delay:.34s}
@keyframes eq{0%,100%{height:10px}50%{height:32px}}
audio{display:none}
.volume-row{width:min(430px,100%);margin:0 auto;display:flex;align-items:center;gap:12px}
.volume-row input{width:100%;accent-color:#d9a546}
.player small{display:block;margin-top:8px;color:#d8c5a2}

.decor{position:absolute;z-index:3;bottom:80px;font-size:clamp(82px,10vw,150px);filter:drop-shadow(0 16px 20px rgba(0,0,0,.55));opacity:.85}
.left{left:8%;transform:rotate(-8deg)}.right{right:8%;transform:rotate(12deg)}
.mate{position:absolute;z-index:4;right:20%;bottom:38px;font-size:clamp(52px,6vw,82px);filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}

.logo-section{max-width:1180px;margin:40px auto 50px;padding:24px 30px;display:flex;align-items:center;gap:28px;border-radius:18px;border:1px solid rgba(217,165,70,.55);background:linear-gradient(90deg,rgba(46,22,8,.96),rgba(14,6,3,.96));box-shadow:0 18px 40px rgba(0,0,0,.42)}
.logo-section img{width:170px;border-radius:8px;box-shadow:0 12px 26px rgba(0,0,0,.4)}
.logo-section h3{margin:0 0 8px;color:#ffe7a5;font-size:30px}
.logo-section p{margin:0;color:#d8c5a2;line-height:1.6}
.cards{max-width:1180px;margin:50px auto;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cards article,.about{padding:28px;border-radius:18px;border:1px solid rgba(217,165,70,.55);background:radial-gradient(circle at 50% 0%,rgba(255,205,100,.12),transparent 50%),linear-gradient(180deg,rgba(46,22,8,.95),rgba(14,6,3,.96));box-shadow:0 18px 40px rgba(0,0,0,.42)}
.cards h3,.about h3{margin:0 0 12px;color:#ffe7a5;font-size:30px}
.cards p,.about p{color:#d8c5a2;line-height:1.65}
.cards a{display:inline-flex;margin-top:8px;padding:13px 18px;border-radius:10px;background:linear-gradient(#0d622f,#063719);color:white;text-decoration:none;font-weight:800}
.icons{margin-top:18px;font-size:36px;letter-spacing:8px}
.cards b{color:#d9a546}
.about{max-width:1180px;margin:0 auto 60px}
.float{position:fixed;right:22px;bottom:22px;z-index:80;padding:15px 22px;border-radius:999px;color:white;text-decoration:none;background:linear-gradient(#1cac4f,#087033);font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.45)}
footer{padding:25px 20px;text-align:center;color:#d8c5a2;background:#080302;border-top:1px solid rgba(217,165,70,.4)}

@media(max-width:950px){.menu{position:static;grid-template-columns:repeat(2,1fr)}.mini-logo{display:none}.hero{padding-top:45px;min-height:auto}.center{margin-top:0}.cards{grid-template-columns:1fr}.logo-section{margin:30px 20px;flex-direction:column;text-align:center}.left{left:-20px;opacity:.35}.right{right:-20px;opacity:.35}}
@media(max-width:600px){.menu{grid-template-columns:1fr;gap:10px}.hero{padding-bottom:60px}.player{padding:16px}.play-button{min-height:70px;font-size:19px}.decor,.mate{display:none}}