@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
  --bg-1: #071017;
  --bg-2: #0d1721;
  --panel: rgba(12, 18, 26, 0.92);
  --panel-soft: rgba(18, 26, 36, 0.9);
  --line: rgba(255, 255, 255, 0.08);
  --text: #edf4ff;
  --muted: #9aa7bc;
  --cyan: #69d7ff;
  --purple: #7d7aff;
  --orange: #ffbf69;
  --green: #66e4ad;
  --red: #ff7a8a;
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Chakra Petch", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(circle at top left, rgba(62, 226, 255, 0.08), transparent 20%),
    radial-gradient(circle at top right, rgba(81, 255, 192, 0.08), transparent 24%),
    linear-gradient(180deg, #020b12 0%, #07151e 100%);
  color: var(--text);
  letter-spacing: -0.02em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 58%, transparent 100%);
  pointer-events: none;
}


h1, h2, h3, h4, h5, h6, .brand-name, .tiny-label, .main-nav, .promo-copy h1, .section-title-row h2, .category-header h2, .progress-row h2 {
  font-family: "Chakra Petch", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

p,
span,
small,
a,
button,
input,
select,
label,
li,
strong {
  letter-spacing: 0.01em;
  font-family: "Chakra Petch", "Segoe UI", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.page-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 15% 10%, rgba(62, 226, 255, 0.13), transparent 28%),
    radial-gradient(circle at 90% 15%, rgba(138, 108, 255, 0.15), transparent 26%),
    radial-gradient(circle at 50% 70%, rgba(19, 136, 255, 0.08), transparent 40%);
  pointer-events: none;
}

.container {
  width: min(1240px, calc(100% - 38px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(2, 9, 14, 0.92);
  border-bottom: 1px solid rgba(110, 171, 141, 0.28);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 14px;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(124, 255, 204, 0.18);
  background: rgba(15, 22, 26, 0.8);
  color: var(--green);
  cursor: pointer;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.menu-lines {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-lines span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
}

.menu-label {
  color: var(--green);
}
.brand-main {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  justify-content: center;
  padding-left: 62px;
}

.brand-main::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
  background: url('assets/dfhubvn-cloud-cat.png?v=20261005') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,165,74,.32));
}

.brand-name {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 800;
  color: #dffef6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.brand-wrap small {
  display: block;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.56rem;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn,
.ghost-btn,
.pill,
.external-login button {
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.primary-btn,
.secondary-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: rgba(17, 24, 30, 0.9);
  color: rgba(228, 237, 246, 0.9);
  border: 1px solid rgba(98, 122, 138, 0.35);
  box-shadow: none;
}

.primary-btn {
  position: relative;
  background: rgba(17, 24, 30, 0.9);
  color: rgba(228, 237, 246, 0.9);
  border: 1px solid rgba(98, 122, 138, 0.35);
  box-shadow: none;
  padding-left: 42px;
}

.primary-btn::before {
  content: "→";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  line-height: 1;
  color: rgba(255,255,255,0.78);
}

.primary-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(110, 255, 198, 0.1) 45%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.45s ease;
}

.ghost-btn {
  min-width: 120px;
  background: rgba(14, 22, 26, 0.7);
  border: 1px solid rgba(139, 175, 185, 0.2);
  color: rgba(236, 244, 255, 0.78);
}

.category-toggle {
  color: rgba(236, 244, 255, 0.8);
  border-color: rgba(137, 164, 188, 0.22);
  background: rgba(15, 22, 26, 0.8);
}

.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.pill:hover,
.external-login button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.primary-btn:hover,
.ghost-btn:hover,
.category-toggle:hover {
  background: linear-gradient(135deg, rgba(20, 75, 57, 0.96), rgba(11, 45, 36, 0.96));
  border-color: rgba(117, 205, 157, 0.52);
  color: #ecfff6;
  box-shadow: 0 8px 16px rgba(3, 24, 18, 0.24);
}

.primary-btn:hover::after {
  transform: translateX(120%);
  opacity: 0.55;
}

.page-shell {
  padding: 28px 0 72px;
}

.promo-shell {
  margin-top: 10px;
}

.promo-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(145, 176, 195, 0.18);
  background: linear-gradient(90deg, rgba(3,9,13,0.96), rgba(11,17,22,0.92));
  box-shadow: 0 14px 30px rgba(0,0,0,0.2);
}

.promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 6, 9, 0.92) 0%, rgba(5, 12, 17, 0.74) 30%, rgba(5, 12, 17, 0.2) 100%);
  z-index: 1;
}

.promo-copy,
.promo-visual {
  position: relative;
  z-index: 2;
}

.promo-copy {
  padding: 32px 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 720px;
}

.promo-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #78fac9;
  margin-bottom: 18px;
  font-weight: 700;
}

.promo-copy h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  max-width: 620px;
}

.promo-copy p {
  max-width: 600px;
  margin: 18px 0 28px;
  color: rgba(225, 238, 247, 0.76);
  font-size: 1.04rem;
  line-height: 1.8;
}

.promo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-width: 200px;
  min-height: 52px;
  padding: 0 22px 0 42px;
  border: 1px solid rgba(98, 122, 138, 0.35);
  background: rgba(17, 24, 30, 0.9);
  color: rgba(240, 246, 255, 0.82);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.promo-button::before {
  content: "→";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255,255,255,0.78);
}

.promo-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(120, 250, 201, 0.12) 45%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 0.45s ease;
}

.promo-visual {
  background:
    linear-gradient(120deg, rgba(0,0,0,0.08), rgba(0,0,0,0.46)),
    url('https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
}

.promo-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid rgba(146, 212, 184, 0.2);
  background: rgba(10, 15, 20, 0.5);
  backdrop-filter: blur(4px);
  min-width: 230px;
}

.card-label {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220, 242, 255, 0.72);
}

.promo-card strong {
  font-size: 1.2rem;
  letter-spacing: -0.04em;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.promo-card small {
  color: rgba(220, 242, 255, 0.72);
}

.community-progress {
  margin-top: 44px;
  border: 1px solid rgba(145, 176, 195, 0.18);
  background: rgba(6, 13, 18, 0.76);
  padding: 22px 26px 26px;
}

.progress-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(145, 176, 195, 0.12);
}

.progress-heading,
.progress-rate {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(219, 232, 240, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
}

.mini-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(120, 250, 201, 0.35);
  color: var(--green);
}

.progress-rate {
  justify-content: flex-end;
  gap: 20px;
}

.progress-rate strong {
  font-size: 1.8rem;
  letter-spacing: -0.06em;
  color: var(--green);
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 30px;
  align-items: center;
  margin-top: 20px;
}

.progress-row h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.progress-row p {
  margin: 0;
  color: rgba(218,232,240,0.7);
  line-height: 1.7;
}

.meter-wrap {
  grid-column: 1 / -1;
}

.meter-bar {
  width: 100%;
  height: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(146, 212, 184, 0.2);
  overflow: hidden;
  position: relative;
}

.meter-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(114, 248, 196, 1), rgba(77, 226, 255, 1));
  box-shadow: 0 0 24px rgba(111, 240, 196, 0.35);
}

.meter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  color: rgba(220,235,240,0.72);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.meter-meta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  background: rgba(121, 255, 202, 0.08);
  border: 1px solid rgba(121, 255, 202, 0.28);
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.catalog-block {
  margin-top: 48px;
  scroll-margin-top: 105px;
}

.section-title-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: rgba(114, 247, 204, 0.96);
  background: rgba(94, 246, 196, 0.06);
  border: 1px solid rgba(94, 246, 196, 0.18);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.section-title-row h2 {
  margin: 12px 0 0;
  font-size: clamp(1.8rem, 2.7vw, 2.8rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.text-link {
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

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

.feature-card {
  overflow: hidden;
  border: 1px solid rgba(145, 176, 195, 0.18);
  background: rgba(8, 14, 18, 0.8);
  box-shadow: 0 12px 26px rgba(0,0,0,0.16);
}

.feature-visual {
  height: 190px;
  position: relative;
  isolation: isolate;
}

.feature-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.45));
}

.gradient-one { background: linear-gradient(135deg, rgba(104,246,196,0.7), rgba(91,120,255,0.8)); }
.gradient-two { background: linear-gradient(135deg, rgba(75,196,255,0.7), rgba(159,128,255,0.7)); }
.gradient-three { background: linear-gradient(135deg, rgba(255,190,96,0.72), rgba(255,116,116,0.74)); }

.feature-copy {
  padding: 18px 18px 20px;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  background: rgba(116, 247, 204, 0.08);
  border: 1px solid rgba(116, 247, 204, 0.2);
  color: var(--green);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.feature-copy h3 {
  margin: 16px 0 10px;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.feature-copy p {
  margin: 0;
  color: rgba(220, 235, 240, 0.72);
  line-height: 1.7;
}

.feature-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: auto 12% -30% 12%;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(105, 215, 255, 0.26);
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.2);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover .feature-visual {
  transform: scale(1.06);
}

.feature-visual {
  transition: transform 0.35s ease;
}

.promo-button:hover,
.primary-btn:hover,
.menu-trigger:hover,
.text-link:hover,
.pill:hover {
  transform: translateY(-2px);
}

.menu-trigger:hover {
  background: rgba(88, 216, 255, 0.12);
  border-color: rgba(120, 226, 255, 0.4);
  box-shadow: 0 12px 24px rgba(25, 32, 30, 0.24);
  color: #ebfffb;
}

.promo-button:hover {
  background: linear-gradient(135deg, rgba(21, 70, 55, 0.96), rgba(17, 46, 39, 0.96));
  border-color: rgba(120, 226, 255, 0.28);
  box-shadow: 0 18px 32px rgba(8, 28, 22, 0.2);
  color: #ebfffb;
}

.promo-button:hover::after {
  transform: translateX(120%);
}

.text-link:hover {
  color: #9af8d6;
}

.story-shell,
.feature-strip,
.catalog-block,
.intro-cta {
  margin-top: 50px;
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 28px 26px;
  background: linear-gradient(135deg, rgba(10, 18, 24, 0.95), rgba(14, 23, 29, 0.94));
  border: 1px solid rgba(130, 156, 185, 0.18);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
}

.cta-copy {
  flex: 1;
}

.cta-copy h2 {
  margin: 14px 0 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .cta-panel {
    flex-direction: column;
    align-items: flex-start;
  }
}

.story-shell,
.feature-strip,
.catalog-block {
  margin-top: 72px;
}

@media (max-width: 980px) {
  .promo-banner {
    grid-template-columns: 1fr;
  }

  .promo-visual {
    min-height: 260px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .progress-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-wrap {
    min-height: 70px;
  }

  .brand-wrap {
    gap: 10px;
  }

  .brand-wrap small {
    display: none;
  }

  .ghost-btn {
    display: none;
  }

  .promo-copy {
    padding: 26px 20px 24px;
  }

  .promo-card {
    right: 12px;
    left: 12px;
    bottom: 12px;
    min-width: auto;
  }

  .progress-topline,
  .section-title-row,
  .meter-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-rate {
    justify-content: flex-start;
  }
}

.story-shell,
.feature-strip,
.catalog-block {
  margin-top: 72px;
}

.timeline-list {
  display: grid;
  gap: 16px;
}

.timeline-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.timeline-list strong {
  color: var(--text);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.story-box {
  background: rgba(15, 20, 28, 0.9);
  border: 1px solid var(--line);
  padding: 22px 18px;
  min-height: 220px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.story-box:hover,
.service-card:hover,
.event-card:hover,
.member-panel:hover,
.admin-panel:hover,
.mini-card:hover,
.hub-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  border-color: rgba(105, 215, 255, 0.28);
}

.story-year {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.story-box h3 {
  margin: 0 0 12px;
  font-size: 1.6rem;
}

.story-box p {
  margin: 0;
  line-height: 1.7;
  color: var(--muted);
}

.feature-panel {
  background: linear-gradient(180deg, rgba(14, 22, 32, 0.96), rgba(9, 14, 19, 0.96));
  border: 1px solid var(--line);
  padding: 28px 24px;
}

.feature-panel h2 {
  margin: 16px 0 12px;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.06em;
  line-height: 1.02;
}

.feature-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
  max-width: 760px;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.hub-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 20px 18px;
  background: linear-gradient(180deg, rgba(14, 20, 28, 0.96), rgba(10, 15, 22, 0.96));
  border: 1px solid var(--line);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
}

.hub-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hub-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(107, 237, 193, 0.28);
  background: rgba(107, 237, 193, 0.06);
  color: var(--green);
  font-size: 1.1rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hub-card:hover .hub-icon {
  transform: translateY(-2px);
  background: rgba(107, 237, 193, 0.12);
  border-color: rgba(107, 237, 193, 0.5);
}

.hub-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -30% 35%;
  height: 180px;
  background: radial-gradient(circle, rgba(105, 215, 255, 0.2), transparent 60%);
  pointer-events: none;
}

.hub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(102, 228, 173, 0.28);
}

.hub-tag {
  display: inline-block;
  width: fit-content;
  padding: 6px 10px;
  background: rgba(102, 228, 173, 0.08);
  color: var(--green);
  border: 1px solid rgba(102, 228, 173, 0.18);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.hub-card h3 {
  margin: 18px 0 10px;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.hub-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.page-shell .site-footer {
  padding-bottom: 88px;
}

@media (max-width: 980px) {
  .story-grid,
  .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .story-grid,
  .hub-grid {
    grid-template-columns: 1fr;
  }
}

.badge,
.eyebrow,
.panel-tag,
.event-tag,
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.badge {
  padding: 9px 12px;
  font-size: 0.64rem;
  background: rgba(105, 215, 255, 0.08);
  border: 1px solid rgba(105, 215, 255, 0.2);
  color: var(--cyan);
}

.hero-copy h1 {
  margin: 18px 0 16px;
  font-size: clamp(2.8rem, 4.2vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.hero-copy p {
  margin: 0;
  max-width: 620px;
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.stats-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.stats-row div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 116px;
}

.stats-row strong {
  font-size: 1.7rem;
  letter-spacing: -0.04em;
}

.stats-row span {
  color: var(--muted);
  font-size: 0.8rem;
}

.hero-panel {
  position: relative;
}

.panel-card {
  position: relative;
  padding: 20px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(18, 25, 36, 0.92), rgba(11, 16, 23, 0.96));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.panel-card.highlight {
  background: linear-gradient(180deg, rgba(15, 23, 34, 0.85), rgba(20, 24, 35, 0.95));
}

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.panel-tag {
  padding: 6px 10px;
  background: rgba(255, 182, 72, 0.12);
  color: var(--orange);
  border: 1px solid rgba(255, 182, 72, 0.25);
  font-size: 0.64rem;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(83, 231, 174, 0.12);
}

.hero-panel h3 {
  margin: 10px 0 18px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.reward-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.reward-box span {
  color: var(--muted);
}

.reward-box strong {
  color: var(--orange);
}

.mini-list {
  display: grid;
  gap: 12px;
}

.mini-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.mini-list span {
  color: var(--muted);
}

.catalog-block,
.services-section,
.event-section {
  margin-top: 72px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}

.eyebrow {
  padding: 6px 10px;
  background: rgba(138, 108, 255, 0.1);
  border: 1px solid rgba(138, 108, 255, 0.2);
  color: #c0b1ff;
  font-size: 0.62rem;
}

.section-head h2 {
  margin: 12px 0 0;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  letter-spacing: -0.04em;
}

.text-link {
  color: var(--cyan);
  font-weight: 600;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.pill {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 0;
}

.pill.active {
  background: linear-gradient(135deg, rgba(62, 226, 255, 0.16), rgba(138, 108, 255, 0.18));
  border-color: rgba(62, 226, 255, 0.36);
  color: var(--text);
}

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

.product-card,
.service-card,
.event-card,
.member-panel,
.admin-panel,
.metric-box,
.panel,
.auth-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow);
}

.product-card {
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 226, 255, 0.32);
}

.thumb {
  display: grid;
  place-items: center;
  height: 170px;
  margin: 12px 12px 0;
  border-radius: 0;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.gradient-1 { background: linear-gradient(135deg, rgba(62,226,255,0.9), rgba(91,124,255,0.7)); }
.gradient-2 { background: linear-gradient(135deg, rgba(138,108,255,0.85), rgba(52,196,255,0.7)); }
.gradient-3 { background: linear-gradient(135deg, rgba(255,182,72,0.82), rgba(255,107,122,0.76)); }
.gradient-4 { background: linear-gradient(135deg, rgba(83,231,174,0.8), rgba(62,226,255,0.8)); }
.gradient-5 { background: linear-gradient(135deg, rgba(255,107,122,0.8), rgba(191,109,255,0.8)); }
.gradient-6 { background: linear-gradient(135deg, rgba(255,182,72,0.8), rgba(242,84,150,0.8)); }
.gradient-7 { background: linear-gradient(135deg, rgba(112,215,255,0.8), rgba(86,255,164,0.8)); }
.gradient-8 { background: linear-gradient(135deg, rgba(93,125,255,0.82), rgba(62,226,255,0.82)); }
.gradient-9 { background: linear-gradient(135deg, rgba(255,126,127,0.8), rgba(255,182,72,0.8)); }

.meta {
  padding: 16px 18px 20px;
}

.tag {
  padding: 6px 10px;
  background: rgba(105, 215, 255, 0.08);
  border: 1px solid rgba(105, 215, 255, 0.18);
  color: var(--cyan);
  font-size: 0.58rem;
}

.meta h3 {
  margin: 14px 0 10px;
  font-size: 1.36rem;
}

.meta p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}

.pricing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pricing strong {
  font-size: 1.15rem;
}

.pricing span {
  color: var(--muted);
  font-size: 0.82rem;
}

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

.service-card {
  padding: 22px 18px;
}

.service-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(62, 226, 255, 0.1);
  font-size: 1.8rem;
  margin-bottom: 18px;
}

.service-card h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.event-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 20px;
}

.event-card {
  padding: 22px 20px;
}

.event-featured {
  background: linear-gradient(180deg, rgba(22, 34, 48, 0.96), rgba(11, 18, 29, 0.96));
}

.event-tag {
  padding: 6px 10px;
  background: rgba(83, 231, 174, 0.1);
  border: 1px solid rgba(83, 231, 174, 0.2);
  color: var(--green);
  font-size: 0.62rem;
}

.event-card h3 {
  margin: 16px 0 10px;
  font-size: 1.55rem;
}

.event-card p {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.65;
}

.progress-line {
  height: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-line span {
  display: block;
  width: 98%;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.event-card small {
  color: var(--muted);
}

.member-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  margin-top: 72px;
}

.member-panel,
.admin-panel {
  padding: 26px;
}

.member-panel h2,
.admin-panel h2 {
  margin: 14px 0 16px;
  font-size: clamp(1.7rem, 2vw, 2.3rem);
}

.member-panel ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
}

.member-panel li::before {
  content: "✓";
  color: var(--green);
  margin-right: 8px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 20px;
}

.admin-metrics div {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
}

.admin-metrics strong {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.admin-metrics span {
  color: var(--muted);
  font-size: 0.8rem;
}

.full-width {
  width: 100%;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 120px;
  background: rgba(10, 14, 22, 0.8);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--muted);
}

.auth-page,
.admin-page {
  min-height: 100vh;
}

.auth-backdrop {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 11, 13, 0.94), rgba(8, 17, 19, 0.98)),
    radial-gradient(circle at 18% 18%, rgba(74, 200, 148, 0.18), transparent 24%),
    radial-gradient(circle at 82% 22%, rgba(102, 228, 173, 0.12), transparent 22%),
    linear-gradient(135deg, #051912 0%, #071d1a 36%, #0a231f 100%);
  z-index: 0;
}

.auth-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 227, 180, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 227, 180, 0.09) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 56%, transparent 100%);
  opacity: 0.85;
}

.category-panel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(460px, 92vw);
  background: rgba(6, 12, 18, 0.98);
  border-right: 1px solid rgba(102, 228, 173, 0.3);
  box-shadow: 18px 0 38px rgba(0, 0, 0, 0.5);
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  z-index: 40;
  padding: 26px 18px 40px;
  backdrop-filter: blur(18px);
}

.category-panel.open {
  transform: translateX(0);
}

.category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.tiny-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

.category-header h2 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.close-category {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.close-category:hover {
  transform: rotate(90deg);
  border-color: rgba(105, 215, 255, 0.36);
}

.category-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 12px 16px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.category-item:hover {
  transform: translateX(-4px);
  background: rgba(105, 215, 255, 0.04);
  border-color: rgba(105, 215, 255, 0.16);
}

.category-item.active {
  background: linear-gradient(90deg, rgba(102, 228, 173, 0.08), rgba(105, 215, 255, 0.04));
  border-color: rgba(102, 228, 173, 0.22);
  box-shadow: inset 0 0 0 1px rgba(102, 228, 173, 0.15);
}

.category-item .icon {
  width: 30px;
  height: 30px;
  color: var(--green);
  display: inline-grid;
  place-items: center;
}

.category-item .icon svg,
.hub-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-item .text {
  flex: 1;
  font-size: 1.06rem;
  font-weight: 700;
  font-family: "Chakra Petch", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.category-item .arrow {
  color: var(--muted);
  font-size: 1.8rem;
  line-height: 1;
}

.category-preview-block {
  margin-top: 70px;
}

.category-preview-block .tiny-heading {
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.category-preview-block h2 {
  margin: 10px 0 22px;
  font-size: clamp(2.2rem, 4vw, 4.1rem);
  line-height: 0.94;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

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

.mini-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 18px 16px;
  background: rgba(16, 22, 30, 0.9);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(102, 228, 173, 0.08), transparent 50%);
}

.mini-card > * {
  position: relative;
  z-index: 1;
}

.mini-card span {
  color: var(--muted);
}

.mini-card strong {
  margin-top: 8px;
  font-size: 2.2rem;
  letter-spacing: -0.05em;
}

.mini-card.accent {
  background: linear-gradient(180deg, rgba(91, 206, 173, 0.2), rgba(11, 16, 23, 0.95));
}

/* Full-width game dock with a downward triangular action. */
body:has(.bottom-dock) {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

.bottom-dock {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  min-height: 80px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 160px));
  justify-content: center;
  align-items: stretch;
  z-index: 60;
  overflow: visible;
  border-top: 1px solid rgba(104, 154, 145, .12);
  background: #061011;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .28);
}

.dock-item {
  position: relative;
  min-width: 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px 10px;
  color: #778784;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.dock-item:not(.center-action) { overflow: hidden; }
.dock-item:not(.center-action) > span { position: relative; z-index: 1; }

.dock-icon {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  transition: transform .2s ease, filter .2s ease;
}

.dock-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-item.active { color: #13edb5; }
.dock-item.active:not(.center-action)::after {
  content: "";
  position: absolute;
  right: 32%;
  bottom: 0;
  left: 32%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #13edb5;
  box-shadow: 0 0 10px rgba(19, 237, 181, .55);
}

.dock-item.center-action {
  isolation: isolate;
  color: #9aadaa;
  background: transparent;
  justify-content: flex-start;
  gap: 3px;
  padding: 0 8px 26px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(19, 237, 181, .22);
}

.dock-item.center-action::before,
.dock-item.center-action::after {
  content: "";
  position: absolute;
  inset: -10px -13px 4px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: -2;
}

.dock-item.center-action::before {
  background: linear-gradient(130deg, #334b45, #6d9185 52%, #334b45);
  box-shadow: 0 0 18px rgba(15, 231, 175, .18);
}

.dock-item.center-action::after {
  inset: -8px -10px 8px;
  z-index: -1;
  background:
    linear-gradient(105deg, transparent 38%, rgba(143, 255, 213, .25) 50%, transparent 62%),
    linear-gradient(125deg, rgba(13, 30, 27, .97), rgba(4, 18, 19, .99)),
    url("assets/terrain-tactical.png") center / cover no-repeat;
  background-size: 230% 100%, cover, cover;
  background-position: -135% 0, center, center;
  transition: background-position .65s cubic-bezier(.2, .72, .25, 1), filter .2s ease;
}

.dock-item.center-action .dock-icon svg { width: 22px; height: 22px; }
.dock-item.center-action > span:last-child { position: relative; z-index: 1; }
.dock-item.center-action .dock-label {
  font-size: .73rem;
  letter-spacing: .16em;
  transform: translateX(.08em);
}
.dock-item:focus-visible { outline: 2px solid #13edb5; outline-offset: -4px; }

@media (hover: hover) {
  .dock-item.center-action:hover .dock-icon {
    filter: drop-shadow(0 0 7px rgba(63, 255, 206, .5));
    transform: translateY(-2px) scale(1.08);
  }
  .dock-item.center-action:hover { color: #c5ffed; background: transparent; transform: translateY(-3px); }
  .dock-item.center-action:hover::before { background: linear-gradient(130deg, #087e66, #31f4c1 52%, #087e66); box-shadow: 0 0 24px rgba(15, 231, 175, .34); }
  .dock-item.center-action:hover::after {
    background-position: 145% 0, center, center;
    filter: saturate(1.35) brightness(1.18);
    background-image: linear-gradient(105deg, transparent 38%, rgba(143, 255, 213, .25) 50%, transparent 62%), linear-gradient(125deg, #095137, #03261e), url("assets/terrain-tactical.png");
  }
}

@media (max-width: 640px) {
  body:has(.bottom-dock) { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .bottom-dock { min-height: 70px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dock-item { min-height: 70px; gap: 4px; padding: 10px 2px 8px; font-size: .57rem; letter-spacing: 0; }
  .dock-icon svg { width: 18px; height: 18px; }
  .dock-item.center-action .dock-label { font-size: .57rem; letter-spacing: .08em; }
  .dock-item.center-action { padding: 0 2px 24px; gap: 2px; }
  .dock-item.center-action::before { inset: -10px -7px 4px; }
  .dock-item.center-action::after { inset: -8px -4px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-item { transition: none; }
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - 24px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 22px 0 18px;
}

.auth-panel {
  position: relative;
  width: 100%;
  padding: 22px 24px 26px;
  backdrop-filter: blur(12px);
}

.auth-form-wrap {
  position: relative;
  overflow: hidden;
}

.auth-form-wrap::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: linear-gradient(120deg, transparent 0%, rgba(91, 255, 201, 0.12) 35%, rgba(108, 210, 255, 0.18) 50%, transparent 65%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.auth-form-wrap.is-signup {
  border-color: rgba(120, 224, 188, 0.32);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(77, 206, 160, 0.18), 0 0 26px rgba(102, 228, 173, 0.08);
}

.auth-form-wrap.is-signup::before {
  transform: translateX(120%) skewX(-18deg);
}

.panel-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.brand-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 10px;
}

.logo-slot {
  width: 112px;
  height: 132px;
  border: none;
  background:
    url('assets/dfhubvn-cloud-cat.png?v=20261005') center / contain no-repeat;
  opacity: 1;
  box-shadow: none;
}

.auth-hero p {
  color: var(--muted);
  line-height: 1.75;
}

.mini-status {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(83, 231, 174, 0.08);
  border: 1px solid rgba(83, 231, 174, 0.2);
  color: var(--green);
}

.auth-form-wrap {
  background:
    linear-gradient(180deg, rgba(7, 16, 18, 0.97), rgba(9, 17, 19, 0.96)),
    radial-gradient(circle at top left, rgba(74, 140, 108, 0.18), transparent 34%),
    repeating-linear-gradient(135deg, rgba(131, 186, 160, 0.035) 0, rgba(131, 186, 160, 0.035) 2px, transparent 2px, transparent 9px);
  border: 1px solid rgba(126, 181, 157, 0.16);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(31, 69, 54, 0.28);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.auth-form-wrap:hover {
  transform: translateY(-2px);
  border-color: rgba(118, 214, 177, 0.22);
  box-shadow: 0 28px 62px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(43, 99, 78, 0.36);
}

.form-header {
  display: flex;
  justify-content: center;
}

.form-header h2 {
  margin: 0 0 12px;
  font-size: 2.1rem;
  text-align: center;
}

.input-shell {
  position: relative;
}

.input-shell input {
  padding-right: 42px;
}

.field-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  color: rgba(209, 226, 242, 0.9);
  border-radius: 7px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  display: grid;
  place-items: center;
  padding: 0;
}

.field-toggle:hover {
  border-color: rgba(82, 201, 150, 0.42);
  background: rgba(74, 139, 105, 0.14);
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 8px 16px rgba(24, 58, 46, 0.14);
}

.field-toggle-icon {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-form {
  display: grid;
  gap: 18px;
  animation: authModeShift 0.28s ease;
}

@keyframes authModeShift {
  0% {
    opacity: 0.62;
    transform: translateY(8px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.form-message {
  min-height: 20px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form-message.error {
  opacity: 1;
  color: #ff9ea1;
}

.form-message.success {
  opacity: 1;
  color: #aef5d3;
}

.field-message {
  min-height: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.field-message.error {
  opacity: 1;
  color: #ff9ea1;
}

.field-message.success {
  opacity: 1;
  color: #aef5d3;
}

.auth-form label {
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 0.92rem;
}

.signup-only.hidden,
.login-only.hidden,
.hidden {
  display: none !important;
}

.auth-form input,
.auth-form select {
  width: 100%;
  min-height: 48px;
  border-radius: 0;
  border: 1px solid rgba(155, 176, 192, 0.18);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 0 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-form input::placeholder {
  color: rgba(233, 240, 249, 0.34);
}

.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: rgba(92, 245, 201, 0.55);
  box-shadow: 0 0 0 3px rgba(92, 245, 201, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.check-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.check-wrap input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid rgba(155, 176, 192, 0.28);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.check-wrap input:checked {
  background: rgba(102, 228, 173, 0.12);
  border-color: rgba(102, 228, 173, 0.55);
}

.check-wrap input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid rgba(224, 255, 242, 0.96);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.check-wrap span,
.remember-row a {
  font-size: 0.82rem;
}

.remember-row a {
  color: rgba(191, 223, 255, 0.82);
}

.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(110, 146, 132, 0.4);
  background: linear-gradient(135deg, rgba(15, 24, 28, 0.96), rgba(7, 18, 20, 0.96));
  color: rgba(237, 244, 255, 0.96);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  border-color: rgba(120, 222, 181, 0.52);
  background: linear-gradient(135deg, rgba(20, 75, 57, 0.96), rgba(11, 45, 36, 0.96));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.auth-submit .submit-arrow {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}

.auth-submit span:last-child {
  margin-left: 0;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  margin: 20px 0 16px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.social-login-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--text);
  border: 1px solid rgba(155, 176, 192, 0.18);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.social-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(118, 199, 160, 0.34);
  background: rgba(28, 69, 53, 0.68);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.social-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 8px;
}

.social-mark svg {
  width: 16px;
  height: 16px;
  display: block;
}

.discord-btn .social-mark {
  color: #8aa1ff;
}

.google-btn .social-mark {
  color: #dfe7ff;
}

.github-btn .social-mark {
  color: #e9edf7;
}

@media (max-width: 640px) {
  .social-login-group {
    grid-template-columns: 1fr;
  }
}

.auth-extra-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 14px;
}

.text-muted-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(195, 226, 255, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 4px 0;
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.text-muted-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 242, 190, 0.9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.text-muted-link:hover {
  color: #b7ffe7;
  transform: translateY(-1px);
  text-shadow: 0 0 16px rgba(104, 245, 194, 0.22);
}

.text-muted-link:hover::before {
  transform: scaleX(1);
}

.switch-link {
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
}

.switch-link a,
.back-home-link {
  color: rgba(191, 223, 255, 0.82);
  transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
}

.switch-link a:hover,
.back-home-link:hover {
  color: #b7ffe7;
  transform: translateY(-1px);
  text-shadow: 0 0 16px rgba(104, 245, 194, 0.22);
}

.switch-link a {
  color: var(--cyan);
}

.back-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 0;
  padding: 4px 0;
  width: fit-content;
  color: rgba(191, 223, 255, 0.82);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  transition: transform 0.2s ease, color 0.2s ease;
  justify-self: start;
}

.back-home-link::before {
  content: "←";
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.back-home-link:hover {
  color: #dffef5;
  transform: translateY(-1px);
}

.back-home-link:hover::before {
  transform: translateX(-3px);
}

.account-cta {
  width: 100%;
  margin-top: 16px;
  min-height: 46px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(155, 176, 192, 0.18);
  color: var(--text);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-cta:hover {
  transform: translateY(-1px);
  background: rgba(102, 228, 173, 0.05);
  border-color: rgba(102, 228, 173, 0.42);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 24px 18px;
  border-right: 1px solid var(--line);
  background: rgba(7, 13, 21, 0.9);
}

.sidebar-nav {
  display: grid;
  gap: 10px;
  margin: 28px 0 30px;
}

.sidebar-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid transparent;
}

.sidebar-nav a.active,
.sidebar-nav a:hover {
  background: rgba(62, 226, 255, 0.08);
  color: var(--text);
  border-color: rgba(62, 226, 255, 0.2);
}

.admin-main {
  padding: 32px 28px 46px;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.admin-topbar h1 {
  margin: 10px 0 0;
  font-size: clamp(2rem, 2.5vw, 2.8rem);
  letter-spacing: -0.05em;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.metric-box {
  padding: 20px 18px;
}

.metric-box span,
.metric-box small {
  display: block;
  color: var(--muted);
}

.metric-box strong {
  display: block;
  margin: 16px 0 8px;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.metric-box.accent {
  background: linear-gradient(135deg, rgba(62, 226, 255, 0.15), rgba(138, 108, 255, 0.1));
}

.metric-box.light {
  background: linear-gradient(135deg, rgba(83, 231, 174, 0.12), rgba(62, 226, 255, 0.08));
}

.metric-box.danger {
  background: linear-gradient(135deg, rgba(255, 107, 122, 0.12), rgba(255, 182, 72, 0.08));
}

.admin-content {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 20px;
  margin-top: 24px;
}

.panel {
  padding: 18px 20px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head h3 {
  margin: 0;
  font-size: 1.2rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

th {
  color: var(--text);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}

.status.success {
  background: rgba(83, 231, 174, 0.12);
  color: var(--green);
}

.status.pending {
  background: rgba(62, 226, 255, 0.12);
  color: var(--cyan);
}

.status.review {
  background: rgba(255, 182, 72, 0.12);
  color: var(--orange);
}

.stack-list {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.stack-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .hero,
  .member-layout,
  .admin-content,
  .auth-shell,
  .product-grid,
  .service-grid,
  .event-grid,
  .admin-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .main-nav {
    display: none;
  }
}

@media (max-width: 720px) {
  .product-grid,
  .service-grid,
  .event-grid,
  .member-layout,
  .admin-content,
  .admin-metrics-grid,
  .auth-shell,
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .nav-wrap,
  .footer-inner,
  .section-head,
  .admin-topbar,
  .header-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header {
    position: static;
  }

  .auth-shell {
    min-height: auto;
    padding: 24px 0;
  }

  .hero-copy h1 {
    font-size: 2.4rem;
  }
}

/* Profile entry screen before signing in. */
.profile-page:not(.has-member-session) {
  min-height: 100vh;
  background: linear-gradient(110deg, rgba(3, 12, 15, .88), rgba(3, 15, 19, .78)), url("assets/terrain-tactical.png") center / cover fixed;
}
.profile-page:not(.has-member-session)::before { display: none; }
.profile-page:not(.has-member-session) > .admin-shell,
.profile-page.has-member-session > .profile-guest { display: none; }
.profile-guest { max-width: 1386px; margin: 0 auto; padding: 32px 54px 70px; }
.profile-eyebrow { color: #00edac; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.profile-heading h1 { margin: 2px 0 10px; font-size: 42px; color: #f1f7f5; }
.profile-heading p { margin: 0; color: #9eafa9; font-size: 15px; }
.profile-notice { width: min(680px, 100%); margin: 42px auto 0; padding: 38px 28px; text-align: center; border: 1px solid #425952; background: rgba(4, 17, 18, .88); }
.profile-avatar { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 16px; border: 1px solid #00edac; background: rgba(0, 237, 172, .08); transform: skewX(-5deg); }
.profile-avatar svg { width: 34px; height: 34px; fill: none; stroke: #00edac; stroke-width: 2; stroke-linecap: round; transform: skewX(5deg); }
.profile-notice h2 { margin: 0 0 10px; font-size: 24px; color: #e6eeeb; }
.profile-notice p { margin: 0; color: #9eafa9; font-size: 15px; }
.profile-login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin-top: 22px; padding: 12px 24px; background: #00edac; color: #031510; font-weight: 700; }
.profile-login svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-login:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.account-menu-wrap { position: relative; }
.account-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: linear-gradient(135deg,#654cff 0%,#9e48ed 42%,#ef4d9a 72%,#ff884d 100%); box-shadow: 0 0 0 3px rgba(132,78,238,.14),0 8px 26px rgba(114,64,221,.28); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.account-avatar::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.22); border-radius: inherit; pointer-events: none; }
.account-avatar i { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border: 3px solid #071718; border-radius: 50%; background: #31d99d; }
.account-dropdown { position: absolute; z-index: 120; top: calc(100% + 12px); right: 0; display: none; width: 270px; padding: 10px; border: 1px solid #3d4d49; color: #edf4f1; background: #081718; box-shadow: 0 24px 65px rgba(0,0,0,.58); }
.account-dropdown.open { display: block; animation: accountDrop .18s ease-out; }
.account-dropdown-head { display: flex; align-items: center; gap: 11px; padding: 10px; border-bottom: 1px solid #293b37; }
.account-dropdown-head > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: linear-gradient(135deg,#654cff,#a148e9 48%,#f34e91 76%,#ff884d); box-shadow: 0 6px 18px rgba(120,67,222,.25); font-weight: 900; }
.account-dropdown-head strong, .account-dropdown-head small { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-head small { margin-top: 4px; color: #879b95; font-size: 10px; }
.account-wallet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px 0; padding: 12px; background: #102423; }
.account-wallet small { color: #8ca09a; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.account-wallet strong { color: #ffd06b; }
.account-dropdown > a, .account-dropdown > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; color: #ccd8d4; background: transparent; font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.account-dropdown > a:hover, .account-dropdown > button:hover { color: #071511; background: #00edac; }
.account-dropdown > a span, .account-dropdown > button span { width: 18px; color: #f0bb55; text-align: center; }
.account-dropdown > a:hover span, .account-dropdown > button:hover span { color: inherit; }
.account-logout { border-top: 1px solid #293b37 !important; }
@keyframes accountDrop { from { opacity: 0; transform: translateY(-7px); } }
@media (max-width: 640px) {
  .profile-guest { padding: 26px 20px 50px; }
  .profile-heading h1 { font-size: 34px; }
  .profile-notice { margin-top: 32px; padding: 30px 18px; }
  .profile-notice h2 { font-size: 22px; }
}

/* One continuous tactical backdrop; only the gift action uses artwork. */
:root { --terrain-art: url("assets/terrain-background.png"); }
body,
.profile-page:not(.has-member-session),
.auth-backdrop {
  min-height: 100vh;
  background: linear-gradient(rgba(6, 18, 20, .2), rgba(6, 18, 20, .34)), var(--terrain-art) center / cover no-repeat fixed;
}
body::before, .auth-backdrop::before { display: none; }
.page-bg { background: transparent; }
.site-header, .sidebar, .category-panel {
  background: rgba(10, 26, 28, .96);
}
.bottom-dock { background: #0b1c1e; }
.auth-form-wrap, .profile-notice,
.feature-panel, .story-box, .service-card, .event-card, .member-panel,
.admin-panel, .mini-card, .hub-card, .product-card, .panel {
  background: rgba(10, 27, 29, .82);
  border-color: rgba(143, 179, 169, .22);
}
.dock-item:not(.center-action) { background: transparent; }
.dock-item.center-action::after {
  background-image: linear-gradient(105deg, transparent 38%, rgba(143, 255, 213, .25) 50%, transparent 62%), linear-gradient(rgba(4, 18, 19, .2), rgba(4, 18, 19, .4)), var(--terrain-art);
}
@media (hover: hover) {
  .dock-item.center-action:hover::after {
    background-image: linear-gradient(105deg, transparent 38%, rgba(143, 255, 213, .25) 50%, transparent 62%), linear-gradient(rgba(9, 81, 55, .68), rgba(3, 38, 30, .72)), var(--terrain-art);
  }
}

.social-btn.is-unavailable { opacity:.45; filter:grayscale(.7); cursor:not-allowed; }
.social-btn.is-unavailable:hover { transform:none; border-color:rgba(155,176,192,.18); background:rgba(255,255,255,.018); box-shadow:none; }

.footer-credit {
  color: rgba(218, 235, 229, .52);
  font: 700 .66rem/1.4 "Orbitron", "Segoe UI", sans-serif;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

/* Homepage: trending picks and animated story timeline. */
.trending-heading { align-items: flex-end; }
.trending-heading p { max-width: 590px; margin: 13px 0 0; color: rgba(220, 235, 240, .68); line-height: 1.65; }
.trending-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2, minmax(235px, 1fr)); gap: 18px; }
.trending-card { position: relative; min-height: 235px; overflow: hidden; border: 1px solid rgba(134, 174, 164, .25); background: #071719; isolation: isolate; opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), border-color .25s ease; }
.trending-card.is-visible { opacity: 1; transform: translateY(0); }
.trending-card:nth-child(2) { transition-delay: .1s; }
.trending-card:nth-child(3) { transition-delay: .2s; }
.trending-card--hero { grid-row: 1 / 3; min-height: 488px; }
.trending-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(2,12,14,.02) 24%, rgba(2,12,14,.94) 88%); }
.trending-card::after { content: ""; position: absolute; z-index: 2; inset: 0; border: 1px solid transparent; pointer-events: none; transition: border-color .25s ease; }
.trending-card:hover { border-color: rgba(0, 237, 172, .72); }
.trending-card:hover::after { border-color: rgba(0, 237, 172, .28); }
.trending-card img { width: 100%; height: 100%; object-fit: contain; padding: 28px; filter: drop-shadow(0 18px 28px rgba(0,0,0,.56)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.trending-card:hover img { transform: scale(1.07) rotate(-1deg); }
.trending-rank { position: absolute; z-index: 3; top: 18px; right: 20px; color: rgba(255,255,255,.2); font: 800 42px/1 "Orbitron", "Segoe UI", sans-serif; }
.trending-copy { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; padding: 54px 24px 22px; }
.trending-copy > span { color: var(--green); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.trending-copy h3 { margin: 7px 0 8px; color: #f4faf8; font-size: clamp(1.55rem, 2.8vw, 2.7rem); line-height: 1; text-transform: uppercase; }
.trending-card:not(.trending-card--hero) .trending-copy h3 { font-size: 1.55rem; }
.trending-copy p { max-width: 510px; margin: 0 0 14px; color: rgba(226,238,235,.74); font-size: .88rem; line-height: 1.55; }
.trending-copy strong { color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

.story-experience { position: relative; margin-top: 110px; padding: 100px 0 120px; scroll-margin-top: 76px; overflow: clip; border-top: 1px solid rgba(116, 170, 155, .2); background: linear-gradient(180deg, rgba(3,14,16,.56), rgba(3,14,16,.92)), url("assets/nav-topography.png") center top / cover fixed; }
.story-experience::before { content: ""; position: absolute; top: -180px; left: 50%; width: 720px; height: 420px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,237,172,.12), transparent 68%); pointer-events: none; }
.story-intro { position: relative; text-align: center; }
.story-overline { margin: 24px 0 12px; color: rgba(220,235,230,.62); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.story-intro h2 { margin: 0; color: #f4faf8; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .94; letter-spacing: -.075em; text-transform: uppercase; }
.story-lead { max-width: 660px; margin: 28px auto 0; color: rgba(214,230,224,.7); font-size: 1.02rem; line-height: 1.8; }
.story-timeline { --story-progress: 0%; position: relative; display: grid; gap: 120px; margin-top: 105px; padding-bottom: 20px; }
.story-rail { position: absolute; top: 34px; bottom: 34px; left: 50%; width: 2px; overflow: hidden; transform: translateX(-50%); background: rgba(118,157,148,.2); }
.story-rail span { display: block; width: 100%; height: var(--story-progress); background: linear-gradient(#00edac, #75dfff); box-shadow: 0 0 18px rgba(0,237,172,.72); transition: height .12s linear; }
.story-chapter { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr); align-items: center; min-height: 290px; opacity: .2; filter: saturate(.4); transition: opacity .8s ease, filter .8s ease; }
.story-chapter.is-visible { opacity: 1; filter: saturate(1); }
.story-medal { grid-column: 2; display: grid; place-items: center; width: 62px; height: 62px; justify-self: center; border: 1px solid rgba(0,237,172,.36); transform: rotate(45deg) scale(.72); background: #06191a; box-shadow: 0 0 0 10px rgba(4,20,20,.92), 0 0 34px rgba(0,237,172,.08); transition: transform .7s cubic-bezier(.2,.9,.2,1), background .5s ease, box-shadow .5s ease; }
.story-medal span { color: #88a49c; font: 800 13px/1 "Orbitron", "Segoe UI", sans-serif; transform: rotate(-45deg); }
.story-chapter.is-visible .story-medal { transform: rotate(45deg) scale(1); background: #00edac; box-shadow: 0 0 0 10px rgba(4,20,20,.92), 0 0 36px rgba(0,237,172,.28); }
.story-chapter.is-visible .story-medal span { color: #031612; }
.story-chapter-copy { grid-column: 1; grid-row: 1; max-width: 470px; padding: 34px; justify-self: end; border: 1px solid rgba(124,164,154,.23); background: rgba(7,25,27,.84); transform: translateX(-35px); transition: transform .8s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease; }
.story-chapter:nth-of-type(even) .story-chapter-copy { grid-column: 3; justify-self: start; transform: translateX(35px); }
.story-chapter.is-visible .story-chapter-copy { transform: translateX(0); border-color: rgba(0,237,172,.38); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.story-chapter-copy h3 { margin: 10px 0 14px; color: #f4faf8; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.03; letter-spacing: -.05em; }
.story-chapter-copy p { margin: 0; color: rgba(214,230,224,.68); line-height: 1.78; }
.story-chapter-copy small { display: block; margin-top: 22px; color: var(--green); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-achievement { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: 18px; max-width: 330px; padding: 18px 20px; justify-self: start; color: rgba(224,238,233,.72); border-left: 2px solid #00edac; background: linear-gradient(90deg, rgba(0,237,172,.08), transparent); transform: translateX(30px); transition: transform .8s .12s ease, opacity .8s .12s ease; opacity: 0; }
.story-chapter:nth-of-type(even) .story-achievement { grid-column: 1; justify-self: end; border-right: 2px solid #00edac; border-left: 0; background: linear-gradient(270deg, rgba(0,237,172,.08), transparent); transform: translateX(-30px); text-align: right; }
.story-chapter.is-visible .story-achievement { transform: translateX(0); opacity: 1; }
.story-achievement strong { color: #00edac; font: 800 2rem/1 "Orbitron", "Segoe UI", sans-serif; }
.story-achievement span { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.story-achievement--live strong { font-size: 2.8rem; }
.story-join { display: inline-flex; margin-top: 24px; color: #00edac; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.story-chapter--final .story-chapter-copy { background: linear-gradient(135deg, rgba(7,38,33,.96), rgba(6,23,25,.96)); }

@media (max-width: 820px) {
  .trending-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .trending-card, .trending-card--hero { grid-row: auto; min-height: 350px; }
  .story-experience { margin-top: 78px; padding: 76px 0 90px; }
  .story-timeline { gap: 70px; margin-top: 70px; }
  .story-rail { left: 30px; }
  .story-chapter { grid-template-columns: 62px 1fr; gap: 18px; }
  .story-medal { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
  .story-chapter-copy, .story-chapter:nth-of-type(even) .story-chapter-copy { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: none; padding: 26px 22px; transform: translateX(24px); }
  .story-achievement, .story-chapter:nth-of-type(even) .story-achievement { grid-column: 2; grid-row: 2; justify-self: stretch; margin-top: 12px; transform: translateX(24px); border-right: 0; border-left: 2px solid #00edac; background: linear-gradient(90deg, rgba(0,237,172,.08), transparent); text-align: left; }
}

@media (max-width: 520px) {
  .trending-heading { align-items: flex-start; }
  .trending-card, .trending-card--hero { min-height: 315px; }
  .trending-card img { padding: 20px; }
  .trending-copy { padding: 50px 18px 18px; }
  .story-intro h2 { font-size: clamp(2.65rem, 14vw, 4rem); }
  .story-timeline { width: calc(100% - 28px); }
  .story-rail { left: 23px; }
  .story-chapter { grid-template-columns: 46px 1fr; gap: 10px; }
  .story-medal { width: 40px; height: 40px; box-shadow: 0 0 0 6px rgba(4,20,20,.92); }
  .story-chapter-copy, .story-chapter:nth-of-type(even) .story-chapter-copy { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .trending-card, .story-chapter, .story-medal, .story-chapter-copy, .story-achievement { opacity: 1; transform: none !important; transition: none; filter: none; }
}

/* Trending game wall: equal covers in one continuous row. */
.trending-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: none; gap: 3px; }
.trending-card, .trending-card--hero { grid-row: auto; min-height: 0; aspect-ratio: 4 / 5; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.trending-card:first-child { clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
.trending-card:last-child { clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.trending-card::before { background: linear-gradient(180deg, transparent 45%, rgba(2,12,14,.92) 100%); }
.trending-card img { display: block; width: 100%; height: 100%; padding: 0; object-fit: cover; filter: saturate(.88) contrast(1.05); }
.trending-card:hover img { transform: scale(1.06); filter: saturate(1.08) contrast(1.06); }
.trending-game-name { position: absolute; z-index: 3; right: 15px; bottom: 16px; left: 15px; color: #f5fbf9; font: 800 clamp(.86rem, 1.4vw, 1.15rem)/1.15 "Orbitron", "Segoe UI", sans-serif; letter-spacing: -.03em; text-transform: uppercase; }

@media (max-width: 900px) {
  .trending-grid { display: flex; gap: 3px; padding: 0 0 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .trending-grid::-webkit-scrollbar { display: none; }
  .trending-card, .trending-card--hero { flex: 0 0 min(245px, 67vw); min-height: 0; scroll-snap-align: start; }
  .trending-card:first-child { clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
  .trending-card:last-child { clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
}

/* Newsroom */
.news-page { padding: 62px 0 130px; }
.news-heading { margin-bottom: 34px; }
.news-heading h1 { margin: 15px 0 8px; font-size: clamp(2.8rem, 7vw, 6.3rem); line-height: .9; letter-spacing: -.07em; }
.news-heading p { max-width: 650px; margin: 0; color: rgba(218,233,228,.68); font-size: 1rem; }
.drama-feature { display: grid; grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); min-height: 590px; border: 1px solid rgba(129,171,160,.28); background: rgba(4,19,21,.88); }
.drama-cover { position: relative; min-height: 590px; overflow: hidden; }
.drama-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(2,12,14,.82)); }
.drama-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08); transition: transform .8s ease; }
.drama-feature:hover .drama-cover img { transform: scale(1.035); }
.drama-flare { position: absolute; z-index: 2; top: 26px; left: 0; padding: 10px 16px 10px 22px; color: #07120f; background: #ffd75c; font-size: .7rem; font-weight: 900; letter-spacing: .09em; }
.drama-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px,5vw,72px); background: linear-gradient(135deg, rgba(6,29,28,.9), rgba(4,17,20,.96)), url("assets/nav-topography.png") center / cover; }
.drama-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; color: rgba(183,203,196,.66); font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.drama-meta span:first-child { color: #00edac; }
.drama-story h2 { margin: 22px 0 18px; color: #f4faf8; font-size: clamp(2.1rem,4vw,4.6rem); line-height: .98; letter-spacing: -.065em; }
.drama-lead { margin: 0; color: rgba(219,233,228,.72); line-height: 1.75; }
.drama-verdict { display: grid; gap: 8px; margin: 28px 0; padding: 17px 19px; border-left: 3px solid #ffd75c; background: rgba(255,215,92,.07); }
.drama-verdict span { color: #ffd75c; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.drama-verdict strong { color: #f4f8f6; line-height: 1.45; }
.news-read { align-self: flex-start; color: #00edac; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.news-article { display: grid; grid-template-columns: 240px minmax(0,780px); justify-content: center; gap: clamp(40px,8vw,120px); padding-top: 105px; scroll-margin-top: 80px; }
.article-index { position: sticky; top: 110px; align-self: start; display: grid; gap: 16px; padding-top: 8px; }
.article-index > span, .article-kicker { color: #00edac; font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.article-index strong { color: rgba(0,237,172,.18); font: 900 5.5rem/.78 "Orbitron",sans-serif; letter-spacing: -.08em; }
.article-index p { color: rgba(199,218,211,.56); font-size: .78rem; line-height: 1.6; }
.article-body > h2 { margin: 14px 0 22px; color: #f2f8f6; font-size: clamp(2rem,4vw,3.7rem); line-height: 1.05; letter-spacing: -.055em; }
.article-body > p { margin: 0 0 22px; color: rgba(218,233,228,.76); font-size: 1rem; line-height: 1.9; }
.article-points { display: grid; gap: 2px; margin: 44px 0; }
.article-points > div { display: grid; grid-template-columns: 54px 150px 1fr; align-items: start; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(127,165,155,.22); }
.article-points > div:last-child { border-bottom: 1px solid rgba(127,165,155,.22); }
.article-points span { color: #00edac; font: 800 1.3rem/1 "Orbitron",sans-serif; }
.article-points h3 { margin: 0; color: #f1f7f5; font-size: 1rem; text-transform: uppercase; }
.article-points p { margin: 0; color: rgba(207,225,219,.66); line-height: 1.65; }
.article-body blockquote { margin: 50px 0; padding: 28px 32px; border: 1px solid rgba(0,237,172,.28); color: #dff9ef; background: rgba(0,237,172,.055); font-size: clamp(1.25rem,2.5vw,2rem); font-weight: 700; line-height: 1.45; }
.article-sources { display: grid; gap: 10px; margin-top: 40px; padding: 20px; border: 1px solid rgba(127,165,155,.22); }
.article-sources strong { margin-bottom: 4px; color: #f2f8f6; text-transform: uppercase; }
.article-sources a { color: #00edac; font-size: .82rem; }
.quick-news { margin-top: 110px; }
.quick-news-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.quick-news-grid a { min-height: 210px; padding: 24px; border: 1px solid rgba(127,165,155,.23); background: rgba(5,21,23,.84); transition: transform .25s ease,border-color .25s ease; }
.quick-news-grid a:hover { transform: translateY(-5px); border-color: #00edac; }
.quick-news-grid span { color: #00edac; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.quick-news-grid h3 { margin: 28px 0 18px; color: #f2f8f6; font-size: 1.25rem; line-height: 1.35; }
.quick-news-grid small { color: rgba(197,215,209,.58); }
@media (max-width: 820px) {
  .news-page { padding-top: 36px; }
  .drama-feature { grid-template-columns: 1fr; }
  .drama-cover { min-height: 420px; }
  .drama-story { padding: 32px 22px; }
  .news-article { grid-template-columns: 1fr; padding-top: 72px; }
  .article-index { position: static; grid-template-columns: auto 1fr; align-items: end; }
  .article-index p { grid-column: 1/-1; }
  .quick-news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .drama-cover { min-height: 330px; }
  .article-points > div { grid-template-columns: 42px 1fr; }
  .article-points p { grid-column: 2; }
}

/* Dedicated Our Story experience. */
.promo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.promo-button--story { color: #dff9ef; background: transparent; border-color: rgba(126,205,180,.35); }
.promo-button--story::before { content: "✦"; margin-right: 9px; color: #00edac; }
.story-page { overflow-x: clip; }
.story-page-main { padding: 0; }
.story-cinematic-hero { position: relative; display: grid; align-items: center; min-height: calc(100svh - 76px); overflow: hidden; border-bottom: 1px solid rgba(99,155,140,.24); background: radial-gradient(circle at 72% 42%, rgba(0,237,172,.13), transparent 27%), linear-gradient(100deg, rgba(2,14,16,.98) 25%, rgba(3,18,20,.66)), url("assets/terrain-tactical.png") center / cover; }
.story-cinematic-hero::before { content: "PIENOIR"; position: absolute; right: -3vw; bottom: -4vw; color: rgba(255,255,255,.022); font: 900 clamp(8rem,22vw,23rem)/.75 "Orbitron",sans-serif; letter-spacing: -.1em; pointer-events: none; }
.story-hero-lines { position: absolute; inset: 0; opacity: .3; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(112,177,159,.12) 25%); }
.story-hero-content { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 90px; }
.story-hero-index { display: inline-flex; padding: 7px 10px; color: #00edac; border: 1px solid rgba(0,237,172,.28); font-size: .62rem; font-weight: 800; letter-spacing: .16em; }
.story-hero-content h1 { margin: 30px 0 24px; color: #f4faf8; font-size: clamp(6rem,17vw,14rem); line-height: .68; letter-spacing: -.095em; text-transform: uppercase; }
.story-hero-content h1 em { color: transparent; -webkit-text-stroke: 2px #00edac; font-style: normal; }
.story-hero-content > p { max-width: 570px; margin: 0; color: rgba(220,235,229,.72); font-size: clamp(1rem,1.8vw,1.25rem); line-height: 1.75; }
.story-scroll-cue { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 48px; margin-top: 42px; padding: 0 18px; color: #f2f8f5; border: 1px solid rgba(0,237,172,.58); background: rgba(3,24,23,.76); font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.story-scroll-cue i { display: inline-grid; place-items: center; width: 22px; height: 22px; color: #00edac; font-style: normal; animation: storyCue 1.7s ease-in-out infinite; }
@keyframes storyCue { 50% { transform: translateY(7px); } }
.story-hero-seal { position: absolute; z-index: 2; right: max(7vw,40px); top: 50%; display: grid; place-items: center; width: 190px; height: 190px; transform: translateY(-50%) rotate(45deg); border: 1px solid rgba(0,237,172,.34); background: rgba(3,20,21,.72); box-shadow: 0 0 0 18px rgba(0,237,172,.025), 0 0 70px rgba(0,237,172,.08); }
.story-hero-seal span, .story-hero-seal small { transform: rotate(-45deg); }
.story-hero-seal span { color: #00edac; font: 900 4.5rem/.8 "Orbitron",sans-serif; }
.story-hero-seal small { margin-top: -42px; color: rgba(224,239,234,.58); letter-spacing: .16em; }
.leader-section { position: relative; isolation: isolate; display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; gap: clamp(38px,7vw,100px); padding-top: 120px; padding-bottom: 120px; scroll-margin-top: 76px; }
.leader-section::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: linear-gradient(135deg, #061719, #031012 68%, #07191a); border-top: 1px solid rgba(112,159,147,.18); border-bottom: 1px solid rgba(112,159,147,.18); }
.leader-section::after { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: url("assets/nav-topography.png") center / cover; opacity: .12; pointer-events: none; }
.leader-portrait { position: relative; display: grid; place-items: center; min-height: 650px; overflow: hidden; border: 1px solid rgba(113,166,151,.28); background: radial-gradient(circle, rgba(0,237,172,.12), transparent 34%), linear-gradient(145deg, rgba(6,30,30,.9), rgba(3,14,17,.98)), url("assets/nav-topography.png") center / cover; }
.leader-portrait::before, .leader-portrait::after { content: ""; position: absolute; width: 68%; aspect-ratio: 1; border: 1px solid rgba(0,237,172,.12); transform: rotate(45deg); }
.leader-portrait::after { width: 46%; border-color: rgba(0,237,172,.25); }
.leader-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08); transform: scale(1.035); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.leader-portrait:hover img { transform: scale(1.09); filter: saturate(1) contrast(1.08); }
.leader-portrait::before { z-index: 1; box-shadow: 0 0 55px rgba(0,237,172,.08); }
.leader-portrait::after { z-index: 1; }
.leader-monogram { position: relative; z-index: 2; color: transparent; -webkit-text-stroke: 2px #00edac; font: 900 clamp(9rem,18vw,15rem)/1 "Orbitron",sans-serif; text-shadow: 0 0 50px rgba(0,237,172,.12); }
.leader-number { position: absolute; top: 24px; left: 26px; color: rgba(0,237,172,.24); font: 800 4rem/1 "Orbitron",sans-serif; }
.leader-coordinate { position: absolute; right: 20px; bottom: 24px; left: 20px; color: rgba(214,232,226,.58); font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-align: center; }
.leader-copy { align-self: center; }
.leader-kicker { margin: 24px 0 4px; color: #00edac; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.leader-copy h2 { margin: 0 0 28px; color: #f4faf8; font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(4rem,8vw,8rem); font-weight: 900; line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.leader-quote { max-width: 650px; margin: 0 0 26px; padding-left: 22px; border-left: 2px solid #00edac; color: #e6f5f0 !important; font-size: clamp(1.2rem,2.3vw,1.8rem) !important; font-weight: 700; line-height: 1.45 !important; }
.leader-copy > p { max-width: 650px; color: rgba(210,229,222,.68); font-size: 1rem; line-height: 1.8; }
.leader-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 36px; background: rgba(120,167,154,.2); }
.leader-values span { display: grid; gap: 10px; padding: 18px 14px; color: #dcebe6; background: #07191b; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.leader-values b { color: #00edac; font: 800 1.2rem/1 "Orbitron",sans-serif; }
.story-page .story-experience { margin-top: 0; }
.story-scene { position: relative; grid-column: 3; grid-row: 1; align-self: stretch; width: min(100%, 500px); min-height: 330px; justify-self: start; overflow: hidden; border: 1px solid rgba(117,171,156,.2); opacity: 0; transform: translateX(45px) perspective(900px) rotateY(-7deg); transition: opacity .9s .08s ease, transform 1s .08s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease; }
.story-chapter:nth-of-type(even) .story-scene { grid-column: 1; justify-self: end; transform: translateX(-45px) perspective(900px) rotateY(7deg); }
.story-chapter.is-visible .story-scene { opacity: 1; transform: translateX(0) perspective(900px) rotateY(0); border-color: rgba(0,237,172,.38); box-shadow: 0 30px 70px rgba(0,0,0,.36); }
.story-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(2,13,15,.9)); pointer-events: none; }
.story-scene img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; filter: saturate(.62) contrast(1.08); transform: scale(1.13) translateY(var(--scene-shift,0px)); transition: filter .8s ease, transform .18s linear; }
.story-chapter.is-visible .story-scene img { filter: saturate(.96) contrast(1.06); }
.story-scene .story-achievement, .story-chapter:nth-of-type(even) .story-scene .story-achievement { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; display: flex; max-width: none; margin: 0; padding: 16px 18px; transform: translateY(20px); border-right: 0; border-left: 2px solid #00edac; background: rgba(2,16,18,.78); backdrop-filter: blur(8px); text-align: left; }
.story-chapter.is-visible .story-scene .story-achievement { transform: translateY(0); }
.story-chapter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 1px; background: linear-gradient(90deg,#00edac,transparent); opacity: 0; transition: width .8s .18s ease, opacity .5s ease; }
.story-chapter.is-visible::after { width: 13%; opacity: .45; }
.story-chapter:nth-of-type(even)::after { transform: translateX(-100%) rotate(180deg); }
@media (max-width: 900px) {
  .story-hero-seal { right: 7vw; top: 28%; width: 115px; height: 115px; opacity: .48; }
  .story-hero-seal span { font-size: 2.8rem; }
  .story-hero-seal small { display: none; }
  .leader-section { grid-template-columns: 1fr; padding-top: 75px; padding-bottom: 80px; }
  .leader-portrait { min-height: 430px; }
  .story-scene, .story-chapter:nth-of-type(even) .story-scene { grid-column: 2; grid-row: 2; width: 100%; min-height: 260px; transform: translateX(24px); }
  .story-scene img { min-height: 260px; }
  .story-chapter::after { display: none; }
}
@media (max-width: 560px) {
  .promo-actions { display: grid; }
  .story-cinematic-hero { min-height: 720px; }
  .story-hero-content h1 { font-size: clamp(5rem,26vw,7.2rem); }
  .story-hero-seal { display: none; }
  .leader-portrait { min-height: 360px; }
  .leader-values { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .story-scroll-cue i { animation: none; } }

/* Home hero — PieNoir command center. */
.promo-shell { margin-top: 18px; }
.promo-banner { grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); min-height: 520px; isolation: isolate; border-color: rgba(80,160,137,.28); background: #020b0e; box-shadow: 0 24px 75px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.015); }
.promo-banner::before { z-index: 0; background: radial-gradient(circle at 12% 12%,rgba(0,237,172,.1),transparent 28%), linear-gradient(100deg,rgba(2,12,15,.99) 0%,rgba(4,16,18,.96) 52%,rgba(3,13,15,.15) 73%); }
.promo-banner::after { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background: linear-gradient(90deg,transparent calc(55% - 1px),rgba(0,237,172,.18) 55%,transparent calc(55% + 1px)), repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 5px); mix-blend-mode:screen; }
.promo-copy { z-index:4; max-width:760px; padding:56px 54px 34px; }
.promo-kicker { gap:10px; margin-bottom:25px; color:#71f3c4; font-size:.63rem; letter-spacing:.2em; }
.promo-kicker i { width:26px; height:1px; background:#00edac; box-shadow:0 0 12px #00edac; }
.promo-kicker span { margin-left:5px; padding-left:14px; color:rgba(207,229,220,.42); border-left:1px solid rgba(207,229,220,.2); letter-spacing:.12em; }
.promo-copy h1 { max-width:720px; color:#f1f8f6; font-size:clamp(3rem,4.7vw,5.15rem); line-height:.92; letter-spacing:-.07em; text-wrap:balance; }
.promo-copy h1 em { color:transparent; -webkit-text-stroke:1.3px rgba(0,237,172,.9); font-style:normal; }
.promo-copy p { max-width:620px; margin:24px 0 27px; color:rgba(211,229,222,.67); font-size:.98rem; line-height:1.75; }
.promo-actions { gap:12px; }
.promo-button { min-width:190px; min-height:50px; color:#02130e; border-color:#00edac; background:#00edac; box-shadow:0 10px 32px rgba(0,237,172,.12); }
.promo-button::before { color:#02130e; }
.promo-button--story { color:#dff9ef; background:rgba(5,20,21,.74); border-color:rgba(126,205,180,.32); box-shadow:none; }
.promo-button--story::before { color:#00edac; }
.promo-metrics { display:flex; align-items:center; gap:0; margin-top:34px; padding-top:22px; border-top:1px solid rgba(114,171,153,.16); }
.promo-metrics div { min-width:115px; padding-right:26px; margin-right:26px; border-right:1px solid rgba(114,171,153,.16); }
.promo-metrics div:last-child { margin-right:0; border-right:0; }
.promo-metrics strong { display:block; color:#eaf7f2; font:800 1.15rem/1 "Orbitron",sans-serif; }
.promo-metrics span { display:block; margin-top:6px; color:rgba(197,220,211,.42); font-size:.61rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.promo-visual { z-index:1; overflow:hidden; background:linear-gradient(105deg,rgba(2,11,13,.08),rgba(2,8,10,.48)),url('assets/story-community.png') center/cover no-repeat; }
.promo-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#041012 0%,transparent 25%),linear-gradient(0deg,rgba(2,10,12,.85),transparent 52%); }
.promo-visual::after { content:""; position:absolute; width:260px; height:260px; right:-105px; top:-105px; border:1px solid rgba(0,237,172,.24); transform:rotate(45deg); box-shadow:0 0 0 24px rgba(0,237,172,.018),0 0 0 48px rgba(0,237,172,.012); }
.promo-visual-mark { position:absolute; z-index:2; top:28px; right:30px; display:flex; align-items:center; gap:10px; }
.promo-visual-mark span { display:grid; place-items:center; width:38px; height:38px; color:#02130e; background:#00edac; font:900 .77rem "Orbitron",sans-serif; clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%); }
.promo-visual-mark b { color:rgba(255,255,255,.72); font:700 1rem "Orbitron",sans-serif; }
.promo-visual-mark img { width:74px; height:40px; object-fit:contain; }
.promo-actions--three .promo-button { min-width:155px; }
.promo-actions--three .promo-button:last-child { min-width:190px; }
.community-dialog { width:min(620px,calc(100% - 28px)); padding:34px; color:#edf8f4; border:1px solid rgba(0,237,172,.38); background:#071719; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.community-dialog::backdrop { background:rgba(0,7,9,.82); backdrop-filter:blur(7px); }
.community-dialog h2 { margin:14px 40px 12px 0; font-size:clamp(2rem,5vw,3.4rem); line-height:.9; }
.community-dialog>p { color:rgba(215,232,225,.62); line-height:1.65; }
.community-close { position:absolute; right:16px; top:12px; color:#fff; border:0; background:none; font-size:28px; cursor:pointer; }
.community-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; }
.community-links a { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:2px 13px; padding:17px; color:#eef8f5; border:1px solid rgba(117,166,151,.28); background:rgba(1,11,13,.65); }
.community-links a:hover { border-color:#00edac; transform:translateY(-2px); }
.community-links a>span { grid-row:1/3; display:grid; place-items:center; width:46px; height:46px; color:#071719; border-radius:50%; background:#00edac; font:900 1.15rem Orbitron,sans-serif; }
.community-links strong { font-size:.9rem; }
.community-links small { color:rgba(213,230,223,.48); }
.promo-visual-mark small { color:rgba(227,242,237,.66); font-size:.56rem; font-weight:800; letter-spacing:.16em; }
.promo-card { z-index:3; right:28px; bottom:27px; gap:10px; min-width:290px; padding:19px 21px 18px; border-color:rgba(0,237,172,.35); border-left:3px solid #00edac; background:rgba(2,13,15,.82); backdrop-filter:blur(12px); box-shadow:0 18px 44px rgba(0,0,0,.34); }
.promo-card-top { display:flex; align-items:center; justify-content:space-between; }
.promo-card-top i { width:7px; height:7px; border-radius:50%; background:#00edac; box-shadow:0 0 0 5px rgba(0,237,172,.1),0 0 16px #00edac; }
.promo-card .card-label { color:#00edac; }
.promo-card strong { color:#f1f8f6; font-size:1.16rem; line-height:1.3; }
.promo-card small { color:rgba(215,233,226,.48); font-size:.59rem; font-weight:700; letter-spacing:.12em; }

@media (max-width:980px) {
  .promo-banner { grid-template-columns:1fr; }
  .promo-banner::after { background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 5px); }
  .promo-copy { max-width:none; }
  .promo-visual { min-height:340px; }
}
@media (max-width:640px) {
  .promo-shell { width:100%; margin-top:0; }
  .promo-banner { min-height:0; border-width:1px 0; }
  .promo-copy { padding:34px 20px 28px; }
  .promo-kicker span { display:none; }
  .promo-copy h1 { font-size:clamp(2.65rem,13vw,4rem); }
  .promo-copy p { margin:20px 0 24px; font-size:.92rem; }
  .promo-actions { display:grid; grid-template-columns:1fr 1fr; }
  .promo-actions--three { grid-template-columns:1fr 1fr; }
  .promo-actions--three .promo-button:last-child { grid-column:1/-1; }
  .promo-button { width:100%; min-width:0; padding-inline:30px 8px; font-size:.61rem; letter-spacing:.055em; white-space:nowrap; }
  .promo-button::before { left:12px; }
  .promo-metrics { justify-content:space-between; margin-top:28px; }
  .promo-metrics div { min-width:0; flex:1; margin-right:12px; padding-right:12px; }
  .promo-visual { min-height:300px; }
  .promo-visual-mark { top:18px; right:18px; }
  .promo-card { right:16px; left:16px; bottom:16px; min-width:0; }
  .community-links { grid-template-columns:1fr; }
}

/* Floating trophy and restrained championship gold effects. */
.leader-portrait { overflow: visible; border: 0; background: radial-gradient(ellipse at 50% 48%, rgba(235,183,65,.16), transparent 34%); }
.leader-portrait::before { z-index: 0; width: 58%; border: 1px solid rgba(238,194,92,.18); border-radius: 50%; background: transparent; box-shadow: 0 0 85px rgba(229,176,56,.12), inset 0 0 70px rgba(232,186,77,.05); animation: none; }
.leader-portrait::after { z-index: 0; width: 38%; border: 1px solid rgba(255,218,130,.12); border-radius: 50%; box-shadow: 0 0 45px rgba(255,194,60,.1); animation: goldenPulse 3.4s ease-in-out infinite; }
.leader-portrait img { z-index: 2; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255,197,66,.2)) drop-shadow(0 28px 38px rgba(0,0,0,.55)); transform: scale(.92); animation: trophyFloat 4.6s ease-in-out infinite; }
.leader-portrait:hover img { filter: drop-shadow(0 0 23px rgba(255,202,71,.34)) drop-shadow(0 32px 42px rgba(0,0,0,.58)); }
.leader-number, .leader-coordinate { z-index: 3; }
.leader-copy h2 { color: transparent; background: linear-gradient(112deg, #fff 5%, #fff4cf 40%, #d9a83a 64%, #fff8db 82%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 24px rgba(255,194,62,.08)); }
.leader-quote { border-left-color: #e6b84d; }
.leader-values b { color: #f0c458; }
@keyframes goldenPulse { 50% { opacity: .45; transform: rotate(45deg) scale(1.08); } }
@keyframes trophyFloat { 50% { transform: scale(.92) translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .leader-portrait::before, .leader-portrait::after, .leader-portrait img { animation: none; } }

/* Mobile usability pass: compact navigation, safe areas and touch targets. */
@media (max-width: 640px) {
  html { overflow-x: hidden; scroll-padding-bottom: 88px; }
  body { overflow-x: hidden; background-attachment: scroll; }
  .container { width: min(100% - 28px, 1240px); }
  .site-header { position: sticky; top: 0; }
  .nav-wrap { flex-direction: row; align-items: center; min-height: 68px; gap: 8px; }
  .brand-wrap { min-width: 0; gap: 9px; }
  .menu-trigger { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 11px; }
  .menu-label, .brand-wrap small { display: none; }
  .brand-main { min-width: 0; }
  .brand-name { overflow: hidden; font-size: .96rem; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { flex: 0 0 auto; flex-direction: row; align-items: center; margin-left: auto; }
  .header-actions .primary-btn { min-height: 42px; padding: 0 12px; font-size: .68rem; }
  .account-avatar { width: 42px; height: 42px; }
  .account-dropdown { position: fixed; top: 62px; right: 14px; width: min(290px,calc(100% - 28px)); }
  .category-panel { width: min(330px,calc(100vw - 38px)); padding: 24px 18px calc(28px + env(safe-area-inset-bottom,0px)); overflow-y: auto; }
  .category-item { min-height: 52px; }
  button, a, input, select, textarea { touch-action: manipulation; }
  .bottom-dock { padding-bottom: env(safe-area-inset-bottom,0px); }
  .dock-item { min-height: 68px; }
  .page-shell { min-width: 0; }
  .story-page, .story-page-main, .story-timeline, .story-chapter { max-width: 100%; overflow-x: clip; }
  .story-chapter-copy, .story-chapter:nth-of-type(even) .story-chapter-copy,
  .story-achievement, .story-chapter:nth-of-type(even) .story-achievement,
  .story-scene, .story-chapter:nth-of-type(even) .story-scene { transform: none; }
  .story-hero-content { padding-top: 54px; padding-bottom: 68px; }
  .story-hero-content h1 { font-size: clamp(4.4rem,24vw,6.4rem); }
  .news-page { padding-bottom: 100px; }
  .news-heading h1 { font-size: clamp(2.55rem,15vw,4rem); }
  .article-body > p { font-size: .94rem; line-height: 1.75; }
  .article-body blockquote { margin: 34px 0; padding: 21px 18px; }
}
@media (max-width: 380px) {
  .container { width: min(100% - 22px,1240px); }
  .brand-name { font-size: .86rem; }
  .header-actions .primary-btn { padding-inline: 10px; }
  .dock-item, .dock-item.center-action .dock-label { font-size: .51rem; }
}

/* Homepage game-universe ribbons. */
.promo-trust-copy { position:relative; max-width:640px; margin:25px 0 27px; padding:16px 20px 17px 22px; border-left:2px solid #00edac; background:linear-gradient(90deg,rgba(0,237,172,.085),rgba(0,237,172,.018) 68%,transparent); }
.promo-trust-copy::after { content:""; position:absolute; top:0; left:-2px; width:2px; height:30%; background:#d7fff1; box-shadow:0 0 15px #00edac; }
.promo-trust-copy>span { display:block; margin-bottom:8px; color:#00edac; font-size:.56rem; font-weight:900; letter-spacing:.2em; }
.promo-trust-copy>strong { display:block; color:#f0f8f5; font:800 clamp(.92rem,1.35vw,1.12rem)/1.45 "Orbitron",sans-serif; letter-spacing:.025em; }
.promo-copy .promo-trust-copy>p { max-width:590px; margin:8px 0 0; color:rgba(208,227,220,.58); font-size:.82rem; line-height:1.65; }
.promo-button--vyage { gap:11px; padding-left:17px; }
.promo-button--vyage::before { display:none; }
.promo-button--vyage img { position:relative; z-index:1; width:28px; height:28px; object-fit:contain; filter:brightness(1.15) drop-shadow(0 0 7px rgba(0,237,172,.18)); transform:scale(2.25); }
.promo-button--vyage:hover img { transform:scale(2.25); }
.promo-button--community { gap:11px; padding-left:18px; }
.promo-button--community::before { display:none; }
.promo-button--community svg { position:relative; z-index:1; width:21px; height:21px; flex:0 0 21px; fill:none; stroke:#00edac; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(0,237,172,.2)); }
@media (min-width:981px) {
  .promo-banner { min-height:470px; }
  .promo-copy { padding:42px 46px 27px; }
  .promo-kicker { margin-bottom:18px; }
  .promo-copy h1 { max-width:650px; font-size:clamp(3rem,4.15vw,4.65rem); }
  .promo-trust-copy { margin:20px 0 21px; padding:12px 17px 13px 19px; }
  .promo-trust-copy>span { margin-bottom:5px; }
  .promo-trust-copy>strong { font-size:clamp(.86rem,1.1vw,1rem); }
  .promo-copy .promo-trust-copy>p { margin-top:5px; font-size:.75rem; line-height:1.55; }
  .promo-actions { gap:9px; }
  .promo-button { min-height:46px; }
  .promo-actions--three .promo-button { min-width:0; padding-right:17px; }
  .promo-actions--three .promo-button:first-child { min-width:150px; }
  .promo-actions--three .promo-button:last-child { min-width:176px; }
  .promo-metrics { margin-top:25px; padding-top:17px; }
  .promo-metrics div { min-width:105px; margin-right:18px; padding-right:18px; }
}
.promo-visual { position:relative; background:radial-gradient(circle at 56% 45%,rgba(0,237,172,.13),transparent 34%),linear-gradient(135deg,#071316 0%,#020709 72%); }
.promo-visual::before { z-index:2; background:linear-gradient(90deg,#041012 0%,rgba(4,16,18,.72) 17%,transparent 48%),linear-gradient(0deg,rgba(2,10,12,.92) 0%,transparent 44%,rgba(2,10,12,.44) 100%); }
.game-logo-ribbons { --ribbon-step:484px; position:absolute; z-index:1; inset:-28% -42%; display:flex; flex-direction:column; justify-content:center; gap:13px; overflow:hidden; pointer-events:none; user-select:none; transform:rotate(-12deg) scale(1.04); }
.game-logo-ribbons::before { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(3,12,14,.95),transparent 22% 78%,rgba(3,10,12,.9)); }
.game-logo-track { display:flex; gap:13px; width:max-content; will-change:transform; animation:gameRibbonLoop 22s linear infinite; }
.game-logo-track--two,.game-logo-track--four { animation-direction:reverse; animation-duration:26s; }
.game-logo-track--three { animation-duration:29s; }
.game-logo-track--four { animation-duration:24s; }
.game-logo-track--five { animation-duration:31s; }
.game-logo-track span { position:relative; display:block; width:108px; height:108px; overflow:hidden; flex:0 0 108px; border:1px solid rgba(111,194,170,.34); background:#081316; box-shadow:0 15px 38px rgba(0,0,0,.38); clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,16% 100%,0 84%); }
.game-logo-track span::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(2,8,10,.94),transparent 56%); }
.game-logo-track img { width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.06); transition:transform .45s ease,filter .45s ease; }
.game-logo-track b { display:none; }
.promo-visual:hover .game-logo-track img { filter:saturate(.88) contrast(1.06); transform:none; }
.promo-visual-mark { z-index:5; }
.promo-card { z-index:5; }
@keyframes gameRibbonLoop { from{transform:translate3d(0,0,0)} to{transform:translate3d(calc(-1 * var(--ribbon-step)),0,0)} }

@media (max-width:980px) {
  .game-logo-ribbons { --ribbon-step:460px; inset:-34% -30%; transform:rotate(-10deg) scale(1.06); }
  .game-logo-track span { width:102px; height:102px; flex-basis:102px; }
}
@media (max-width:640px) {
  .promo-trust-copy { margin:20px 0 24px; padding:14px 15px 15px 17px; }
  .promo-trust-copy>strong { font-size:.83rem; }
  .promo-copy .promo-trust-copy>p { font-size:.77rem; }
  .promo-button--vyage { padding-left:13px; }
  .promo-button--vyage img { width:25px; height:25px; }
  .promo-button--community { padding-left:13px; }
  .promo-button--community svg { width:19px; height:19px; flex-basis:19px; }
  .game-logo-ribbons { --ribbon-step:392px; inset:-38% -46%; gap:10px; transform:rotate(-12deg) scale(1.02); }
  .game-logo-track { gap:10px; }
  .game-logo-track span { width:88px; height:88px; flex-basis:88px; }
  .game-logo-track b { left:8px; bottom:7px; font-size:.46rem; }
  .promo-visual::before { background:linear-gradient(0deg,rgba(2,10,12,.94),transparent 56%,rgba(2,10,12,.36)); }
}
@media (prefers-reduced-motion:reduce) {
  .game-logo-track { animation:none; }
}

/* Mobile-first rebuild — final override layer. */
@media (max-width:640px) {
  *,*::before,*::after { box-sizing:border-box; }
  html { width:100%; overflow-x:hidden; font-size:15px; }
  body { width:100%; min-width:0; overflow-x:hidden; }
  img,svg,video,canvas { max-width:100%; }
  input,select,textarea { max-width:100%; font-size:16px; }
  h1,h2,h3,p,a,span,strong { overflow-wrap:anywhere; }
  dialog { max-width:100vw; }

  /* Login: one compact screen, no stacked social rows. */
  .auth-page { min-height:100svh; overflow-y:auto; }
  .auth-backdrop::before { background-size:24px 24px; opacity:.48; }
  .auth-shell { display:flex; width:100%; min-height:100svh; padding:10px; align-items:center; justify-content:center; }
  .auth-panel { width:min(100%,430px); padding:13px 14px 16px; }
  .auth-form-wrap,.auth-form-wrap:hover { transform:none; border-color:rgba(126,181,157,.2); box-shadow:0 16px 40px rgba(0,0,0,.26); }
  .panel-topbar { margin-bottom:0; }
  .back-home-link { min-height:34px; padding:5px 0; font-size:.62rem; }
  .brand-center { margin:-2px 0 0; }
  .logo-slot { width:76px; height:58px; }
  .form-header h2 { margin:0 0 9px; font-size:1.45rem; }
  .auth-form { gap:10px; }
  .form-message:empty,.field-message:empty { display:none; }
  .auth-form label { gap:5px; font-size:.75rem; }
  .auth-form input,.auth-form select { min-height:44px; padding-inline:12px; }
  .field-toggle { width:34px; height:34px; right:5px; }
  .auth-extra-row { margin:-2px 0 2px; }
  .text-muted-link { font-size:.68rem; }
  .auth-submit { min-height:45px; font-size:.72rem; }
  .divider { margin:12px 0 10px; }
  .divider span { font-size:.58rem; }
  .social-login-group { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:0; }
  .social-btn { min-width:0; min-height:44px; padding:5px; }
  .social-btn>span:last-child { display:none; }
  .social-mark { width:28px; height:28px; }
  .switch-link { margin:13px 0 0; font-size:.76rem; }

  /* Homepage: content first, decorative universe becomes a compact strip. */
  .promo-shell { width:100%; }
  .promo-banner { display:block; border-inline:0; }
  .promo-copy { padding:20px 14px 16px; }
  .promo-kicker { margin-bottom:13px; font-size:.56rem; }
  .promo-copy h1 { max-width:340px; font-size:clamp(2.18rem,11.3vw,3.15rem); line-height:.92; }
  .promo-trust-copy { margin:13px 0 14px; padding:10px 11px 11px 13px; }
  .promo-trust-copy>span { margin-bottom:5px; font-size:.48rem; }
  .promo-trust-copy>strong { font-size:.76rem; line-height:1.4; }
  .promo-copy .promo-trust-copy>p { margin-top:4px; font-size:.69rem; line-height:1.5; -webkit-line-clamp:2; line-clamp:2; }
  .promo-actions,.promo-actions--three { width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }
  .promo-actions--three .promo-button:last-child { grid-column:1/-1; }
  .promo-button { min-width:0; max-width:100%; min-height:41px; padding-inline:27px 6px; font-size:.56rem; }
  .promo-button--community,.promo-button--vyage { padding-left:10px; }
  .promo-metrics { margin-top:14px; padding-top:13px; }
  .promo-metrics div { margin-right:8px; padding-right:8px; }
  .promo-metrics strong { font-size:.96rem; }
  .promo-metrics span { margin-top:4px; font-size:.47rem; letter-spacing:.07em; }
  .promo-visual { min-height:156px; }
  .promo-card { display:none; }
  .promo-visual-mark { top:10px; right:10px; transform:scale(.8); transform-origin:top right; }
  .game-logo-ribbons { inset:-78% -50%; opacity:.88; }
  .catalog-block { padding-top:34px; }
  .catalog-heading h2 { font-size:clamp(1.8rem,9vw,2.55rem); }

  /* Shared content density and safe bottom navigation. */
  .site-header { min-height:58px; }
  .nav-wrap { min-height:58px; padding-block:5px; }
  .brand-wrap { max-width:calc(100% - 48px); }
  .brand-main { min-height:44px; padding-left:49px; }
  .brand-main::before { width:42px; height:42px; }
  .brand-name { font-size:.81rem; letter-spacing:.1em; }
  .bottom-dock { min-height:60px; }
  .dock-item { min-height:60px; padding-top:7px; font-size:.49rem; }
  .dock-item.center-action { padding-bottom:22px; }
  body:has(.bottom-dock) { padding-bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
  .site-footer { padding-bottom:72px; }

  /* Defensive layout rules shared by content pages. */
  .page-shell,.shop-detail,.services-page,.raffle-page,.news-page,.story-page-main { width:100%; min-width:0; }
  .shop-game-grid,.shop-product-grid,.valorant-vp-grid,.services-grid,.process-track,.raffle-layout,.prize-list { min-width:0; }
  .shop-game-card,.shop-product-tile,.digital-service,.wheel-panel,.checkin-panel { min-width:0; max-width:100%; }
  .table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .community-dialog,.shop-checkout,.service-detail-dialog,.reward-dialog,.checkin-dialog { overscroll-behavior:contain; }
}

@media (max-width:370px) {
  .auth-shell { padding:6px; }
  .auth-panel { padding:10px 11px 13px; }
  .logo-slot { width:74px; height:88px; }
  .promo-copy h1 { font-size:2.05rem; }
  .promo-button { font-size:.51rem; }
  .dock-item { font-size:.45rem; }
}

/* 2026 mobile density pass: surface primary content within the first viewport. */
@media (max-width:640px) {
  .page-shell { padding-top:0; }
  .container { width:calc(100% - 24px); }
  .nav-wrap { min-height:60px; }
  .site-header .menu-trigger { min-width:40px; min-height:40px; }
  .account-avatar { width:38px; height:38px; }
  .bottom-dock { min-height:62px; }
  .dock-item { min-height:62px; }

  .promo-copy { padding:24px 16px 20px; }
  .promo-copy h1 { font-size:clamp(2.35rem,12vw,3.35rem); line-height:.94; }
  .promo-trust-copy { margin:15px 0 16px; padding:11px 12px 12px 14px; }
  .promo-copy .promo-trust-copy>p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
  .promo-actions { gap:8px; }
  .promo-button { min-height:44px; }
  .promo-metrics { margin-top:18px; padding-top:15px; }
  .promo-metrics span { font-size:.52rem; }
  .promo-visual { min-height:220px; }
  .promo-card { right:12px; bottom:12px; left:12px; padding:13px 15px; }
  .promo-card strong { font-size:.95rem; }
  .promo-visual-mark { top:12px; right:12px; }

  .catalog-block { padding-top:42px; padding-bottom:82px; }
  .catalog-heading { margin-bottom:18px; }
  .catalog-heading h2 { font-size:clamp(2rem,10vw,3rem); }
  .game-grid { gap:10px; }
  .game-card { min-height:112px; }

  .story-cinematic-hero { min-height:calc(100svh - 60px); }
  .story-hero-content { padding-top:32px; padding-bottom:42px; }
  .story-hero-content h1 { font-size:clamp(3.35rem,19vw,5rem); }
  .leader-section { padding-top:54px; padding-bottom:54px; }
  .leader-copy { padding:0; }
  .story-experience { padding-top:55px; }

  .news-heading { padding-top:34px; padding-bottom:26px; }
  .news-heading h1 { font-size:clamp(2.25rem,12vw,3.25rem); }
  .drama-feature { margin-top:0; }
  .news-article,.quick-news { padding-top:48px; padding-bottom:48px; }
  .community-dialog { max-height:88dvh; overflow:auto; padding:24px 18px; }
  .site-footer { padding:18px 0 82px; }
  .footer-credit { font-size:.56rem; letter-spacing:.11em; }
  .brand-main { min-height:46px; padding-left:51px; }
  .brand-main::before { width:44px; height:44px; }
}
/* PieNoir cinematic page transition */
.pn-page-loader {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #effffb;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,230,184,.11), transparent 28%),
    linear-gradient(135deg, #010708 0%, #061313 52%, #020708 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .48s ease, visibility .48s ease, clip-path .65s cubic-bezier(.7,0,.2,1);
  clip-path: inset(0 0 0 0);
}
.pn-page-loader.is-complete { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); }
.pn-page-loader--exit { opacity: 0; visibility: hidden; clip-path: inset(100% 0 0 0); }
.pn-page-loader--exit.is-active { opacity: 1; visibility: visible; clip-path: inset(0); }
.pn-loader-grid { position:absolute; inset:-30%; opacity:.24; background-image:linear-gradient(rgba(0,230,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,230,184,.08) 1px,transparent 1px); background-size:38px 38px; transform:perspective(540px) rotateX(60deg) translateY(18%); animation:pnGridFlow 2.2s linear infinite; }
.pn-loader-grid::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 43%,rgba(0,255,205,.28) 50%,transparent 57%); animation:pnScan 1.2s ease-in-out infinite; }
.pn-loader-core { position:relative; z-index:2; display:grid; justify-items:center; width:min(330px,76vw); }
.pn-loader-kicker { margin-bottom:14px; color:#72a99c; font:700 9px/1 "Orbitron","Segoe UI",sans-serif; letter-spacing:.32em; }
.pn-loader-emblem { position:relative; width:112px; height:132px; filter:drop-shadow(0 0 22px rgba(0,237,172,.32)); animation:pnEmblemAssemble .8s cubic-bezier(.16,1,.3,1) both; }
.pn-loader-emblem::before { content:""; position:absolute; inset:0; background:url('assets/dfhubvn-cloud-cat.png?v=20261005') center/contain no-repeat; animation:pnEmblemPulse 1.8s ease-in-out infinite; }
.pn-loader-emblem i,.pn-loader-emblem b { position:absolute; top:50%; width:36px; height:1px; background:linear-gradient(90deg,transparent,#00edac); box-shadow:0 0 12px #00edac; }
.pn-loader-emblem i { right:100%; animation:pnLineLeft .9s ease-out both; }
.pn-loader-emblem b { left:100%; transform:rotate(180deg); animation:pnLineRight .9s ease-out both; }
.pn-loader-wordmark { margin-top:10px; color:#f2faf8; font:900 clamp(20px,6vw,30px)/1 "Orbitron","Segoe UI",sans-serif; letter-spacing:.18em; animation:pnTextJoin .7s .12s both; }
.pn-loader-wordmark span { color:#00edac; }
.pn-loader-status { display:flex; justify-content:space-between; width:100%; margin-top:25px; color:#688b83; font:700 8px/1 "Orbitron","Segoe UI",sans-serif; letter-spacing:.2em; }
.pn-loader-status strong { color:#cffff3; font-size:9px; }
.pn-loader-track { position:relative; width:100%; height:2px; margin-top:9px; overflow:hidden; background:rgba(126,191,173,.14); }
.pn-loader-track i { display:block; width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,#00edac,#d8fff5); box-shadow:0 0 16px #00edac; animation:pnLoadTrack .78s cubic-bezier(.3,.7,.2,1) both; }
@keyframes pnGridFlow { to { transform:perspective(540px) rotateX(60deg) translateY(calc(18% + 38px)); } }
@keyframes pnScan { 0%,100% { transform:translateY(-45%); opacity:0; } 50% { transform:translateY(45%); opacity:1; } }
@keyframes pnEmblemAssemble { from { opacity:0; transform:scale(.72) rotate(-7deg); filter:blur(9px); } to { opacity:1; transform:none; filter:none; } }
@keyframes pnEmblemPulse { 50% { filter:brightness(1.18) drop-shadow(0 0 8px rgba(0,237,172,.5)); } }
@keyframes pnLineLeft { from { opacity:0; transform:translateX(-35px); } to { opacity:1; transform:none; } }
@keyframes pnLineRight { from { opacity:0; transform:translateX(35px) rotate(180deg); } to { opacity:1; transform:rotate(180deg); } }
@keyframes pnTextJoin { from { opacity:0; letter-spacing:.5em; transform:translateY(8px); } to { opacity:1; letter-spacing:.18em; transform:none; } }
@keyframes pnLoadTrack { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-width:600px){.pn-loader-emblem{width:82px;height:98px}.pn-loader-core{width:min(270px,72vw)}.pn-loader-kicker{font-size:7px}.pn-loader-wordmark{font-size:20px}}
@media(prefers-reduced-motion:reduce){.pn-page-loader,.pn-loader-grid,.pn-loader-grid::after,.pn-loader-emblem,.pn-loader-emblem::before,.pn-loader-emblem i,.pn-loader-emblem b,.pn-loader-wordmark,.pn-loader-track i{animation:none!important;transition-duration:.01ms!important}}

/* Two-layer loader: the sword drops into the stationary shield. */
.pn-page-loader{background:rgba(2,10,12,.58);backdrop-filter:blur(8px) saturate(.8);-webkit-backdrop-filter:blur(8px) saturate(.8);pointer-events:none;opacity:1;visibility:visible;clip-path:none;transition:opacity .22s ease}
.pn-page-loader.is-complete{opacity:0;visibility:hidden;clip-path:none}
.pn-page-loader--exit{opacity:0;visibility:visible;clip-path:none}.pn-page-loader--exit.is-active{opacity:1;clip-path:none}
.pn-loader-stage{position:relative;width:clamp(112px,13vw,180px);aspect-ratio:1;filter:drop-shadow(0 10px 24px rgba(0,0,0,.38))}
.pn-loader-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.pn-loader-shield{z-index:1;animation:pnShieldSet .42s ease-out both}
.pn-loader-sword{z-index:2;animation:pnSwordInsert .66s cubic-bezier(.16,.82,.22,1) both}
.pn-loader-stage{animation:pnImpactShake .2s .47s linear both}
.pn-loader-stage::before,.pn-loader-stage::after{content:"";position:absolute;z-index:3;left:50%;top:48%;width:92%;height:42%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);background:linear-gradient(105deg,transparent 0 8%,#bafff0 9% 10%,transparent 11% 20%,#00edac 21% 23%,transparent 24% 46%,#eafff9 47% 49%,transparent 50% 72%,#00edac 73% 75%,transparent 76%);clip-path:polygon(0 48%,16% 40%,26% 55%,39% 30%,50% 51%,64% 22%,75% 56%,100% 42%,76% 65%,61% 45%,49% 76%,37% 48%,24% 69%,14% 52%);filter:drop-shadow(0 0 5px #00edac);animation:pnLightningBurst .22s .44s ease-out both}
.pn-loader-stage::after{width:72%;height:72%;transform:translate(-50%,-50%) rotate(90deg);animation-delay:.47s}
@keyframes pnShieldSet{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes pnSwordInsert{0%{opacity:0;transform:translateY(-78%)}18%{opacity:1}78%{transform:translateY(3%)}100%{opacity:1;transform:translateY(0)}}
@keyframes pnImpactShake{0%,100%{transform:translate(0)}20%{transform:translate(-5px,2px) rotate(-1deg)}40%{transform:translate(5px,-2px) rotate(1deg)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,-1px)}}
@keyframes pnLightningBurst{0%{opacity:0;filter:brightness(2) drop-shadow(0 0 10px #dffff8)}28%{opacity:1}100%{opacity:0;filter:brightness(1) drop-shadow(0 0 2px #00edac)}}
@media(max-width:600px){.pn-loader-stage{width:112px}}
@media(max-width:600px){.pn-page-loader{background:rgba(2,10,12,.52);backdrop-filter:blur(6px) saturate(.82);-webkit-backdrop-filter:blur(6px) saturate(.82)}}
@media(prefers-reduced-motion:reduce){.pn-loader-shield,.pn-loader-sword{animation:none!important}}

/* Compact masthead for inner Story page */
.category-list a[href="admin.html"],.category-list a[href="admin"]{display:none!important}.pn-admin-session .category-list a[href="admin.html"],.pn-admin-session .category-list a[href="admin"]{display:flex!important}
.story-cinematic-hero{min-height:350px}
.story-hero-content{padding-top:42px;padding-bottom:44px}
.story-hero-content h1{margin:18px 0 15px;font-size:clamp(3.25rem,7vw,6rem);line-height:.76}
.story-hero-content>p{max-width:520px;font-size:.94rem;line-height:1.6}
.story-scroll-cue{min-height:42px;margin-top:20px}
.story-hero-seal{right:max(7vw,32px);width:125px;height:125px}
.story-hero-seal span{font-size:3rem}.story-hero-seal small{margin-top:-28px;font-size:.58rem}
@media(max-width:560px){.story-cinematic-hero{min-height:290px}.story-hero-content{padding-top:26px;padding-bottom:28px}.story-hero-content h1{font-size:clamp(2.8rem,15vw,4rem)}.story-hero-content>p{font-size:.82rem;line-height:1.5;max-width:90%}.story-scroll-cue{margin-top:14px}.story-hero-seal{display:none}}

/* News uses a compact title rail instead of a second homepage hero. */
.news-page{padding-top:32px}
.news-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);align-items:end;gap:28px;margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid rgba(129,171,160,.24)}
.news-heading .eyebrow{grid-column:1/-1}
.news-heading h1{margin:0;font-size:clamp(2.25rem,4.5vw,4rem);line-height:.9}
.news-heading p{font-size:.88rem;line-height:1.55}
@media(max-width:640px){.news-page{padding-top:20px}.news-heading{display:block;margin-bottom:17px;padding-bottom:17px}.news-heading h1{margin:9px 0 7px;font-size:clamp(2.1rem,11vw,3rem)}.news-heading p{font-size:.8rem}}

/* Compact mobile header controls. */
@media(max-width:640px){.site-header .menu-trigger{min-width:34px;min-height:34px;width:34px;height:34px;padding:0 8px;gap:0}.site-header .menu-lines{gap:4px}.site-header .menu-lines span{width:15px;height:1.5px}.site-header .header-actions{gap:9px}.site-header .header-actions .primary-btn{min-height:36px;padding:0 11px 0 31px;font-size:.62rem;white-space:nowrap}.site-header .header-actions .primary-btn:before{left:10px;font-size:.82rem}.site-header .brand-wrap{max-width:none;min-width:0;gap:7px}.site-header .brand-main{min-width:0;min-height:40px;padding-left:43px}.site-header .brand-main:before{width:37px;height:37px}}

/* DFHubVN mascot logo */
.brand-name { text-transform: lowercase; letter-spacing: .035em; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.brand-main::before { background-image: url('assets/dfhubvn-cloud-cat.png?v=20261005'); filter: drop-shadow(0 0 9px rgba(167, 190, 255, .4)); }
.promo-visual { background: radial-gradient(ellipse at center, rgba(130, 165, 255, .15), transparent 70%), linear-gradient(145deg, #10162a, #080e16); }
.promo-visual::before { z-index: 2; background: radial-gradient(ellipse at center, transparent 44%, rgba(3, 9, 15, .48) 100%); }
.promo-visual::after { content: ""; position: absolute; z-index: 1; inset: 1% 0 0; border: 0; transform: none; box-shadow: none; background: url('assets/dfhubvn-logo.svg?v=20261005') center / contain no-repeat; filter: drop-shadow(0 14px 22px rgba(106, 142, 255, .18)); }
.game-logo-ribbons, .promo-visual-mark, .promo-visual .promo-card { display: none; }
.catalog-block .trending-grid { grid-template-columns: minmax(0, 1fr); max-width: 700px; }
.catalog-block .deltaforce-feature-card { min-height: 320px; }
@media(max-width:640px) { .catalog-block .deltaforce-feature-card { min-height: 220px; } }
@media(max-width:380px){.site-header .brand-name{max-width:74px;font-size:.72rem}.site-header .header-actions .primary-btn{padding-right:9px;padding-left:28px;font-size:.58rem}.site-header .header-actions .primary-btn:before{left:9px}}

/* Flat interactions: color and border feedback only, no raised 3D motion. */
@media(hover:hover) and (pointer:fine){
  :is(.primary-btn,.secondary-btn,.ghost-btn,.promo-button,.product-card,.trending-card,.quick-news-grid a,.community-links a,.auth-form-wrap,.auth-submit,.social-btn,.text-muted-link,.switch-link a,.back-home-link,.account-cta,.drama-feature,.leader-portrait,.dock-item.center-action):hover{transform:none!important}
  :is(.trending-card,.drama-feature,.leader-portrait):hover img{transform:none!important}
}

/* Opaque premium hover for shared controls. */
@media(hover:hover) and (pointer:fine){
  :is(.primary-btn,.secondary-btn,.ghost-btn,.promo-button,.auth-submit,.social-btn,.account-cta):hover{transform:none!important;filter:none!important;color:#f5fffb!important;border-color:#35eebc!important;background:#0b5946!important;background-image:linear-gradient(105deg,#0d765b,#0a4b3d)!important;box-shadow:inset 0 1px 0 rgba(226,255,246,.16),0 7px 18px rgba(0,10,8,.25)!important}
}

/* Wide desktop canvas: use the available PC screen instead of a tablet-width column. */
@media(min-width:1100px){
  .container{width:min(1540px,calc(100% - 72px))}
  .page-shell{width:100%}
}

/* Single typography system across every PieNoir surface. */
html,body,body *,body *::before,body *::after,button,input,select,textarea,dialog{font-family:"Chakra Petch","Segoe UI",sans-serif!important}

/* News list/detail flow. */
.news-page [hidden]{display:none!important}.news-read{align-self:flex-start;padding:0;border:0;color:#00edac;background:transparent;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}.news-read:hover{color:#f1c62e}.news-back{display:inline-flex;align-items:center;min-height:40px;margin:0 0 28px;padding:0 15px;border:1px solid rgba(0,237,172,.42);color:#dff7ef;background:#08211f;font-weight:800;cursor:pointer}.news-reading .news-heading{display:none}.news-reading .news-article{padding-top:35px}.article-body>h2:focus{outline:0}