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

:root {
  --bg: #111111;
  --hero: #141414;
  --hero-right: #1a1a1a;
  --about: #1e1e1e;
  --principle: #0a0a0a;
  --page: #121212;
  --footer: #070707;
  --panel: #1a1a24;
  --panel-2: #232330;
  --text: #f7f7f7;
  --muted: #aaaab9;
  --faint: #747483;
  --line: #30303d;
  --accent: #f2f2f2;
  --max: 1360px;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
body.theme-inner { background: var(--page); }
body.theme-home { background: var(--hero); }
.page-shell { background: var(--page); }

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
.wrap { width: min(calc(100% - 72px), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -5rem; left: 1rem; z-index: 100;
  background: #fff; color: #111; padding: .7rem 1rem;
}
.skip:focus { top: 1rem; }

/* Header / nav */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  background: transparent;
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
  width: min(calc(100% - 72px), var(--max));
  min-height: 110px;
  margin: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
.brand img { width: 45px; height: 45px; }
.primary-nav {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 3rem);
  color: var(--muted);
  font-size: .95rem;
}
.primary-nav a {
  position: relative;
  padding: .85rem 0 1.15rem;
  transition: color .25s ease;
}
.primary-nav a .nav-label { position: relative; display: inline-block; }
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current=page] { color: #fff; }

/* Animated wave bar under non-active links */
.primary-nav a:not([aria-current=page])::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .42rem;
  height: 3px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 10% 50%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 55% 50%, #fff 0 1.5px, transparent 2px),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, .75) 0 1.2px, transparent 1.8px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 100%;
  background-repeat: no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.primary-nav a:not([aria-current=page]):hover::after,
.primary-nav a:not([aria-current=page]):focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
  animation: nav-wave-bar 1.1s ease-in-out infinite;
}

@keyframes nav-wave-bar {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; filter: brightness(1); }
  50% { background-position: 4px -1px, -3px 1px, 5px 0, -4px 1px, 100% 0; filter: brightness(1.25); }
  100% { background-position: 0 0, 0 0, 0 0, 0 0, 0% 0; filter: brightness(1); }
}

/* Active = ball only, travels left → right under label, then rests center */
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: .28rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 0 16px rgba(255, 255, 255, .45);
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  transition:
    left .75s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease;
  z-index: 2;
}
.nav-indicator.is-ready { opacity: 1; }
.nav-indicator.is-run {
  transition:
    left .85s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease;
}

.header-actions { display: flex; align-items: center; gap: .8rem; }
.support-link {
  padding: .42rem 1rem;
  border-radius: 999px;
  background: #f0f0f0;
  color: #15151b;
  font-weight: 700;
  font-size: .82rem;
}
.support-link:hover { background: #fff; }
.language select {
  appearance: none;
  color: #ddd;
  background: #20202b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='none' stroke='%23bbb' d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat right .65rem center;
  border: 0;
  border-radius: 8px;
  padding: .55rem 1.8rem .55rem .7rem;
  font-size: .75rem;
}
.menu-toggle {
  display: none;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: .85rem;
  padding: .6rem;
}

/* Type */
.kicker { margin: 0 0 .6rem; color: #d2d2da; font-size: 1.35rem; letter-spacing: 0; }
.lead { max-width: 590px; margin: 1.25rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.9; }
h1, h2, h3 { margin-top: 0; line-height: 1.16; }
h1 { margin-bottom: 0; font-size: clamp(3rem, 5.2vw, 5rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.7rem); letter-spacing: -.035em; }
p { color: var(--muted); }

/* Dual-color wave: solid top = section above, solid bot = section below */
.wave-sep {
  position: relative;
  z-index: 3;
  line-height: 0;
  margin-top: -1px;
  background: var(--wave-bot);
  overflow: hidden;
}
.wave-sep svg {
  display: block;
  width: 100%;
  height: clamp(52px, 6.5vw, 84px);
}
.wave-to-footer svg { height: clamp(48px, 5.5vw, 72px); }

/* Hero */
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--hero);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -18% -50% 51%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .04), transparent 42%),
    var(--hero-right);
  transform: rotate(17deg);
  box-shadow: inset 40px 0 80px rgba(0, 0, 0, .18);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  min-height: 760px;
  padding-top: 88px;
}
.hero-copy { z-index: 2; max-width: 600px; }
.badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: .25rem .55rem;
  border-radius: 5px;
  background: #f3f3f3;
  color: #17171e;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
}
.badge.quiet { color: #d0d0d8; background: #292936; }
.actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.button,
.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .72rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: #2d2d3e;
  color: #fff;
  font-weight: 500;
  font-size: .9rem;
}
.button:hover,
.social-button:hover { background: #3b3b4e; }
.button.solid { min-width: 176px; background: #f2f2f2; color: #15151b; }
.button.solid:hover { background: #fff; }
.button.disabled { color: #777786; background: #292933; cursor: not-allowed; }
.social-button { width: 48px; padding: 0; font-weight: 700; }
.social-button svg,
.discord-bubble svg { width: 24px; height: 24px; }
.discord-bubble svg { width: 21px; height: 21px; }

.hero-art {
  position: absolute;
  z-index: 1;
  top: 80px;
  right: -130px;
  width: min(64vw, 920px);
  height: 680px;
}
.hero-art img {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -10px;
  width: 100%;
  height: 620px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 36px 44px rgba(0, 0, 0, .5));
  animation: console-float 5s ease-in-out infinite;
}

/* Orbs with internal motion */
.orb {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, .18);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 40px rgba(255, 255, 255, .05),
    inset 0 0 30px rgba(255, 255, 255, .05);
  animation: orb-breathe 5.5s ease-in-out infinite;
}
.orb::before {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .18), transparent 35%, transparent 55%, rgba(255, 255, 255, .1), transparent 80%);
  animation: orb-spin 9s linear infinite;
}
.orb::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), transparent 55%);
  animation: orb-glow 3.8s ease-in-out infinite alternate;
}
.orb i {
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .08), transparent 60%);
  animation: orb-core 4.4s ease-in-out infinite;
}
.orb.one { width: 250px; height: 250px; left: 31%; top: 120px; }
.orb.two { width: 160px; height: 160px; right: 10%; top: 100px; border-width: 25px; animation-delay: -.8s; }
.orb.two::before { animation-duration: 7s; animation-direction: reverse; }
.orb.three { width: 210px; height: 210px; right: 18%; bottom: 35px; border-color: rgba(255, 255, 255, .1); animation-delay: -1.6s; }

@keyframes orb-breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-glow {
  from { opacity: .45; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}
@keyframes orb-core {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .7; }
  50% { transform: translate(6%, -4%) scale(1.08); opacity: 1; }
}
@keyframes console-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
@keyframes console-float-alt {
  0%, 100% { transform: translateY(8px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

/* About band */
.about-band {
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .045), transparent 30%),
    var(--about);
  padding-bottom: 1rem;
}
.about-progress {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 6rem;
  align-items: center;
  padding-block: 5.5rem 3rem;
}
.about-copy { max-width: 530px; }
.about-copy h2 { margin-bottom: 1.6rem; }
.about-copy p { font-size: 1.03rem; line-height: 2; }
.text-link {
  display: inline-block;
  margin-top: 1.2rem;
  color: #fff;
  font-weight: 600;
}
.live-progress {
  padding: 3.2rem;
  border-radius: 16px;
  background: linear-gradient(165deg, #f4f4f5, #e4e4e8);
  color: #17171c;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .04);
}
.progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
}
.progress-heading span { color: #5b5b65; font-size: .82rem; }
.progress-heading h2 { margin: .25rem 0 1rem; color: #111; font-size: 4.3rem; }
.live-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #d6d6da;
  color: #27272e !important;
  font-weight: 600;
}
.live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b3b42;
  box-shadow: 0 0 0 4px rgba(59, 59, 66, .12);
}
.progress-track {
  height: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: #c3c3c9;
}
.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #17171d;
  transition: width .7s ease;
}
.live-progress > p { margin: 1.2rem 0; color: #34343d; }
.live-progress small { color: #74747e; }
.live-progress ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem 1.5rem;
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid #c9c9ce;
  list-style: none;
}
.live-progress li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #4f4f58;
  font-size: .75rem;
}
.live-progress li strong { color: #1d1d22; }

.now { padding-bottom: 5rem; }
.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.work-list article {
  min-height: 230px;
  padding: 2rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #1f1f2b, var(--panel));
  border: 1px solid rgba(255, 255, 255, .04);
}
.work-list span {
  display: inline-flex;
  padding: .26rem .55rem;
  border-radius: 4px;
  background: #2e2e3e;
  color: #d7d7df;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
}
.work-list h3 { margin: 2.6rem 0 .6rem; font-size: 1.25rem; }
.work-list p { margin: 0; font-size: .9rem; }

/* Principle */
.principle {
  background:
    radial-gradient(circle at 18% 40%, rgba(255, 255, 255, .035), transparent 28%),
    var(--principle);
  padding-bottom: 5rem;
}
.principle .community-section { margin-top: 4.5rem; }
.principle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding-block: 6rem 7rem;
}
.principle figure {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  min-height: 500px;
}
.principle figure img {
  position: relative;
  z-index: 1;
  width: 112%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 38px rgba(0, 0, 0, .5));
  animation: console-float-alt 5.6s ease-in-out infinite;
}
.principle .orb.one { left: 3%; top: 12%; border-width: 26px; width: 250px; height: 250px; }
.principle .orb.two { right: 6%; bottom: 10%; left: auto; top: auto; width: 145px; height: 145px; border-width: 20px; }
.principle .kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }
.principle h3 { margin-top: 2rem; }
.principle hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.passion-note {
  margin-top: 2.2rem;
  padding: 1.4rem 1.5rem;
  border-left: 3px solid #f4f4f4;
  background: #17171e;
  border-radius: 0 10px 10px 0;
}
.passion-note h3 { margin: 0 0 .5rem; }
.passion-note p { margin: 0; font-size: .9rem; }

/* Inner pages */
.page-hero { padding-top: 180px; padding-bottom: 5.5rem; }
.page-hero h1 { max-width: 920px; }
.page-hero .kicker { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.page-body { padding-block: 2rem 7rem; }
.narrow { max-width: 920px; }
.subheading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.subheading h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.service-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1.2rem;
  min-height: 230px;
  padding: 1.8rem;
  border-radius: 10px;
  background: var(--panel);
}
.index { color: #777787; }
.service-row h2 { margin: 0; font-size: 1.35rem; }
.service-row p { margin: .4rem 0; }
.scope {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.scope small { display: none; }
.scope strong { font-size: .75rem; color: #ccc; }
.method-grid,
.boundaries {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 5rem;
  margin-top: 6rem;
  padding: 3rem;
  border-radius: 10px;
  background: var(--panel);
}
.method-grid h2,
.boundaries h2 { font-size: 2rem; }
.method-grid ol { list-style: none; margin: 0; padding: 0; }
.method-grid li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  padding: 0 0 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.method-grid li > span { color: #888; }
.method-grid h3 { margin: 0; font-size: 1rem; }
.method-grid p { margin: .25rem 0 0; }
.boundaries ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.boundaries li + li { margin-top: .8rem; }

/* Community services */
.community-section { margin-top: 6rem; }
.community-lead { max-width: 520px; margin: 0; font-size: .95rem; }
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.community-card {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 260px;
  padding: 1.8rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #1f1f2b, var(--panel));
  border: 1px solid rgba(255, 255, 255, .05);
}
.community-card-top {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.community-card-top strong { font-size: 1.2rem; color: #fff; }
.community-card-top span {
  width: max-content;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: #2b2b38;
  color: #d0d0da;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.community-card p { margin: 0; flex: 1; font-size: .9rem; }
.community-caution {
  margin: 0 !important;
  flex: 0 !important;
  padding: .65rem .75rem;
  border-radius: 8px;
  border-left: 3px solid #e8c27a;
  background: rgba(90, 60, 20, .35);
  color: #f0d9a8 !important;
  font-size: .78rem !important;
  line-height: 1.5;
}
.community-card .text-link { margin-top: auto; }
.legal-banner {
  margin-top: 1.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 200, 120, .18);
  background: linear-gradient(90deg, rgba(70, 48, 18, .35), rgba(26, 26, 36, .95));
}
.legal-banner strong {
  display: block;
  margin-bottom: .45rem;
  color: #f3e2c2;
  font-size: .95rem;
}
.legal-banner p { margin: 0; color: #cfc3ad; font-size: .86rem; line-height: 1.7; }

/* Research page */
.research-method {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
  padding: 2rem;
  border-radius: 14px;
  background: var(--panel);
}
.research-method h2 { margin: 0; font-size: 1.8rem; }
.research-method p { margin: 0; }
.research-toolbar {
  display: grid;
  grid-template-columns: 1.4fr .8fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.4rem;
}
.research-search input,
.research-filter select {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1a1a24;
  color: #fff;
}
.research-search input::placeholder { color: #777787; }
.research-count {
  margin: 0;
  color: #9a9aaa;
  font-size: .82rem;
  white-space: nowrap;
}
.research-list {
  display: grid;
  gap: 1rem;
}
.research-card {
  padding: 1.8rem;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .04);
  transition: border-color .2s ease, transform .2s ease;
}
.research-card:hover {
  border-color: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}
.research-card[hidden] { display: none !important; }
.research-meta {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.research-meta time { color: #8d8d9c; font-size: .82rem; }
.research-card h2 {
  margin: 0 0 .7rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}
.research-summary { margin: 0 0 .7rem; color: #d4d4de; }
.research-detail { margin: 0 0 1rem; font-size: .9rem; }
.research-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.research-tags span {
  padding: .22rem .55rem;
  border-radius: 999px;
  background: #2a2a38;
  color: #cfcfd8;
  font-size: .7rem;
  font-weight: 600;
}
.research-empty {
  margin-top: 1rem;
  padding: 1.2rem;
  border-radius: 10px;
  background: var(--panel);
  color: #9a9aaa;
}

.status-head,
.warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.8rem;
  border-radius: 10px;
  background: var(--panel);
}
.status-head > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .7rem;
  align-items: center;
}
.status-head small { grid-column: 2; color: #888; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.last-reviewed { margin: 2rem 0 .8rem; font-size: .8rem; }
.table-wrap { overflow-x: auto; border-radius: 10px; background: var(--panel); }
table { width: 100%; min-width: 780px; border-collapse: collapse; }
th, td { text-align: left; padding: 1rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
thead th { color: #777787; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.plain-note,
.legal-note {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: 7px;
  background: var(--panel);
  color: #9292a0;
  font-size: .82rem;
}
.update {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 2rem;
  padding: 2rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--panel);
}
.update time { color: #838392; font-size: .8rem; }
.update h2 { margin: 0; font-size: 1.6rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.5rem;
  padding: 2rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  background: var(--panel);
}
.phase-number { color: #777; }
.phase-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.phase-title h2 { margin: 0; font-size: 1.4rem; }
.timeline p { margin: .45rem 0 0; }
.warning { display: block; }
.warning strong { font-size: 1.25rem; }
.warning p { margin: .25rem 0 0; }
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}
.doc-group { padding: 2rem; border-radius: 10px; background: var(--panel); }
.doc-group h2 { font-size: 1.3rem; }
.doc-group ul,
.funding-columns ul { padding-left: 1.1rem; color: var(--muted); }

/* Support page: floating console stage (same language as home hero) */
.support-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2rem;
  align-items: center;
  min-height: 420px;
  margin-bottom: 1.4rem;
  padding: 2.4rem 2.6rem;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 78% 40%, rgba(255, 255, 255, .04), transparent 34%),
    linear-gradient(135deg, #14141c 0%, #14141c 48%, #191923 100%);
}
.support-stage-copy { position: relative; z-index: 2; max-width: 540px; }
.support-stage-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  color: #fff;
}
.support-stage-copy p { margin: 0; max-width: 48ch; }
.support-stage-art {
  position: relative;
  z-index: 1;
  min-height: 320px;
  display: grid;
  place-items: center;
}
.support-stage-art img {
  position: relative;
  z-index: 2;
  width: min(100%, 460px);
  max-width: none;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .55));
  animation: console-float 5s ease-in-out infinite;
}
.support-stage-art .orb {
  position: absolute;
  border-width: 22px;
}
.support-stage-art .orb.one {
  width: 180px;
  height: 180px;
  left: 6%;
  top: 8%;
}
.support-stage-art .orb.two {
  width: 120px;
  height: 120px;
  right: 8%;
  bottom: 12%;
  border-width: 16px;
  animation-delay: -.9s;
}
.support-honesty {
  margin: 0 0 1.2rem;
  padding: 1.35rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(90deg, rgba(40, 40, 52, .9), rgba(26, 26, 36, .95));
}
.support-honesty strong {
  display: block;
  margin-bottom: .45rem;
  color: #f2f2f7;
  font-size: 1rem;
}
.support-honesty p { margin: 0; font-size: .9rem; }
.support-focus {
  margin: 0 0 1.4rem;
  padding: 1.8rem 2rem;
  border-radius: 12px;
  background: var(--panel);
}
.support-focus h2 { margin: 0 0 1rem; font-size: 1.45rem; }
.support-focus ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}
.support-focus li + li { margin-top: .65rem; }
.support-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.support-options article {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .04);
}
.provider-mark {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  background: #f0f0f0;
  color: #17171c;
  flex-shrink: 0;
}
.provider-mark .brand-icon {
  width: 34px;
  height: 34px;
  display: block;
}
.provider-patreon {
  background: #ff424d;
  color: #fff;
}
.provider-kofi {
  background: #ff5e5b;
  color: #fff;
}
.support-options small { color: #8f8f9c; }
.support-options h2 { margin: .15rem 0 .5rem; font-size: 1.8rem; }
.support-options .button { margin-top: .6rem; }
.funding-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.funding-columns section { padding: 2rem; border-radius: 10px; background: var(--panel); }
.funding-columns h2 { font-size: 1.4rem; }
.principles-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.principles-list section { padding: 2.2rem; border-radius: 10px; background: var(--panel); }
.principles-list h2 { font-size: 1.35rem; }

.site-footer {
  padding: 5rem max(36px, calc((100vw - var(--max)) / 2));
  background: var(--footer);
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
}
.footer-brand { font-weight: 700; }
.footer-main p { max-width: 520px; font-size: .82rem; }
.footer-main nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: .6rem 2rem;
  color: #aaa;
  font-size: .82rem;
}
.footer-credits {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.4rem;
}
.footer-credits-label {
  color: #6e6e78;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.footer-credits-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.credit-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  outline: 2px solid rgba(255, 255, 255, .12);
  outline-offset: 1px;
  transition: outline-color .2s ease, transform .2s ease;
}
.credit-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.credit-avatar:hover,
.credit-avatar:focus-visible {
  outline-color: #5865f2;
  transform: translateY(-2px);
  z-index: 5;
}
.credit-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 180px;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: #1a1a22;
  border: 1px solid rgba(88, 101, 242, .45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  color: #ddd;
  font-size: .72rem;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.credit-tip strong {
  display: block;
  color: #fff;
  font-size: .8rem;
  margin-bottom: .15rem;
}
.credit-tip span { display: block; color: #a8a8b5; }
.credit-discord {
  margin-top: .35rem !important;
  color: #9aa3ff !important;
  font-weight: 600;
}
.credit-avatar:hover .credit-tip,
.credit-avatar:focus-visible .credit-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.footer-note {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid #22222b;
  color: #656570;
  font-size: .72rem;
}

.floating-discord {
  position: fixed;
  z-index: 80;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1rem .7rem .7rem;
  border: 1px solid #444451;
  border-radius: 999px;
  background: #f4f4f4;
  color: #15151b;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
  animation: discord-float 2.8s ease-in-out infinite;
}
.discord-bubble {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #18181f;
  color: #fff;
  font-size: .7rem;
}
.floating-discord strong { font-size: .78rem; }
.not-found {
  display: grid;
  place-content: center;
  min-height: 100vh;
  width: min(calc(100% - 48px), 700px);
  margin: auto;
}
.not-found .button { justify-self: start; }

@keyframes discord-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@media (max-width: 1100px) {
  .research-toolbar { grid-template-columns: 1fr 1fr; }
  .research-count { grid-column: 1 / -1; }
  .community-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  .header-inner { grid-template-columns: auto auto 1fr; gap: .7rem; }
  .menu-toggle { display: block; order: -1; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 86px;
    left: 36px;
    right: 36px;
    flex-direction: column;
    gap: 0;
    padding: .8rem;
    border-radius: 10px;
    background: #242431;
  }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: .7rem; }
  .nav-indicator { display: none; }
  .primary-nav a:not([aria-current=page])::after { display: none; }
  .primary-nav a { padding: .7rem .85rem; }
  .primary-nav a[aria-current=page] {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
  }
  .header-actions { justify-self: end; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 590px; }
  .hero-art { right: -260px; opacity: .7; }
  .about-progress,
  .principle-grid,
  .method-grid,
  .boundaries,
  .research-method,
  .support-stage { grid-template-columns: 1fr; gap: 2rem; }
  .service-list { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .wrap,
  .header-inner { width: min(calc(100% - 40px), var(--max)); }
  .header-inner { min-height: 88px; }
  .brand img { width: 42px; height: 42px; }
  .brand span,
  .support-link,
  .language { display: none; }
  .header-actions { display: none; }
  .hero { min-height: 680px; }
  .hero::before,
  .hero-art { display: none; }
  .hero-inner {
    display: block;
    min-height: 680px;
    padding-top: 195px;
  }
  .hero h1 { font-size: 3.25rem; }
  .kicker { font-size: 1.15rem; }
  .lead { font-size: .92rem; }
  .badges { display: none; }
  .about-progress { padding-block: 4rem 2rem; }
  .live-progress { padding: 1.6rem; }
  .progress-heading h2 { font-size: 3.3rem; }
  .live-progress ul { grid-template-columns: 1fr; }
  .work-list,
  .service-list,
  .support-options,
  .funding-columns,
  .principles-list,
  .community-grid { grid-template-columns: 1fr; }
  .principle-grid { padding-block: 4rem 5rem; }
  .principle figure { min-height: 310px; }
  .principle figure img { width: 115%; }
  .page-hero { padding-top: 135px; }
  .page-hero h1 { font-size: 3rem; }
  .subheading,
  .phase-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .method-grid,
  .boundaries { margin-top: 3rem; padding: 1.6rem; }
  .update { grid-template-columns: 1fr; gap: .5rem; }
  .timeline > li { grid-template-columns: 45px 1fr; }
  .support-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 1.6rem;
  }
  .support-stage-art { min-height: 240px; }
  .support-stage-art img { width: min(100%, 320px); }
  .support-options article {
    grid-template-columns: 55px 1fr;
    padding: 1.5rem;
  }
  .provider-mark { width: 55px; height: 55px; }
  .provider-mark .brand-icon { width: 26px; height: 26px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-main nav { grid-template-columns: 1fr 1fr; }
  .footer-note {
    align-items: flex-start;
    flex-direction: column;
    gap: .4rem;
  }
  .floating-discord {
    right: 16px;
    bottom: 16px;
    padding: .55rem;
  }
  .floating-discord strong { display: none; }
  .discord-bubble { width: 40px; height: 40px; }
  .research-toolbar { grid-template-columns: 1fr; }
  .wave-sep svg { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  .wave-blend { opacity: .22; transform: none !important; }
  .nav-indicator { transition: none !important; }
}