@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Barlow+Condensed:ital,wght@0,700;0,900;1,700;1,900&family=Inter:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#FF5806;
  --bg:#0d0d0d;
  --bg2:#141414;
  --bg3:#1a1a1a;
  --border:rgba(255,255,255,0.08);
  --dim:rgba(255,255,255,0.5);
  --muted:rgba(255,255,255,0.3);
}
html{
    scroll-behavior:smooth;
    height:100%;
}

body{
    background:var(--bg);
    color:#fff;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;

    min-height:100vh;
}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1360px;margin:0 auto;padding:0 20px;
  min-height:72px;display:flex;align-items:center;gap:20px;
}
.logo{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex-shrink:0;
}
.logo img{
  display:block;
  height:74px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  padding: 5px;
}
.logo-top{font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;color:#fff;letter-spacing:2px}
.logo-bot{font-family:'Oswald',sans-serif;font-weight:700;font-size:18px;color:var(--orange);letter-spacing:2px}
.nav-links{display:flex;list-style:none;gap:2px;flex:1}
.nav-links a{
  font-size:12px;font-weight:600;letter-spacing:0.8px;color:var(--dim);
  text-decoration:none;padding:6px 10px;border-radius:4px;transition:color .2s;white-space:nowrap
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--orange)}
.nav-socials{display:flex;gap:6px;align-items:center}
.soc{
  width:32px;height:32px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;color:#fff;text-decoration:none;transition:opacity .2s;flex-shrink:0
}
.soc:hover{opacity:.8}
.soc.yt{background:#FF0000}
.soc.sp{background:#1DB954}
.soc.ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.soc.fb{background:#1877F2}
.lang-wrap{position:relative;flex-shrink:0}
.lang-btn{
  display:flex;align-items:center;gap:6px;background:var(--bg3);
  border:1px solid var(--border);border-radius:6px;color:#fff;
  font-size:12px;font-weight:600;padding:6px 10px;cursor:pointer;transition:border-color .2s
}
.lang-btn:hover{border-color:rgba(255,255,255,.25)}
.lang-drop{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:#1e1e1e;border:1px solid var(--border);border-radius:8px;
  overflow:hidden;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.5)
}
.lang-drop.open{display:block}
.lang-opt{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;
  background:none;border:none;color:var(--dim);font-size:13px;cursor:pointer;transition:background .15s,color .15s
}
.lang-opt:hover{background:rgba(255,255,255,.06);color:#fff}
.lang-opt.sel{color:var(--orange)}
.lang-code{font-weight:700;font-size:12px;letter-spacing:.5px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.mobile-menu{display:none;flex-direction:column;background:var(--bg2);border-top:1px solid var(--border);padding:8px 0}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 20px;font-size:13px;font-weight:600;letter-spacing:.8px;color:var(--dim);text-decoration:none}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--orange)}

.nav-links a{
    position:relative;
}

.nav-links a.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-6px;

    transform:translateX(-50%);

    width:32px;
    height:2px;

    background:var(--orange);

    border-radius:999px;

    box-shadow:
        0 0 8px rgba(255,88,6,.6);
}

/* HERO */
.hero{
  position:relative;
  min-height:460px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(120deg,#0a0a0a 0%,#0f0a06 50%,#0a0a0a 100%)
}

.hero::before{
    content:"";
    position:absolute;

    left:-200px;
    top:50%;

    width:600px;
    height:600px;

    transform:translateY(-50%);

    background:radial-gradient(
        circle,
        rgba(255,91,0,.35) 0%,
        rgba(255,91,0,.15) 40%,
        transparent 75%
    );

    filter:blur(120px);

    z-index:1;
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;

    right:-200px;
    top:50%;

    width:600px;
    height:600px;

    transform:translateY(-50%);

    background:radial-gradient(
        circle,
        rgba(255,91,0,.35) 0%,
        rgba(255,91,0,.15) 40%,
        transparent 75%
    );

    filter:blur(120px);

    z-index:1;
    pointer-events:none;
}

.hero-content,
.hero-track,
.hero-left,
.hero-right{
    position:relative;
    z-index:2;
}

.hero-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(180,30,10,.18) 0%,transparent 70%),
              radial-gradient(ellipse 40% 60% at 20% 50%,rgba(255,88,6,.08) 0%,transparent 60%),
              radial-gradient(ellipse 40% 60% at 80% 50%,rgba(255,88,6,.06) 0%,transparent 60%)
}
.hero-img-wrap{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:540px;height:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden
}
.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 0px;

  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,1) 12%,rgba(0,0,0,1) 88%,transparent 100%);

  mix-blend-mode:luminosity;
  opacity:.8;
}
.hero-left{position:relative;z-index:2;padding:40px 0 40px 5%;flex:0 0 42%}
.hero-title{display:flex;flex-direction:column;line-height:.88;margin-bottom:14px}
.t-savage{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(64px,8vw,110px);color:#fff;letter-spacing:-1px
}
.t-routine{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:clamp(64px,8vw,110px);color:var(--orange);letter-spacing:-1px;
  text-shadow:0 0 80px rgba(255,88,6,.4)
}
.hero-sub{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--dim);margin-bottom:22px}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;background:none;
  border:1.5px solid rgba(255,255,255,.5);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:1.5px;padding:10px 20px;
  border-radius:4px;text-decoration:none;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s
}
.cta-btn:hover{border-color:var(--orange);color:var(--orange);background:rgba(255,88,6,.06)}
.hero-right{position:relative;z-index:2;flex:0 0 30%;margin-left:auto;padding-right:5%;text-align:right}
.discipline{
  display:flex;flex-direction:column;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;
  font-size:clamp(24px,3.5vw,46px);line-height:1;color:#fff;letter-spacing:-.5px
}
.discipline .orange{color:var(--orange)}

/* TRACK + SPONSOR */
.track-section{max-width:1360px;margin:0 auto;padding:20px;display:flex;gap:16px;align-items:stretch}
.track-card{
  flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  display:flex;align-items:center;overflow:hidden;min-height:130px
}
.album-art{
    flex-shrink:0;
    width:200px;
    position:relative;
    overflow:hidden;
    border-radius:10px;
    border:1px solid rgba(255,88,6,.15);
    box-shadow:
        0 0 20px rgba(255,88,6,.12),
        0 8px 20px rgba(0,0,0,.4);
    align-self:stretch;
}

.album-art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .4s ease;
}

.album-big{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:22px;color:#fff;line-height:1}
.album-big.or{color:var(--orange)}
.album-brand{font-family:'Oswald',sans-serif;font-size:8px;font-weight:600;letter-spacing:1px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.3}
.track-info{flex:1;padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.latest-lbl{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--orange)}
.track-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;color:#fff;letter-spacing:.5px}
.track-sub{font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--muted);margin-bottom:10px}

.player{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-width:0;
}

.play-btn{
  width:44px;height:44px;border-radius:50%;border:2.5px solid var(--orange);
  background:none;color:var(--orange);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s,color .2s
}
.play-btn:hover{background:var(--orange);color:#fff}
.wave-area{
    flex:1;
    display: block;
    width: auto;
    min-width:0;
}

.waveform{
    display:flex;
    align-items:center;
    gap:2px;
    height:52px;
    width:100%;
    justify-content:space-between;
}

.player,
.wave-area,
.track-info{
    min-width:0;
}

.bar{
    width:5px;
    flex-shrink:0;
    border-radius:2px;
    background:rgba(255,255,255,.15);
    transition:background .1s;
}

.bar.act{background:var(--orange)}
.time-row{display:flex;align-items:center;gap:10px}
.t{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.progress-track{flex:1;height:3px;background:rgba(255,255,255,.12);border-radius:2px;cursor:pointer;position:relative}
.progress-fill{height:100%;background:var(--orange);border-radius:2px;width:33%;pointer-events:none;transition:width .1s}
.spotify-box{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:20px 24px;border-left:1px solid var(--border);min-width:130px
}
.spotify-box-bottom{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;
    padding:20px 24px;

    border-left:1px solid var(--border);
    min-width:130px;
}

.spotify-box-center{
    display:flex;
    align-items:center;
    justify-content:center;

    padding-left:24px;

    border-left:1px solid var(--border);
}

.listen-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.spotify-link{display:flex;align-items:center;gap:8px;color:#1DB954;text-decoration:none;font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;transition:opacity .2s}
.spotify-link:hover{opacity:.8}
.sponsor-card{
  flex-shrink:0;width:280px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center
}
.spon-lbl{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--muted);align-self:flex-end}
.gymbeam{font-family:'Oswald',sans-serif;font-size:28px;font-weight:700}
.gymbeam .g{color:#fff}.gymbeam .b{color:var(--orange)}
.spon-tags{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.bottle{
  width:50px;background:linear-gradient(160deg,#1a1a1a,#2a2a2a);
  border:1px solid rgba(255,88,6,.3);border-radius:6px 6px 10px 10px;
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:1px
}
.bottle .bl{font-size:6px;font-weight:700;color:var(--orange);letter-spacing:.5px}
.bottle .bw{font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;color:#fff}
.bottle .bp{font-size:6px;color:var(--dim)}
.btn-outline{
  display:inline-flex;align-items:center;background:none;border:1.5px solid rgba(255,255,255,.3);
  border-radius:4px;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;
  padding:8px 14px;text-decoration:none;cursor:pointer;transition:border-color .2s;white-space:nowrap;margin-top:2px
}
.btn-outline:hover{border-color:#fff}
.btn-orange{border-color:var(--orange);color:var(--orange)}
.btn-orange:hover{background:var(--orange);color:#fff}

/* ADS */
.ads{
  max-width:1360px;margin:0 auto;padding:0 20px 20px;
  display:flex;align-items:center;gap:24px;
  background:linear-gradient(135deg,#0f0800,#1a0d00 40%,#0f0f0f);
  border:1px solid rgba(255,88,6,.2);border-radius:10px;
  padding:18px 28px;margin-bottom:0
}
.ads-wrap{max-width:1360px;margin:0 auto;padding:0 20px 20px}
.ads{border-radius:10px}
.ads-tag{
  background:rgba(255,88,6,.15);border:1px solid rgba(255,88,6,.3);color:var(--orange);
  font-size:9px;font-weight:700;letter-spacing:2px;padding:3px 8px;border-radius:3px;flex-shrink:0
}
.ads-left{flex-shrink:0}
.never{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(28px,3.5vw,46px);color:#fff;letter-spacing:1px;line-height:1}
.bemore{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-style:italic;font-size:14px;color:var(--orange);letter-spacing:1px;margin-top:2px}
.ads-mid{flex:1;display:flex;justify-content:center}
.ads-brand{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;letter-spacing:2px;color:rgba(255,255,255,.18);text-align:center;line-height:1.2}
.ads-right{display:flex;align-items:center;gap:20px;flex-shrink:0}
.discount{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(36px,4.5vw,60px);color:var(--orange);line-height:1}
.code-wrap{display:flex;flex-direction:column;gap:3px}
.na-caly{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.kod{font-size:12px;color:#fff}
.kod strong{font-family:'Oswald',sans-serif;color:var(--orange);font-size:14px;letter-spacing:1px}
.rozwin-btn:hover{border-color:rgba(255,255,255,.3)}

/* FOOTER */
footer{
    margin-top:auto;

    background:var(--bg2);
    margin-top:80px;

    padding:26px 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
}

/* LEFT */
.footer-brand{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:280px;
}

.footer-logo{
    font-size:64px;
    font-weight:900;
    line-height:1;
    user-select:none;
}

.logo-s{
    color:#fff;
}

.logo-r{
    color:#FF5806;
}

.footer-info{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.footer-copy{
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.footer-tagline{
    color:var(--muted);
    font-size:11px;
    letter-spacing:1px;
}

/* CENTER */
.footer-partners{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:0 30px;
}

.partners-title{
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}

.partners-slider{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
}

.partner-item{
    width:180px;
    height:80px;

    border:1px solid var(--border);
    border-radius:12px;

    overflow:hidden;

    display:block;

    background:rgba(255,255,255,.02);

    text-decoration:none;

    transition:.25s ease;

    -webkit-tap-highlight-color:transparent;
}

.partner-item:hover{
    border-color:#FF5806;
    transform:translateY(-2px);
}

.partner-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    opacity:1;
}

/* RIGHT */
.footer-author{
    min-width:260px;
    display:flex;
    justify-content:flex-end;
}

.portfolio-link{
    display:flex;
    align-items:center;
    text-decoration:none;

    color:#fff;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.footer_portfolio_box{
    display:flex;
    align-items:center;
    gap:6px;
}

.footer_portfolio_box p{
    margin:0;
}

.footer_name{
    color:#fff;
    transition:.25s ease;
}

.portfolio-link:hover .footer_name{
    color:#FF5806;
}


/* LOADER TOP */

.loader-wrapper{
    position:fixed;
    inset:0;
    z-index:999999;
    background:#050505;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.loader-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    line-height:.9;
    margin-bottom:25px;
    font-family:'Anton',sans-serif;
}

.loader-logo span:first-child{
    color:#ffffff;
    font-size:64px;
    font-weight:900;
}

.loader-logo span:last-child{
    color:#ff6600;
    font-size:64px;
    font-weight:900;
}

.loader-percent{
    color:#ff6600;
    font-size:48px;
    font-weight:700;
    margin-bottom:20px;
}

.loader-progress{
    width:320px;
    height:18px;
    border:1px solid #2a2a2a;
    background:#0d0d0d;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:25px;
}

.loader-progress-fill{
    width:0%;
    height:100%;
    background:
    repeating-linear-gradient(
        -45deg,
        #ff6600 0px,
        #ff6600 10px,
        #ff7f2a 10px,
        #ff7f2a 20px
    );
    box-shadow:0 0 15px rgba(255,102,0,.6);
    transition:width .2s linear;
}

.loader-text1{
    color:#ff6600;
    font-size:24px;
    margin-bottom:10px;
}

.loader-text2{
    color:#8c8c8c;
    font-size:15px;
    margin-bottom:8px;
}

.error404a{
    margin-top:0px;
}

.error404a a{
    color:#ff6600;
    text-decoration:none;
    font-weight:700;
}

.error404a a:hover{
    text-shadow:0 0 10px #ff6600;
}

@keyframes spin {
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* CONTACT */

.contact-section{
    max-width:1360px;
    margin:0 auto;
    padding:20px;

}

.contact-container{
    display:flex;
    gap:16px;
    align-items:stretch;
}

/* LEFT */

.contact-left{
    width:320px;
    flex-shrink:0;

    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:10px;

    padding:20px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}

.contact-label{
    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--orange);

    margin-bottom:8px;
}

.contact-left h2{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:42px;

    line-height:.95;

    color:#fff;
}

.contact-line{
    width:40px;
    height:2px;

    background:var(--orange);

    margin:15px auto;
}

.contact-left p{
    font-size:12px;
    line-height:1.7;

    color:var(--dim);
}

.contact-info{
    margin-top:18px;
}

.info-box{
    border:1px solid var(--border);
    border-radius:8px;

    padding:14px;
}

.info-box span{
    display:block;

    font-size:9px;
    font-weight:700;

    letter-spacing:2px;

    color:var(--muted);

    margin-bottom:6px;
}

.info-box strong{
    color:#fff;
    font-size:13px;
}

.contact-tags{
    margin-top:16px;

    font-size:9px;
    font-weight:700;

    letter-spacing:1.5px;

    color:var(--muted);
}

/* RIGHT */

.contact-right{
    flex:1;

    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:10px;

    padding:20px;
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.contact-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.contact-form input,
.contact-form textarea{
    width:100%;

    background:#111;

    border:1px solid var(--border);
    border-radius:8px;

    color:#fff;

    padding:14px 16px;

    font-size:13px;

    transition:.2s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:var(--muted);
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:rgba(255,255,255,.2);
}

.contact-form textarea{
    resize:none;
    min-height:180px;
}

/* BUTTON */

.contact-form button{
    align-self:center;

    width:180px;
    height:38px;

    background:none;

    border:1.5px solid rgba(255,255,255,.3);
    border-radius:4px;

    color:#fff;

    font-size:10px;
    font-weight:700;
    letter-spacing:1px;

    cursor:pointer;

    transition:.2s;
}

.contact-form button:hover{
    border-color:var(--orange);
    color:var(--orange);
}

.contact-form small{
    color:var(--muted);
    font-size:10px;
}

/* RODO */

.contact-consent{
    margin-top:4px;
    margin-bottom:10px;

    padding:14px 16px;

    border:1px solid var(--border);
    border-radius:8px;

    background:#111;
}

.consent-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
}

.consent-label input{
    display:none;
}

.consent-check{
    width:18px;
    height:18px;

    flex-shrink:0;

    border:1px solid rgba(255,255,255,.25);
    border-radius:3px;

    position:relative;

    margin-top:1px;

    transition:.2s;
}

.consent-label input:checked + .consent-check{
    border-color:var(--orange);
    background:rgba(255,102,0,.08);
}

.consent-label input:checked + .consent-check::after{
    content:"✓";

    position:absolute;
    left:50%;
    top:50%;

    transform:translate(-50%,-52%);

    color:var(--orange);
    font-size:14px;
    font-weight:700;
}

.consent-text, .consent-text_a{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.consent-text_a{
    color:var(--orange);
    text-decoration:none;
}

.consent-text_a:hover{
    text-decoration:underline;
}

.latest-music{
    max-width:1360px;
    margin:25px auto;
    padding:0 20px;
}

.latest-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.latest-header h2{
    color:#fff;
    font-size:28px;
    font-weight:900;
    letter-spacing:1px;
}

.latest-header a{
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:
    color .25s ease,
    transform .25s ease;
}

.latest-header a:hover {
    color: #ff5b00;
    transform:translateX(6px);
}

.music-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.music-item{
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:14px;
    overflow:hidden;
    transition:.25s;
}

.music-item.playing .track-progress{
    max-height:40px;
    opacity:1;
}

.music-item:hover{
    transform:translateY(-5px);
    border-color:#ff5b00;
}

.music-item img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:14px;
    display:block;
    transition:.35s;
}

.music-content{
    padding:16px;
}

.music-cover{
    position:relative;
    overflow:hidden;
    border-radius:14px;
}

.music-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        transparent 40%
    );
    pointer-events:none;
}

.music-content h3{
    color:#fff;
    margin:0 0 6px;
    font-size:20px;
}

.music-content span{
    color:#8c8c8c;
    font-size:12px;
    letter-spacing:1px;
}

.music-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);

    width:68px;
    height:68px;
    border-radius:50%;

    border:2px solid rgba(255,255,255,.8);
    background:rgba(0,0,0,.65);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    z-index:2;

    opacity:1;
    transition:.25s;
}

.music-item:hover .music-play{
    transform:translate(-50%,-50%) scale(1.1);
    background:#ff5b00;
    border-color:#ff5b00;
}

.music-play:hover{
    background:#ff5b00;
    border-color:#ff5b00;
    cursor: pointer;
}

.music-item:hover .music-cover img{
    transform:scale(1.05);
}

.track-progress{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:18px;

    max-height:0;
    opacity:0;

    overflow:hidden;

    transition:.25s;
}

.music-item.playing .track-progress{
    max-height:40px;
    opacity:1;
}

.track-current,
.track-duration{
    font-size:12px;
    min-width:34px;
    font-variant-numeric:tabular-nums;
}

.track-current{
    color:#ff7a3c;
    font-weight:800;
}

.track-duration{
    color:rgba(255,255,255,.5);
}

.track-fill{
    width:0%;
    height:100%;

    background:#ff5b00;

    box-shadow:
        0 0 10px rgba(255,88,6,.5);

    border-radius:999px;

    transition:width .15s linear;
}

.track-fill::after{
    content:"";

    position:absolute;

    right:0;
    top:50%;

    transform:translate(50%,-50%);

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff5b00;

    box-shadow:0 0 10px rgba(255,88,6,.5);
}

.track-bar{
    flex:1;
    height:4px;

    background:linear-gradient(
        to right,
        rgba(255,88,6,.25),
        rgba(255,255,255,.08)
    );

    border-radius:999px;
    cursor: pointer;
    overflow:visible;
}

.track-fill{
    width:0%;
    height:100%;

    background:#ff5b00;

    border-radius:999px;

    transition:width .15s linear;
    position:relative;
    min-width:6px;
}

.music-item.playing{
    border-color:#ff5b00;

    box-shadow:
        0 0 0 1px rgba(255,88,6,.2),
        0 0 25px rgba(255,88,6,.15);
}

/* ===================================
   TOP 1 TRACK
=================================== */

.pagetracks-top1{ 
    width:100%;
    max-width:1000px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        90px
        240px
        1fr
        90px;

    align-items:center;

    gap:24px;

    min-height:220px;

    padding:0 15px 0 0;

    background:#090909;

    border:2px solid #ff9900;
    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 0 20px rgba(255,153,0,.10);
}

/* ===================================
   RANK
=================================== */

.pagetracks-top1-rank{
    position:relative;

    width:110px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            rgba(255,180,0,.20) 0%,
            rgba(255,140,0,.08) 50%,
            rgba(255,120,0,.02) 100%
        );
    clip-path:polygon(
        0 0,
        100% 0,
        78% 100%,
        0 100%
    );
    border-right:
        1px solid rgba(255,180,0,.25);
    box-shadow:
        inset 0 0 25px rgba(255,180,0,.08);
}

.pagetracks-top1-rank::before{
    content:"";

    position:absolute;
    inset:0;

    background:

        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255,255,255,.05) 8%,
            transparent 16%
        ),

        linear-gradient(
            140deg,
            transparent 20%,
            rgba(255,255,255,.03) 24%,
            transparent 28%
        ),

        linear-gradient(
            118deg,
            transparent 42%,
            rgba(255,255,255,.025) 46%,
            transparent 52%
        ),

        linear-gradient(
            132deg,
            transparent 62%,
            rgba(255,255,255,.035) 66%,
            transparent 70%
        ),

        linear-gradient(
            115deg,
            transparent 80%,
            rgba(255,255,255,.03) 84%,
            transparent 88%
        );

    opacity:.8;

    mix-blend-mode:screen;

    pointer-events:none;
}

.pagetracks-top1-rank::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.08),
            transparent 35%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,.05),
            transparent 40%
        );

    opacity:.5;

    pointer-events:none;
}

.pagetracks-top1-rank i{
    color:#ffb300;

    font-size:24px;

    margin-bottom:8px;

    text-shadow:
        0 0 10px rgba(255,179,0,.35);
}

.pagetracks-top1-rank span{
    color:#ffb300;

    font-size:72px;
    font-weight:900;
    line-height:1;

    text-shadow:
        0 0 20px rgba(255,179,0,.25);
}

/* ===================================
   COVER
=================================== */

.pagetracks-top1-cover{
    height:210px;
}

.pagetracks-top1-cover img{
    width:100%;
    height:100%;
    left: 5px;
    position: relative;

    object-fit:cover;

    display:block;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);
}

/* ===================================
   CONTENT
=================================== */

.pagetracks-top1-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.pagetracks-meta{
    color:#9f9f9f;

    font-size:15px;
    font-weight:700;

    text-transform:uppercase;
}

.pagetracks-meta span:first-child{
    color:var(--orange);
}

.pagetracks-title{
    margin:12px 0;

    color:#fff;

    font-size:34px;
    font-weight:900;

    line-height:1.1;

    text-transform:uppercase;
}

.pagetracks-date{
    display:flex;
    align-items:center;
    gap:8px;

    color:#8f8f8f;

    font-size:16px;

    margin-bottom:18px;
}

/* ===================================
   STATS
=================================== */

.pagetracks-stats{
    display:flex;
    align-items:center;
    gap:35px;

    font-size:16px;
    font-weight:700;
}

.pagetracks-like{
    display:flex;
    align-items:center;
    gap:8px;

    color:#ff5a1f;
}

.pagetracks-plays{
    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
}

/* ===================================
   PLAY BUTTON
=================================== */

.pagetracks-top1-play{
    display:flex;
    align-items:center;
    justify-content:center;
}

.pagetracks-top1-play i{
    width:68px;
    height:68px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:2px solid var(--orange);

    color:var(--orange);

    font-size:22px;

    cursor:pointer;

    transition:.25s;
}

.pagetracks-top1-play i:hover{
    background:var(--orange);
    color:#fff;
}

.pagetracks-card-mobile{
    display:grid;

    grid-template-columns:
        70px
        110px
        1fr
        50px;

    align-items:stretch;
}

/* mobile tracks */

.pagetracks-card-mobile{

    display:none;

    grid-template-columns:
        70px
        110px
        1fr
        50px;

    align-items:stretch;
}

.pagetracks-mobile-top{

    display:grid;

    grid-template-columns:
        70px
        1fr;

    gap:12px;

    margin-bottom:15px;
}

.pagetracks-mobile-top .pagetracks-top1-rank{

    width:70px;
    height:130px;
}

.pagetracks-mobile-top .pagetracks-top1-cover{

    height:130px;

    border-radius:10px;

    overflow:hidden;
}

.pagetracks-mobile-top .pagetracks-top1-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.pagetracks-mobile-meta{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;
}

.pagetracks-mobile-meta .pagetracks-meta{

    display:flex;

    gap:8px;

    flex-wrap:wrap;
}

.pagetracks-mobile-meta .pagetracks-date{

    margin:0;
}

.pagetracks-card-mobile .pagetracks-title{

    margin:0 0 15px;

    font-size:22px;
    line-height:1.1;
}

.pagetracks-mobile-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.pagetracks-mobile-bottom .pagetracks-stats{

    display:flex;
    gap:24px;
}

.pagetracks-mobile-bottom .pagetracks-top1-play{

    position:static !important;

    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;

    margin-left:30px;
}

/* ===================================
   TOP2
=================================== */

.pagetracks-top2{

    width:100%;
    max-width:1000px;

    margin:12px auto 0;

    display:grid;

    grid-template-columns:
        90px
        240px
        1fr
        90px;

    align-items:center;

    gap:24px;

    min-height:220px;

    padding:0 15px 0 0;

    background:#090909;

    border:2px solid #cfcfcf;
    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 0 20px rgba(255,255,255,.08);
}

.pagetracks-top2 .pagetracks-top1-rank{

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.20) 0%,
            rgba(180,180,180,.08) 50%,
            rgba(120,120,120,.02) 100%
        );

    border-right:
        1px solid rgba(255,255,255,.20);

    box-shadow:
        inset 0 0 25px rgba(255,255,255,.05);
}

.pagetracks-top2 .pagetracks-top1-rank span,
.pagetracks-top2 .pagetracks-top1-rank i{

    color:#d6d6d6;

    text-shadow:
        0 0 15px rgba(255,255,255,.15);
}

/* ===================================
   TOP3
=================================== */

.pagetracks-top3{

    width:100%;
    max-width:1000px;

    margin:12px auto 0;

    display:grid;

    grid-template-columns:
        90px
        240px
        1fr
        90px;

    align-items:center;

    gap:24px;

    min-height:220px;

    padding:0 15px 0 0;

    background:#090909;

    border:2px solid #b86b3e;
    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 0 20px rgba(184,107,62,.08);
}

.pagetracks-top3 .pagetracks-top1-rank{

    background:
        linear-gradient(
            135deg,
            rgba(184,107,62,.25) 0%,
            rgba(184,107,62,.08) 50%,
            rgba(184,107,62,.02) 100%
        );

    border-right:
        1px solid rgba(184,107,62,.25);

    box-shadow:
        inset 0 0 25px rgba(184,107,62,.08);
}

.pagetracks-top3 .pagetracks-top1-rank span,
.pagetracks-top3 .pagetracks-top1-rank i{

    color:#b86b3e;

    text-shadow:
        0 0 15px rgba(184,107,62,.20);
}

/* top4 */

.pagetracks-top4{

    width:100%;
    max-width:1000px;

    margin:12px auto 0;

    display:grid;

    grid-template-columns:
        90px
        240px
        1fr
        90px;

    align-items:center;

    gap:24px;

    min-height:220px;

    padding:0 15px 0 0;

    background:#090909;

    border:2px solid #ff5b00;
    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 0 20px rgba(255,91,0,.10);
}

.pagetracks-top4 .pagetracks-top1-rank{

    background:
        linear-gradient(
            135deg,
            rgba(255,91,0,.28) 0%,
            rgba(255,91,0,.10) 50%,
            rgba(255,91,0,.02) 100%
        );

    border-right:
        1px solid rgba(255,91,0,.25);

    box-shadow:
        inset 0 0 25px rgba(255,91,0,.08);
}

.pagetracks-top4 .pagetracks-top1-rank span{

    color:#ff5b00;
}

/* ===================================
   TOP5
=================================== */

.pagetracks-top5{

    width:100%;
    max-width:1000px;

    margin:12px auto 0;

    display:grid;

    grid-template-columns:
        90px
        240px
        1fr
        90px;

    align-items:center;

    gap:24px;

    min-height:220px;

    padding:0 15px 0 0;

    background:#090909;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    overflow:hidden;

    box-shadow:none;
}

.pagetracks-top5 .pagetracks-top1-rank{

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06) 0%,
            rgba(255,255,255,.03) 50%,
            transparent 100%
        );

    border-right:
        1px solid rgba(255,255,255,.08);

    box-shadow:none;
}

.pagetracks-top5 .pagetracks-top1-rank span{

    color:#c8c8c8;

    text-shadow:
        0 0 15px rgba(255,255,255,.12);
}

.pagetracks-top5 .pagetracks-top1-rank i{

    color:#c8c8c8;

    text-shadow:
        0 0 10px rgba(255,255,255,.10);
}

/* buttons tracks */
/* ===================================
   TABS
=================================== */

.pagetracks-tabs{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    margin-bottom:35px;
}

.pagetracks-tab{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    background:#111;

    border:1px solid rgba(255,153,0,.15);
    border-radius:12px;

    color:#bdbdbd;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.pagetracks-tab:hover{

    border-color:rgba(255,153,0,.45);

    color:#fff;

    transform:translateY(-2px);
}

.pagetracks-tab.active{

    background:
        linear-gradient(
            135deg,
            rgba(255,153,0,.18),
            rgba(255,120,0,.08)
        );

    border-color:#ff9900;

    color:#fff;

    box-shadow:
        0 0 20px rgba(255,153,0,.18);
}

.pagetracks-tab i{

    color:var(--orange);
}

/* ===================================
   HEADER
=================================== */

.pagetracks-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:12px;
}

.pagetracks-header h2{

    margin:0;

    color:#fff;

    font-size:48px;
    font-weight:900;

    text-transform:uppercase;

    letter-spacing:2px;

    text-shadow:
        0 0 20px rgba(255,153,0,.20);
}

/* ===================================
   LIGHTNING
=================================== */

.pagetracks-lightning-left,
.pagetracks-lightning-right{

    color:var(--orange);

    font-size:26px;

    text-shadow:
        0 0 15px rgba(255,153,0,.40);
}

/* ===================================
   SUBTITLE
=================================== */

.pagetracks-subtitle{

    text-align:center;

    color:#9b9b9b;

    font-size:15px;
    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:40px;
}

/* ===================================
   PRIVACY
=================================== */

.privacy{
    max-width:1360px;
    margin:0 auto;
    padding:40px 20px;
}

.privacy-head{
    display:grid;
    grid-template-columns:45% 55%;
    align-items:center;

    margin-bottom:30px;
}

.privacy-head-left{
    flex:1;
}

.privacy-head-right{
    flex:1;
}

.privacy h1{
    font-family:'Barlow Condensed',sans-serif;
    font-size:72px;
    font-weight:900;
    line-height:.9;
    text-transform:uppercase;

    color:#fff;
}

.privacy h1 span{
    color:var(--orange);
}

.privacy h1 privacy{
    display:block;
}

.privacy-sub{
    color:var(--dim);
    font-size:15px;
    line-height:1.8;
    max-width:700px;
}

.privacy-banner{
    width:100%;
    height:280px;

    object-fit:cover;

    border-radius:14px;

    border:1px solid var(--border);

    display:block;
}

.privacy-card{
    background:var(--bg2);

    border:1px solid var(--border);

    border-radius:14px;

    padding:25px;

    display:grid;

    grid-template-columns:280px 1fr;

    gap:25px;

    margin-bottom:18px;

    transition:.25s ease;
}

.privacy-card:hover{
    border-color:rgba(255,88,6,.25);

    box-shadow:
        0 0 20px rgba(255,88,6,.08);
}

.privacy-title{
    color:#fff;

    font-size:24px;
    font-weight:800;

    line-height:1.2;

    text-transform:uppercase;
}

.privacy-content{
    border-left:1px solid var(--border);

    padding-left:25px;

    color:var(--dim);

    line-height:1.8;
}

.privacy-content p{
    margin-bottom:12px;
}

.privacy-content ul{
    padding-left:18px;
}

.privacy-content li{
    margin-bottom:10px;
}

.privacy-content strong{
    display:block;

    color:#fff;

    margin-top:12px;
    margin-bottom:8px;
}

.privacy-content a{
    color:var(--orange);
    text-decoration:none;
}

.privacy-content a:hover{
    text-decoration:underline;
}

.privacy-note{
    margin-top:25px;

    padding:20px;

    border:1px solid rgba(255,88,6,.25);

    border-radius:12px;

    background:rgba(255,88,6,.05);

    color:var(--dim);

    line-height:1.7;
}

/* =========================
   GRID
========================= */

.top5-grid{

    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:16px;
}

/* =========================
   CARD
========================= */

.top5-card{

    position:relative;

    background:#101010;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    overflow:hidden;

    transition:.25s ease;
}

.top5-card:hover{

    transform:translateY(-4px);

    border-color:rgba(255,88,6,.4);
}

/* =========================
   RANK
========================= */

.top5-rank{

    position:absolute;

    top:10px;
    left:10px;

    width:38px;
    height:38px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--orange);

    color:#fff;

    font-size:22px;
    font-weight:900;

    border-radius:6px;

    z-index:5;
}

/* =========================
   COVER
========================= */

.top5-cover{

    
    position:relative;

    aspect-ratio:1/1;

    overflow:hidden;
}

.top5-cover img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.35s ease;
}

.top5-card:hover .top5-cover img{

    transform:scale(1.05);
}

/* =========================
   CONTENT
========================= */

.top5-content{

    padding:14px;

    display:flex;

    flex-direction:column;

    height:100%;
}

.top5-title{

    margin:0 0 8px;

    color:#fff;

    font-size:28px;

    font-family:'Barlow Condensed',sans-serif;

    font-weight:700;

    line-height:1;

    text-transform:uppercase;

    min-height:56px; 
}

.top5-meta{

    color:#7f7f7f;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:14px;
}

/* =========================
   STATS
========================= */

.top5-stats{

    display:flex;

    align-items:center;

    gap:14px;

}

.top5-like{

    display:flex;

    align-items:center;

    gap:6px;

    color:#ff5b00;

    font-size:22px;

    font-weight:700;
}

.top5-plays{

    display:flex;

    align-items:center;

    gap:6px;

    color:#fff;

    font-size:16px;

    font-weight:700;
}


/* =========================
   PLAY
========================= */

.top5-play{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:68px;
    height:68px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.8);

    background:rgba(0,0,0,.65);

    color:#fff;

    z-index:5;

    transition:.25s;
}

.top5-play:hover{

    background:#ff5b00;

    border-color:#ff5b00;

    color:#fff;

    cursor:pointer;
}

.top5-play svg{

    width:22px;
    height:22px;

    pointer-events:none;
}

.top5-progress{

    display:flex;
    opacity:0;

    align-items:center;

    gap:10px;

    width:100%;
    transition:.25s;
}

.top5-card.playing .top5-progress{

    opacity:1;

    max-height:40px;

    margin-top:18px;
}

.top5-current,
.top5-duration{

    flex-shrink:0;

    width:38px;

    text-align:center;

    font-size:12px;

    line-height:1;

    font-weight:700;
}

.top5-current{

    color:#848284;

    font-weight:800;
}

.top5-duration{

    color:#848284;
}

.top5-bar{
    flex:1;
    height:4px;

    background:linear-gradient(
        to right,
        rgba(255,88,6,.25),
        rgba(255,255,255,.08)
    );

    border-radius:999px;
    cursor: pointer;
    overflow:visible;
}

.top5-fill{

    width:0%;

    height:100%;

    background:#ff5b00;

    border-radius:999px;

    position:relative;

    transition:width .15s linear;
}

.top5-fill::after{

    content:"";

    position:absolute;

    right:0;
    top:50%;

    transform:translate(50%,-50%);

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff5b00;

    box-shadow:
        0 0 10px rgba(255,88,6,.5);
}

/* =========================
   MOBILE
========================= */

@media(max-width:1200px){

     .top5-grid{

        grid-template-columns:
            repeat(3,1fr);
    }
    
    .album-art{
        width:160px;
    }

    .track-title{
        font-size:22px;
    }

    .player{
        gap:10px;
    }

    .waveform{
        gap:2px;
        justify-content:space-around;
    }
    
    .music-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){
    
    /* PRIVACY */ 
    
    .privacy-head{
        grid-template-columns:1fr;
        gap:20px;
    }

    .privacy-banner{
        height:180px;
    }

    .privacy h1{
        font-size:48px;
    }

    .privacy-card{
        grid-template-columns:1fr;
    }

    .privacy-title{
        font-size:22px;
    }

    .privacy-content{
        border-left:none;
        border-top:1px solid var(--border);

        padding-left:0;
        padding-top:18px;
    }

    /* NAV */

    .nav-inner{
        min-height:64px;
        padding:0 15px;
        gap:10px;
        justify-content:space-between;
    }

    .logo img{
        height:48px;
        width:auto;
        max-width:150px;
    }

    .nav-links{
        display:none;
    }

    .hamburger{
        display:flex;
        margin-left:0;
    }

    /* HERO */

    .hero{
        flex-direction:column;
        min-height:360px;
    }

    .hero-img-wrap{
        width:100%;
        opacity:.3;
    }

    .hero-left{
        padding:30px 20px 20px;
    }

    .hero-right{
        margin-left:0;
        padding:0 20px 30px;
        text-align:left;
    }

    /* TRACK */

    .track-section{
        flex-direction:column;
    }

    .track-card,
    .sponsor-card{
        width:100%;
    }

    .track-info{
        width:100%;
        padding:20px 12px;
    }
    

    .player{
        width:100%;
    }

    .wave-area{
        width:100%;
        min-width:0;
    }

    .waveform{
        gap:2px;
        justify-content:space-between;
    }

    /* CONTACT */

    .contact-container{
        flex-direction:column;
    }

    .contact-left{
        width:100%;
    }

    .contact-row{
        grid-template-columns:1fr;
    }

    /* FOOTER */

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:28px;
    }

    .footer-brand{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        min-width:unset;
        width:100%;
    }

    .footer-info{
        align-items:center;
    }

    .footer-partners{
        width:100%;
        padding:0;
    }

    .footer-author{
        width:100%;
        min-width:unset;
        justify-content:center;
    }

    .portfolio-link{
        justify-content:center;
    }

    .partners-slider{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        width:100%;
        max-width:420px;
        margin:auto;
    }

    .partner-item{
        width:100%;
        height:80px;
    }

    .footer_portfolio_box{
        justify-content:center;
        flex-wrap:wrap;
    }
    
    .privacy{
    padding:25px 15px;
    }

    .privacy h1{
        font-size:42px;
    }

    .privacy-card{
        grid-template-columns:1fr;
        gap:18px;
        padding:18px;
    }

    .privacy-title{
        font-size: 24px;
    }

    .privacy-content{
        border-left:none;
        border-top:1px solid var(--border);

        padding-left:0;
        padding-top:18px;
    }
}

@media(max-width:768px){
    
    .top5-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:12px;
    }

    .top5-title{

        font-size:22px;
    }
    
    .pagetracks-header h2{

        font-size:34px;
    }

    .pagetracks-tab{

        width:100%;

        justify-content:center;
    }

    .pagetracks-tabs{

        flex-direction:column;
    }
    
    /* top05 */
    
     .pagetracks-top1,
     .pagetracks-top2,
     .pagetracks-top3,
     .pagetracks-top4,
     .pagetracks-top5{
        display:none;
    }

    .pagetracks-card-mobile{

        display:grid;

        grid-template-columns:
            70px
            110px
            1fr
            50px;

        gap:0px;

        align-items:center;

        padding:0px;

        background:#090909;

        border:2px solid #ff9900;
        border-radius:16px;

        overflow:hidden;
    }

    /* RANK */

    .pagetracks-mobile-rank{

        position:relative;

    z-index:10;
        width:70px;
        height:auto;
        min-height:100%;
        display:flex;
        align-self:stretch;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        clip-path:polygon(
            0 0,
            100% 0,
            78% 100%,
            0 100%
        );
         background:
    linear-gradient(
        135deg,
        rgba(255,180,0,.28) 0%,
        rgba(255,140,0,.12) 50%,
        rgba(255,120,0,.04) 100%
    );

    box-shadow:
        inset 0 0 25px rgba(255,180,0,.10);
    }
    
    .pagetracks-mobile-rank::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255,255,255,.08) 12%,
            transparent 24%
        );

    pointer-events:none;
}

    .pagetracks-mobile-rank i{

        color:#ffb300;

        font-size:18px;

        margin-bottom:6px;
        margin-right: 30px;
    }

    .pagetracks-mobile-rank span{

        color:#ffb300;

        font-size:56px;
        font-weight:900;
        margin-right: 30px;
    }

    /* COVER */

    .pagetracks-mobile-cover{
        position:relative;

    margin-left:-30px;

    z-index:1;
    }

    .pagetracks-mobile-cover img{

     width:100%;
    height:100%;
    object-fit:cover;
    }

    /* CONTENT */

    .pagetracks-mobile-content{

        display:flex;

        flex-direction:column;

        justify-content:center;

        min-width:0;
    }

    .pagetracks-mobile-content .pagetracks-meta{

        font-size:12px;

        margin-bottom:8px;
    }

    .pagetracks-mobile-content .pagetracks-meta span:first-child{

        color:var(--orange);
    }

    .pagetracks-mobile-title{

        margin:0 0 12px;

        color:#fff;

        font-size:22px;
        font-weight:900;

        line-height:1.1;
    }

    .pagetracks-mobile-content .pagetracks-stats{

        display:flex;

        gap:16px;

        font-size:13px;
    }

    /* PLAY */

    .pagetracks-mobile-play{

        display:flex;

        align-items:center;
        justify-content:center;
    }

    .pagetracks-mobile-play i{

        width:44px;
        height:44px;

        display:flex;

        align-items:center;
        justify-content:center;

        border-radius:50%;

        border:2px solid var(--orange);

        color:var(--orange);

        font-size:14px;
    }
    
    .pagetracks-mobile-play i:hover{
    background:var(--orange);
    color:#fff;
    cursor: pointer;
}

    /* TOP2 + TOP3 */

    .pagetracks-mobile-row{

        display:flex;

        flex-direction:column;

        gap:12px;

        margin-top:12px;
    }
    
    /* ===================================
        TOP2 MOBILE
     =================================== */

     .pagetracks-top2-mobile{

         border:2px solid #cfcfcf;
     }

     .pagetracks-top2-mobile .pagetracks-mobile-rank{

         background:
         linear-gradient(
             135deg,
             rgba(255,255,255,.20) 0%,
             rgba(180,180,180,.08) 50%,
             rgba(120,120,120,.02) 100%
         );

         box-shadow:
             inset 0 0 25px rgba(255,255,255,.08);
     }

     .pagetracks-top2-mobile .pagetracks-mobile-rank i,
     .pagetracks-top2-mobile .pagetracks-mobile-rank span{

         color:#d6d6d6;
     }

     /* ===================================
        TOP3 MOBILE
     =================================== */

     .pagetracks-top3-mobile{

         border:2px solid #b86b3e;
     }

     .pagetracks-top3-mobile .pagetracks-mobile-rank{

         background:
         linear-gradient(
             135deg,
             rgba(184,107,62,.25) 0%,
             rgba(184,107,62,.08) 50%,
             rgba(184,107,62,.02) 100%
         );

         box-shadow:
             inset 0 0 25px rgba(184,107,62,.08);
     }

     .pagetracks-top3-mobile .pagetracks-mobile-rank i,
     .pagetracks-top3-mobile .pagetracks-mobile-rank span{

         color:#b86b3e;
     }
     
     /* ===================================
   TOP4 MOBILE
=================================== */

.pagetracks-top4-mobile{

    border:2px solid #ff5b00;
}

.pagetracks-top4-mobile .pagetracks-mobile-rank{

    background:
    linear-gradient(
        135deg,
        rgba(255,91,0,.28) 0%,
        rgba(255,91,0,.10) 50%,
        rgba(255,91,0,.02) 100%
    );

    box-shadow:
        inset 0 0 25px rgba(255,91,0,.08);
}

.pagetracks-top4-mobile .pagetracks-mobile-rank i,
.pagetracks-top4-mobile .pagetracks-mobile-rank span{

    color:#ff5b00;
}

/* ===================================
   TOP5 MOBILE
=================================== */

.pagetracks-top5-mobile{

    border:1px solid rgba(255,255,255,.08);
}

.pagetracks-top5-mobile .pagetracks-mobile-rank{

     background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.03) 50%,
        transparent 100%
    );

    box-shadow:none;
}

.pagetracks-top5-mobile .pagetracks-mobile-rank i,
.pagetracks-top5-mobile .pagetracks-mobile-rank span{

    color:#c8c8c8;

    text-shadow:
        0 0 15px rgba(255,255,255,.12);
}
}


@media(max-width:640px){
  .logo img{
      display:block;
      height:42px;
      max-width:130px;
  }
  .track-card{flex-direction:column}
  .album-art{width:100%;min-height:80px}
  .spotify-box{border-left:none;border-top:1px solid var(--border);flex-direction:row;justify-content:center}
  .ads{flex-direction:column;align-items:flex-start;gap:12px}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
  
  .waveform{
        height:50px;
        gap:1px;
        justify-content:space-between;
    }
    
    .player{
        width:100%;
    }
    
     .wave-area{
        width:100%;
        min-width:0;
    }
  
  .track-card{
    flex-direction:column;
  }
  
   .track-info{
        width:100%;
        padding:20px 12px;
    }

  .album-art{
    width:100%;
    height:220px;
    min-height:220px;
    border-radius:10px 10px 0 0;
  }

  .album-art img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
  
  .music-grid{
        grid-template-columns:1fr;
    }
    
    .spotify-box-center{
        position:relative;

        border:none;
        padding-left:24px;
    }

    .spotify-box-center::before{
        content:"";

        position:absolute;

        left:0;
        top:50%;

        transform:translateY(-50%);

        width:1px;
        height:40px;

        background:var(--border);
    }
}

@media(max-width:480px){

    .top5-grid{

        grid-template-columns:
            1fr;
    }
}