:root{
  --bg:#0f0a0f;
  --bg2:#121026;
  --gold:#f5e765;
  --pink:#f503f5;
  --blue:#599dda;
  --purple:#562f57;
  --navy:#2b2c52;
  --ember:#a15d17;
  --card:rgba(18,10,22,.72);
  --stroke:rgba(245,231,101,.18);
  --glow: 0 0 18px rgba(245,3,245,.22), 0 0 28px rgba(89,157,218,.16);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:rgba(245,231,101,.92);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* scale texture overlay */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image: url("../svg/dragon-scales.svg");
  background-size: 420px 420px;
  opacity:.18;
  pointer-events:none;
  z-index:-3;
}

/* smoke haze */
.db-smoke{
  position:fixed; inset:-20%;
  background:
    radial-gradient(60% 50% at 40% 40%, rgba(245,3,245,.08), rgba(0,0,0,0)),
    radial-gradient(55% 45% at 70% 60%, rgba(89,157,218,.07), rgba(0,0,0,0));
  filter: blur(18px);
  opacity:.55;
  animation: dbDrift 18s linear infinite;
  pointer-events:none;
  z-index:-2;
}
@keyframes dbDrift{ from{transform:translate3d(-3%, -2%, 0)} to{transform:translate3d(3%, 2%, 0)} }

/* embers canvas */
#db-embers{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.75;
}

a{color:var(--blue); text-decoration:none}
a:hover{color:var(--pink)}

.db-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(15,10,15,.85), rgba(15,10,15,.55));
  border-bottom: 1px solid rgba(245,231,101,.10);
}
.db-wrap{max-width:1180px; margin:0 auto; padding: 14px 20px;}
.db-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.db-logo img{height:54px; width:auto; display:block; filter: drop-shadow(0 0 10px rgba(245,3,245,.25));}

.db-nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; flex-wrap:wrap}
.db-nav a{color:rgba(245,231,101,.88); font-weight:600; letter-spacing:.2px}
.db-nav a:hover{color:var(--pink)}

.db-hero{
  padding: 54px 0 20px;
}
.db-hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items:stretch;
}
@media (max-width: 900px){
  .db-hero-grid{grid-template-columns:1fr}
  .db-logo img{height:46px}
}

.db-card{
  background: var(--card);
  border: 1px solid rgba(245,231,101,.12);
  border-radius: 22px;
  box-shadow: var(--glow);
  position:relative;
  overflow:hidden;
}
.db-card:before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(90% 60% at 20% 20%, rgba(245,3,245,.18), rgba(0,0,0,0)),
              radial-gradient(60% 60% at 85% 25%, rgba(89,157,218,.16), rgba(0,0,0,0));
  opacity:.9;
  pointer-events:none;
}
.db-card-inner{position:relative; padding: 26px 26px 24px;}
.db-kicker{color:rgba(245,231,101,.78); letter-spacing:.16em; text-transform:uppercase; font-size:12px}
.db-title{font-size:42px; margin:10px 0 10px; line-height:1.05}
.db-sub{font-size:16px; color:rgba(245,231,101,.78); max-width: 58ch}
.db-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.db-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight:800;
  border: 1px solid rgba(245,231,101,.18);
  background: rgba(15,10,15,.55);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color:rgba(245,231,101,.92);
}
.db-btn:hover{transform: translateY(-1px); border-color: rgba(245,3,245,.35); box-shadow: var(--glow); color:white}
.db-btn.primary{
  background: linear-gradient(135deg, rgba(245,3,245,.28), rgba(89,157,218,.22));
}

.db-sigil{
  min-height: 280px;
  display:flex; align-items:center; justify-content:center;
}
.db-sigil img{
  width: 88%;
  max-width: 360px;
  height:auto;
  opacity:.9;
  filter: drop-shadow(0 0 18px rgba(245,3,245,.18));
}

.db-divider{
  margin: 26px auto 8px;
  width: min(980px, calc(100% - 40px));
  opacity:.95;
}
.db-divider img{width:100%; height:36px; display:block}

.db-sections{padding: 14px 0 60px}
.db-grid3{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width: 900px){ .db-grid3{grid-template-columns:1fr} }

.db-feature h3{margin: 0 0 8px; font-size:18px}
.db-feature p{margin:0; color:rgba(245,231,101,.76); line-height:1.6}
.db-feature .icon{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(245,231,101,.14);
  background: linear-gradient(135deg, rgba(245,3,245,.18), rgba(89,157,218,.12));
  box-shadow: var(--glow);
}
.db-feature .icon:before{content:"🐉"; font-size:20px; filter: drop-shadow(0 0 8px rgba(245,3,245,.22));}

.db-footer{padding: 26px 0 48px; border-top:1px solid rgba(245,231,101,.10); background: rgba(15,10,15,.40);}
.db-foot-row{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.db-muted{color:rgba(245,231,101,.62)}

/* powered by badge bottom-right (half size) */
.db-y4h{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:block;
}
.db-y4h img{
  width: 64px; /* half-ish */
  height:auto;
  opacity:.92;
  border-radius: 10px;
  border:1px solid rgba(245,231,101,.14);
  box-shadow: 0 0 16px rgba(245,3,245,.18);
  background: rgba(15,10,15,.35);
  padding: 6px;
}