:root {
  --bg: #121212;
  --surface: #181818;
  --surface-2: #202020;
  --line: rgba(255,255,255,.09);
  --muted: #9a9a9a;
  --text: #f7f7f5;
  --orange: #ff4500;
  --orange-soft: rgba(255,69,0,.14);
  --gold: #ffd700;
  --green: #59d98e;
  --red: #ff6b63;
  --radius: 18px;
  --shell: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.ambient { position: absolute; pointer-events: none; filter: blur(1px); opacity: .5; }
.ambient-one { width: 520px; height: 520px; right: 3%; top: 90px; background: radial-gradient(circle, rgba(255,69,0,.15), transparent 68%); }
.ambient-two { width: 420px; height: 420px; left: -180px; top: 560px; background: radial-gradient(circle, rgba(255,215,0,.06), transparent 70%); }

.site-header {
  width: min(calc(100% - 48px), var(--shell));
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 850; letter-spacing: -.6px; }
.brand > span:last-child > span { color: var(--orange); }
.brand-mark { width: 28px; height: 27px; display: flex; align-items: end; gap: 3px; transform: skew(-10deg); }
.brand-mark i { display: block; width: 7px; background: var(--orange); border-radius: 2px 2px 0 0; }
.brand-mark i:nth-child(1) { height: 12px; opacity: .65; }
.brand-mark i:nth-child(2) { height: 20px; opacity: .82; }
.brand-mark i:nth-child(3) { height: 27px; }
nav { display: flex; gap: 34px; color: #b8b8b8; font-size: 13px; font-weight: 650; }
nav a { transition: color .2s; }
nav a:hover { color: white; }
.header-pill { border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: #d7d7d7; font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.header-pill span, .live-dot::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 4px rgba(89,217,142,.11); }

.hero { min-height: 650px; padding: 105px 0 88px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; position: relative; }
.eyebrow { color: #bcbcbc; font-size: 11px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 23px; height: 2px; margin: 0 9px 3px 0; background: var(--orange); }
h1, h2 { margin: 20px 0; letter-spacing: -.055em; line-height: .98; font-weight: 760; }
h1 { font-size: clamp(48px, 5.5vw, 78px); }
h2 { font-size: clamp(38px, 4.2vw, 58px); }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 28px 0 0; color: #a9a9a9; font-size: 17px; line-height: 1.75; }
.hero-copy p strong { color: white; font-weight: 650; }
.hero-actions { margin-top: 38px; display: flex; align-items: center; gap: 28px; }
.primary-button { display: inline-flex; gap: 35px; align-items: center; justify-content: space-between; min-width: 224px; padding: 15px 18px; background: var(--orange); border-radius: 8px; font-size: 13px; font-weight: 800; }
.primary-button:hover { filter: brightness(1.08); }
.text-link { color: #bbb; font-size: 13px; font-weight: 700; }
.text-link span { color: var(--orange); padding-left: 7px; }

.hero-panel { padding: 26px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(37,37,37,.94), rgba(22,22,22,.97)); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.hero-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 48%, rgba(255,69,0,.04)); }
.panel-topline { display: flex; justify-content: space-between; color: #8d8d8d; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.live-dot { color: var(--green); }
.hero-number { margin-top: 31px; font-size: clamp(40px, 4.5vw, 62px); font-weight: 750; letter-spacing: -.055em; }
.hero-number.negative, .negative { color: var(--red) !important; }
.positive { color: var(--green) !important; }
.hero-number-label { color: #8d8d8d; font-size: 12px; }
.mini-chart { height: 120px; margin: 21px -8px 8px; }
.mini-chart svg { width: 100%; height: 100%; overflow: visible; }
.hero-stats { border-top: 1px solid var(--line); padding-top: 19px; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-stats div { padding: 0 15px; border-right: 1px solid var(--line); }
.hero-stats div:first-child { padding-left: 0; }
.hero-stats div:last-child { border: 0; }
.hero-stats span, .hero-stats strong { display: block; }
.hero-stats span { color: #858585; font-size: 10px; }
.hero-stats strong { margin-top: 6px; font-size: 18px; }

.trust-strip { border-block: 1px solid var(--line); background: #151515; }
.trust-grid { min-height: 106px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.trust-grid > div { min-height: 50px; padding: 0 30px; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--line); }
.trust-grid > div:first-child { padding-left: 0; }
.trust-grid > div:last-child { border: 0; }
.trust-icon { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,69,0,.45); color: var(--orange); border-radius: 50%; font-size: 12px; }
.trust-grid p, .trust-grid strong, .trust-grid small { margin: 0; display: block; }
.trust-grid strong { font-size: 13px; }
.trust-grid small { margin-top: 3px; color: #777; font-size: 11px; }

.section { padding-block: 105px; }
.section-heading { margin-bottom: 42px; }
.section-heading h2 { margin-bottom: 14px; }
.section-heading p { max-width: 620px; color: var(--muted); font-size: 14px; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.period-picker > span { display: block; margin-bottom: 6px; color: #686868; font-size: 8px; font-weight: 750; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.period-control { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #171717; }
.period-control button { padding: 8px 13px; border: 0; border-radius: 6px; color: #777; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.period-control button.active { color: white; background: var(--orange); }
.portfolio-description { margin: -10px 0 36px; display: grid; grid-template-columns: 1.45fr .75fr; gap: 42px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,69,0,.07), rgba(24,24,24,.96) 42%); }
.description-label { color: var(--orange); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.portfolio-story h3 { max-width: 620px; margin: 10px 0 17px; font-size: 23px; line-height: 1.25; letter-spacing: -.025em; }
.portfolio-story p { max-width: 760px; margin: 0 0 12px; color: #9b9b9b; font-size: 12px; line-height: 1.75; }
.portfolio-story p:last-child { margin-bottom: 0; }
.portfolio-story strong { color: #e7e7e7; font-weight: 700; }
.portfolio-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.portfolio-facts article { min-height: 105px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: rgba(13,13,13,.68); }
.portfolio-facts small, .portfolio-facts strong, .portfolio-facts span { display: block; }
.portfolio-facts small { color: #696969; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.portfolio-facts strong { margin-top: 10px; color: var(--text); font-size: 16px; }
.portfolio-facts span { margin-top: 4px; color: #777; font-size: 9px; }
.loading-card, .error-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--surface); text-align: center; }
.loading-card span { width: 8px; height: 8px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.75); } }
.error-card { color: #ff9c96; border-color: rgba(255,107,99,.25); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { min-height: 154px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.kpi.featured { background: linear-gradient(145deg, rgba(255,69,0,.17), #1a1817 70%); border-color: rgba(255,69,0,.28); }
.kpi-label { min-height: 37px; color: #8e8e8e; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.info { width: 16px; height: 16px; margin-left: 3px; border: 1px solid #555; border-radius: 50%; color: #888; background: transparent; font-size: 9px; }
.kpi > strong { display: block; margin: 10px 0 4px; font-size: 31px; letter-spacing: -.04em; }
.kpi small { color: #777; font-size: 10px; }
.kpi small b { color: #aaa; font-weight: 650; }

.analytics-grid { margin-top: 12px; display: grid; grid-template-columns: 1.65fr .75fr; gap: 12px; }
.chart-card, .risk-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card-heading { display: flex; justify-content: space-between; align-items: start; }
.card-heading span { color: #777; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.card-heading h3 { margin: 5px 0 0; font-size: 17px; }
.chart-total { text-align: right; }
.chart-total small { display: block; color: #777; font-size: 9px; }
.chart-total strong { color: var(--green); font-size: 20px; }
.chart-wrap { height: 300px; margin-top: 23px; position: relative; }
#performance-chart { width: 100%; height: 100%; }
.chart-legend { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); color: #898989; font-size: 10px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.risk-list { margin-top: 21px; }
.risk-list > div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.risk-list span { color: #868686; font-size: 11px; }
.risk-list strong { font-size: 12px; }
.risk-note { margin-top: 20px; padding: 13px; display: flex; gap: 11px; background: rgba(255,215,0,.055); border: 1px solid rgba(255,215,0,.14); border-radius: 9px; }
.risk-note > span { color: var(--gold); font-weight: 800; }
.risk-note p { margin: 0; color: #918d72; font-size: 9px; line-height: 1.55; }

.traders-section { background: #0e0e0e; border-block: 1px solid var(--line); }
.trader-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trader-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #191919, #151515); transition: transform .2s, border-color .2s; }
.trader-card:hover { transform: translateY(-3px); border-color: rgba(255,69,0,.32); }
.trader-top { display: flex; align-items: center; justify-content: space-between; }
.trader-id { display: flex; align-items: center; gap: 12px; }
.trader-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--orange-soft); color: var(--orange); font-size: 12px; font-weight: 850; }
.trader-id strong, .trader-id small { display: block; }
.trader-id strong { font-size: 14px; }
.trader-id small { color: #747474; font-size: 9px; }
.confidence { padding: 5px 7px; border-radius: 5px; background: rgba(89,217,142,.08); color: var(--green); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.style-box { margin: 19px 0; padding: 13px; border-left: 2px solid var(--orange); background: #1c1c1c; }
.style-box span { color: #777; font-size: 8px; letter-spacing: .12em; }
.style-box strong { display: block; margin-top: 3px; font-size: 13px; }
.trader-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trader-metrics div { padding: 10px 5px; background: #131313; border-radius: 7px; text-align: center; }
.trader-metrics span, .trader-metrics strong { display: block; }
.trader-metrics span { color: #686868; font-size: 8px; }
.trader-metrics strong { margin-top: 4px; font-size: 13px; }
.characteristics { min-height: 73px; margin: 17px 0 0; padding: 0; list-style: none; }
.characteristics li { margin: 6px 0; color: #8d8d8d; font-size: 9px; }
.characteristics li::before { content: "•"; margin-right: 7px; color: var(--orange); }
.trader-footer { padding-top: 13px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #6f6f6f; font-size: 8px; }

.updated { color: #777; font-size: 10px; }
.table-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: #696969; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
td { color: #aaa; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
td:last-child { font-weight: 750; }

.methodology { padding-block: 110px; background: linear-gradient(135deg, rgba(255,69,0,.06), transparent 40%); }
.methodology-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.methodology-grid > div:first-child p { max-width: 430px; color: #929292; font-size: 13px; line-height: 1.7; }
.method-cards article { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.method-cards article > span { color: var(--orange); font-family: ui-monospace, monospace; font-size: 10px; }
.method-cards h3 { margin: -4px 0 5px; font-size: 14px; }
.method-cards p { margin: 0; color: #858585; font-size: 11px; }

footer { padding-block: 35px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-inner p, .footer-inner small { color: #666; font-size: 9px; }

@media (max-width: 900px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 55px; padding-top: 75px; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-panel { width: min(100%, 600px); margin-inline: auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid, .methodology-grid, .portfolio-description { grid-template-columns: 1fr; }
  .trader-grid { grid-template-columns: repeat(2, 1fr); }
  .methodology-grid { gap: 25px; }
}

@media (max-width: 620px) {
  .shell, .site-header { width: min(calc(100% - 28px), var(--shell)); }
  .site-header { height: 68px; }
  .header-pill { display: none; }
  .hero { min-height: auto; padding: 64px 0; }
  h1 { font-size: 43px; }
  h2 { font-size: 38px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .primary-button { width: 100%; }
  .hero-panel { padding: 20px; }
  .hero-stats div { padding-inline: 9px; }
  .hero-stats span { min-height: 28px; }
  .hero-stats strong { font-size: 15px; }
  .trust-grid { grid-template-columns: 1fr; padding-block: 14px; }
  .trust-grid > div, .trust-grid > div:first-child { min-height: 72px; padding: 11px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-grid > div:last-child { border-bottom: 0; }
  .section { padding-block: 76px; }
  .split-heading { align-items: start; flex-direction: column; }
  .period-picker, .period-control { width: 100%; }
  .period-picker > span { text-align: left; }
  .period-control button { flex: 1; padding-inline: 7px; }
  .portfolio-description { margin-top: -8px; padding: 22px; gap: 25px; }
  .portfolio-facts { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi { min-height: 138px; padding: 16px; }
  .kpi-label { min-height: 47px; }
  .kpi > strong { font-size: 25px; }
  .analytics-grid { gap: 9px; }
  .chart-card, .risk-card { padding: 18px; }
  .chart-wrap { height: 235px; }
  .trader-grid { grid-template-columns: 1fr; }
  .table-shell { overflow-x: auto; }
  table { min-width: 680px; }
  .methodology { padding-block: 80px; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}