/* ==========================================================
   Shadowbane Reforged — mockup stylesheet
   All colours live in :root so the theme can be retuned in one place.
   ========================================================== */

:root {
  --bg: #0d0b0f;
  --bg-2: #15121a;
  --bg-3: #1d1922;
  --line: #2c2632;
  --text: #e9e3da;
  --muted: #a39a90;
  --gold: #e2b55c;
  --gold-2: #b8792a;
  --ember: #e4572e;
  --ember-2: #b3261e;
  --ok: #5fcf80;

  --radius: 10px;
  --max: 1180px;
  --head: "Cinzel", Georgia, serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .75em 1.4em;
  border-radius: 6px;
  font: 600 .95rem/1 var(--body);
  letter-spacing: .03em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--ember {
  background: linear-gradient(180deg, var(--ember), var(--ember-2));
  color: #fff;
  box-shadow: 0 6px 24px -8px rgba(228, 87, 46, .7);
}
.btn--ember:hover { box-shadow: 0 10px 32px -8px rgba(228, 87, 46, .9); }
.btn--ghost { border-color: rgba(226, 181, 92, .55); color: var(--gold); background: rgba(13, 11, 15, .35); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(226, 181, 92, .08); }
.btn--small { padding: .6em 1.1em; font-size: .85rem; }
.btn--large { padding: 1em 1.8em; font-size: 1rem; }

.link-arrow { color: var(--gold); font-weight: 600; display: inline-flex; gap: .4em; align-items: center; }
.link-arrow::after { content: "→"; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

.eyebrow {
  font: 600 .78rem/1 var(--body);
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--ember); margin-bottom: 1em;
}
.ember-text {
  background: linear-gradient(180deg, #ffb070, var(--ember) 55%, var(--ember-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(13, 11, 15, .85);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__logo { height: 52px; width: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); }
.footer__logo { width: 220px; height: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: .92rem; }
.nav__links a:not(.btn) { color: var(--muted); transition: color .2s; }
.nav__links a:not(.btn):hover { color: var(--text); }
.nav__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; transition: transform .25s, opacity .25s; }

@media (max-width: 860px) {
  .nav__inner { padding: 12px 16px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(13, 11, 15, .97); border-bottom: 1px solid var(--line);
    padding: 8px 16px 20px;
    display: none;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav.is-open { background: rgba(13, 11, 15, .97); }
  .nav__links a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__links .btn { margin-top: 16px; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 120px 0 140px;
  overflow: hidden;
}
.hero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 75%, rgba(228, 87, 46, .35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(90, 50, 120, .35), transparent 70%),
    linear-gradient(180deg, #0a0810 0%, #1a1020 45%, #2a1418 75%, #120c0e 100%);
}
.hero__moon {
  position: absolute; top: 14%; right: 16%;
  width: clamp(80px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3dc, #f0c88a 45%, #b5793d 100%);
  box-shadow: 0 0 80px 20px rgba(240, 180, 110, .25), 0 0 200px 60px rgba(228, 87, 46, .12);
  opacity: .9;
}
/* Forge hero: dark smoke, a glow rising from below, the sword standing behind the logo. */
.hero--forge .hero__moon, .hero--forge .hero__land { display: none; }
.hero--forge .hero__sky {
  background:
    radial-gradient(ellipse 55% 45% at 50% 105%, rgba(228, 87, 46, .45), transparent 70%),
    radial-gradient(ellipse 35% 30% at 50% 100%, rgba(255, 170, 80, .25), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(60, 30, 40, .55), transparent 75%),
    linear-gradient(180deg, #070609 0%, #0f0b10 55%, #160d0e 100%);
}
.hero__smoke {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 40% 25% at 25% 70%, rgba(120, 100, 110, .10), transparent 70%),
    radial-gradient(ellipse 35% 20% at 75% 60%, rgba(120, 100, 110, .08), transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 85%, rgba(90, 60, 60, .12), transparent 70%);
  filter: blur(20px);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, -2%, 0); } }
.hero--forge .hero__embers, .hero--forge .hero__fog { z-index: 1; }

/* ---------- Pinned sword ----------
   Fixed to the viewport so the page scrolls past it. It sits above the section
   backgrounds (z 1) but below every section's content (z 2), so cards and text
   always cover it. main.js sets --sword-opacity: strong in the hero, a faint
   watermark once you scroll into the content. */
.sword-layer {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.sword {
  position: relative;
  height: 84vh; height: 84svh; aspect-ratio: 121 / 589;
  transform: translateY(4vh);
}
.sword img {
  width: 100%; height: 100%; max-width: none;
  opacity: var(--sword-opacity, .5);
  filter: brightness(1.4) drop-shadow(0 0 18px rgba(228, 87, 46, .55)) drop-shadow(0 0 60px rgba(228, 87, 46, .3));
  transition: opacity .2s linear;
}

/* Laser tracing the outline. pathLength="1" makes the dash sizes fractions of the
   whole outline, so the speed and length don't depend on how big the sword renders. */
.sword__laser {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  opacity: calc(var(--sword-opacity, .5) * 1.4 + .3);  /* stays visible when the ghost fades */
  filter: drop-shadow(0 0 2px #ff9a4a) drop-shadow(0 0 7px rgba(228, 87, 46, .9));
  transition: opacity .2s linear;
}
.sword__laser path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sword__beam {
  stroke: #fff2e0; stroke-width: 2px;
  stroke-dasharray: .08 .92;   /* one dash, 8% of the outline */
  animation: laser-beam 8s linear infinite;
}
@keyframes laser-beam { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.section > .container, .footer > .container { position: relative; z-index: 2; }
.hero--forge .hero__content { text-align: center; }
.hero--forge .hero__logo img { margin: 0 auto; }
.hero--forge .hero__lede { margin-left: auto; margin-right: auto; }
.hero--forge .hero__actions { justify-content: center; }
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.ridge--far { fill: #2a1a24; }
.ridge--mid { fill: #1b1219; }
.castle { fill: #120c11; }
.castle .window { fill: #ff9a4a; filter: drop-shadow(0 0 4px #ff7a3d); }
.ridge--near { fill: var(--bg); }
.hero__fog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(13, 11, 15, .6) 60%, var(--bg));
}

.hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px;
}
@media (max-width: 600px) { .hero__content { padding: 0 16px; } }
.hero__logo { margin: 18px 0 8px; line-height: 0; }
.hero__logo img {
  width: clamp(280px, 48vw, 640px); height: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(228, 87, 46, .25));
}
.hero__title {
  font-family: var(--head); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700;
  line-height: 1.15; margin: 0 0 .6em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .7);
}
.hero__lede { max-width: 560px; font-size: 1.1rem; color: #cfc6bb; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2em; }

.status-pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1em; border-radius: 999px;
  background: rgba(13, 11, 15, .55); border: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
  backdrop-filter: blur(6px);
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(95, 207, 128, .6); animation: pulse 2s infinite; }
.status-pill__sep { opacity: .4; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 207, 128, .6); } 70% { box-shadow: 0 0 0 8px rgba(95, 207, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 207, 128, 0); } }

.hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 84px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(233, 227, 218, .35); border-radius: 14px;
}
.hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: scroll 1.8s infinite; }
@keyframes scroll { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Status strip ---------- */
.strip { position: relative; z-index: 3; margin-top: -60px; }
.strip__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
}
.stat:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.stat:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.stat + .stat { border-left: 0; }
.stat__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.stat__value { font: 700 1.4rem/1.2 var(--head); display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
@media (max-width: 760px) {
  .strip__inner { grid-template-columns: 1fr 1fr; padding: 0 16px; }
  .stat, .stat:first-child, .stat:last-child { border-radius: 0; border: 1px solid var(--line); }
  .stat:nth-child(1) { border-radius: var(--radius) 0 0 0; }
  .stat:nth-child(2) { border-radius: 0 var(--radius) 0 0; border-left: 0; }
  .stat:nth-child(3) { border-radius: 0 0 0 var(--radius); border-top: 0; }
  .stat:nth-child(4) { border-radius: 0 0 var(--radius) 0; border-top: 0; border-left: 0; }
  .stat { padding: 16px; }
  .stat__value { font-size: 1.15rem; }
}

/* ---------- Sections ---------- */
.section { padding: 110px 0; }
.section--dark { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { margin-bottom: 48px; max-width: 640px; }
.section__head--center { text-align: center; margin-left: auto; margin-right: auto; }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
@media (max-width: 600px) { .section { padding: 72px 0; } .section__head { margin-bottom: 32px; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--reverse .split__text { order: 2; }
.split__text p { color: #cfc6bb; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__text { order: 0; }
}

.frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(226, 181, 92, .12), transparent 60%),
    linear-gradient(135deg, var(--bg-3), #110e14);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.frame::before {
  content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(226, 181, 92, .18); border-radius: 6px; pointer-events: none;
}
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 11, 15, .55));
}
.frame__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame__badge {
  position: absolute; z-index: 3; left: 22px; bottom: 20px;
  font: 700 .8rem/1 var(--head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); background: rgba(13, 11, 15, .75); border: 1px solid rgba(226, 181, 92, .4);
  padding: .55em .9em; border-radius: 4px;
}
.frame--ue {
  background:
    radial-gradient(ellipse at 70% 70%, rgba(228, 87, 46, .18), transparent 60%),
    linear-gradient(135deg, #17131c, #0f0c12);
}
.frame__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: var(--muted); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 24px;
}
.frame__placeholder img { opacity: .55; }
.frame__tag { font: 900 3.5rem/1 var(--head); color: rgba(226, 181, 92, .35); letter-spacing: .1em; }

/* ---------- Feature cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: border-color .25s, transform .25s;
}
.card:hover { border-color: rgba(226, 181, 92, .45); transform: translateY(-3px); }
.card p { color: var(--muted); margin: 0; }
.card__icon {
  width: 48px; height: 48px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(228, 87, 46, .18), rgba(179, 38, 30, .08));
  border: 1px solid rgba(228, 87, 46, .35);
}
.card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Client progress ---------- */
.progress { list-style: none; padding: 0; margin: 1.6em 0 0; display: grid; gap: 12px; }
.progress__item { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.progress__item span {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); position: relative;
}
.progress__item.is-done { color: var(--text); }
.progress__item.is-done span { background: var(--gold); border-color: var(--gold); }
.progress__item.is-done span::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.progress__item.is-active { color: var(--text); }
.progress__item.is-active span { border-color: var(--ember); }
.progress__item.is-active span::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ember); animation: blink 1.4s infinite;
}
@keyframes blink { 50% { opacity: .3; } }

/* ---------- News ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .news { grid-template-columns: 1fr; } }
.post {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .25s;
}
.post:hover { border-color: rgba(226, 181, 92, .45); }
.post__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-3); filter: saturate(.85) brightness(.85); transition: filter .3s; }
.post:hover .post__img { filter: none; }
.post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post__body time { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ember); margin-bottom: .7em; }
.post__body p { color: var(--muted); flex: 1; }

/* ---------- Steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px 28px 32px;
}
.step p { color: var(--muted); }
.step .btn { margin-top: .6em; }
.step__num {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 1.1rem/1 var(--head); color: var(--bg);
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 0 6px var(--bg);
}

/* ---------- Community banner ---------- */
.section--banner {
  background:
    radial-gradient(ellipse 70% 120% at 50% 120%, rgba(228, 87, 46, .35), transparent 70%),
    linear-gradient(180deg, var(--bg), #1a0f12);
  border-top: 1px solid var(--line);
}
.banner { text-align: center; max-width: 720px; }
.banner h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.banner p { color: #cfc6bb; font-size: 1.1rem; }
.banner__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 2em; }

/* ---------- Footer ---------- */
.footer { background: #08070a; border-top: 1px solid var(--line); padding: 64px 0 28px; font-size: .9rem; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; }
.footer__note { color: var(--muted); max-width: 340px; margin-top: 16px; font-size: .85rem; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer__cols h4 { font-family: var(--body); font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); margin-bottom: 1em; }
.footer__cols a { display: block; color: var(--muted); padding: 4px 0; transition: color .2s; }
.footer__cols a:hover { color: var(--text); }
.footer__base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
}
@media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 420px) { .footer__cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .status-pill__dot, .hero__scroll span, .progress__item.is-active span::after, .hero__smoke { animation: none; }
  /* No moving laser: show a faint, still outline instead. */
  .sword__beam { animation: none; stroke-dasharray: none; opacity: .35; }
}