/* Approved proof-dashboard art direction */
body { background-color: #020403; background-image: none; }
:root { --mint: #c1dfc5; --line: #344238; --panel: #090d0a; --muted: #a0aaa2; }
.noise { display: none; }
main { position: relative; overflow: hidden; }
main::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 470px; background: linear-gradient(180deg, rgba(2,4,3,.48) 0%, rgba(2,4,3,.65) 48%, #020403 100%), url("./concepts/01-monolith.png") center 43% / cover no-repeat; filter: grayscale(1) contrast(1.08); }
main::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 680px; background: radial-gradient(ellipse at 50% 18%, transparent 0%, rgba(2,4,3,.35) 47%, #020403 78%); }
.nav { height: 54px; }
.brand img, .nav img { width: 92px; }
.nav nav { gap: 50px; }
.nav .button { min-height: 30px; padding: 0 18px; }
.hero { padding: 26px 20px 20px; }
.hero .eyebrow { margin: 0; }
.hero h1 { font-size: 54px; line-height: .94; margin: 15px 0 11px; }
.hero h1 em { color: var(--mint); font-style: normal; text-shadow: 0 0 32px rgba(193,223,197,.12); }
.hero-copy { font-size: 12px; line-height: 1.5; max-width: 560px; }
.hero-actions { margin-top: 15px; }
.hero-actions .button { min-height: 36px; padding: 0 28px; }
.launch-contract { width: min(610px, 100%); min-height: 40px; margin: 15px auto 0; padding: 7px 8px 7px 15px; display: flex; align-items: center; gap: 14px; border: 1px solid #36423a; border-radius: 5px; background: rgba(4,8,5,.76); backdrop-filter: blur(12px); }
.launch-contract { border-color: #5f7564; box-shadow: 0 0 28px rgba(128,180,140,.06); }
.launch-contract > span { color: var(--mint); text-transform: uppercase; letter-spacing: .13em; font: 8px var(--mono); }
.launch-contract code { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; color: #e5e9e5; font: 10px var(--mono); text-align: left; white-space: nowrap; }
.launch-contract button { padding: 8px 14px; border: 1px solid #607166; border-radius: 3px; background: var(--mint); color: #101612; text-transform: uppercase; letter-spacing: .1em; font: 500 8px var(--mono); cursor: pointer; }
.launch-contract button:disabled { opacity: .45; cursor: default; }
.launch-link.disabled { opacity: .48; cursor: default; }
.launch-link.disabled.button-primary { opacity: .82; }
.hero-actions { flex-wrap: wrap; }
.dashboard { grid-template-columns: .44fr .56fr; border-color: #596a5d; background: linear-gradient(145deg,#090d0a,#030605 62%); box-shadow: 0 25px 80px rgba(0,0,0,.75), 0 0 36px rgba(193,223,197,.045); }
.token-chart { min-height: 350px; padding: 8px; border-right: 1px solid var(--line); background: #030605; }
.chart-title { min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #4d6051; border-radius: 6px; background: linear-gradient(90deg,rgba(193,223,197,.055),transparent 55%); }
.chart-title div { display: flex; align-items: center; gap: 10px; }
.chart-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.chart-title span { font: 500 11px var(--mono); letter-spacing: .12em; }
.chart-title small, .chart-title a { color: var(--muted); font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.chart-title a { color: var(--mint); text-decoration: none; }
.chart-placeholder { position: relative; height: 287px; margin-top: 8px; overflow: hidden; border: 1px solid #405044; border-radius: 6px; background: linear-gradient(180deg,rgba(193,223,197,.045),#040705); }
.chart-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-placeholder svg g path { fill: none; stroke: #17221a; stroke-width: 1; }
.chart-placeholder svg > path { fill: none; stroke: #77947f; stroke-width: 2; opacity: .65; }
.chart-placeholder > div { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; background: radial-gradient(circle,rgba(2,5,3,.75),transparent 62%); }
.chart-placeholder strong { text-transform: uppercase; letter-spacing: .12em; font: 500 12px var(--mono); }
.chart-placeholder span { color: var(--muted); font-size: 11px; }
.token-chart iframe { width: 100%; height: 287px; margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: #050706; }
.telemetry { padding: 8px; }
.metric-row { border-color: #4a5b4e; background: linear-gradient(180deg,rgba(193,223,197,.045),rgba(255,255,255,.006)); }
.metric-row article { display: flex; align-items: center; gap: 12px; }
.metric-glyph { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #69816e; border-radius: 8px; color: var(--mint); background: rgba(193,223,197,.08); font: 500 17px var(--display); box-shadow: inset 0 0 14px rgba(193,223,197,.035); }
.metric-glyph.btc { border-color: #a98041; color: #ffb84d; background: rgba(255,171,55,.1); }
.metric-row strong { color: #fff; text-shadow: 0 0 18px rgba(255,255,255,.055); }
.metric-row article { padding: 13px; }
.metric-row strong { font-size: 25px; }
.metric-row small { margin-bottom: 6px; }
.chart-wrap { margin-top: 7px; padding: 10px 13px 6px; }
.chart-wrap { border-color: #405044; background: linear-gradient(180deg,rgba(193,223,197,.025),transparent); }
.line { stroke: #c9f1d0; }
.chart { height: 132px; margin-top: 7px; }
.conversion { margin-top: 7px; }
.conversion article, .conversion a { padding: 11px; }
.conversion article { border-color: #4a594d; background: linear-gradient(135deg,#101511,#080b09); }
.conversion article strong { color: #fff; }
.conversion a { background: linear-gradient(135deg,#d4ead7,#b5d8ba); box-shadow: 0 0 22px rgba(193,223,197,.1); }
.conversion strong { font-size: 18px; }
.big-metrics { margin-top: 12px; }
.big-metrics article { padding: 18px; }
.big-metrics article { border-color: #4d5c50; background: linear-gradient(125deg,#111612,#080b09 70%); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.big-metrics .ring { background: radial-gradient(circle,rgba(193,223,197,.13),transparent 68%); box-shadow: 0 0 22px rgba(193,223,197,.075); }
.big-metrics strong { color: #fff; }
.ring { width: 54px; height: 54px; }
.mechanism, .proof { padding-block: 70px; }
.narrative-note { margin-top: 20px; padding-left: 14px; border-left: 1px solid var(--mint); color: #68736b !important; font-size: 11px; }
.proof-copy { max-width: 460px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.steps { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap: 4px; padding: 24px; }
.steps > i { padding: 0 2px; }
.steps p { font-size: 10px; }
.step-icon { width: 46px; height: 46px; margin: 22px 0; }
.visual-cycle { display: block; padding-block: 64px; }
.visual-cycle figure { margin: 0; }
.visual-cycle img { display: block; width: 100%; height: auto; border: 1px solid #1b241e; border-radius: 10px; }
.visual-cycle figcaption { max-width: 760px; margin: 15px auto 0; color: #637068; text-align: center; font: 9px/1.6 var(--mono); letter-spacing: .05em; }
@media (max-width: 1050px) {
  main::before { height: 520px; }
  .nav { height: 60px; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: 52px; }
  .dashboard { grid-template-columns: 1fr; }
  .token-chart { min-height: 350px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 650px) {
  main::before { height: 600px; background-position: 67% center; opacity: .75; }
  .hero { padding: 56px 8px 38px; }
  .hero h1 { font-size: 43px; line-height: 1.02; }
  .hero-copy { font-size: 14px; line-height: 1.75; }
  .hero-actions { margin-top: 28px; }
  .hero-actions .button { min-height: 49px; }
  .launch-contract { align-items: flex-start; flex-wrap: wrap; }
  .launch-contract code { flex-basis: 65%; }
  .token-chart { min-height: 315px; }
  .chart-placeholder, .token-chart iframe { height: 255px; }
  .chart { height: 135px; }
  .big-metrics { margin-top: 12px; }
}