/* HERO COMPONENT - izolowany od reszty CSS */
.ss-hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  background:#030305;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ss-hero-bg{
  position:absolute;
  top:-92px;
  right:-18px;
  width:1080px;
  height:auto;
  z-index:0;
  opacity:.92;
  pointer-events:none;
}

.ss-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,#030305 0%,rgba(3,3,5,.97) 27%,rgba(3,3,5,.50) 55%,rgba(3,3,5,.10) 100%),
    linear-gradient(180deg,rgba(3,3,5,0) 0%,rgba(3,3,5,.12) 68%,#030305 100%);
  pointer-events:none;
}

.ss-hero-inner{
  position:relative;
  z-index:2;
  min-height:760px;
  padding:70px 54px 70px;
  display:grid;
  grid-template-columns:760px 1fr;
  gap:48px;
  align-items:center;
}

.ss-hero-left{
  min-width:0;
}

.ss-badge{
  display:inline-flex;
  padding:12px 20px;
  margin-bottom:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.54);
  font-size:14px;
  font-weight:900;
}

.ss-hero h1{
  margin:0;
  font-size:76px;
  line-height:.98;
  letter-spacing:-1.8px;
  text-transform:uppercase;
  text-shadow:0 5px 0 rgba(255,255,255,.07);
}

.ss-hero h1 span{
  background:linear-gradient(90deg,#ffb300,#ff7a3d,#ff2fb9,#ca35ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ss-hero-lead{
  max-width:620px;
  margin:28px 0 0;
  font-size:23px;
  line-height:1.45;
  color:#f2f2f7;
}

.ss-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin:42px 0 38px;
}

.ss-feature{
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#fff;
  font-weight:1000;
}

.ss-feature-icon{
  width:62px;
  height:62px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  border:2px solid currentColor;
  box-shadow:0 0 24px currentColor;
}

.ss-pink{color:#ff2fb9}
.ss-yellow{color:#ffc400}
.ss-violet{color:#bf31ff}

.ss-feature strong,
.ss-feature em{
  display:block;
  color:#fff;
  font-style:normal;
  text-transform:uppercase;
  line-height:1.05;
}

.ss-feature strong{font-size:16px}
.ss-feature em{font-size:13px}

.ss-actions{
  display:flex;
  gap:28px;
}

.ss-actions a{
  width:330px;
  height:66px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-size:18px;
  font-weight:1000;
}

.ss-btn-main{
  background:linear-gradient(135deg,#ff2fb9,#ff4d72,#ff9824);
  box-shadow:0 0 34px rgba(255,47,185,.25);
}

.ss-btn-outline{
  border:1px solid #ff2fb9;
  background:rgba(0,0,0,.38);
}

.ss-hero-right{
  min-width:0;
  display:flex;
  justify-content:flex-end;
  padding-top:205px;
}

.ss-player{
  width:820px;
  min-height:270px;
  padding:28px;
  display:grid;
  grid-template-columns:190px 1fr;
  gap:30px;
  align-items:center;
  border-radius:20px;
  background:rgba(5,7,18,.88);
  border:1px solid rgba(0,200,255,.52);
  box-shadow:0 0 44px rgba(0,200,255,.14),0 28px 90px rgba(0,0,0,.62);
  backdrop-filter:blur(14px);
}

.ss-cover{
  width:190px;
  height:190px;
  border-radius:14px;
  background:url('../img/demo/birthday-cover-exact.webp') center/cover no-repeat;
}

.ss-player h3{
  margin:0 0 12px;
  font-size:28px;
}

.ss-player p{
  margin:0 0 20px;
  font-size:19px;
  color:#ddd;
}

.ss-audio{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  align-items:center;
}

.ss-play{
  width:70px;
  height:70px;
  border-radius:50%;
  border:2px solid #ff2fb9;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

.ss-wave{
  height:64px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow:hidden;
}

.ss-wave span{
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#ff2fb9,#00c8ff);
}

.ss-wave span:nth-child(3n){height:42px}
.ss-wave span:nth-child(4n){height:30px}
.ss-wave span:nth-child(5n){height:52px}
.ss-wave span:not(:nth-child(3n)):not(:nth-child(4n)):not(:nth-child(5n)){height:24px}

.ss-time{
  grid-column:2;
  display:flex;
  justify-content:space-between;
  font-size:15px;
}

.ss-audio audio{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

@media(max-width:1600px){
  .ss-hero-bg{
    width:980px;
    top:-74px;
    right:-30px;
  }
  .ss-hero-inner{
    grid-template-columns:700px 1fr;
    gap:34px;
  }
  .ss-hero h1{font-size:66px}
  .ss-player{width:740px}
}

@media(max-width:1300px){
  .ss-hero-bg{
    width:980px;
    right:-160px;
  }
  .ss-hero-inner{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .ss-hero-right{
    padding-top:20px;
  }
  .ss-player{
    width:100%;
  }
}

@media(max-width:900px){
  .ss-hero-inner{padding:46px 24px}
  .ss-hero h1{font-size:44px}
  .ss-hero-lead{font-size:18px}
  .ss-features{grid-template-columns:repeat(2,1fr)}
  .ss-actions{flex-direction:column}
  .ss-actions a{width:100%}
  .ss-player{grid-template-columns:1fr}
  .ss-cover{width:100%;height:220px}
}