:root{
  --bg:#07060a;
  --panel:#0c0a11;
  --panel-2:#11101a;
  --text:#f7f2e8;
  --muted:#b8afc2;
  --gold:#d6a43b;
  --gold-2:#f0c967;
  --purple:#8e2de2;
  --line:rgba(214,164,59,.34);
  --shadow:0 18px 70px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 70% 15%, rgba(142,45,226,.12), transparent 30%),
    linear-gradient(180deg,#07060a,#090710 60%,#050407);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

a{color:inherit;text-decoration:none}
img{display:block;width:100%}

.site-header{
  position:fixed;
  z-index:50;
  inset:0 0 auto 0;
  height:78px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 4vw;
  background:linear-gradient(180deg,rgba(6,5,9,.94),rgba(6,5,9,.54),transparent);
  backdrop-filter:blur(10px);
}
.brand{justify-self:start}
.brand-mark{
  font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;
  font-size:1.45rem;
  font-style:italic;
  color:var(--gold-2);
  letter-spacing:.02em;
}
.nav{display:flex;gap:34px}
.nav a,.top-socials a{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:#f4efe5;
  transition:.2s ease;
}
.nav a:hover,.top-socials a:hover{color:var(--gold-2)}
.socials{display:flex;align-items:center;gap:16px}
.top-socials{justify-self:end}
.menu-toggle{display:none;background:none;border:0;color:white;font-size:1.5rem}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding:130px 7vw 70px;
  background:
    linear-gradient(90deg,rgba(5,4,8,.97) 0%,rgba(5,4,8,.88) 29%,rgba(5,4,8,.48) 51%,rgba(5,4,8,.08) 72%),
    linear-gradient(180deg,transparent 65%,#07060a 100%),
    url("assets/seddoliciouz-hero.png") center 35%/cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 72% 40%,rgba(214,164,59,.1),transparent 22%),
    radial-gradient(circle at 22% 28%,rgba(142,45,226,.08),transparent 26%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:1;max-width:780px}
.eyebrow{
  margin:0 0 12px;
  color:var(--gold-2);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-weight:600;
  font-size:.88rem;
}
.hero h1{
  margin:0;
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(4.6rem,10vw,9.5rem);
  line-height:.86;
  letter-spacing:.02em;
  color:transparent;
  background:linear-gradient(180deg,#f1cc70,#b27815);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
.hero-copy{
  max-width:610px;
  margin:26px 0 26px;
  color:#eee8f0;
  font-size:clamp(1rem,1.7vw,1.24rem);
  line-height:1.6;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  min-width:170px;
  padding:15px 22px;
  text-align:center;
  border:1px solid rgba(255,255,255,.26);
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.84rem;
  font-weight:700;
  transition:.25s ease;
}
.btn-primary{
  border-color:var(--gold);
  color:var(--gold-2);
  box-shadow:inset 0 0 0 1px rgba(214,164,59,.08);
}
.btn-primary:hover{background:var(--gold);color:#0b0906}
.btn-ghost:hover{border-color:white;background:rgba(255,255,255,.06)}
.platforms{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.platforms a{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;
  color:#eee;
  background:rgba(8,7,11,.55);
  font-size:.86rem;
}
.platforms a:hover{border-color:var(--gold)}

.section{padding:90px 7vw}
.section-heading{margin-bottom:28px}
.section-heading h2,.about-card h2,.contact-card h2{
  margin:0;
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(2.8rem,6vw,5rem);
  letter-spacing:.03em;
}

.music-section{
  background:
    linear-gradient(180deg,rgba(255,255,255,.01),transparent),
    radial-gradient(circle at 15% 20%,rgba(142,45,226,.1),transparent 25%);
}
.release-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  max-width:980px;
}
.release-card{
  background:linear-gradient(180deg,rgba(18,15,24,.92),rgba(8,7,10,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.cover-wrap{aspect-ratio:1/1;overflow:hidden}
.cover-wrap img{height:100%;object-fit:cover;transition:transform .4s ease}
.release-card:hover .cover-wrap img{transform:scale(1.025)}
.release-meta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px 20px;
}
.release-meta h3{margin:0 0 4px;font-size:1.2rem}
.release-meta p{margin:0;color:var(--muted);font-size:.88rem}
.mini-btn{
  flex:0 0 auto;
  border:1px solid var(--gold);
  padding:10px 13px;
  color:var(--gold-2);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.72rem;
}
.mini-btn:hover{background:var(--gold);color:#090706}

.about-section{
  min-height:68vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(7,6,10,.92),rgba(7,6,10,.62)),
    url("assets/seddoliciouz-hero.png") center 58%/cover fixed;
}
.about-card{
  max-width:780px;
  padding:38px;
  background:rgba(8,7,11,.78);
  border:1px solid rgba(214,164,59,.24);
  backdrop-filter:blur(14px);
}
.about-card p:not(.eyebrow){
  color:#d9d2df;
  line-height:1.8;
  font-size:1.05rem;
}

.contact-section{
  display:flex;
  justify-content:center;
  text-align:center;
}
.contact-card{
  width:min(880px,100%);
  padding:52px 30px;
  background:linear-gradient(180deg,rgba(16,12,22,.96),rgba(8,7,10,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.email-link{
  display:inline-block;
  margin:20px 0 28px;
  font-size:clamp(1.05rem,2vw,1.45rem);
  color:var(--gold-2);
}
.contact-socials{justify-content:center;flex-wrap:wrap}
.contact-socials a{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
}
.contact-socials a:hover{border-color:var(--gold)}

.footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:24px 7vw 34px;
  border-top:1px solid rgba(214,164,59,.18);
  color:#9f97a9;
  font-size:.78rem;
}

[data-placeholder]{
  position:relative;
}
[data-placeholder]::after{
  content:"";
}

@media (max-width:900px){
  .site-header{
    grid-template-columns:1fr auto;
    height:68px;
    padding:0 20px;
  }
  .menu-toggle{display:block;justify-self:end}
  .nav,.top-socials{display:none}
  .nav.open{
    display:flex;
    position:absolute;
    top:68px;left:0;right:0;
    flex-direction:column;
    padding:22px;
    background:rgba(7,6,10,.97);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .hero{
    min-height:96vh;
    align-items:flex-end;
    padding:110px 22px 58px;
    background:
      linear-gradient(180deg,rgba(5,4,8,.2) 0%,rgba(5,4,8,.52) 45%,rgba(5,4,8,.98) 82%),
      url("assets/seddoliciouz-hero.png") 64% 25%/cover no-repeat;
  }
  .hero h1{font-size:clamp(4rem,19vw,7rem)}
  .section{padding:70px 22px}
  .release-grid{grid-template-columns:1fr}
  .about-section{background-attachment:scroll;background-position:60% 50%}
  .about-card{padding:28px 22px}
  .footer{padding:22px;flex-direction:column;text-align:center}
}

.coming-soon-link{
  opacity:.72;
  cursor:default;
}
.coming-soon-link:hover{
  opacity:.92;
}

.footer-links{
  display:flex;
  gap:20px;
  align-items:center;
}
.footer-links a{color:var(--gold-2)}
.footer-links a:hover{text-decoration:underline}

.legal-page{
  min-height:calc(100vh - 90px);
  padding:140px 7vw 80px;
  background:
    radial-gradient(circle at 15% 20%,rgba(142,45,226,.10),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(214,164,59,.09),transparent 25%),
    #07060a;
}
.legal-card{
  width:min(860px,100%);
  margin:0 auto;
  padding:42px;
  background:linear-gradient(180deg,rgba(16,12,22,.96),rgba(8,7,10,.97));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.legal-card h1{
  margin:0 0 28px;
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(3.5rem,7vw,6rem);
  letter-spacing:.03em;
  color:transparent;
  background:linear-gradient(180deg,#f1cc70,#b27815);
  -webkit-background-clip:text;
  background-clip:text;
}
.legal-card h2{
  margin:28px 0 8px;
  font-size:1.05rem;
  color:var(--gold-2);
}
.legal-card p{
  margin:0;
  color:#ddd5e2;
  line-height:1.75;
}
.legal-card a:not(.btn){color:var(--gold-2)}
.legal-note{
  margin-top:24px !important;
  color:#9f97a9 !important;
  font-size:.9rem;
}
.legal-back{
  display:inline-block;
  margin-top:34px;
}
.legal-header .nav{justify-self:end}

@media (max-width:900px){
  .footer-links{flex-direction:column;gap:8px}
  .legal-page{padding:110px 22px 60px}
  .legal-card{padding:28px 22px}
  .legal-header .nav{display:flex;position:static;padding:0;background:none;border:0}
}


/* Narrow hero title fix */
.brand-mark{
  font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;
  font-weight:600;
  letter-spacing:-0.03em;
}

.hero h1{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(4.8rem,10vw,9.5rem);
  line-height:.86;
  letter-spacing:.01em;
  white-space:nowrap;
  transform:scaleX(.68);
  transform-origin:left center;
  width:147%;
  max-width:none;
}

.section-heading h2,
.about-card h2,
.contact-card h2,
.legal-card h1{
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  letter-spacing:.02em;
}

@media (max-width:1100px){
  .hero h1{
    font-size:clamp(4rem,9.5vw,8rem);
    transform:scaleX(.66);
    width:152%;
  }
}

@media (max-width:900px){
  .hero h1{
    font-size:clamp(3.2rem,17vw,6rem);
    transform:scaleX(.62);
    width:161%;
    white-space:nowrap;
  }
}


/* Release countdown */
.countdown-section{
  position:relative;
  z-index:3;
  margin-top:-58px;
  padding:0 7vw 36px;
}
.countdown-card{
  width:min(920px,100%);
  margin:0 auto;
  padding:28px 30px 30px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(17,13,24,.95),rgba(7,6,10,.97));
  border:1px solid rgba(214,164,59,.34);
  box-shadow:0 20px 70px rgba(0,0,0,.46);
  backdrop-filter:blur(14px);
}
.countdown-card h2{
  margin:0;
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(2.8rem,6vw,5rem);
  letter-spacing:.05em;
  color:transparent;
  background:linear-gradient(180deg,#f1cc70,#b27815);
  -webkit-background-clip:text;
  background-clip:text;
}
.countdown-copy{
  margin:10px 0 22px;
  color:#d9d2df;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  max-width:720px;
  margin:0 auto;
}
.countdown-unit{
  padding:17px 10px 14px;
  border:1px solid rgba(214,164,59,.28);
  background:rgba(255,255,255,.025);
}
.countdown-unit span{
  display:block;
  font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif;
  font-size:clamp(2rem,4vw,3.7rem);
  line-height:1;
  letter-spacing:.04em;
  color:var(--gold-2);
}
.countdown-unit small{
  display:block;
  margin-top:8px;
  color:#b8afc2;
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.countdown-status{
  margin:18px 0 0;
  color:#9f97a9;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
}

@media (max-width:700px){
  .countdown-section{
    margin-top:-28px;
    padding:0 22px 30px;
  }
  .countdown-card{padding:24px 16px}
  .countdown{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.creative-note{
  margin-top:22px !important;
  padding-top:18px;
  border-top:1px solid rgba(214,164,59,.18);
  color:#aaa1b2 !important;
  font-size:.9rem !important;
  line-height:1.65 !important;
}
.creative-note strong{
  color:var(--gold-2);
  font-weight:600;
}