/* ================================
   DESERT BRIDGE MUSIC™ — styles.css
   Premium streaming/upload look
   ================================ */

/* ---------- THEME ---------- */
:root{
  --emerald:#004B3C;
  --emerald-900:#022720;
  --emerald-800:#06372d;
  --emerald-700:#0b3f34;
  --bg:#081310;
  --ink:#F2F7F6;
  --muted:#CFE1DB;
  --line:rgba(255,255,255,.08);
  --gold:#D4AF37;
  --gold-soft:#FFD966;
  --gold-ink:#1d1604;
  --shadow:0 18px 40px rgba(0,0,0,.35);
}

/* ---------- RESETS ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{opacity:.9}
::selection{background:var(--gold-soft);color:#14342c}

/* ---------- GLOBAL ---------- */
body{
  font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 500px at 50% -10%, #0d2f26 0%, var(--bg) 70%);
  color:var(--ink);
  line-height:1.55;
}

/* ---------- WRAPPERS ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:22px}
.grid-2{display:grid;gap:18px}
@media (min-width:900px){ .grid-2{grid-template-columns:1fr 1fr} }

/* ---------- HEADER / HERO ---------- */
.site-header{
  background:linear-gradient(180deg, var(--emerald) 0%, var(--emerald-900) 100%);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.site-header .banner{
  width:100%;
  aspect-ratio: 21/9;
  object-fit:cover;
  filter:contrast(1.05) saturate(1.05);
  box-shadow:var(--shadow);
}
.brandbar{
  max-width:1160px;
  margin:-48px auto 0; /* pulls over banner for streaming look */
  display:flex; gap:16px; align-items:center;
  padding:0 22px 22px;
}
.brandbar .crest{
  width:88px;height:88px;border-radius:18px;
  background:#0c201b; padding:8px;
  border:1px solid rgba(212,175,55,.25);
  box-shadow:0 12px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
h1{
  margin:4px 0 2px;
  font-size: clamp(26px, 3.2vw, 36px);
  color:var(--gold);
  letter-spacing:.4px;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.tag{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:600;
  font-size:14px;
}
.cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  font-weight:700; letter-spacing:.2px; border:1px solid var(--line);
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn.gold{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  color:var(--gold-ink); border-color:transparent;
  box-shadow:0 10px 22px rgba(212,175,55,.25);
}
.btn.ghost{ background:#103831; color:var(--ink); }
.btn:active{ transform:translateY(1px) }

/* ---------- CARDS ---------- */
.card{
  background:linear-gradient(180deg, #0a1e18, #0a1b17);
  border:1px solid var(--line);
  border-radius:16px; padding:20px;
  box-shadow:var(--shadow);
}
h2{
  margin:0 0 12px; color:var(--gold);
  font-size: clamp(18px, 2.2vw, 22px);
  border-bottom:1px solid rgba(212,175,55,.25);
  padding-bottom:6px;
}

/* ---------- LISTS ---------- */
.ticks{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.ticks li{margin:6px 0}
.steps{margin:10px 0 0;padding-left:20px;color:var(--muted)}
.note{margin-top:10px;color:#bfe0d6;font-size:13px}

/* ---------- EMBEDS / PLAYERS ---------- */
.embed, iframe{
  width:100%; border:0; display:block;
  background:#000; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
iframe[title*="YouTube"], iframe[src*="spotify"], iframe[src*="audiomack"]{
  aspect-ratio: 16/9; /* responsive players */
  height:auto;
}

/* ---------- SUBMISSION FORM ---------- */
.form{
  width:100%; height:min(76vh, 760px);
  border-radius:14px; border:1px solid var(--line);
  background:#0b1513;
}

/* ---------- LINKS / META ---------- */
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{
  padding:8px 12px; border-radius:999px;
  background:#0f2f28; border:1px solid var(--line);
}

/* ---------- STICKY ACTION (mobile) ---------- */
@media (max-width:680px){
  .sticky-cta{
    position:sticky; bottom:0; z-index:9;
    backdrop-filter:blur(8px);
    background:linear-gradient(180deg, transparent, rgba(8,19,16,.92));
    padding:10px 14px; display:flex; gap:10px; justify-content:center;
    border-top:1px solid var(--line);
  }
}

/* ---------- FOOTER ---------- */
.foot{
  text-align:center; color:#bcd3c9;
  padding:28px 12px; margin-top:28px;
  border-top:1px solid var(--line);
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
  .btn, .brandbar, .card{transition:none}
}