/* Page layouts for the homepage and trade pages (Concept A: Signal). Shared tokens and components live in shared.css. */
.hero { padding: 56px 0 72px; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -300px;
  background: radial-gradient(circle, rgba(0,191,255,.14), transparent 60%); pointer-events: none;
}
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } .hero { padding: 90px 0 110px; } }
.hero h1 { font-size: clamp(64px, 12vw, 132px); margin: 22px 0 22px; }
.hero .lede { font-size: 19px; color: #d4d4de; max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 40px; max-width: 560px; }
.chip { padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.chip strong { display: block; font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1; color: var(--blue); }
.chip span { font-size: 13px; color: var(--muted); line-height: 1.3; display: block; margin-top: 6px; }
.snapshot { padding: 22px; }
.snapshot .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.snapshot .top small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.snapshot .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.snapshot .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: pulse 2s infinite; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; justify-content: center; }
.tags span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }

.split { display: grid; gap: 40px; }
@media (min-width: 980px) { .split { grid-template-columns: .9fr 1.1fr; gap: 64px; } .split .sticky { position: sticky; top: 110px; align-self: start; } }
.split h2 { font-size: clamp(48px, 7vw, 84px); margin-top: 18px; }
.stack { display: grid; gap: 16px; }
.stack .card { display: grid; gap: 6px; }
@media (min-width: 600px) { .stack .card { grid-template-columns: 150px 1fr; gap: 24px; align-items: start; } }
.stack .label { font-family: var(--display); font-size: 38px; line-height: 1; color: var(--blue); }
.stack p { margin: 0; color: #d4d4de; font-size: 18px; }

.steps { display: grid; gap: 16px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
.step .num { font-family: var(--display); font-size: 72px; line-height: .9; color: var(--blue); }
.step .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.step p { font-size: 21px; font-weight: 500; margin: 0; line-height: 1.4; }

.who { display: grid; gap: 32px; align-items: center; padding: 36px; }
@media (min-width: 860px) { .who { grid-template-columns: 220px 1fr; gap: 56px; padding: 56px; } }
.who .glow-mark { width: 180px; margin: 0 auto; }
.who h2 { font-size: clamp(44px, 6vw, 72px); margin: 16px 0 18px; }
.who p { font-size: 19px; color: #d4d4de; max-width: 640px; }

.final { overflow: hidden; }
.final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(0,191,255,.12), transparent 55%); pointer-events: none;
}
.final-grid { display: grid; gap: 40px; position: relative; }
@media (min-width: 980px) { .final-grid { grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } }
.final h2 { font-size: clamp(60px, 10vw, 120px); margin: 18px 0 20px; }
.final ol { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; counter-reset: s; }
.final li { counter-increment: s; display: flex; gap: 14px; align-items: baseline; color: #d4d4de; }
.final li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-size: 26px; color: var(--blue); min-width: 32px; }
.lead { padding: 28px; }
@media (min-width: 600px) { .lead { padding: 36px; } }