:root{
      --bg:#0e0e10; 
      --fg:#f5f5f7; 
      --muted:#b7b7bd; 
      --accent:#ff3d3d;
      --card:#16161a; 
      --border:#2a2a31; 
      --maxw:1120px; 
      --radius:18px;
      --shadow:0 8px 24px rgba(0,0,0,.35);
    }
*{box-sizing:border-box}
html,body{
    margin:0;
    height:auto;
    scroll-behavior:smooth;
}
body{
    font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--fg);
    background:
        radial-gradient(1700px 1800px at 10% -10%, rgba(255,61,61,.18), transparent 55%),
        radial-gradient(800px 600px at 110% 10%, rgba(255,61,61,.10), transparent 50%),
        radial-gradient(1700px 1800px at 90% 110%, rgba(255,61,61,.18), transparent 55%),
        var(--bg);
}
.container{
    max-width:var(--maxw);
    margin-inline:auto;
    padding:0 20px;
}
header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(14,14,16,.7);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--border);
}

h1{
    margin:.1em 0 .3em;
    font-size:clamp(2rem, 5vw, 3.2rem);
    line-height:1.05;
}

.cta{
    display:flex;
    gap:12px;
    margin-top:22px;
}

.btn{
    appearance:none;
    border:none;
    border-radius:14px;
    padding:12px 16px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.btn-primary{
    background:var(--accent);
    color:white;
}

.btn-ghost{
    background:transparent;
    color:var(--fg);
    border:1px solid var(--border);
}

section{
    padding:38px 0
}

.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}
.section-title h2{
    margin:0;
    font-size:1.4rem;
}
.subtle{
    color:var(--muted);
    font-size:.95rem;
}
.hero{
    padding:72px 0 40px;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:28px;
    align-items:center;
}

  .card-wrapper{
      width: 100%;
      background:
        radial-gradient(1700px 1800px at 10% -10%, rgba(255,61,61,.18), transparent 55%),
        radial-gradient(800px 600px at 110% 10%, rgba(255,61,61,.10), transparent 50%),
        radial-gradient(1700px 1800px at 90% 110%, rgba(255,61,61,.18), transparent 55%),
        var(--bg);
      display:flex;
      gap:16px;
      margin-left: 0px;;
      padding:25px;
      border-radius:var(--radius);
    }
    .card-wrapper.bottom {
      background: transparent;
      align-items: flex-end;
    }
    .card{
      /*background:linear-gradient(180deg,#15151b,#0e0e12);*/
      background: transparent;
      border:1px solid var(--border);border-radius:var(--radius);
      overflow:hidden;box-shadow:var(--shadow);
      padding:9px;
      height:fit-content;
    }    
    .card.image {
      width:25%; 
    }
    .card.text {
      width:75%;
    }
    .img-artist {
      width:100%;
    }

    .thumb{
      aspect-ratio:1/1;
      background:#222;
      display:block;
    }
    .thumb img{
      width:100%;
      height:100%;
      object-fit:fill;
      display:block;
    }
    .card-body{
      padding:12px 14px;
    }
    .title{
      margin:.3em 0 0;
      font-weight:600;
    }

  img {
     border-radius:var(--radius);
  }
  
.grid{
    display:grid;
    gap:16px;
}
.grid.releases{
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid.artists{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.card{
    background:linear-gradient(180deg, #15151b, #0e0e12);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}
.thumb{
    aspect-ratio:1/1;
    background:#222;
    display:block;
}
.thumb img{
    width:100%;
    height:100%;
    object-fit:fit;
    display:block;
}
.card-body{
    padding:12px 14px;  
}
.tag{
    font-size:.72rem;
    color:#fff;
    background:rgba(255,61,61,.18);
    border:1px solid rgba(255,61,61,.5);
    padding:3px 8px;
    border-radius:999px;
}
.title{
    margin:.4em 0 0;
    font-weight:600;
}
.meta{
    color:var(--muted);
    font-size:.85rem;
}
.pane{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.panel{
    border:1px solid var(--border);
    background:linear-gradient(180deg, #141418, #0d0d11);
    border-radius:var(--radius);
    padding:20px;
}
.badge{
    display:inline-block;
    margin-bottom:10px;
    font-size:.72rem;
    color:#fff;
    background:#23232a;
    border:1px solid var(--border);
    padding:4px 8px;
    border-radius:999px;
}

.soon{
    color:var(--accent);
    font-weight:700;
}

input, textarea{
    width:100%;
    border:1px solid var(--border);
    background:#121218;
    color:var(--fg);
    border-radius:14px;
    padding:12px 14px;
    font:inherit;
}
textarea{
    min-height:120px;
}
label{
    font-weight:600;
}


.hint{
    color:var(--muted);
    font-size:.9rem;
}
footer{
    border-top:1px solid var(--border);
    padding:28px 0 50px;
    color:var(--muted);
}
@media (max-width:1000px){
    .grid.releases{
        grid-template-columns:repeat(2,1fr)
    }.grid.artists{
        grid-template-columns:repeat(3,1fr)
    }
}
@media (max-width:680px){
    .hero-grid{
        grid-template-columns:1fr;
    }
    .grid.releases,.grid.artists{
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width:460px){
    .grid.releases,.grid.artists{
        grid-template-columns:1fr;
    }
}


@media (max-width:840px){
    .pane{
        grid-template-columns:1fr;
    }
}