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

:root {
  --ink: #0b0d0e;
  --paper: #f1f0eb;
  --muted: #a8aaa6;
  --orange: #ff5a2a;
  --green: #5fbf98;
  --line-dark: rgba(241, 240, 235, .17);
  --line-light: rgba(11, 13, 14, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--ink); font: 400 16px/1.5 Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(100% - 80px, 1480px); margin-inline: auto; }
.skip-link { position: fixed; left: 20px; top: -60px; z-index: 20; padding: 10px 14px; color: var(--ink); background: var(--paper); }
.skip-link:focus { top: 20px; }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }

.site-header { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-dark); }
.brand { display: inline-flex; align-items: center; gap: 13px; font-weight: 700; letter-spacing: -.03em; }
.brand img { width: 50px; height: auto; }
nav { display: flex; align-items: center; gap: 38px; font-size: 14px; }
nav a { color: #c8cac6; }
nav .login { padding-bottom: 5px; color: var(--paper); border-bottom: 1px solid var(--orange); }

.eyebrow, .section-label { margin: 0; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero { min-height: 820px; padding: 88px 0 72px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto 250px; column-gap: 88px; row-gap: 58px; align-items: end; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 980px; margin: 28px 0 0; font-size: clamp(74px, 8vw, 126px); line-height: .88; letter-spacing: -.073em; }
.hero-side { padding-bottom: 4px; }
.hero-side > p { max-width: 450px; margin-bottom: 44px; color: #b5b8b4; font-size: 20px; line-height: 1.55; }
.text-cta { display: inline-flex; min-width: 270px; padding-top: 16px; align-items: center; justify-content: space-between; gap: 44px; border-top: 1px solid currentColor; font-weight: 500; }
.text-cta i { color: var(--orange); font-size: 23px; font-style: normal; }

.candle-chart { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.candle-chart figcaption { display: flex; justify-content: space-between; color: #777b77; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.chart-stage { position: relative; height: 180px; margin-top: 10px; overflow: hidden; border-bottom: 1px solid var(--line-dark); }
.price-lines { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); }
.price-lines i { border-top: 1px solid rgba(241,240,235,.065); }
.candles { position: absolute; inset: 0 70px 0 18%; display: grid; grid-template-columns: repeat(18, 1fr); align-items: stretch; gap: clamp(5px, 1vw, 16px); }
.candles b { position: relative; height: 100%; }
.candles b::before { content: ''; position: absolute; left: 50%; top: var(--y); width: 1px; height: var(--w); background: #68706f; transform: translateY(-50%); }
.candles b::after { content: ''; position: absolute; left: 24%; top: var(--y); width: 52%; height: var(--h); background: #68706f; }
.candles b.down::before, .candles b.down::after { background: #343a3a; }
.candles b.accent::before, .candles b.accent::after { background: var(--orange); }
.chart-value { position: absolute; right: 0; top: 17%; padding: 4px 0 4px 10px; color: var(--orange); background: var(--ink); font: 600 11px/1 Inter, sans-serif; }
.candle-chart > p { margin: 8px 0 0; color: #626764; font-size: 10px; letter-spacing: .08em; text-align: right; text-transform: uppercase; }

.manifesto { padding: 112px 0 128px; display: grid; grid-template-columns: 1fr 2fr; gap: 100px; border-top: 1px solid var(--line-dark); }
.manifesto h2 { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; }
.manifesto p { max-width: 940px; margin: 0; font-size: clamp(38px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.05em; }
.manifesto em { color: var(--orange); font-style: normal; }

.workflow { padding: 120px 0 145px; color: var(--ink); background: var(--paper); }
.section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 100px; margin-bottom: 80px; }
.section-head h2 { max-width: 940px; margin: 0; font-size: clamp(38px, 4vw, 62px); line-height: 1.03; letter-spacing: -.05em; }
.workflow .section-label { color: #656864; }
.steps { margin: 0 0 0 33.333%; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 92px 220px 1fr; gap: 28px; align-items: baseline; padding: 27px 0; border-top: 1px solid var(--line-light); }
.steps li:last-child { border-bottom: 1px solid var(--line-light); }
.steps span { color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.steps strong { font-size: 30px; letter-spacing: -.035em; }
.steps p { max-width: 570px; margin: 0; color: #555956; font-size: 17px; line-height: 1.55; }

.safety, .markets { padding: 130px 0 150px; }
.safety { border-bottom: 1px solid var(--line-dark); }
.safety-body { display: grid; grid-template-columns: 1fr 2fr; gap: 100px; }
.safety-lead { max-width: 430px; color: #aeb1ad; font-size: 18px; line-height: 1.65; }
.safety dl { margin: 0; }
.safety dl > div { display: grid; grid-template-columns: 230px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid var(--line-dark); }
.safety dl > div:last-child { border-bottom: 1px solid var(--line-dark); }
.safety dt { font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.safety dd { max-width: 540px; margin: 0; color: var(--muted); }

.market-list { margin-left: 16.666%; }
.market-list article { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 38px; padding: 40px 0; border-top: 1px solid var(--line-dark); }
.market-list article:last-child { border-bottom: 1px solid var(--line-dark); }
.market-list span { padding-top: 9px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.market-list h3 { margin: 0; font-size: 38px; line-height: 1; letter-spacing: -.045em; }
.market-list p { max-width: 430px; margin: 4px 0 0; color: var(--muted); line-height: 1.65; }

.closing { padding: 90px 0 105px; display: grid; grid-template-columns: 1fr 2fr; gap: 100px; border-top: 1px solid var(--line-dark); }
.closing > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; }
.closing h2 { max-width: 700px; margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: .98; letter-spacing: -.06em; }
.site-footer { padding: 34px 0 42px; color: #777b77; border-top: 1px solid var(--line-dark); font-size: 11px; }
.site-footer > div { display: flex; justify-content: space-between; }
.site-footer p { max-width: 980px; margin: 28px 0 0; line-height: 1.7; }

@media (max-width: 960px) {
  .shell { width: min(100% - 40px, 1480px); }
  nav a:not(.login) { display: none; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto 230px; min-height: auto; gap: 54px; }
  .candle-chart { grid-column: 1; }
  .manifesto, .section-head, .safety-body, .closing { grid-template-columns: 1fr; gap: 38px; }
  .steps, .market-list { margin-left: 0; }
  .steps li { grid-template-columns: 50px 150px 1fr; }
  .market-list article { grid-template-columns: 100px 1fr; }
  .market-list article p { grid-column: 2; }
  .closing > div { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 580px) {
  .site-header { height: 80px; }
  .brand img { width: 42px; }
  h1 { font-size: 61px; }
  .hero { padding-top: 72px; }
  .candles { left: 0; right: 48px; gap: 5px; }
  .manifesto, .workflow, .safety, .markets { padding-block: 88px; }
  .steps li { grid-template-columns: 40px 1fr; }
  .steps p { grid-column: 2; }
  .safety dl > div { grid-template-columns: 1fr; gap: 8px; }
  .market-list article { grid-template-columns: 1fr; gap: 12px; }
  .market-list article p { grid-column: 1; }
  .closing { padding-block: 76px; }
  .site-footer > div { gap: 20px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }