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

:root {
  --bg: #021315;
  --bg-deep: #031d1f;
  --bg-panel: rgba(4, 29, 31, .82);
  --bg-panel-strong: rgba(2, 22, 25, .94);
  --bg-soft: rgba(8, 42, 45, .44);
  --surface: rgba(255, 255, 255, .028);
  --surface-2: rgba(255, 255, 255, .048);
  --accent: #03dac5;
  --accent-soft: rgba(3, 218, 197, .18);
  --accent-bright: #7ff6e8;
  --ok: #85f0b1;
  --warn: #ffd479;
  --bad: #ff8d83;
  --txt: #f4fffd;
  --muted: #8eb9b3;
  --line: rgba(158, 255, 241, .12);
  --line-strong: rgba(158, 255, 241, .24);
  --shadow: 0 30px 80px rgba(0, 0, 0, .34);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1000px 520px at 8% -2%, rgba(3, 218, 197, .16), transparent 58%),
    radial-gradient(780px 420px at 100% 0%, rgba(127, 246, 232, .08), transparent 55%),
    radial-gradient(900px 620px at 50% 100%, rgba(3, 218, 197, .06), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  background-attachment: fixed;
  color: var(--txt);
  font-family: "Manrope", "Satoshi", "Avenir Next", "Segoe UI Variable", "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(3, 218, 197, .05), transparent 24%, transparent 76%, rgba(127, 246, 232, .05)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 120px);
  opacity: .45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap {
  width: min(1520px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 1rem 0 4rem;
  position: relative;
  z-index: 1;
}
.site-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin-bottom: 1.2rem;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2, 21, 23, .66);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(3, 218, 197, .38));
}
.brand-copy {
  display: grid;
  gap: .08rem;
}
.brand-name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.brand-sub {
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.main-nav a {
  padding: .55rem .82rem;
  border-radius: 999px;
  color: var(--muted);
  transition: color .18s ease, background .18s ease;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--txt);
  background: rgba(255,255,255,.05);
}
.main-nav a.cta {
  color: var(--bg);
  background: var(--accent);
  font-weight: 700;
}
.main-nav a.cta:hover {
  background: var(--accent-bright);
}
.hero {
  display: grid;
  gap: 1rem;
}
.hero-band,
.section-shell,
.toolbar,
.asset-strip,
.story,
.table-shell,
.chart-panel,
.insight-list,
.matrix,
.metric-grid .metric {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6, 36, 38, .74), rgba(3, 23, 26, .92));
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.hero-band::before,
.section-shell::before,
.asset-strip::before,
.story::before,
.chart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(3,218,197,.10), transparent 28%, transparent 72%, rgba(127,246,232,.06));
}
.hero-band {
  border-radius: 34px;
  padding: 1.3rem;
}
.hero-band::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -120px;
  border-radius: 999px;
  border: 1px solid rgba(127,246,232,.12);
  filter: blur(4px);
  opacity: .85;
  animation: floatOrb 24s ease-in-out infinite reverse;
}
.hero-grid {
  display: grid;
  gap: 1.1rem;
  align-items: stretch;
}
.hero-panel {
  padding: .4rem;
}
.hero-visual {
  min-height: 320px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(220px 220px at 30% 30%, rgba(3,218,197,.20), transparent 60%),
    radial-gradient(320px 220px at 70% 62%, rgba(127,246,232,.10), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  position: relative;
  overflow: hidden;
}
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
}
.hero-visual::before {
  width: 420px;
  height: 420px;
  right: -120px;
  top: -100px;
  border: 1px solid rgba(127,246,232,.16);
  animation: floatOrb 22s ease-in-out infinite;
}
.hero-visual::after {
  width: 220px;
  height: 220px;
  left: 18%;
  bottom: -80px;
  border: 1px solid rgba(3,218,197,.20);
  animation: floatOrb 16s ease-in-out infinite reverse;
}
.hero-rays {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(3,218,197,.14) 48%, transparent 58%),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.05) 49%, transparent 54%);
  opacity: .8;
  animation: shimmerRay 10s linear infinite;
}
.hero-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(3,218,197,.22);
  box-shadow: inset 0 0 60px rgba(3,218,197,.05);
}
.hero-ring.ring-a {
  width: 180px;
  height: 180px;
  left: 16%;
  top: 16%;
}
.hero-ring.ring-b {
  width: 280px;
  height: 280px;
  right: 12%;
  bottom: 10%;
}
.hero-ring.ring-c {
  width: 96px;
  height: 96px;
  right: 28%;
  top: 22%;
  background: radial-gradient(circle, rgba(3,218,197,.14), transparent 70%);
}
.hero-kicker {
  color: var(--accent-bright);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
  color: var(--muted);
  border-radius: 999px;
  padding: .34rem .7rem;
  font-size: .76rem;
}
.badge.accent { color: var(--accent-bright); border-color: rgba(3,218,197,.26); background: rgba(3,218,197,.10); }
.badge.ok { color: var(--ok); }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--bad); }
.hero-headline {
  margin-top: 1rem;
  font-size: clamp(2.8rem, 7vw, 6.2rem);
  line-height: .92;
  letter-spacing: -.06em;
  max-width: 12ch;
}
.hero-copy {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 52rem;
}
.hero-actions,
.nav {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .78rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(3, 218, 197, .24);
  background: rgba(3, 218, 197, .12);
  color: var(--txt);
  font-weight: 650;
}
.btn.secondary {
  background: rgba(255,255,255,.04);
  border-color: var(--line);
  color: var(--txt);
}
.btn:hover {
  filter: brightness(1.08);
}
.story {
  border-radius: 28px;
  padding: 1.2rem;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.hero-note {
  max-width: 58rem;
  margin-top: .9rem;
  color: var(--muted);
  font-size: .95rem;
}
.story p {
  color: var(--muted);
}
.story strong {
  color: var(--txt);
}
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-top: 1rem;
}
.stat,
.metric-pair,
.metric-grid .metric,
.matrix-item {
  padding: 1rem 1.05rem;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.stat .label,
.metric .label,
.metric-pair .label,
.matrix-item .eyebrow {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.stat .value,
.metric .value,
.metric-pair .value,
.matrix-item .big {
  margin-top: .28rem;
  font-size: clamp(1.35rem, 2vw, 2.3rem);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -.05em;
}
.stat .sub,
.metric .sub,
.metric-pair .sub,
.toolbar-note,
.section-lead,
.note,
footer,
.asset-strip-copy p {
  color: var(--muted);
}
.toolbar {
  margin-top: 1rem;
  border-radius: 26px;
  padding: 1rem 1.05rem;
}
.toolbar-row {
  display: grid;
  gap: .8rem;
}
.toolbar label {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.toolbar input,
.toolbar select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .18);
  color: var(--txt);
  padding: .9rem 1rem;
  font: inherit;
  outline: none;
}
.toolbar input:focus,
.toolbar select:focus {
  border-color: rgba(3,218,197,.42);
  box-shadow: 0 0 0 4px rgba(3,218,197,.10);
}
.section {
  margin-top: 1rem;
}
.section-shell {
  border-radius: 32px;
  padding: 1.2rem;
}
.section h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -.04em;
}
.section-lead {
  max-width: 58rem;
  margin-top: .55rem;
  margin-bottom: 1rem;
}
.asset-rows {
  display: grid;
  gap: 1rem;
}
.asset-strip {
  border-radius: 30px;
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(5, 18, 20, .95), rgba(3, 14, 16, .98));
}
.asset-strip-copy h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.6rem);
  letter-spacing: -.05em;
}
.asset-strip-copy p {
  margin-top: .65rem;
  max-width: 60rem;
  font-size: .98rem;
}
.asset-strip-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.asset-strip-metrics,
.metric-grid,
.matrix-grid {
  display: grid;
  gap: .8rem;
}
.asset-strip-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
}
.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.matrix {
  border-radius: 26px;
  padding: 1rem;
}
.matrix-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.inline-link { color: inherit; }
.inline-link:hover { color: var(--accent-bright); }
.charts {
  display: grid;
  gap: 1rem;
}
.chart-panel {
  border-radius: 28px;
  padding: 1rem;
}
.chart-panel h3 {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .65rem;
}
.chart-frame {
  position: relative;
  padding: 1px;
  border-radius: 24px;
  background:
    linear-gradient(140deg, rgba(3,218,197,.35), rgba(3,218,197,.10) 34%, rgba(2,19,21,.92) 62%, rgba(127,246,232,.22));
  animation: frameShift 11s ease-in-out infinite alternate;
}
.chart-frame::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(circle at 50% 0%, rgba(3,218,197,.18), transparent 48%);
  filter: blur(28px);
  opacity: .7;
  pointer-events: none;
}
.chart-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 23px;
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(3,218,197,.08), transparent 60%),
    linear-gradient(180deg, rgba(2,19,21,.98), rgba(4,26,29,.98));
}
.asset-strip-chart {
  align-self: start;
}
.public-mini-chart {
  width: 100%;
  min-height: 430px;
  border-radius: 24px;
  background:
    radial-gradient(500px 280px at 8% 0%, rgba(3,218,197,.08), transparent 60%),
    linear-gradient(180deg, rgba(5, 18, 20, .94), rgba(5, 18, 20, .98));
  position: relative;
  overflow: hidden;
}
.public-mini-chart .tv-lightweight-charts {
  border-radius: 24px;
}
.public-mini-chart-legend {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--txt);
  font-size: 12px;
  pointer-events: none;
}
.public-mini-chart-legend span {
  color: var(--muted);
}
.public-mini-chart-legend strong {
  color: var(--txt);
  font-weight: 700;
}
.insight-list,
.table-shell {
  border-radius: 26px;
  padding: 1rem 1.05rem;
}
.insight-list ul {
  padding-left: 1.05rem;
}
.insight-list li + li {
  margin-top: .5rem;
}
table.kpi-table {
  width: 100%;
  border-collapse: collapse;
}
table.kpi-table th,
table.kpi-table td {
  text-align: left;
  padding: .82rem .45rem;
  border-bottom: 1px solid rgba(158,255,241,.08);
  font-size: .92rem;
}
table.kpi-table th {
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}
table.kpi-table td strong {
  font-size: 1rem;
}
.good { color: var(--ok); }
.warn,
.mid { color: var(--warn); }
.bad { color: var(--bad); }
.hidden { display: none !important; }
footer {
  margin-top: 1.2rem;
  padding: 1rem .15rem 0;
  font-size: .82rem;
}
@keyframes frameShift {
  0% { transform: translate3d(0, 0, 0); filter: saturate(1); }
  100% { transform: translate3d(0, -2px, 0); filter: saturate(1.18); }
}
@keyframes floatOrb {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(18px, 12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes shimmerRay {
  0% { transform: translate3d(-6%, -2%, 0) scale(1); opacity: .55; }
  50% { transform: translate3d(4%, 2%, 0) scale(1.03); opacity: .85; }
  100% { transform: translate3d(-6%, -2%, 0) scale(1); opacity: .55; }
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr); }
  .toolbar-row { grid-template-columns: 1.35fr .7fr .9fr; }
  .asset-strip { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { width: min(100vw - 20px, 1520px); }
  .site-header-inner {
    border-radius: 28px;
    align-items: flex-start;
    flex-direction: column;
  }
  .hero-band,
  .section-shell,
  .asset-strip,
  .toolbar,
  .chart-panel,
  .story,
  .table-shell,
  .insight-list,
  .matrix {
    border-radius: 24px;
  }
  .hero-headline {
    max-width: 10ch;
  }
  .hero-visual {
    min-height: 220px;
  }
  .public-mini-chart {
    min-height: 360px;
  }
  .asset-strip-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}