:root{
  --bg:#0f0a0f;
  --bg2:#121026;
  --gold:#f0c96a;
  --pink:#b20f1e;
  --blue:#e0b24f;
  --purple:#3a1114;
  --navy:#24160f;
  --ember:#8f5d12;
  --card:rgba(18,10,22,.72);
  --stroke:rgba(240,201,106,.18);
  --glow: 0 0 18px rgba(178,15,30,.22), 0 0 28px rgba(224,178,79,.16);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(42rem 30rem at 18% 14%, rgba(224,178,79,.11), transparent 60%),
    radial-gradient(46rem 36rem at 80% 18%, rgba(178,15,30,.14), transparent 62%),
    radial-gradient(56rem 42rem at 50% 100%, rgba(94,14,24,.16), transparent 70%),
    linear-gradient(180deg, #050305 0%, #13070c 38%, #090409 68%, #040305 100%);
  background-attachment: fixed;
  color:rgba(240,201,106,.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:.08;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:-3;
}

body:after{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.085;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:-2;
}

/* smoke haze */
.db-smoke{
  position:fixed; inset:-20%;
  background:
    radial-gradient(60% 50% at 40% 40%, rgba(178,15,30,.08), rgba(0,0,0,0)),
    radial-gradient(55% 45% at 70% 60%, rgba(224,178,79,.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:0;
  opacity:.55;
}

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(240,201,106,.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(178,15,30,.25));}

.db-nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0; flex-wrap:wrap}
.db-nav a{color:rgba(240,201,106,.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: linear-gradient(180deg, rgba(18,10,22,.78), rgba(10,7,14,.72));
  border: 1px solid rgba(240,201,106,.14);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255,226,156,.03) inset, var(--glow);
  position:relative;
  overflow:hidden;
}
.db-card:before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(90% 60% at 20% 20%, rgba(178,15,30,.14), rgba(0,0,0,0)),
              radial-gradient(60% 60% at 85% 25%, rgba(224,178,79,.10), rgba(0,0,0,0)),
              radial-gradient(70% 55% at 18% 12%, rgba(255,227,150,.05), rgba(0,0,0,0));
  opacity:.95;
  pointer-events:none;
}
.db-card-inner{position:relative; padding: 26px 26px 24px;}
.db-kicker{color:rgba(240,201,106,.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(240,201,106,.78); max-width: 58ch}
.db-btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.db-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight:800;
  border: 1px solid rgba(240,201,106,.28);
  background: linear-gradient(135deg, rgba(90,14,25,.78), rgba(18,10,14,.92));
  box-shadow: 0 0 0 1px rgba(255,226,156,.05) inset, 0 10px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color:rgba(240,201,106,.92);
}
.db-btn:before{
  content:"";
  position:absolute;
  inset:-20%;
  background:linear-gradient(115deg, transparent 26%, rgba(255,235,170,.06) 38%, rgba(255,235,170,.42) 50%, rgba(255,235,170,.06) 62%, transparent 74%);
  transform:translateX(-150%) skewX(-18deg);
  animation:dbShimmer 6.8s ease-in-out infinite;
  z-index:-1;
}
.db-btn:hover{transform: translateY(-1px); border-color: rgba(255,220,125,.54); box-shadow: 0 0 0 1px rgba(255,226,156,.05) inset, 0 14px 32px rgba(0,0,0,.28), var(--glow); color:white}
.db-btn.primary{
  background: linear-gradient(135deg, rgba(178,15,30,.44), rgba(224,178,79,.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(178,15,30,.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(240,201,106,.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(240,201,106,.14);
  background: linear-gradient(135deg, rgba(178,15,30,.18), rgba(224,178,79,.12));
  box-shadow: var(--glow);
}
.db-feature .icon:before{content:"🐉"; font-size:20px; filter: drop-shadow(0 0 8px rgba(178,15,30,.22));}

.db-footer{padding: 26px 0 48px; border-top:1px solid rgba(240,201,106,.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(240,201,106,.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(240,201,106,.14);
  box-shadow: 0 0 16px rgba(178,15,30,.18);
  background: rgba(15,10,15,.35);
  padding: 6px;
}

@keyframes dbShimmer{
  0%, 18%{ transform:translateX(-160%) skewX(-18deg); opacity:0; }
  24%{ opacity:1; }
  42%{ transform:translateX(180%) skewX(-18deg); opacity:1; }
  52%,100%{ transform:translateX(180%) skewX(-18deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .db-smoke{ animation:none; }
  .db-btn:before{ animation:none; }
}