:root{color-scheme:dark;--bg:#070b12;--panel:#101722;--text:#f5f1e8;--muted:#aeb9ce;--line:rgba(255,255,255,.11);--gold:#e3c47c;--cyan:#48c7d8;--max:1180px;font-family:Bahnschrift,"Segoe UI",ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:inherit;overflow-x:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}.topbar{position:fixed;z-index:50;inset:0 0 auto;min-height:72px;display:flex;align-items:center;gap:18px;padding:12px clamp(16px,4vw,56px);border-bottom:1px solid var(--line);background:rgba(7,11,18,.9);backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;text-transform:uppercase}.brand img{height:42px;width:auto;max-width:132px;object-fit:contain;border:1px solid rgba(227,196,124,.24);border-radius:8px;background:rgba(7,11,18,.54)}.nav{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}.nav a,.route{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--muted);background:rgba(16,23,34,.72);font-size:12px;font-weight:900;text-transform:uppercase}.nav img,.card img{width:20px;height:20px}.hero{position:relative;min-height:90vh;display:grid;align-items:end;padding:120px clamp(18px,5vw,72px) 58px;overflow:hidden}.hero-bg,.shade{position:absolute;inset:0}.hero-bg{width:100%;height:100%;object-fit:cover}.shade{background:linear-gradient(90deg,rgba(7,11,18,.96),rgba(7,11,18,.76) 52%,rgba(7,11,18,.35)),linear-gradient(0deg,var(--bg),rgba(7,11,18,0) 34%)}.hero-copy{position:relative;z-index:2;max-width:980px}.kicker{margin:0 0 10px;color:var(--gold);font-size:13px;font-weight:900;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:18px;font-size:clamp(48px,8vw,108px);line-height:.9}h2{margin-bottom:14px;font-size:clamp(34px,5vw,66px);line-height:.95}.hero p:not(.kicker),.card p,.route span,footer span,.section p{color:var(--muted);line-height:1.55}.hero p:not(.kicker){max-width:780px;font-size:21px}.section{width:min(var(--max),calc(100% - 32px));margin:0 auto;padding:72px 0;border-top:1px solid var(--line)}.section-head{margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.grid.small{grid-template-columns:repeat(3,minmax(0,1fr))}.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px}.stack{display:grid;gap:12px}.card,.route{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,rgba(21,29,43,.92),rgba(16,23,34,.92));padding:18px}.card{min-height:180px}.card span{display:block;margin-top:14px;color:var(--cyan);font-size:12px;font-weight:900}.route{justify-content:flex-start;text-transform:none;font-size:16px}.route strong{color:var(--text)}footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px clamp(18px,5vw,72px);border-top:1px solid var(--line);background:#05080d}footer img{width:180px;height:auto}.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.hero-badges span{border:1px solid rgba(227,196,124,.36);border-radius:999px;padding:8px 11px;color:var(--gold);background:rgba(227,196,124,.08);font-size:12px;font-weight:900;text-transform:uppercase}.premium-card{position:relative;overflow:hidden}.premium-card>img{width:30px;height:30px;margin-bottom:18px;filter:drop-shadow(0 0 10px rgba(227,196,124,.24))}.premium-card:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.7}.premium-route{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center}.premium-route img{width:28px;height:28px;grid-row:span 2}.premium-route span{grid-column:2}.feedback-card{display:grid;gap:10px;border:1px solid rgba(227,196,124,.24);border-radius:8px;background:linear-gradient(180deg,rgba(21,29,43,.92),rgba(16,23,34,.92));padding:20px}.feedback-card span{display:block;border:1px solid var(--line);border-radius:6px;padding:12px;color:var(--text);background:rgba(7,11,18,.34);font-weight:900}@media(max-width:1080px){.topbar{align-items:flex-start;flex-wrap:wrap}.nav{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap}.nav a{white-space:nowrap}.hero{padding-top:150px}.grid,.grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}@media(max-width:640px){.topbar{padding:10px 12px}.brand img{height:34px}.brand span,.nav a{font-size:12px}.hero{min-height:82vh;padding:150px 16px 44px}.hero p:not(.kicker){font-size:18px}.section{width:min(100% - 24px,var(--max));padding:48px 0}.grid,.grid.small{grid-template-columns:1fr}footer{align-items:flex-start;flex-direction:column}.premium-route{grid-template-columns:1fr}.premium-route img,.premium-route span{grid-column:auto;grid-row:auto}}
.credits-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.foundry-class {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 14px;
  margin-bottom: 16px;
}

.class-panel,
.class-badges {
  border: 1px solid rgba(227, 196, 124, .25);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(227, 196, 124, .14), rgba(72, 199, 216, .06)),
    linear-gradient(180deg, rgba(21, 29, 43, .94), rgba(16, 23, 34, .94));
  padding: 22px;
}

.class-panel {
  display: grid;
  gap: 12px;
}

.class-panel span,
.class-badges span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.class-panel strong {
  color: var(--text);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .94;
}

.class-panel p {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
}

.class-panel a {
  justify-self: start;
  border: 1px solid rgba(227, 196, 124, .45);
  border-radius: 6px;
  padding: 11px 13px;
  color: #07100d;
  background: linear-gradient(135deg, var(--gold), #93723a);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.class-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.class-badges span {
  display: grid;
  align-content: center;
  min-height: 74px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(7, 11, 18, .35);
}

.class-badges b {
  margin-top: 6px;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
}

.credits-summary article,
.credit-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(21, 29, 43, .92), rgba(16, 23, 34, .92));
  padding: 18px;
}

.credits-summary span,
.credit-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.credits-summary strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--text);
  font-size: 38px;
  line-height: 1;
}

.credits-summary em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 900;
}

.credits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.credit-card {
  min-height: 178px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.credit-card h3 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.credit-card p {
  margin: 0;
  color: var(--muted);
}

.credit-card small {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.credit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.credit-meta b {
  border: 1px solid rgba(72, 199, 216, .22);
  border-radius: 999px;
  padding: 7px 9px;
  color: var(--cyan);
  background: rgba(72, 199, 216, .08);
  font-size: 11px;
  text-transform: uppercase;
}

.credits-grid a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
}

.beta-rail {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 18px;
  margin-top: -28px;
  border: 1px solid rgba(227, 196, 124, .28);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background:
    linear-gradient(135deg, rgba(227, 196, 124, .15), rgba(72, 199, 216, .08)),
    rgba(10, 15, 24, .94);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .34);
}

.beta-rail h2 {
  font-size: clamp(30px, 4.2vw, 56px);
}

.beta-rail p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.beta-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.beta-steps a {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 23, 34, .78);
}

.beta-steps strong {
  color: var(--gold);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
}

.beta-steps span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .foundry-class,
  .credits-summary,
  .credits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .beta-rail {
    grid-template-columns: 1fr;
  }

  .beta-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .foundry-class,
  .credits-summary,
  .credits-grid { grid-template-columns: 1fr; }
  .class-badges { grid-template-columns: 1fr; }
  .credits-summary strong { font-size: 32px; }

  .beta-rail {
    margin-top: -10px;
  }

  .beta-steps {
    grid-template-columns: 1fr;
  }
}

.nav a img,
.premium-card > img,
.premium-route img {
  filter: brightness(0) saturate(100%) invert(82%) sepia(29%) saturate(606%) hue-rotate(2deg) brightness(92%) contrast(91%) drop-shadow(0 0 10px rgba(227, 196, 124, .28));
}

.nav a:hover img {
  filter: brightness(0) saturate(100%) invert(75%) sepia(93%) saturate(473%) hue-rotate(150deg) brightness(91%) contrast(86%) drop-shadow(0 0 10px rgba(72, 199, 216, .28));
}

/* HD icon color normalization: keep SVG img icons visible on dark premium surfaces. */
img[src*="assets/icons/"],
img[src*="/assets/icons/"] {
  filter: brightness(0) saturate(100%) invert(82%) sepia(29%) saturate(606%) hue-rotate(2deg) brightness(92%) contrast(91%) drop-shadow(0 0 10px rgba(227, 196, 124, 0.28));
}

a:hover img[src*="assets/icons/"],
a:hover img[src*="/assets/icons/"],
button:hover img[src*="assets/icons/"],
button:hover img[src*="/assets/icons/"] {
  filter: brightness(0) saturate(100%) invert(75%) sepia(93%) saturate(473%) hue-rotate(150deg) brightness(91%) contrast(86%) drop-shadow(0 0 10px rgba(72, 199, 216, 0.28));
}
/* HD icon surface normalization: keep SVG image icons readable on dark premium surfaces. */
img[src*="assets/icons/"],
img[src*="/assets/icons/"] {
  background: transparent !important;
  object-fit: contain;
}

img[src*="assets/icons/"]:not(.hd-icon),
img[src*="/assets/icons/"]:not(.hd-icon) {
  filter: brightness(0) saturate(100%) invert(82%) sepia(29%) saturate(606%) hue-rotate(2deg) brightness(92%) contrast(91%) drop-shadow(0 0 10px rgba(227, 196, 124, 0.28));
}

a:hover img[src*="assets/icons/"]:not(.hd-icon),
a:hover img[src*="/assets/icons/"]:not(.hd-icon),
button:hover img[src*="assets/icons/"]:not(.hd-icon),
button:hover img[src*="/assets/icons/"]:not(.hd-icon) {
  filter: brightness(0) saturate(100%) invert(75%) sepia(93%) saturate(473%) hue-rotate(150deg) brightness(91%) contrast(86%) drop-shadow(0 0 10px rgba(72, 199, 216, 0.28));
}