:root{
  --ds-black:#02050a;
  --ds-black2:#06101f;
  --ds-panel:#07172f;
  --ds-panel2:#0c2348;
  --ds-white:#f7f9ff;
  --ds-silver:#c9d5e8;
  --ds-blue:#59b7ff;
  --ds-red:#ff304f;
  --ds-violet:#7b5cff;
  --ds-gold:#f4c778;
  --ds-line:rgba(100,185,255,.30);
  --ds-shadow:0 22px 70px rgba(0,0,0,.48);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  padding-bottom:118px;
  background:
    radial-gradient(circle at 15% 0%, rgba(89,183,255,.14), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(255,48,79,.13), transparent 30%),
    linear-gradient(180deg,#02050a 0%,#071020 55%,#02050a 100%);
  color:var(--ds-white);
  font-family:Arial,Helvetica,sans-serif;
}

.d30-header{
  position:sticky;
  top:0;
  z-index:90;
  background:rgba(2,5,10,.93);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
}

.d30-header-inner{
  max-width:1360px;
  min-height:72px;
  margin:0 auto;
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.d30-logo{
  font-size:1.72rem;
  font-weight:950;
  letter-spacing:.09em;
  color:var(--ds-white);
  text-decoration:none;
}

.d30-nav{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}

.d30-nav a{
  color:var(--ds-white);
  text-decoration:none;
  font-weight:800;
  opacity:.94;
}

.d30-nav a:hover{color:var(--ds-gold)}

.d30-main{
  max-width:1360px;
  margin:0 auto;
  border-left:1px solid rgba(255,255,255,.05);
  border-right:1px solid rgba(255,255,255,.05);
}

.d30-hero{
  height:clamp(285px,32vw,450px);
  background:#05080f center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.d30-slogan{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 14px;
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:var(--ds-white);
  font-weight:950;
  letter-spacing:.45em;
  text-transform:uppercase;
  font-size:clamp(.86rem,1.75vw,1.30rem);
}

.d30-slogan span{color:var(--ds-red)}

.d30-albums{
  position:relative;
  padding:36px 42px 44px;
  background:#071020 center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}

.d30-albums::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2,5,10,.88), rgba(2,5,10,.34), rgba(2,5,10,.88)),
    linear-gradient(180deg, rgba(2,5,10,.28), rgba(2,5,10,.86));
  pointer-events:none;
}

.d30-albums > *{position:relative;z-index:1}

.d30-title{
  text-align:center;
  margin:0 0 28px;
  color:var(--ds-white);
  font-size:1.05rem;
  font-weight:950;
  letter-spacing:.48em;
  text-transform:uppercase;
}

.d30-grid{
  max-width:1070px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}

.d30-album{
  cursor:pointer;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(160,215,255,.28);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.38);
  transition:.18s ease;
}

.d30-album:hover,
.d30-album.active{
  transform:translateY(-5px);
  border-color:rgba(244,199,120,.82);
  box-shadow:0 24px 72px rgba(0,0,0,.55);
}

.d30-cover{
  aspect-ratio:1/1;
  background:#05080f;
  overflow:hidden;
}

.d30-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.d30-album-info{
  padding:13px 14px 15px;
  background:rgba(0,0,0,.72);
}

.d30-album-info h3{
  margin:0 0 6px;
  font-size:.98rem;
  font-weight:950;
  text-transform:uppercase;
}

.d30-album-info p{
  margin:0;
  color:var(--ds-silver);
  font-size:.90rem;
}

.d30-detail{
  display:none;
  position:relative;
  padding:34px 42px 42px;
  background:
    linear-gradient(135deg, rgba(2,5,10,.96), rgba(6,18,38,.92)),
    var(--d30-track-texture) center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}

.d30-detail.open{display:block}

.d30-detail::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,48,79,.14), transparent 34%, rgba(89,183,255,.16)),
    linear-gradient(180deg, rgba(2,5,10,.70), rgba(2,5,10,.90));
  pointer-events:none;
}

.d30-detail > *{position:relative;z-index:1}

.d30-detail-box{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:270px 1fr;
  gap:24px;
}

.d30-detail-cover{
  border-radius:16px;
  border:1px solid rgba(160,215,255,.24);
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.34);
  background:#02050a;
}

.d30-detail-cover img{
  width:100%;
  display:block;
}

.d30-detail h2{
  margin:0 0 8px;
  color:var(--ds-white);
  text-transform:uppercase;
  font-size:2.05rem;
  letter-spacing:.04em;
}

.d30-detail p{
  margin:0 0 16px;
  color:var(--ds-silver);
}

.d30-tracks{
  display:grid;
  gap:13px;
}

.d30-track{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:14px;
  align-items:center;
  padding:15px 16px 15px 19px;
  border-radius:20px;
  border:1px solid rgba(89,183,255,.30);
  background:
    linear-gradient(135deg, rgba(2,5,10,.84), rgba(10,31,62,.68)),
    radial-gradient(circle at 0% 0%, rgba(255,48,79,.13), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(89,183,255,.15), transparent 40%);
  box-shadow:0 10px 28px rgba(0,0,0,.30);
  position:relative;
  overflow:hidden;
}

.d30-track::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,var(--ds-red),var(--ds-blue));
}

.d30-track strong{
  display:block;
  margin-bottom:6px;
  color:var(--ds-white);
  font-size:1rem;
  letter-spacing:.02em;
}

.d30-track span{
  color:var(--ds-blue);
  font-weight:750;
  font-size:.92rem;
}

.d30-track-btn{
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:linear-gradient(135deg,var(--ds-red),var(--ds-blue));
  color:#fff;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.26);
}

.d30-after{
  padding:34px 42px 42px;
  background:linear-gradient(180deg,#05080f,#071020);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.d30-after-grid{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:22px;
  align-items:start;
}

.d30-manifesto{
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(89,183,255,.30);
  background:linear-gradient(180deg, rgba(5,12,24,.96), rgba(10,22,44,.92));
  box-shadow:var(--ds-shadow);
}

.d30-manifesto img{
  width:100%;
  display:block;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
}

.d30-services{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.d30-card{
  min-height:184px;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(89,183,255,.30);
  background:linear-gradient(135deg, rgba(4,11,22,.92), rgba(12,32,66,.86));
  box-shadow:var(--ds-shadow);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:.18s ease;
}

.d30-card:hover,
.d30-card.active{
  transform:translateY(-4px);
  border-color:rgba(244,199,120,.72);
}

.d30-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,48,79,.14), transparent 44%, rgba(89,183,255,.15)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.45));
  pointer-events:none;
}

.d30-card > *{position:relative;z-index:1}

.d30-card h3{
  margin:0 0 10px;
  color:var(--ds-white);
  font-size:1.30rem;
}

.d30-card p{
  margin:0;
  color:var(--ds-silver);
  line-height:1.55;
}

.d30-pill{
  display:inline-block;
  margin-top:14px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--ds-blue);
  background:rgba(0,0,0,.40);
  border:1px solid rgba(89,183,255,.25);
  font-weight:800;
}

.d30-panel{
  margin-top:18px;
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(89,183,255,.28);
  background:
    linear-gradient(135deg, rgba(2,5,10,.95), rgba(8,24,50,.90)),
    var(--d30-track-texture) center/cover no-repeat;
  box-shadow:var(--ds-shadow);
}

.d30-panel h3{
  margin:0 0 14px;
  font-size:1.45rem;
}

.d30-shop-categories{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.d30-shop-category{
  min-height:138px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(89,183,255,.28);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,48,79,.18), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(89,183,255,.20), transparent 42%),
    linear-gradient(135deg, rgba(3,8,18,.95), rgba(10,30,62,.82));
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  cursor:pointer;
  transition:.18s ease;
}

.d30-shop-category:hover,
.d30-shop-category.active{
  transform:translateY(-3px);
  border-color:rgba(244,199,120,.70);
}

.d30-shop-category h4{
  margin:0 0 8px;
  color:var(--ds-white);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.d30-shop-category p{
  margin:0;
  color:var(--ds-silver);
  line-height:1.45;
  font-size:.92rem;
}

.d30-shop-category span{
  display:inline-block;
  margin-top:12px;
  color:var(--ds-blue);
  font-weight:900;
  font-size:.86rem;
}

.d30-panel-note{
  margin:0 0 16px;
  color:var(--ds-silver);
  line-height:1.55;
}

.d30-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.d30-product{
  border:1px solid rgba(89,183,255,.22);
  border-radius:18px;
  overflow:hidden;
  background:rgba(0,0,0,.44);
}

.d30-product img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  background:#02050a;
}

.d30-product-body{
  padding:12px;
}

.d30-product-body strong{
  display:block;
  margin-bottom:6px;
}

.d30-product-body span{
  color:var(--ds-blue);
  font-size:.88rem;
  font-weight:800;
}

.d30-socials{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.d30-social{
  min-height:118px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(89,183,255,.28);
  background:linear-gradient(135deg, rgba(2,5,10,.92), rgba(10,31,62,.70));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  color:var(--ds-white);
}

.d30-social-icon{
  font-size:2rem;
  color:var(--ds-red);
}

.d30-social strong{
  display:block;
  margin-top:8px;
}

.d30-social span{
  color:var(--ds-silver);
  font-size:.86rem;
}

/* PLAYER GLOBALE — stile DoriSan, non nativo brutto */
.d30-player{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:200;
  min-height:104px;
  padding:12px 20px;
  background:
    linear-gradient(90deg, rgba(255,48,79,.11), transparent 34%, rgba(89,183,255,.15)),
    rgba(2,5,10,.98);
  border-top:1px solid rgba(89,183,255,.35);
  box-shadow:0 -18px 46px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}

.d30-player-inner{
  max-width:1360px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(230px,1fr) 54px minmax(260px,620px) 94px;
  gap:14px;
  align-items:center;
}

.d30-now-title{
  font-weight:950;
  color:var(--ds-white);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.d30-now-sub{
  color:var(--ds-blue);
  font-size:.88rem;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.d30-play{
  width:50px;
  height:50px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,var(--ds-red),var(--ds-blue));
  color:white;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 0 22px rgba(89,183,255,.22), 0 0 16px rgba(255,48,79,.18);
}

.d30-progress{
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.14);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  box-shadow:inset 0 0 16px rgba(0,0,0,.42);
}

.d30-bar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--ds-red),var(--ds-blue),var(--ds-gold));
  box-shadow:0 0 16px rgba(89,183,255,.50);
  transition:width .10s linear;
}

.d30-knob{
  position:absolute;
  top:50%;
  left:0%;
  width:20px;
  height:20px;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:#fff;
  border:3px solid var(--ds-blue);
  box-shadow:0 0 18px rgba(89,183,255,.70);
  pointer-events:none;
}

.d30-time{
  color:var(--ds-white);
  font-size:.84rem;
  text-align:right;
  font-weight:850;
}

.d30-hidden-audio{
  display:none !important;
}

.d30-footer{
  max-width:1360px;
  margin:0 auto;
  padding:28px 28px 56px;
  color:var(--ds-silver);
  border-top:1px solid rgba(255,255,255,.12);
}

@media(max-width:1100px){
  .d30-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .d30-detail-box{grid-template-columns:1fr}
  .d30-after-grid{grid-template-columns:1fr}
  .d30-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d30-socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d30-player-inner{grid-template-columns:1fr 54px}
  .d30-progress,.d30-time{grid-column:1 / -1}
}

@media(max-width:720px){
  body{padding-bottom:142px}
  .d30-header-inner{
    height:auto;
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
  }
  .d30-nav{gap:12px}
  .d30-hero{height:210px}
  .d30-slogan{
    min-height:58px;
    letter-spacing:.18em;
    font-size:.78rem;
  }
  .d30-albums,
  .d30-detail,
  .d30-after{
    padding-left:16px;
    padding-right:16px;
  }
  .d30-grid{grid-template-columns:1fr}
  .d30-track{grid-template-columns:1fr}
  .d30-shop-categories{grid-template-columns:1fr}
  .d30-product-grid{grid-template-columns:1fr}
  .d30-socials{grid-template-columns:1fr}
}