:root {
  --ld-ink: #080e11;
  --ld-panel: #201911;
  --ld-edge: #876a38;
  --ld-gold: #d7ab53;
  --ld-molten: #e4a060;
  --ld-bone: #f7f0de;
  --ld-muted: #d6c6a8;
  --ld-display: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --ld-ui: 'Segoe UI', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ld-bone); background: var(--ld-ink); font: 15px/1.7 var(--ld-ui);
  background-image: linear-gradient(180deg, rgba(6,15,17,.72), rgba(7,16,18,.94) 820px), url('/brand/drakoria-bg.png');
  background-position: center top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
}
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--ld-display); line-height: 1.18; }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
em { color: var(--ld-molten); font-style: normal; }
a { color: inherit; }
.ld-nav {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  min-height: 68px; padding: 9px max(18px, calc((100% - 1220px) / 2));
  background: rgba(14,11,8,.98); border-bottom: 1px solid var(--ld-edge); box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.ld-nav-logo img { display: block; width: auto; height: 44px; image-rendering: auto; }
.ld-nav nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }
.ld-nav nav a { color: var(--ld-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.ld-nav nav a:hover { color: var(--ld-molten); }
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px;
  border: 1px solid var(--ld-gold); border-radius: 0; box-shadow: 4px 4px 0 #05090a;
  font: 800 12px/1.2 var(--ld-ui); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: .16s ease;
}
.ld-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #05090a; }
.ld-btn--gold { color: #081715; background: linear-gradient(#f6e2ab,#ad7b2e); }
.ld-btn--ghost { min-height: 38px; padding: 8px 14px; color: var(--ld-molten); background: #101a1d; }
.ld-hero {
  position: relative; isolation: isolate; width: min(1440px,100%); min-height: 650px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.96fr);
  grid-template-areas: "eyebrow art" "title art" "lead art" "cta art" "count art" "badges art";
  align-content: center; align-items: center; justify-items: start; gap: 14px clamp(30px,5vw,72px); padding: 64px clamp(24px,6vw,88px);
  text-align: left; background: radial-gradient(ellipse at 5% 45%, rgba(31,74,69,.26), transparent 58%), linear-gradient(90deg,#091416 0%,rgba(9,20,22,.96) 52%,rgba(9,20,22,.25) 100%);
}
.ld-hero-art { grid-area: art; align-self: stretch; width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: center; border: 1px solid rgba(215,171,83,.42); box-shadow: 12px 12px 0 rgba(38,82,76,.28); }
.ld-hero-logo { display: none; }
.ld-eyebrow { margin: 0 0 14px; color: var(--ld-molten); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.ld-hero .ld-eyebrow { grid-area: eyebrow; margin: 0; padding: 6px 12px; color: var(--ld-gold); border-left: 3px solid var(--ld-gold); background: rgba(12,31,33,.88); }
.ld-hero h1 { grid-area: title; max-width: 700px; margin: 0; font-size: clamp(38px, 5vw, 64px); text-shadow: 0 4px 16px #000; }
.ld-hero h1 em { display: block; }
.ld-lead { grid-area: lead; max-width: 560px; margin: 0; color: #f0e4cb; text-shadow: 0 2px 10px #000; }
.ld-hero > .ld-btn { grid-area: cta; }
.ld-count { grid-area: count; margin: 6px 0 0; color: var(--ld-gold); font: 800 12px/1.2 var(--ld-ui); letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 2px 8px #000; }
.ld-badges { grid-area: badges; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 20px; margin: 6px 0 0; padding: 0; list-style: none; color: #f0e4cb; font-size: 12px; }
.ld-badges li { padding: 6px 9px; background: rgba(15,35,37,.9); border: 1px solid rgba(66,100,94,.8); }
.ld-badges .fa { margin-right: 5px; color: var(--ld-gold); }
.ld-rule { position: relative; width: min(780px, 86%); height: 1px; margin: 0 auto; background: linear-gradient(90deg,transparent,#90713c,#d7ab53,#90713c,transparent); }
.ld-section { width: min(1220px,100%); margin: 0 auto; padding: 72px 22px; }
.ld-center { text-align: center; }
.ld-split { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(28px,6vw,72px); align-items: center; padding-top: 54px; padding-bottom: 54px; }
.ld-split p:not(.ld-eyebrow) { max-width: 510px; color: var(--ld-muted); }
.ld-split img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 2px solid var(--ld-edge); box-shadow: 5px 5px 0 rgba(0,0,0,.55); }
.ld-split > div { grid-column: 2; grid-row: 1; }
.ld-split img { grid-column: 1; grid-row: 1; }
.ld-split { background: rgba(14,31,34,.88); border-top: 1px solid var(--ld-edge); border-bottom: 1px solid var(--ld-edge); }
.ld-cards { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 32px; }
.ld-card { display: block; overflow: hidden; color: inherit; background: var(--ld-panel); border: 1px solid var(--ld-edge); box-shadow: 4px 4px 0 rgba(0,0,0,.55); text-decoration: none; transition: transform .16s ease,border-color .16s ease; }
.ld-card:hover { transform: translateY(-3px); border-color: var(--ld-gold); }
.ld-card img { display: block; width: 100%; height: 164px; object-fit: cover; }
.ld-card:first-child { grid-column: 1; grid-row: 1 / span 2; }
.ld-card:first-child img { height: 340px; }
.ld-card:last-child { display: grid; grid-template-columns: 42% minmax(0,1fr); grid-column: 2 / 4; grid-row: 2; align-items: center; }
.ld-card:last-child img { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 164px; }
.ld-card:last-child h3,.ld-card:last-child p { grid-column: 2; }
.ld-card h3 { margin: 0; padding: 15px 15px 5px; color: var(--ld-molten); font-size: 18px; }
.ld-card p { margin: 0; padding: 0 15px 18px; color: var(--ld-muted); font-size: 12px; }
.ld-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.ld-steps li { position: relative; min-height: 208px; padding: 34px 20px 22px; text-align: center; background: var(--ld-panel); border: 1px solid var(--ld-edge); box-shadow: 4px 4px 0 rgba(0,0,0,.55); }
.ld-steps b { position: absolute; top: -14px; left: 50%; width: 28px; height: 28px; margin-left: -14px; color: #101719; background: var(--ld-molten); border: 2px solid #100d0b; font-size: 13px; line-height: 24px; }
.ld-steps .fa { color: var(--ld-molten); font-size: 26px; }
.ld-steps h3 { margin: 10px 0 8px; font-size: 18px; }
.ld-steps p { margin: 0; color: var(--ld-muted); font-size: 12px; }
.ld-faq { width: min(810px,100%); }
.ld-faq h2 { margin-bottom: 24px; }
.ld-faq details { margin-top: 8px; background: var(--ld-panel); border: 1px solid var(--ld-edge); }
.ld-faq summary { padding: 13px 16px; cursor: pointer; font-size: 13px; font-weight: 700; }
.ld-faq summary:hover { color: var(--ld-molten); }
.ld-faq details p { margin: 0; padding: 0 16px 16px; color: var(--ld-muted); font-size: 13px; }
.ld-final { padding: 86px 18px; text-align: center; background: linear-gradient(rgba(8,14,17,.67),rgba(8,14,17,.91)),url('/brand/drakoria-wars.png') center/cover no-repeat; border-top: 1px solid var(--ld-edge); border-bottom: 1px solid var(--ld-edge); }
.ld-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.ld-final .ld-btn { min-height: 46px; }
.ld-foot { padding: 30px 18px; color: #8f9f99; text-align: center; font-size: 11px; }
.ld-foot p { margin: 4px 0; }
.ld-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 14px !important; }
.ld-foot-links a { color: #c2d0c8; }
@media (max-width: 900px) {
  .ld-nav nav { gap: 12px; }
  .ld-nav nav a { font-size: 10px; }
  .ld-hero { min-height: 600px; grid-template-columns: minmax(0,1fr) minmax(250px,.8fr); padding-inline: 30px; gap: 12px 24px; }
  .ld-hero-art { min-height: 380px; }
  .ld-cards { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; }
  .ld-card:first-child { grid-row: auto; }
  .ld-card:first-child img { height: 190px; }
  .ld-card:last-child { grid-column: auto; grid-row: auto; display: block; }
  .ld-card:last-child img { height: 164px; min-height: 0; }
  .ld-split { grid-template-columns: 1fr; gap: 26px; }
  .ld-split > div,.ld-split img { grid-column: 1; }
  .ld-split img { grid-row: 1; }
  .ld-split > div { grid-row: 2; }
}
@media (max-width: 620px) {
  .ld-nav { min-height: 60px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 10px; padding: 9px 14px; }
  .ld-nav-logo { grid-column: 1; grid-row: 1; }
  .ld-nav > .ld-btn { grid-column: 2; grid-row: 1; justify-self: end; }
  .ld-nav nav { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; }
  .ld-nav nav a { font-size: 9px; }
  .ld-nav-logo img { height: 36px; }
  .ld-nav > .ld-btn { min-height: 34px; padding: 7px 10px; font-size: 10px; }
  .ld-hero { min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-areas: "art" "eyebrow" "title" "lead" "cta" "count" "badges"; gap: 14px; padding: 22px 16px 38px; }
  .ld-hero-art { min-height: 240px; width: 100%; box-shadow: 5px 5px 0 rgba(38,82,76,.28); }
  .ld-hero h1 { font-size: clamp(32px,9vw,48px); }
  .ld-lead { font-size: 13px; }
  .ld-badges { gap: 7px; font-size: 10px; }
  .ld-badges li { flex: 1 1 42%; }
  .ld-section { padding: 50px 16px; }
  .ld-cards,.ld-steps { grid-template-columns: 1fr; }
  .ld-steps { gap: 22px; }
  .ld-card img { height: 190px; }
}