body {
  background:
    radial-gradient(circle at 60% 22%, rgba(19, 104, 175, 0.2), transparent 34%),
    linear-gradient(180deg, #02050b 0%, #040b12 50%, #02050b 100%);
}
.site-shell { color: #f4f8ff; padding: 0 28px 34px; }
.fs-nav { right: 28px; top: 78px; }
.fs-nav-panel {
  background: rgba(6, 12, 22, .96);
  border-color: rgba(103, 226, 255, .2);
  color: #f4f8ff;
  box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 38px rgba(22,140,255,.16);
}
.fs-nav-button {
  background: rgba(6, 12, 22, .9);
  border-color: rgba(103, 226, 255, .32);
  box-shadow: 0 0 24px rgba(22,140,255,.18);
}
.fs-nav-icon-row,
.fs-nav-node,
.fs-ds-chip { background: rgba(10, 22, 38, .82); border-color: rgba(103, 226, 255, .16); }
.fs-nav-icon-link,
.fs-ds-chip.active { background: linear-gradient(135deg, #168cff, #67e2ff); color: #02050b; }
.topbar { max-width: 1280px; height: 64px; }
.brand-cube { display: none; }
.brand-text { font-size: 22px; letter-spacing: -0.04em; }
.brand-text span { color: #fff; text-shadow: none; }
.nav { gap: 34px; font-size: 12px; }
.btn { min-height: 38px; padding: 0 18px; font-size: 12px; }
.section-grid {
  max-width: 1280px;
  grid-template-columns: minmax(330px, 420px) minmax(610px, 1fr);
  gap: 18px;
}
.hero { min-height: 650px; padding: 6px 0 0; align-items: start; position: relative; }
.hero-copy { padding-top: 160px; }
.eyebrow { display: none; }
.creator-note { display: none; }
h1 { font-size: clamp(42px, 4vw, 58px); line-height: 1.05; letter-spacing: -0.06em; max-width: 430px; }
h1 span { color: #f4f8ff; text-shadow: none; }
h1 .hero-title-text { color: #f4f8ff; }
h1 .hero-title-accent { color: #f4f8ff; text-shadow: 0 0 28px rgba(103,226,255,.28); }
.hero-lead { max-width: 390px; margin-top: 20px; font-size: 16px; line-height: 1.5; }
.hero-actions { margin-top: 22px; }
.btn-large { min-height: 48px; padding: 0 22px; font-size: 13px; }
.hero-chips {
  width: min(100%, 560px);
  max-width: none;
  margin-top: 22px;
  border-radius: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chip {
  min-height: 70px;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}
.chip img { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; }
.chip span { display: block; min-width: 0; line-height: 1.16; }
.hero-visual { min-height: 610px; }
.planet-wrap {
  position: absolute;
  top: 40px;
  right: -18px;
  width: min(900px, 74vw);
  height: min(540px, 45vw);
  min-width: 680px;
  min-height: 408px;
}
.planet-glow { inset: 7%; border-radius: 44px; opacity: .72; filter: blur(32px); }
.planet-core {
  inset: 0;
  border-radius: 0;
  background-image: url('/assets/planet/planet_loop.webp?v=planet-stopmotion-v2') !important;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
}
.planet-core::after { opacity: .18; }
.planet-atmosphere { display: none; }
.orbit { display: none; }
.media-card {
  width: 92px;
  height: 58px;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.media-card::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(103, 226, 255, .78);
  box-shadow: 0 0 14px rgba(103, 226, 255, .8);
}
.media-a { right: 12%; top: 3%; background-image: linear-gradient(180deg, transparent, rgba(2,5,11,.25)), url('/assets/posters/poster_01.webp'); }
.media-b { left: 18%; top: 13%; background-image: linear-gradient(180deg, transparent, rgba(2,5,11,.25)), url('/assets/posters/poster_02.webp'); }
.media-c { left: 48%; top: 34%; background-image: linear-gradient(180deg, transparent, rgba(2,5,11,.25)), url('/assets/posters/poster_03.webp'); }
.media-d { right: 2%; top: 44%; background-image: linear-gradient(180deg, transparent, rgba(2,5,11,.25)), url('/assets/posters/poster_04.webp'); }
.media-e { left: 43%; bottom: 12%; background-image: linear-gradient(180deg, transparent, rgba(2,5,11,.25)), url('/assets/posters/poster_05.webp'); }
.hud-card { z-index: 12; opacity: 1 !important; transform: none !important; animation: none !important; border-radius: 14px; padding: 16px; background: rgba(6, 12, 22, .92); box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 0 26px rgba(22,140,255,.08); }
.system-card { width: 250px; left: -422px; top: 0; }
.files-card { width: 236px; right: 0; top: 48px; }
.market-card { width: 318px; right: 0; top: 238px; bottom: auto; }
.status-table, .market-stats { gap: 9px; }
.status-table dt, .market-stats dt { font-size: 11px; }
.status-table dd, .market-stats dd { font-size: 12px; }
.files-layout { grid-template-columns: 92px 1fr; }
.donut { width: 88px; height: 88px; }
.legend-list li { font-size: 11px; }
.market-chart { height: 168px; }
.content-section, .metrics-strip, .faq-section { max-width: 1280px; }
.content-section { padding: 24px 0 0; }
.section-title { margin-bottom: 16px; }
.section-title span { display: none; }
.section-title h2 { font-size: 31px; letter-spacing: -0.05em; }
.card-grid.four { gap: 18px; }
.feature-card { min-height: 222px; border-radius: 14px; padding: 14px; background: rgba(8, 17, 29, .86); }
.feature-card.tall { min-height: 278px; }
.feature-card img {
  width: 100%;
  height: 126px;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.feature-card.tall img { height: 142px; }
.feature-card h3 { margin-top: 16px; font-size: 16px; }
.feature-card p { font-size: 13px; line-height: 1.42; }
.metrics-strip { margin-top: 34px; border-radius: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 171px;
  overflow: hidden;
  padding: 22px;
  position: relative;
}
.metric img {
  height: 100% !important;
  inset: 0;
  margin: 0;
  object-fit: cover;
  object-position: center;
  opacity: .62;
  position: absolute;
  width: 100% !important;
  z-index: 0;
}
.metric::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2,5,11,.08), rgba(2,5,11,.84)),
    radial-gradient(circle at 18% 18%, rgba(103,226,255,.22), transparent 38%);
  pointer-events: none;
}
.metric span,
.metric strong,
.metric em {
  min-width: 0;
  position: relative;
  text-shadow: 0 2px 12px rgba(0,0,0,.72);
  z-index: 2;
}
.metric strong { font-size: 30px; }
.faq-section { display: none; }
.market-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  min-width: 128px;
  border: 1px solid rgba(103,226,255,.36);
  border-radius: 10px;
  background: rgba(3, 10, 20, .92);
  color: #f4f8ff;
  padding: 8px 10px;
  font-size: 11px;
  box-shadow: 0 0 24px rgba(103,226,255,.16);
  opacity: 0;
  transform: translate(-50%, -108%);
  transition: opacity .12s ease;
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip b { display: block; color: #67e2ff; margin-bottom: 3px; }
@media (max-width: 1180px) {
  .section-grid { grid-template-columns: 1fr; max-width: 1000px; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 34px; max-width: 520px; }
  .hero-visual {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    margin-top: 26px;
  }
  .planet-wrap {
    grid-column: 1 / -1;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .system-card,
  .files-card,
  .market-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    transform: none;
  }
  .market-card { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-shell { padding: 0 16px 28px; }
  .fs-nav { right: 16px; top: 74px; }
  .topbar { height: auto; padding: 14px 0; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 22px; }
  h1 { font-size: 40px; }
  .planet-wrap { height: 56vw; min-height: 245px; }
  .system-card, .files-card, .market-card { left: auto; right: auto; top: auto; bottom: auto; transform: none; }
  .hero-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip { justify-content: flex-start; white-space: normal; }
}